{"version":3,"file":"checkbox.cjs","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport { useRef } from 'react';\nimport { useFieldContext } from '../field';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n    data-slot='checkbox-icon'\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n    data-slot='checkbox-icon'\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst checkboxVariants = cva(styles.checkbox, {\n  variants: {\n    size: {\n      small: styles.small,\n      large: styles.large\n    }\n  },\n  defaultVariants: {\n    size: 'large'\n  }\n});\n\ninterface CheckboxGroupProps extends CheckboxGroupPrimitive.Props {\n  /** Layout direction of the checkbox group.\n   * @defaultValue 'vertical'\n   */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nfunction CheckboxGroup({\n  className,\n  orientation = 'vertical',\n  ...props\n}: CheckboxGroupProps) {\n  return (\n    <CheckboxGroupPrimitive\n      className={cx(\n        styles.group,\n        orientation === 'horizontal' && styles['group-horizontal'],\n        className\n      )}\n      data-slot='checkbox-group'\n      {...props}\n    />\n  );\n}\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n\ninterface CheckboxItemProps\n  extends CheckboxPrimitive.Root.Props,\n    VariantProps<typeof checkboxVariants> {}\n\nfunction CheckboxItem({\n  className,\n  required,\n  size,\n  render,\n  ...props\n}: CheckboxItemProps) {\n  const fieldContext = useFieldContext();\n  const resolvedRequired = required ?? fieldContext?.required;\n  // Remember which icon is showing while the indicator is up. During the exit\n  // (transitionStatus 'ending') Base UI has already flipped checked/\n  // indeterminate to the new value, so reading it live would flash the\n  // checkmark for a frame on an indeterminate → unchecked change. Render the\n  // remembered icon during the exit instead.\n  const shownIconRef = useRef<'check' | 'indeterminate'>('check');\n\n  return (\n    <CheckboxPrimitive.Root\n      className={checkboxVariants({ size, className })}\n      required={resolvedRequired}\n      data-slot='checkbox'\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={styles.indicator}\n        keepMounted\n        render={\n          render ??\n          ((props, state) => {\n            const isEnding = state.transitionStatus === 'ending';\n            if (!isEnding) {\n              shownIconRef.current = state.indeterminate\n                ? 'indeterminate'\n                : 'check';\n            }\n            const showIcon = state.checked || state.indeterminate || isEnding;\n            const icon = isEnding\n              ? shownIconRef.current\n              : state.indeterminate\n                ? 'indeterminate'\n                : 'check';\n            return (\n              <span data-slot='checkbox-indicator' {...props}>\n                {showIcon &&\n                  (icon === 'indeterminate' ? (\n                    <IndeterminateIcon />\n                  ) : (\n                    <CheckMarkIcon />\n                  ))}\n              </span>\n            );\n          })\n        }\n      />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nCheckboxItem.displayName = 'Checkbox';\n\nexport const Checkbox = Object.assign(CheckboxItem, {\n  Group: CheckboxGroup\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAUA;AAmBA;AAmBA;AACE;AACE;;;AAGC;AACF;AACD;AACE;AACD;AACF;AASD;AAKE;AAWF;AAEA;AAMA;AAOE;AACA;;;;;;AAMA;AAEA;AAYQ;AACE;;AAEE;AACE;;;;;;;AAOA;;AAEJ;;AAUF;AAKV;AAEA;;AAGE;AACD;;"}