@aegov/design-system-react/dist/components/Toggle/Toggle.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactSwitch = require("@radix-ui/react-switch");
var _tailwindMerge = require("tailwind-merge");
var _zod = require("zod");
var _react2 = require("@phosphor-icons/react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const ToggleSchema = _zod.z.object({
  checked: _zod.z.boolean().optional(),
  onCheckedChange: _zod.z.function().optional(),
  disabled: _zod.z.boolean().optional(),
  variant: _zod.z.enum(['default', 'success', 'mode', 'secondary']).optional(),
  label: _zod.z.string().optional(),
  className: _zod.z.string().optional()
});
const Toggle = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    checked,
    onCheckedChange,
    disabled,
    variant = 'default',
    label,
    className,
    ...rest
  } = ToggleSchema.parse(props);
  const variants = {
    default: {
      root: 'bg-aeblack-100 data-[state=checked]:bg-primary-300',
      thumb: 'bg-whitely-50 border border-aeblack-100 data-[state=checked]:border-primary-600'
    },
    success: {
      root: 'bg-aeblack-100 data-[state=checked]:bg-aegreen-300',
      thumb: 'bg-whitely-50 border border-aeblack-100 data-[state=checked]:border-aegreen-600'
    },
    secondary: {
      root: 'bg-aeblack-100 data-[state=checked]:bg-secondary-800',
      thumb: 'bg-whitely-50 border border-aeblack-100 data-[state=checked]:border-secondary-600'
    },
    mode: {
      root: 'bg-whitely-50 border border-aeblack-100 data-[state=checked]:bg-aeblack-950',
      thumb: 'bg-transparent border-transparent flex items-center justify-center'
    }
  };
  return /*#__PURE__*/_react.default.createElement("label", {
    className: (0, _tailwindMerge.twMerge)('relative inline-flex cursor-pointer items-center', className)
  }, /*#__PURE__*/_react.default.createElement(_reactSwitch.Root, _extends({
    ref: ref,
    checked: checked,
    onCheckedChange: onCheckedChange,
    disabled: disabled,
    className: (0, _tailwindMerge.twMerge)('relative flex items-center h-4 w-10 cursor-pointer rounded-full outline-none transition-colors', 'focus-visible:outline focus-visible:outline-offset-[3px] focus-visible:outline-primary-500', 'disabled:cursor-not-allowed disabled:opacity-30', variant === 'mode' && 'h-6 w-12', variants[variant].root)
  }, rest), /*#__PURE__*/_react.default.createElement(_reactSwitch.Thumb, {
    className: (0, _tailwindMerge.twMerge)('absolute block h-5 w-5 rounded-full shadow transition-transform duration-300', 'translate-x-0 data-[state=checked]:translate-x-6 rtl:data-[state=checked]:-translate-x-6', 'top-1/2 -translate-y-1/2', variant === 'mode' && 'h-4 w-4 translate-x-1 rtl:-translate-x-1 data-[state=checked]:translate-x-7 rtl:data-[state=checked]:-translate-x-7', variants[variant].thumb)
  }, variant === 'mode' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, checked ? /*#__PURE__*/_react.default.createElement(_react2.Moon, {
    weight: "fill",
    className: "h-4 w-4 text-whitely-50"
  }) : /*#__PURE__*/_react.default.createElement(_react2.Sun, {
    weight: "fill",
    className: "h-4 w-4 text-aeblack-950"
  })))), label && /*#__PURE__*/_react.default.createElement("span", {
    className: "ms-3 text-sm"
  }, label));
});
Toggle.displayName = 'Toggle';
var _default = exports.default = Toggle;