{"version":3,"file":"Switch.cjs","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import {\n  type InputHTMLAttributes,\n  type PropsWithChildren,\n  type ReactNode,\n  forwardRef,\n  memo,\n  useId,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon } from '../Icon'\nimport { Cluster } from '../Layout'\nimport { Text } from '../Text'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      // Switch 本体\n      'shr-border-shorthand shr-relative shr-inline-flex shr-h-fit shr-w-[calc(theme(fontSize.base)*2)] shr-items-center shr-rounded-full shr-bg-white',\n      // 理想的には padding: 2px; だが、box-shadow を outline で使用しているため、border と padding で2pxの疑似余白を作っている。\n      'shr-p-px',\n      // :focus-visible-within の代替, なぜかhasが機能しないので以下の書き方で代用している\n      'has-[:focus-visible]:shr-focus-indicator--outer [&:has(:focus-visible)]:shr-focus-indicator--outer',\n      'has-[:checked]:shr-border-[theme(colors.main)] has-[:checked]:shr-bg-main',\n      'has-[:disabled]:shr-border-[theme(borderColor.default)] has-[:disabled]:shr-bg-border',\n      'forced-colors:has-[:disabled]:shr-border-[GrayText]',\n      'supports-[not_selector(:has(+_*))]:shr-border-[revert] supports-[not_selector(:has(+_*))]:shr-bg-[revert]',\n\n      // Switch ツマミ\n      'before:shr-box-border before:shr-inline-block before:shr-size-[theme(fontSize.base)] before:shr-scale-[calc(2/3)] before:shr-rounded-full before:shr-border before:shr-border-solid before:shr-border-[theme(textColor.grey)] before:shr-bg-[theme(textColor.grey)] before:shr-transition-[transform,margin] before:shr-duration-150 before:shr-ease-out before:shr-content-[\"\"]',\n      'has-[input:disabled:not(:checked)]:before:shr-border-[theme(textColor.disabled)] has-[input:disabled:not(:checked)]:before:shr-bg-[theme(textColor.disabled)]',\n      'has-[:checked]:before:shr-border-shorthand has-[:checked]:before:shr-ms-[theme(fontSize.base)] has-[:checked]:before:shr-scale-100 has-[:checked]:before:shr-bg-white',\n      'forced-colors:has-[input:not(:disabled)]:before:shr-bg-[ButtonBorder]',\n      'forced-colors:has-[:disabled:not(:checked)]:before:shr-border-solid forced-colors:has-[:disabled:not(:checked)]:before:shr-border-[GrayText]',\n      'forced-colors:has-[:disabled:checked]:before:shr-border-[GrayText]',\n      'supports-[not_selector(:has(+_*))]:before:hidden',\n    ],\n    input: [\n      'shr-absolute shr-inset-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-full shr-opacity-0',\n      'disabled:shr-cursor-[revert]',\n      'supports-[not_selector(:has(+_*))]:shr-static supports-[not_selector(:has(+_*))]:shr-appearance-auto supports-[not_selector(:has(+_*))]:shr-opacity-100 supports-[not_selector(:has(+_*))]:shr-outline-[revert]',\n    ],\n    iconWrapper: [\n      'smarthr-ui-Switch-iconWrapper',\n      'shr-pointer-events-none shr-absolute shr-hidden shr-size-[theme(fontSize.base)] shr-items-center shr-justify-center',\n      '[:checked~&]:shr-flex',\n    ],\n    icon: [\n      'shr-fill-white',\n      'forced-colors:shr-fill-[ButtonText]',\n      'forced-colors:[:disabled~.smarthr-ui-Switch-iconWrapper_&]:shr-fill-[GrayText]',\n    ],\n  },\n})\n\ntype Props = InputHTMLAttributes<HTMLInputElement> & {\n  children: ReactNode\n  /** ラベルを視覚的に隠すかどうか */\n  unrecommendedLabelHidden?: boolean\n}\n\nexport const Switch = forwardRef<HTMLInputElement, Props>(\n  ({ children, unrecommendedLabelHidden, className, id, ...rest }, ref) => {\n    const defaultId = useId()\n    const inputId = id || defaultId\n\n    const classNames = useMemo(() => {\n      const { wrapper, input, icon, iconWrapper } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        input: input(),\n        icon: icon(),\n        iconWrapper: iconWrapper(),\n      }\n    }, [className])\n\n    return (\n      <Cluster align=\"center\" className=\"shr-relative\">\n        <MemoizedLabel htmlFor={inputId} unrecommendedLabelHidden={unrecommendedLabelHidden}>\n          {children}\n        </MemoizedLabel>\n        <span className={classNames.wrapper}>\n          <input\n            {...rest}\n            type=\"checkbox\"\n            role=\"switch\"\n            id={inputId}\n            className={classNames.input}\n            ref={ref}\n          />\n          <MemoizedSuffixIcon className={classNames.iconWrapper} iconClassName={classNames.icon} />\n        </span>\n      </Cluster>\n    )\n  },\n)\n\nconst MemoizedLabel = memo<\n  Pick<Props, 'unrecommendedLabelHidden'> & PropsWithChildren<{ htmlFor: string }>\n>(({ unrecommendedLabelHidden, htmlFor, children }) => {\n  const Component = unrecommendedLabelHidden ? VisuallyHiddenText : Text\n\n  return (\n    <Component as=\"label\" htmlFor={htmlFor}>\n      {children}\n    </Component>\n  )\n})\n\nconst MemoizedSuffixIcon = memo<{ className: string; iconClassName: string }>(\n  ({ className, iconClassName }) => (\n    <span className={className}>\n      <FaCheckIcon className={iconClassName} size=\"XXS\" />\n    </span>\n  ),\n)\n"],"names":["tv","forwardRef","useId","useMemo","_jsxs","Cluster","_jsx","memo","VisuallyHiddenText","Text","FaCheckIcon"],"mappings":"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"}