{"version":3,"file":"RadioButtonPanel.cjs","sources":["../../../src/components/RadioButtonPanel/RadioButtonPanel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FC,\n  type ReactNode,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Base } from '../Base'\nimport { RadioButton } from '../RadioButton'\n\ntype Props = ComponentProps<typeof RadioButton> & {\n  as?: string | ComponentType<any>\n  label: ReactNode\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    base: [\n      'smarthr-ui-RadioButtonPanel',\n      'shr-border-shorthand shr-cursor-pointer shr-list-none shr-shadow-none',\n      'has-[:disabled]:shr-cursor-default',\n      // FIX: なぜか storybook 上で :has が動作しないので重ねて書いている\n      'has-[:focus-visible]:shr-focus-indicator [&:has(:focus-visible)]:shr-focus-indicator',\n      '[&:has(:disabled)]:shr-text-disabled has-[:disabled]:[&_.smarthr-ui-RadioButtonPanel-description]:shr-text-disabled',\n    ],\n    radio: [\n      '[&_.smarthr-ui-RadioButton-radioButton:focus-visible_+_span]:shr-focus-indicator-none',\n      '[&_.smarthr-ui-RadioButton-label]:shr-ms-0.75',\n    ],\n    // RadioButtonPanel で指定している shr-ms-0.75 + RadioButton のボタンの shr-w-em を足して shr-ms-[1.75em] にしている\n    description: ['smarthr-ui-RadioButtonPanel-description', 'shr-ms-[1.75em] shr-mt-0.5'],\n  },\n  variants: {\n    hasDescription: {\n      true: {\n        base: 'shr-flex shr-flex-col',\n        radio: 'shr-font-bold',\n      },\n    },\n  },\n})\n\nexport const RadioButtonPanel: FC<Props> = ({\n  onClick,\n  as,\n  className,\n  children,\n  label,\n  'aria-describedby': ariaDescribedby,\n  ...rest\n}) => {\n  const hasDescription = !!children\n  const classNames = useMemo(() => {\n    const { base, description, radio } = classNameGenerator({\n      className,\n      hasDescription,\n    })\n\n    return { base: base(), description: description(), radio: radio() }\n  }, [className, hasDescription])\n\n  // 外側の装飾を押しても内側のラジオボタンが押せるようにする\n  const innerRef = useRef<HTMLInputElement>(null)\n  const onDelegateClick = useCallback(() => {\n    innerRef.current?.click()\n  }, [])\n\n  const descriptionId = useId()\n\n  return (\n    <Base padding={1} onClick={onDelegateClick} as={as} className={classNames.base}>\n      <RadioButton\n        {...rest}\n        ref={innerRef}\n        aria-describedby={`${descriptionId}${ariaDescribedby ? ` ${ariaDescribedby}` : ''}`}\n        className={classNames.radio}\n      >\n        {label}\n      </RadioButton>\n      {children && (\n        <div id={descriptionId} className={classNames.description}>\n          {children}\n        </div>\n      )}\n    </Base>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAsBA;AACE;AACE;;;;;;;AAOC;AACD;;;AAGC;;AAED;AACD;AACD;AACE;AACE;AACE;AACA;AACD;AACF;AACF;AACF;AAEM;AASL;AACA;;;;AAIG;AAED;AACF;;AAGA;AACA;AACE;;AAGF;AAEA;AAiBF;;"}