{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea\n            mixed={mixed}\n            className={classNames.iconWrap}\n            iconClassName={classNames.icon}\n          />\n        </span>\n\n        <LabeledChildren htmlFor={checkBoxId} className={classNames.label}>\n          {children}\n        </LabeledChildren>\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<Pick<Props, 'mixed'> & { className: string; iconClassName: string }>(\n  ({ mixed, className, iconClassName }) => (\n    <span className={className}>\n      {mixed ? (\n        <FaMinusIcon className={iconClassName} />\n      ) : (\n        <FaCheckIcon className={iconClassName} />\n      )}\n    </span>\n  ),\n)\n\nconst LabeledChildren = memo<PropsWithChildren<{ className: string; htmlFor: string }>>(\n  ({ children, htmlFor, className }) =>\n    children && (\n      <label htmlFor={htmlFor} className={className}>\n        {children}\n      </label>\n    ),\n)\n"],"names":[],"mappings":";;;;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;;;AAQE;AACE;;AAEJ;AAEA;AACA;;AA6BF;AAGF;AAIA;AAYA;;"}