@sikka/hawa/dist/switch/index.js

Modern UI Kit made with Tailwind

"use client";
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// elements/switch/index.ts
var switch_exports = {};
__export(switch_exports, {
  Switch: () => Switch
});
module.exports = __toCommonJS(switch_exports);

// elements/switch/Switch.tsx
var React = __toESM(require("react"));
var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));

// util/index.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}

// elements/switch/Switch.tsx
var Switch = React.forwardRef(
  ({ className, size = "default", roundedness = "inherit", label, ...props }, ref) => {
    const [parentDirection, setParentDirection] = React.useState(
      null
    );
    const parentRef = React.useRef(null);
    React.useEffect(() => {
      var _a;
      const parentNode = (_a = parentRef.current) == null ? void 0 : _a.parentNode;
      if (parentNode) {
        const dir = window.getComputedStyle(parentNode).direction;
        setParentDirection(dir);
      }
    });
    const rootSize = {
      default: "hawa-h-[25px] hawa-w-[42px]",
      sm: "hawa-h-[20px] hawa-w-[37px]",
      lg: "hawa-h-[30px] hawa-w-[47px]"
    };
    const thumbSize = {
      default: "hawa-h-[21px] hawa-w-[21px]",
      sm: "hawa-h-[16px] hawa-w-[16px]",
      lg: "hawa-h-[26px] hawa-w-[26px]"
    };
    const rootRoundednessStyles = {
      none: "hawa-rounded-none",
      full: "hawa-rounded-full",
      inherit: "hawa-rounded"
    };
    const thumbRoundednessStyles = {
      none: "hawa-rounded-none",
      full: "hawa-rounded-full",
      inherit: "hawa-rounded-inner"
    };
    return /* @__PURE__ */ React.createElement(
      "div",
      {
        className: "hawa-flex hawa-flex-row hawa-items-center",
        ref: parentRef
      },
      /* @__PURE__ */ React.createElement(
        SwitchPrimitives.Root,
        {
          className: cn(
            "data-[state=unchecked]:hawa-bg-primary/20",
            "data-[state=checked]:hawa-bg-primary",
            "hawa-relative hawa-cursor-pointer hawa-rounded hawa-outline-none",
            rootRoundednessStyles[roundedness],
            className,
            rootSize[size]
          ),
          ...props,
          ref
        },
        /* @__PURE__ */ React.createElement(
          SwitchPrimitives.Thumb,
          {
            className: cn(
              thumbSize[size],
              "hawa-block hawa-rounded hawa-transition-transform hawa-duration-100 hawa-will-change-transform",
              "data-[state=checked]:hawa-bg-primary-foreground",
              "hawa-bg-white dark:hawa-bg-background",
              thumbRoundednessStyles[roundedness],
              parentDirection === "rtl" ? "hawa--translate-x-0.5 data-[state=checked]:hawa--translate-x-[19px]" : "hawa-translate-x-0.5 data-[state=checked]:hawa-translate-x-[19px]"
            )
          }
        )
      ),
      label && /* @__PURE__ */ React.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
    );
  }
);
Switch.displayName = SwitchPrimitives.Root.displayName;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Switch
});
//# sourceMappingURL=index.js.map