@vela-ui/react/dist/components/switch.js

Vela UI React components

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/switch.tsx
var switch_exports = {};
__export(switch_exports, {
  Switch: () => Switch
});
module.exports = __toCommonJS(switch_exports);
var import_react_aria_components = require("react-aria-components");
var import_tailwind_variants = require("tailwind-variants");
var import_jsx_runtime = require("react/jsx-runtime");
var switchVariants = (0, import_tailwind_variants.tv)({
  slots: {
    root: "group relative inline-flex touch-none items-center justify-start gap-2 text-sm",
    indicator: "inline-flex shrink-0 cursor-pointer rounded-full shadow-xs transition-all outline-none",
    thumb: "bg-background pointer-events-none block scale-80 rounded-full ring-0 transition-transform"
  },
  variants: {
    size: {
      sm: {
        indicator: "h-4 w-8",
        thumb: "size-4 group-data-[selected=true]:translate-x-4"
      },
      md: {
        indicator: "h-5 w-10",
        thumb: "size-5 group-data-[selected=true]:translate-x-5"
      },
      lg: {
        indicator: "h-6 w-12",
        thumb: "size-6 group-data-[selected=true]:translate-x-6"
      },
      xl: {
        indicator: "h-7 w-14",
        thumb: "size-7 group-data-[selected=true]:translate-x-7"
      }
    },
    isFocusVisible: {
      true: {
        indicator: "ring-ring/50 ring-[3px]"
      }
    },
    isInvalid: {
      true: {
        indicator: "ring-destructive/20 dark:ring-destructive/40"
      }
    },
    isDisabled: {
      true: {
        root: "text-foreground/50 cursor-not-allowed",
        indicator: "cursor-not-allowed opacity-50"
      }
    },
    isSelected: {
      true: {
        indicator: "bg-primary text-primary-foreground",
        thumb: "dark:bg-primary-foreground translate-x-5"
      },
      false: {
        indicator: "bg-input dark:bg-input/80",
        thumb: "dark:bg-foreground"
      }
    }
  },
  defaultVariants: {
    size: "md"
  }
});
var { root, indicator, thumb } = switchVariants();
function Switch({
  className,
  thumbClassName,
  indicatorClassName,
  size,
  children,
  ...props
}) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_react_aria_components.Switch,
    {
      className: (0, import_react_aria_components.composeRenderProps)(
        className,
        (className2, renderProps) => root({ ...renderProps, className: className2 })
      ),
      ...props,
      children: (0, import_react_aria_components.composeRenderProps)(children, (children2, renderProps) => {
        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            "div",
            {
              className: indicator({
                ...renderProps,
                size,
                className: indicatorClassName
              }),
              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                "div",
                {
                  className: thumb({
                    ...renderProps,
                    size,
                    className: thumbClassName
                  })
                }
              )
            }
          ),
          children2
        ] });
      })
    }
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Switch
});