@servicetitan/anvil2 3.0.5 → 3.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/{AiMark-DjOf60tj.js → AiMark-BXL0sWIV.js} +2 -2
- package/dist/{AiMark-DjOf60tj.js.map → AiMark-BXL0sWIV.js.map} +1 -1
- package/dist/AiMark.js +1 -1
- package/dist/{Alert-BTesdKK7.js → Alert-BNH0UD2s.js} +2 -2
- package/dist/{Alert-BTesdKK7.js.map → Alert-BNH0UD2s.js.map} +1 -1
- package/dist/Alert.js +1 -1
- package/dist/{Breadcrumbs-DTi5RqT-.js → Breadcrumbs-Bzxbdu-S.js} +2 -2
- package/dist/{Breadcrumbs-DTi5RqT-.js.map → Breadcrumbs-Bzxbdu-S.js.map} +1 -1
- package/dist/Breadcrumbs.js +1 -1
- package/dist/{Calendar-ddGQKSGU.js → Calendar-BYNFAWpZ.js} +2 -2
- package/dist/{Calendar-ddGQKSGU.js.map → Calendar-BYNFAWpZ.js.map} +1 -1
- package/dist/{Calendar-CpCRxcue.js → Calendar-DS5eWpGF.js} +2 -2
- package/dist/{Calendar-CpCRxcue.js.map → Calendar-DS5eWpGF.js.map} +1 -1
- package/dist/Calendar.js +2 -2
- package/dist/{Checkbox-CJ8eYejR.js → Checkbox-BB3BDJsK.js} +4 -4
- package/dist/{Checkbox-CJ8eYejR.js.map → Checkbox-BB3BDJsK.js.map} +1 -1
- package/dist/{Checkbox-CVidv1sO.js → Checkbox-BeIzx_ZX.js} +2 -2
- package/dist/{Checkbox-CVidv1sO.js.map → Checkbox-BeIzx_ZX.js.map} +1 -1
- package/dist/Checkbox.css +40 -37
- package/dist/Checkbox.js +1 -1
- package/dist/Checkbox.module-CURNX27M.js +28 -0
- package/dist/Checkbox.module-CURNX27M.js.map +1 -0
- package/dist/{Chip-0-Yx9SGX.js → Chip-D2k5X_wX.js} +2 -2
- package/dist/{Chip-0-Yx9SGX.js.map → Chip-D2k5X_wX.js.map} +1 -1
- package/dist/Chip.js +1 -1
- package/dist/{Combobox-BXQFOwX4.js → Combobox-Cp7M4-4r.js} +5 -5
- package/dist/{Combobox-BXQFOwX4.js.map → Combobox-Cp7M4-4r.js.map} +1 -1
- package/dist/Combobox.js +1 -1
- package/dist/{DataTable-BFzj8cZG.js → DataTable-0kOuVgSB.js} +8 -8
- package/dist/{DataTable-BFzj8cZG.js.map → DataTable-0kOuVgSB.js.map} +1 -1
- package/dist/{DateFieldRange-CO2C776E.js → DateFieldRange-Be_I9GTp.js} +4 -4
- package/dist/{DateFieldRange-CO2C776E.js.map → DateFieldRange-Be_I9GTp.js.map} +1 -1
- package/dist/DateFieldRange.js +1 -1
- package/dist/{DateFieldSingle-DjmHpn1y.js → DateFieldSingle-CsrsY9i8.js} +4 -4
- package/dist/{DateFieldSingle-DjmHpn1y.js.map → DateFieldSingle-CsrsY9i8.js.map} +1 -1
- package/dist/DateFieldSingle.js +1 -1
- package/dist/{DateFieldYearless-CCJAopYd.js → DateFieldYearless-m_Hl2gMY.js} +5 -5
- package/dist/{DateFieldYearless-CCJAopYd.js.map → DateFieldYearless-m_Hl2gMY.js.map} +1 -1
- package/dist/DateFieldYearless.js +1 -1
- package/dist/{DateFieldYearlessRange-BUv1mGJg.js → DateFieldYearlessRange-DNqSTBDr.js} +4 -4
- package/dist/{DateFieldYearlessRange-BUv1mGJg.js.map → DateFieldYearlessRange-DNqSTBDr.js.map} +1 -1
- package/dist/DateFieldYearlessRange.js +1 -1
- package/dist/{DaysOfTheWeek-BihTU2No.js → DaysOfTheWeek-D58z_eF3.js} +10 -9
- package/dist/{DaysOfTheWeek-BihTU2No.js.map → DaysOfTheWeek-D58z_eF3.js.map} +1 -1
- package/dist/DaysOfTheWeek.css +10 -6
- package/dist/DaysOfTheWeek.js +1 -1
- package/dist/{Dialog-BZTo4hbX.js → Dialog-CD-SDfPT.js} +22 -20
- package/dist/{Dialog-BZTo4hbX.js.map → Dialog-CD-SDfPT.js.map} +1 -1
- package/dist/Dialog.css +43 -29
- package/dist/Dialog.js +1 -1
- package/dist/{Drawer-Dg35inxH.js → Drawer-s2y0xcgV.js} +3 -3
- package/dist/{Drawer-Dg35inxH.js.map → Drawer-s2y0xcgV.js.map} +1 -1
- package/dist/Drawer.js +1 -1
- package/dist/DrillDown.js +1 -1
- package/dist/{EditCard-BfNq-T8n.js → EditCard-B25pj0Jx.js} +2 -2
- package/dist/{EditCard-BfNq-T8n.js.map → EditCard-B25pj0Jx.js.map} +1 -1
- package/dist/EditCard.js +1 -1
- package/dist/{FieldLabel-xV6EdVwo.js → FieldLabel-D1qPAGtB.js} +3 -3
- package/dist/{FieldLabel-xV6EdVwo.js.map → FieldLabel-D1qPAGtB.js.map} +1 -1
- package/dist/FieldLabel.js +1 -1
- package/dist/{FilterBar-GjMlLOME.js → FilterBar-yysyZ-t1.js} +374 -19
- package/dist/FilterBar-yysyZ-t1.js.map +1 -0
- package/dist/FilterBar.js +1 -1
- package/dist/{InputMask-8rI6UIb8.js → InputMask-BDl09V4u.js} +3 -3
- package/dist/{InputMask-8rI6UIb8.js.map → InputMask-BDl09V4u.js.map} +1 -1
- package/dist/InputMask.js +1 -1
- package/dist/{ListView-CIa981KJ.js → ListView-CcRRh1ap.js} +2 -2
- package/dist/{ListView-CIa981KJ.js.map → ListView-CcRRh1ap.js.map} +1 -1
- package/dist/ListView.js +1 -1
- package/dist/{Listbox-DRznPBCr.js → Listbox-CvQHBFWb.js} +2 -2
- package/dist/{Listbox-DRznPBCr.js.map → Listbox-CvQHBFWb.js.map} +1 -1
- package/dist/Listbox.js +1 -1
- package/dist/MultiSelectField.js +1 -1
- package/dist/{MultiSelectFieldSync-BxyQiVPQ.js → MultiSelectFieldSync-BMVROOjy.js} +25 -25
- package/dist/{MultiSelectFieldSync-BxyQiVPQ.js.map → MultiSelectFieldSync-BMVROOjy.js.map} +1 -1
- package/dist/MultiSelectFieldSync.css +61 -57
- package/dist/MultiSelectMenu.js +1 -1
- package/dist/{MultiSelectMenuSync-BJfvZGf3.js → MultiSelectMenuSync-BNPp_2Bm.js} +4 -4
- package/dist/{MultiSelectMenuSync-BJfvZGf3.js.map → MultiSelectMenuSync-BNPp_2Bm.js.map} +1 -1
- package/dist/{NumberField-D7YYo4Rl.js → NumberField-BymFZhIJ.js} +4 -4
- package/dist/{NumberField-D7YYo4Rl.js.map → NumberField-BymFZhIJ.js.map} +1 -1
- package/dist/NumberField.js +1 -1
- package/dist/{Page-cELP59Hm.js → Page-SBy27-Wv.js} +8 -8
- package/dist/{Page-cELP59Hm.js.map → Page-SBy27-Wv.js.map} +1 -1
- package/dist/Page.js +1 -1
- package/dist/{Pagination-DTN4FovY.js → Pagination-Cm8-K6VH.js} +2 -2
- package/dist/{Pagination-DTN4FovY.js.map → Pagination-Cm8-K6VH.js.map} +1 -1
- package/dist/Pagination.js +1 -1
- package/dist/{Popover-B3Vw4lDW.js → Popover-8mTJoMy7.js} +2 -2
- package/dist/{Popover-B3Vw4lDW.js.map → Popover-8mTJoMy7.js.map} +1 -1
- package/dist/Popover.js +1 -1
- package/dist/{ProgressBar-kzCNhaCO.js → ProgressBar-C1CkQHV5.js} +2 -2
- package/dist/{ProgressBar-kzCNhaCO.js.map → ProgressBar-C1CkQHV5.js.map} +1 -1
- package/dist/ProgressBar.js +1 -1
- package/dist/{Radio-CSBetBV6.js → Radio-BcHMk8dD.js} +2 -2
- package/dist/{Radio-CSBetBV6.js.map → Radio-BcHMk8dD.js.map} +1 -1
- package/dist/{Radio-BDE1xGel.js → Radio-D5WyQN2i.js} +16 -16
- package/dist/{Radio-BDE1xGel.js.map → Radio-D5WyQN2i.js.map} +1 -1
- package/dist/Radio.css +40 -37
- package/dist/Radio.js +1 -1
- package/dist/{RichTextEditor-BFFXj0zS.js → RichTextEditor-DstVbYch.js} +8 -8
- package/dist/{RichTextEditor-BFFXj0zS.js.map → RichTextEditor-DstVbYch.js.map} +1 -1
- package/dist/RichTextEditor.js +1 -1
- package/dist/{SearchField-Dl7sh_M4.js → SearchField-3tUPU8hH.js} +2 -2
- package/dist/{SearchField-Dl7sh_M4.js.map → SearchField-3tUPU8hH.js.map} +1 -1
- package/dist/{SearchField-CO9BHCYB.js → SearchField-BcQZ5e0x.js} +2 -2
- package/dist/{SearchField-CO9BHCYB.js.map → SearchField-BcQZ5e0x.js.map} +1 -1
- package/dist/SearchField.js +1 -1
- package/dist/{SelectCard-CLCLIBoq.js → SelectCard-BN-LI14f.js} +3 -3
- package/dist/{SelectCard-CLCLIBoq.js.map → SelectCard-BN-LI14f.js.map} +1 -1
- package/dist/SelectCard.js +1 -1
- package/dist/SelectField.js +1 -1
- package/dist/{SelectFieldLabel-Db9w6O6r.js → SelectFieldLabel-UbQT7fDD.js} +2 -2
- package/dist/{SelectFieldLabel-Db9w6O6r.js.map → SelectFieldLabel-UbQT7fDD.js.map} +1 -1
- package/dist/{SelectFieldSync-z8b41JZz.js → SelectFieldSync-BeDYbJ2M.js} +6 -6
- package/dist/SelectFieldSync-BeDYbJ2M.js.map +1 -0
- package/dist/SelectMenu.js +1 -1
- package/dist/{SelectMenuSync-Cf1Zradm.js → SelectMenuSync-C-PFemsQ.js} +4 -4
- package/dist/{SelectMenuSync-Cf1Zradm.js.map → SelectMenuSync-C-PFemsQ.js.map} +1 -1
- package/dist/{SelectOptions-BgT1V6qp.js → SelectOptions-Tr11Ckqw.js} +2 -2
- package/dist/{SelectOptions-BgT1V6qp.js.map → SelectOptions-Tr11Ckqw.js.map} +1 -1
- package/dist/{SelectTrigger-37HzF-VI.js → SelectTrigger-DTz7V-Xx.js} +2 -2
- package/dist/{SelectTrigger-37HzF-VI.js.map → SelectTrigger-DTz7V-Xx.js.map} +1 -1
- package/dist/SelectTrigger.js +1 -1
- package/dist/{SelectTriggerBase-4o1cqEbR.js → SelectTriggerBase-Ds6I7Qbr.js} +4 -4
- package/dist/{SelectTriggerBase-4o1cqEbR.js.map → SelectTriggerBase-Ds6I7Qbr.js.map} +1 -1
- package/dist/SelectTriggerBase.css +46 -42
- package/dist/SelectTriggerBase.module-DsPvTQE7.js +37 -0
- package/dist/SelectTriggerBase.module-DsPvTQE7.js.map +1 -0
- package/dist/{Switch-p4yVJTNy.js → Switch-onmiKoRd.js} +2 -2
- package/dist/{Switch-p4yVJTNy.js.map → Switch-onmiKoRd.js.map} +1 -1
- package/dist/Switch.js +1 -1
- package/dist/Table.js +1 -1
- package/dist/{Text-BgPuOXJM.js → Text-BTzgTpqu.js} +2 -2
- package/dist/{Text-BgPuOXJM.js.map → Text-BTzgTpqu.js.map} +1 -1
- package/dist/Text.js +1 -1
- package/dist/{TextField-DzuM8vvd.js → TextField-WTYZJlX3.js} +2 -2
- package/dist/{TextField-DzuM8vvd.js.map → TextField-WTYZJlX3.js.map} +1 -1
- package/dist/{TextField-D7NyaKId.js → TextField-rVfctM1E.js} +4 -4
- package/dist/{TextField-D7NyaKId.js.map → TextField-rVfctM1E.js.map} +1 -1
- package/dist/TextField.css +22 -58
- package/dist/TextField.js +1 -1
- package/dist/TextField.module-C8FsjTpx.js +23 -0
- package/dist/TextField.module-C8FsjTpx.js.map +1 -0
- package/dist/{Textarea-Dks15Zt3.js → Textarea-PXjppEQ6.js} +3 -3
- package/dist/{Textarea-Dks15Zt3.js.map → Textarea-PXjppEQ6.js.map} +1 -1
- package/dist/Textarea.js +1 -1
- package/dist/{TimeField-lN_5V6-X.js → TimeField-BJPXIv6W.js} +4 -4
- package/dist/{TimeField-lN_5V6-X.js.map → TimeField-BJPXIv6W.js.map} +1 -1
- package/dist/TimeField.js +1 -1
- package/dist/Toast.js +2 -2
- package/dist/{Toaster-3GI_qJxj.js → Toaster-CoChsMD0.js} +3 -3
- package/dist/{Toaster-3GI_qJxj.js.map → Toaster-CoChsMD0.js.map} +1 -1
- package/dist/{Toaster-2pAMQXRk.js → Toaster-DXLc86VD.js} +2 -2
- package/dist/{Toaster-2pAMQXRk.js.map → Toaster-DXLc86VD.js.map} +1 -1
- package/dist/{Toolbar-B0WHsX9W.js → Toolbar-BUd9eNkq.js} +6 -6
- package/dist/{Toolbar-B0WHsX9W.js.map → Toolbar-BUd9eNkq.js.map} +1 -1
- package/dist/{Toolbar-BRQpvj9U.js → Toolbar-Bt3kShho.js} +4 -4
- package/dist/{Toolbar-BRQpvj9U.js.map → Toolbar-Bt3kShho.js.map} +1 -1
- package/dist/Toolbar.js +2 -2
- package/dist/{ToolbarButtonToggle-xvMWRxzC.js → ToolbarButtonToggle-C06cqJ6F.js} +2 -2
- package/dist/{ToolbarButtonToggle-xvMWRxzC.js.map → ToolbarButtonToggle-C06cqJ6F.js.map} +1 -1
- package/dist/{Tooltip-DGo3OWqL.js → Tooltip-yr1D06BE.js} +5 -5
- package/dist/{Tooltip-DGo3OWqL.js.map → Tooltip-yr1D06BE.js.map} +1 -1
- package/dist/Tooltip.css +6 -7
- package/dist/Tooltip.js +1 -1
- package/dist/{YearlessDateInputWithPicker-BhbR5F22.js → YearlessDateInputWithPicker-BIcVgz-J.js} +3 -3
- package/dist/{YearlessDateInputWithPicker-BhbR5F22.js.map → YearlessDateInputWithPicker-BIcVgz-J.js.map} +1 -1
- package/dist/assets/icons/st/batch.svg +1 -1
- package/dist/assets/icons/st/call.svg +1 -1
- package/dist/assets/icons/st/customer.svg +1 -1
- package/dist/assets/icons/st/enterprise_hub.svg +1 -1
- package/dist/assets/icons/st/equipment.svg +1 -1
- package/dist/assets/icons/st/estimate.svg +1 -1
- package/dist/assets/icons/st/full_fluid.svg +1 -1
- package/dist/assets/icons/st/gnav_titan_advisor_active.svg +1 -1
- package/dist/assets/icons/st/gnav_titan_advisor_inactive.svg +1 -1
- package/dist/assets/icons/st/job.svg +1 -1
- package/dist/assets/icons/st/leads.svg +1 -1
- package/dist/assets/icons/st/proposal.svg +1 -1
- package/dist/assets/icons/st/roofing.svg +1 -1
- package/dist/beta.js +12 -12
- package/dist/{index-B6Demgr-.js → index-DVYRUKtW.js} +2 -2
- package/dist/{index-B6Demgr-.js.map → index-DVYRUKtW.js.map} +1 -1
- package/dist/index.js +38 -38
- package/dist/src/beta/components/FilterBar/FilterButton.d.ts +6 -3
- package/dist/src/beta/components/FilterBar/FilterDateList.d.ts +37 -0
- package/dist/src/beta/components/FilterBar/index.d.ts +1 -1
- package/dist/src/beta/components/FilterBar/internal/types.d.ts +40 -2
- package/dist/src/beta/components/FilterBar/internal/utils/dateListLibraryOptions.d.ts +29 -0
- package/dist/src/beta/components/FilterBar/internal/utils/filter-state.d.ts +2 -0
- package/dist/src/beta/components/FilterBar/internal/utils/test.d.ts +2 -1
- package/dist/{stripInlineMarkdown-D_eHogvh.js → stripInlineMarkdown-C5DNxxwf.js} +2 -2
- package/dist/{stripInlineMarkdown-D_eHogvh.js.map → stripInlineMarkdown-C5DNxxwf.js.map} +1 -1
- package/dist/{syncFilterUtils-Dpp7gt05.js → syncFilterUtils-COxBIkt6.js} +357 -357
- package/dist/{syncFilterUtils-Dpp7gt05.js.map → syncFilterUtils-COxBIkt6.js.map} +1 -1
- package/dist/{useDrilldown-bIRsbg1m.js → useDrilldown-KZ9rRsXQ.js} +2 -2
- package/dist/{useDrilldown-bIRsbg1m.js.map → useDrilldown-KZ9rRsXQ.js.map} +1 -1
- package/dist/{useToggleSelection-DBqr4HwT.js → useToggleSelection-B5PnTuT2.js} +2 -2
- package/dist/{useToggleSelection-DBqr4HwT.js.map → useToggleSelection-B5PnTuT2.js.map} +1 -1
- package/package.json +3 -3
- package/dist/Checkbox.module-DVbXNsaN.js +0 -28
- package/dist/Checkbox.module-DVbXNsaN.js.map +0 -1
- package/dist/FilterBar-GjMlLOME.js.map +0 -1
- package/dist/SelectFieldSync-z8b41JZz.js.map +0 -1
- package/dist/SelectTriggerBase.module-BgZSNZfE.js +0 -37
- package/dist/SelectTriggerBase.module-BgZSNZfE.js.map +0 -1
- package/dist/TextField.module-DkZwywjf.js +0 -23
- package/dist/TextField.module-DkZwywjf.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar-kzCNhaCO.js","sources":["../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import {\n forwardRef,\n isValidElement,\n ComponentPropsWithoutRef,\n useId,\n AriaAttributes,\n ReactElement,\n} from \"react\";\nimport cx from \"classnames\";\nimport Check from \"@servicetitan/hammer-icon/mdi/round/check_circle.svg\";\nimport Error from \"@servicetitan/hammer-icon/mdi/round/error.svg\";\n\nimport { FieldLabel, FieldLabelProps } from \"../FieldLabel\";\nimport { Flex } from \"../Flex\";\nimport { Helper, HelperProps } from \"../../internal/components\";\nimport { warnDeprecatedErrorUsage } from \"../FieldMessage\";\nimport { Icon } from \"../Icon\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport styles from \"./ProgressBar.module.scss\";\n\n/**\n * Props for the ProgressBar component\n * @extends Omit<ComponentPropsWithoutRef<\"progress\">, \"value\">\n * @extends LayoutUtilProps\n */\nexport type ProgressBarProps = Omit<\n ComponentPropsWithoutRef<\"progress\">,\n \"value\"\n> &\n LayoutUtilProps & {\n /**\n * Error state for the field. Pass `true` to indicate error styling without a message.\n * Pass a string, string[], or ReactElement (deprecated) for error messages.\n * @default false\n */\n error?: boolean | string | ReactElement | string[];\n /**\n * @deprecated No longer used. Error messages always use `aria-live=\"assertive\"`.\n */\n errorAriaLive?: HelperProps[\"errorAriaLive\"];\n /**\n * Warning message(s) to display. Supports a single string or an array of strings.\n */\n warning?: string | string[];\n /**\n * Description text to display below the progress bar\n */\n description?: HelperProps[\"description\"];\n } & (\n | {\n /**\n * Label text for the progress bar\n */\n label: FieldLabelProps[\"children\"];\n /**\n * Additional props for the label component\n */\n labelProps?: Omit<FieldLabelProps, \"children\" | \"id\" | \"required\">;\n }\n | {\n label?: never;\n labelProps?: never;\n /**\n * Accessible label for the progress bar (alternative to label)\n */\n [\"aria-label\"]: Exclude<AriaAttributes[\"aria-label\"], undefined>;\n }\n | {\n label?: never;\n labelProps?: never;\n /**\n * ID of element that labels the progress bar (alternative to label)\n */\n [\"aria-labelledby\"]: Exclude<\n AriaAttributes[\"aria-labelledby\"],\n undefined\n >;\n }\n ) &\n (\n | {\n /**\n * Current progress value (0-100 or 0-max)\n */\n value: `${number}` | number;\n /**\n * Whether the progress bar is in indeterminate state\n * @default false\n */\n indeterminate?: false;\n }\n | {\n value?: never;\n /**\n * Whether the progress bar is in indeterminate state\n */\n indeterminate: true;\n }\n );\n\n/**\n * ProgressBar component for displaying progress indicators.\n *\n * Features:\n * - Supports both determinate and indeterminate progress states\n * - Optional label with customizable label props\n * - Error state with error message display\n * - Success state with check icon when value equals max\n * - Description text support\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Flexible labeling options (label, aria-label, aria-labelledby)\n * - Error and success visual indicators\n *\n * @example\n * <ProgressBar\n * label=\"Upload Progress\"\n * value={75}\n * max={100}\n * description=\"Uploading files...\"\n * />\n *\n * @example\n * <ProgressBar\n * label=\"Processing\"\n * indeterminate\n * description=\"Please wait...\"\n * />\n *\n * @example\n * <ProgressBar\n * aria-label=\"Download progress\"\n * value={50}\n * error=\"Download failed\"\n * />\n */\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n (props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n style,\n value,\n children,\n indeterminate,\n errorAriaLive,\n description,\n warning,\n error = false,\n max = 100,\n ...mainProps\n } = componentProps;\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n warnDeprecatedErrorUsage(\"ProgressBar\", error);\n\n const errorMessages =\n typeof error === \"boolean\" || error === undefined ? undefined : error;\n const labelUid = useId();\n const isSuccess = typeof value !== \"undefined\" && +value >= +max;\n\n if (\"label\" in props && !!props.label) {\n const { label, labelProps, ...rest } = mainProps;\n\n const ProgressBarClassNames = cx(\n [styles[\"progress-bar\"]],\n\n className,\n {\n [styles[`error`]]: error,\n [styles[`success`]]: isSuccess,\n },\n );\n\n return (\n <div\n className={ProgressBarClassNames}\n data-anv=\"progress-bar\"\n style={styleCombined}\n ref={ref}\n >\n <Flex justifyContent=\"space-between\" alignItems=\"center\">\n <FieldLabel id={labelUid} {...labelProps}>\n {label}\n </FieldLabel>\n {isSuccess && !error ? (\n <Icon className={styles[\"check-icon\"]} svg={Check} />\n ) : null}\n {error ? (\n <Icon className={styles[\"error-icon\"]} svg={Error} />\n ) : null}\n </Flex>\n <div className={styles[\"bar-container\"]}>\n <progress\n aria-labelledby={labelUid}\n className={styles[\"bar\"]}\n value={value}\n max={max}\n {...rest}\n />\n </div>\n {errorMessages || warning || description ? (\n <Helper\n error={\n typeof errorMessages === \"string\" ||\n Array.isArray(errorMessages)\n ? errorMessages\n : undefined\n }\n warning={warning}\n errorMessage={\n isValidElement(errorMessages) ? errorMessages : undefined\n }\n description={description}\n />\n ) : null}\n </div>\n );\n }\n\n const ProgressBarClassNames = cx([styles[\"progress-bar\"]], className, {\n [styles[`error`]]: error,\n [styles[`success`]]: isSuccess,\n });\n\n return (\n <div\n className={ProgressBarClassNames}\n data-anv=\"progress-bar\"\n style={styleCombined}\n ref={ref}\n >\n <div className={styles[\"bar-container\"]}>\n <progress\n className={styles[\"bar\"]}\n max={max}\n value={value}\n {...mainProps}\n />\n </div>\n {errorMessages || warning || description ? (\n <Helper\n error={\n typeof errorMessages === \"string\" || Array.isArray(errorMessages)\n ? errorMessages\n : undefined\n }\n warning={warning}\n errorMessage={\n isValidElement(errorMessages) ? errorMessages : undefined\n }\n description={description}\n />\n ) : null}\n </div>\n );\n },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":["ProgressBarClassNames","Check","Error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ProgressBar-C1CkQHV5.js","sources":["../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import {\n forwardRef,\n isValidElement,\n ComponentPropsWithoutRef,\n useId,\n AriaAttributes,\n ReactElement,\n} from \"react\";\nimport cx from \"classnames\";\nimport Check from \"@servicetitan/hammer-icon/mdi/round/check_circle.svg\";\nimport Error from \"@servicetitan/hammer-icon/mdi/round/error.svg\";\n\nimport { FieldLabel, FieldLabelProps } from \"../FieldLabel\";\nimport { Flex } from \"../Flex\";\nimport { Helper, HelperProps } from \"../../internal/components\";\nimport { warnDeprecatedErrorUsage } from \"../FieldMessage\";\nimport { Icon } from \"../Icon\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport styles from \"./ProgressBar.module.scss\";\n\n/**\n * Props for the ProgressBar component\n * @extends Omit<ComponentPropsWithoutRef<\"progress\">, \"value\">\n * @extends LayoutUtilProps\n */\nexport type ProgressBarProps = Omit<\n ComponentPropsWithoutRef<\"progress\">,\n \"value\"\n> &\n LayoutUtilProps & {\n /**\n * Error state for the field. Pass `true` to indicate error styling without a message.\n * Pass a string, string[], or ReactElement (deprecated) for error messages.\n * @default false\n */\n error?: boolean | string | ReactElement | string[];\n /**\n * @deprecated No longer used. Error messages always use `aria-live=\"assertive\"`.\n */\n errorAriaLive?: HelperProps[\"errorAriaLive\"];\n /**\n * Warning message(s) to display. Supports a single string or an array of strings.\n */\n warning?: string | string[];\n /**\n * Description text to display below the progress bar\n */\n description?: HelperProps[\"description\"];\n } & (\n | {\n /**\n * Label text for the progress bar\n */\n label: FieldLabelProps[\"children\"];\n /**\n * Additional props for the label component\n */\n labelProps?: Omit<FieldLabelProps, \"children\" | \"id\" | \"required\">;\n }\n | {\n label?: never;\n labelProps?: never;\n /**\n * Accessible label for the progress bar (alternative to label)\n */\n [\"aria-label\"]: Exclude<AriaAttributes[\"aria-label\"], undefined>;\n }\n | {\n label?: never;\n labelProps?: never;\n /**\n * ID of element that labels the progress bar (alternative to label)\n */\n [\"aria-labelledby\"]: Exclude<\n AriaAttributes[\"aria-labelledby\"],\n undefined\n >;\n }\n ) &\n (\n | {\n /**\n * Current progress value (0-100 or 0-max)\n */\n value: `${number}` | number;\n /**\n * Whether the progress bar is in indeterminate state\n * @default false\n */\n indeterminate?: false;\n }\n | {\n value?: never;\n /**\n * Whether the progress bar is in indeterminate state\n */\n indeterminate: true;\n }\n );\n\n/**\n * ProgressBar component for displaying progress indicators.\n *\n * Features:\n * - Supports both determinate and indeterminate progress states\n * - Optional label with customizable label props\n * - Error state with error message display\n * - Success state with check icon when value equals max\n * - Description text support\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Flexible labeling options (label, aria-label, aria-labelledby)\n * - Error and success visual indicators\n *\n * @example\n * <ProgressBar\n * label=\"Upload Progress\"\n * value={75}\n * max={100}\n * description=\"Uploading files...\"\n * />\n *\n * @example\n * <ProgressBar\n * label=\"Processing\"\n * indeterminate\n * description=\"Please wait...\"\n * />\n *\n * @example\n * <ProgressBar\n * aria-label=\"Download progress\"\n * value={50}\n * error=\"Download failed\"\n * />\n */\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n (props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n style,\n value,\n children,\n indeterminate,\n errorAriaLive,\n description,\n warning,\n error = false,\n max = 100,\n ...mainProps\n } = componentProps;\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n warnDeprecatedErrorUsage(\"ProgressBar\", error);\n\n const errorMessages =\n typeof error === \"boolean\" || error === undefined ? undefined : error;\n const labelUid = useId();\n const isSuccess = typeof value !== \"undefined\" && +value >= +max;\n\n if (\"label\" in props && !!props.label) {\n const { label, labelProps, ...rest } = mainProps;\n\n const ProgressBarClassNames = cx(\n [styles[\"progress-bar\"]],\n\n className,\n {\n [styles[`error`]]: error,\n [styles[`success`]]: isSuccess,\n },\n );\n\n return (\n <div\n className={ProgressBarClassNames}\n data-anv=\"progress-bar\"\n style={styleCombined}\n ref={ref}\n >\n <Flex justifyContent=\"space-between\" alignItems=\"center\">\n <FieldLabel id={labelUid} {...labelProps}>\n {label}\n </FieldLabel>\n {isSuccess && !error ? (\n <Icon className={styles[\"check-icon\"]} svg={Check} />\n ) : null}\n {error ? (\n <Icon className={styles[\"error-icon\"]} svg={Error} />\n ) : null}\n </Flex>\n <div className={styles[\"bar-container\"]}>\n <progress\n aria-labelledby={labelUid}\n className={styles[\"bar\"]}\n value={value}\n max={max}\n {...rest}\n />\n </div>\n {errorMessages || warning || description ? (\n <Helper\n error={\n typeof errorMessages === \"string\" ||\n Array.isArray(errorMessages)\n ? errorMessages\n : undefined\n }\n warning={warning}\n errorMessage={\n isValidElement(errorMessages) ? errorMessages : undefined\n }\n description={description}\n />\n ) : null}\n </div>\n );\n }\n\n const ProgressBarClassNames = cx([styles[\"progress-bar\"]], className, {\n [styles[`error`]]: error,\n [styles[`success`]]: isSuccess,\n });\n\n return (\n <div\n className={ProgressBarClassNames}\n data-anv=\"progress-bar\"\n style={styleCombined}\n ref={ref}\n >\n <div className={styles[\"bar-container\"]}>\n <progress\n className={styles[\"bar\"]}\n max={max}\n value={value}\n {...mainProps}\n />\n </div>\n {errorMessages || warning || description ? (\n <Helper\n error={\n typeof errorMessages === \"string\" || Array.isArray(errorMessages)\n ? errorMessages\n : undefined\n }\n warning={warning}\n errorMessage={\n isValidElement(errorMessages) ? errorMessages : undefined\n }\n description={description}\n />\n ) : null}\n </div>\n );\n },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":["ProgressBarClassNames","Check","Error"],"mappings":"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"}
|
package/dist/ProgressBar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { P as ProgressBar, P as default } from './ProgressBar-
|
|
1
|
+
export { P as ProgressBar, P as default } from './ProgressBar-C1CkQHV5.js';
|
|
2
2
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import { R as Radio$1, a as RadioGroup } from './Radio-
|
|
3
|
+
import { R as Radio$1, a as RadioGroup } from './Radio-D5WyQN2i.js';
|
|
4
4
|
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
|
|
5
5
|
import { useTrackingId } from './useTrackingId.js';
|
|
6
6
|
|
|
@@ -57,4 +57,4 @@ const Radio = Object.assign(
|
|
|
57
57
|
Radio.displayName = Radio$1?.displayName ?? "RadioElement";
|
|
58
58
|
|
|
59
59
|
export { Radio as R };
|
|
60
|
-
//# sourceMappingURL=Radio-
|
|
60
|
+
//# sourceMappingURL=Radio-BcHMk8dD.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio-
|
|
1
|
+
{"version":3,"file":"Radio-BcHMk8dD.js","sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n RadioProps as CoreRadioProps,\n Radio as CoreRadio,\n} from \"./internal/Radio\";\nimport { RadioGroup } from \"./RadioGroup\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId } from \"../../types\";\nimport { childrenToString } from \"../../internal/functions\";\n\n/**\n * Props for the Radio component\n * @property {boolean} [checked] - Controlled state\n * @property {boolean} [defaultChecked] - Uncontrolled state\n * @property {Function} [onChange] - Callback when radio is changed\n * @property {ReactElement | string} [label] - Label for Radio\n * @property {boolean} [error] - Error state for the radio\n * @property {object} [icons] - Icon overrides for checked and unchecked states\n * @property {string} [description] - Description text to display below the radio\n * @property {string} [aria-label] - Accessible label for the radio\n * @property {string} [aria-labelledby] - ID of element that labels the radio\n * @property {string} [name] - Name attribute for the radio\n * @property {string} [data-tracking-id] - Custom tracking ID for analytics\n * @extends DataTrackingId\n */\nexport type RadioProps = Omit<CoreRadioProps, \"hideRadio\"> & DataTrackingId;\n\n/**\n * Radio component for single selection from a group of options.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable icons for checked and unchecked states\n * - Error state with visual indicators\n * - Description text support\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Flexible labeling options\n * - Group support via Radio.Group\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Radio\n * label=\"Option 1\"\n * value=\"option1\"\n * checked={selectedValue === \"option1\"}\n * onChange={(e, state) => setSelectedValue(state?.value)}\n * />\n *\n * @example\n * <Radio\n * label=\"Custom styled option\"\n * value=\"custom\"\n * icons={{\n * checked: CustomCheckedIcon,\n * unchecked: CustomUncheckedIcon\n * }}\n * description=\"This option has custom styling\"\n * />\n *\n * @example\n * <Radio.Group legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </Radio.Group>\n */\nexport const Radio = Object.assign(\n forwardRef<HTMLInputElement, RadioProps>(function RadioInner(props, ref) {\n const data = {\n label: childrenToString(props.label),\n ariaLabel: props[\"aria-label\"],\n ariaLabelledBy: props[\"aria-labelledby\"],\n name: props.name,\n value: props.value,\n };\n\n const trackingId = useTrackingId({\n name: \"Radio\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n return <CoreRadio ref={ref} data-tracking-id={trackingId} {...props} />;\n }),\n {\n /**\n * RadioGroup component for grouping related radio options.\n *\n * Features:\n * - Groups multiple radio options together\n * - Legend support for group labeling\n * - Required field indication\n * - Accessibility support with proper fieldset semantics\n * - Layout utility props for positioning and spacing\n * - Focus and blur event handling\n * - More info support for additional context\n * - Automatic alignment based on flex direction\n *\n * @example\n * <RadioGroup legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </RadioGroup>\n *\n * @example\n * <RadioGroup\n * legend=\"Horizontal layout\"\n * flexDirection=\"row\"\n * gap=\"4\"\n * >\n * <Radio label=\"Yes\" value=\"yes\" />\n * <Radio label=\"No\" value=\"no\" />\n * </RadioGroup>\n */\n Group: RadioGroup,\n },\n);\nRadio.displayName = CoreRadio?.displayName ?? \"RadioElement\";\n"],"names":["CoreRadio"],"mappings":";;;;;;AAmEO,MAAM,QAAQ,MAAA,CAAO,MAAA;AAAA,EAC1B,UAAA,CAAyC,SAAS,UAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AACvE,IAAA,MAAM,IAAA,GAAO;AAAA,MACX,KAAA,EAAO,gBAAA,CAAiB,KAAA,CAAM,KAAK,CAAA;AAAA,MACnC,SAAA,EAAW,MAAM,YAAY,CAAA;AAAA,MAC7B,cAAA,EAAgB,MAAM,iBAAiB,CAAA;AAAA,MACvC,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,OAAO,KAAA,CAAM;AAAA,KACf;AAEA,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,OAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AACD,IAAA,2BAAQA,OAAA,EAAA,EAAU,GAAA,EAAU,kBAAA,EAAkB,UAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AAAA,EACvE,CAAC,CAAA;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA+BE,KAAA,EAAO;AAAA;AAEX;AACA,KAAA,CAAM,WAAA,GAAcA,SAAW,WAAA,IAAe,cAAA;;;;"}
|
|
@@ -2,34 +2,34 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { createContext, useContext, forwardRef, useId, useMemo, useState } from 'react';
|
|
4
4
|
import { c as cx } from './index-De1g9FRV.js';
|
|
5
|
-
import { F as FieldLabel } from './FieldLabel-
|
|
5
|
+
import { F as FieldLabel } from './FieldLabel-D1qPAGtB.js';
|
|
6
6
|
import { F as FieldMessage } from './FieldMessage-mTGdycSA.js';
|
|
7
7
|
import { w as warnDeprecatedErrorUsage } from './utils-CM48ODEJ.js';
|
|
8
8
|
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
|
|
9
9
|
import { w as warnOnce } from './warnOnce-Y9PRHcU4.js';
|
|
10
|
-
import { s as stripInlineMarkdown } from './stripInlineMarkdown-
|
|
10
|
+
import { s as stripInlineMarkdown } from './stripInlineMarkdown-C5DNxxwf.js';
|
|
11
11
|
import { I as Icon } from './Icon-feeG7gXA.js';
|
|
12
12
|
import { H as Helper } from './Helper-B_VAFgGd.js';
|
|
13
13
|
|
|
14
|
-
import './Radio.css';const wrapper = "
|
|
15
|
-
const radio = "
|
|
16
|
-
const icon = "
|
|
17
|
-
const legend = "
|
|
18
|
-
const children = "
|
|
14
|
+
import './Radio.css';const wrapper = "_wrapper_1jbrw_1";
|
|
15
|
+
const radio = "_radio_1jbrw_7";
|
|
16
|
+
const icon = "_icon_1jbrw_87";
|
|
17
|
+
const legend = "_legend_1jbrw_249";
|
|
18
|
+
const children = "_children_1jbrw_262";
|
|
19
19
|
const styles = {
|
|
20
20
|
wrapper: wrapper,
|
|
21
21
|
radio: radio,
|
|
22
|
-
"icon-wrapper": "_icon-
|
|
23
|
-
"focus-label": "_focus-
|
|
24
|
-
"helper-wrapper": "_helper-
|
|
22
|
+
"icon-wrapper": "_icon-wrapper_1jbrw_87",
|
|
23
|
+
"focus-label": "_focus-label_1jbrw_108",
|
|
24
|
+
"helper-wrapper": "_helper-wrapper_1jbrw_131",
|
|
25
25
|
icon: icon,
|
|
26
|
-
"radio-checked": "_radio-
|
|
27
|
-
"radio-error": "_radio-
|
|
28
|
-
"sr-only": "_sr-
|
|
29
|
-
"radio-group": "_radio-
|
|
26
|
+
"radio-checked": "_radio-checked_1jbrw_147",
|
|
27
|
+
"radio-error": "_radio-error_1jbrw_184",
|
|
28
|
+
"sr-only": "_sr-only_1jbrw_220",
|
|
29
|
+
"radio-group": "_radio-group_1jbrw_233",
|
|
30
30
|
legend: legend,
|
|
31
31
|
children: children,
|
|
32
|
-
"label-row": "_label-
|
|
32
|
+
"label-row": "_label-row_1jbrw_274"
|
|
33
33
|
};
|
|
34
34
|
|
|
35
35
|
const RadioGroupContext = createContext(void 0);
|
|
@@ -238,4 +238,4 @@ RadioElement.displayName = "RadioElement";
|
|
|
238
238
|
const Radio = RadioElement;
|
|
239
239
|
|
|
240
240
|
export { Radio as R, SvgRadioButtonChecked as S, RadioGroup as a, SvgRadioButtonUnchecked as b };
|
|
241
|
-
//# sourceMappingURL=Radio-
|
|
241
|
+
//# sourceMappingURL=Radio-D5WyQN2i.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio-BDE1xGel.js","sources":["../src/components/Radio/internal/RadioGroupContext.tsx","../src/components/Radio/RadioGroup.tsx","../../hammer-icon/mdi/two-tone/radio_button_unchecked.svg","../../hammer-icon/mdi/two-tone/radio_button_checked.svg","../src/components/Radio/internal/Radio.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/**\n * Context value for RadioGroup\n * @property {boolean} hasError - Whether the group has an error state\n */\nexport type RadioGroupContextValue = {\n /**\n * Whether the radio group has an error state\n */\n hasError: boolean;\n};\n\n/**\n * Context for sharing state between RadioGroup and child Radio components\n */\nexport const RadioGroupContext = createContext<\n RadioGroupContextValue | undefined\n>(undefined);\n\n/**\n * Hook to access RadioGroup context from child Radio components\n * @returns RadioGroupContextValue if inside a RadioGroup, undefined otherwise\n */\nexport const useRadioGroupContext = () => {\n return useContext(RadioGroupContext);\n};\n","import {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactElement,\n useId,\n useMemo,\n} from \"react\";\nimport { stripInlineMarkdown, warnOnce } from \"../../internal/functions\";\nimport styles from \"./Radio.module.scss\";\nimport cx from \"classnames\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { FieldLabel } from \"../FieldLabel\";\nimport type { FieldLabelProps as FieldLabelElementProps } from \"../FieldLabel\";\nimport { FieldLabelProps as InternalFieldLabelProps } from \"../../internal/types\";\nimport { HelperProps } from \"../../internal/components\";\nimport FieldMessage, { warnDeprecatedErrorUsage } from \"../FieldMessage\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\n/**\n * Props for the RadioGroup component\n * @extends ComponentPropsWithoutRef<\"fieldset\">\n * @extends LayoutUtilProps\n * @extends Omit<InternalFieldLabelProps, \"labelProps\">\n */\nexport type RadioGroupProps = ComponentPropsWithoutRef<\"fieldset\"> &\n LayoutUtilProps &\n Omit<InternalFieldLabelProps, \"labelProps\"> & {\n /**\n * Required flag for label\n * @remarks This does not enforce error when nothing is selected\n */\n required?: boolean;\n\n // TODO(v4.0.0): type becomes string only\n /**\n * Legend for the fieldset.\n * Passing `ReactNode` is deprecated — use a plain string with inline markdown instead.\n */\n legend: string | ReactElement;\n\n /**\n * Additional props for the legend `FieldLabel` (for example `aiMark`, `className`).\n */\n legendProps?: Omit<FieldLabelElementProps, \"el\">;\n\n /**\n * When `true`, hides the visual label row. The sr-only `<legend>` always remains for AT.\n * @default false\n */\n hideLabel?: boolean;\n\n /**\n * Error state for the field. Pass `true` to indicate error styling without a message.\n * Pass a string, string[], or ReactElement (deprecated) for error messages.\n */\n error?: boolean | string | ReactElement | string[];\n\n /**\n * @deprecated No longer used. Error messages always use `aria-live=\"assertive\"`.\n */\n errorAriaLive?: HelperProps[\"errorAriaLive\"];\n\n /**\n * Warning message(s) to display. Supports a single string or an array of strings.\n */\n warning?: string | string[];\n\n /**\n * Description text to display below the field.\n */\n description?: HelperProps[\"description\"];\n\n /**\n * Hint text to display below the field.\n */\n hint?: HelperProps[\"hint\"];\n };\n\n/**\n * RadioGroup component for grouping related radio options.\n *\n * Features:\n * - Groups multiple radio options together\n * - Legend support for group labeling\n * - Required field indication\n * - Accessibility support with proper fieldset semantics\n * - Layout utility props for positioning and spacing\n * - Focus and blur event handling\n * - More info support for additional context\n * - Automatic alignment based on flex direction\n *\n * @example\n * <RadioGroup legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </RadioGroup>\n *\n * @example\n * <RadioGroup\n * legend=\"Horizontal layout\"\n * flexDirection=\"row\"\n * gap=\"4\"\n * >\n * <Radio label=\"Yes\" value=\"yes\" />\n * <Radio label=\"No\" value=\"no\" />\n * </RadioGroup>\n */\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(\n (props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n children,\n description,\n error,\n errorAriaLive: _errorAriaLive,\n hint,\n warning,\n legend,\n moreInfo,\n legendProps,\n onBlur,\n onFocus,\n required,\n style,\n hideLabel = false,\n ...rest\n } = componentProps;\n\n const RadioGroupClassNames = cx(styles[\"radio-group\"], className);\n const helperUid = useId();\n const moreInfoUid = useId();\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n alignItems:\n layoutStyles?.alignItems ??\n (layoutStyles?.flexDirection === \"row\" ? \"center\" : undefined),\n };\n\n warnDeprecatedErrorUsage(\"RadioGroup\", error);\n\n // TODO(v4.0.0): remove once legend is string only\n if (typeof legend !== \"string\") {\n warnOnce(\n \"RadioGroup: Passing ReactNode to legend is deprecated. Use a plain string with inline markdown instead.\",\n );\n }\n\n const errorMessages =\n typeof error === \"boolean\" || error === undefined ? undefined : error;\n\n const hasHelperText = hint || errorMessages || warning || description;\n\n const ariaDescribedBy =\n [hasHelperText && helperUid, moreInfo && moreInfoUid]\n .filter(Boolean)\n .join(\" \") || undefined;\n\n const contextValue = useMemo(\n () => ({\n hasError: !!error,\n }),\n [error],\n );\n\n return (\n <fieldset\n role=\"radiogroup\"\n data-anv=\"radio-group\"\n className={RadioGroupClassNames}\n aria-required={required}\n style={styleCombined}\n ref={ref}\n onFocus={onFocus}\n onBlur={onBlur}\n {...rest}\n aria-describedby={ariaDescribedBy}\n >\n <legend className={styles[\"legend\"]}>\n {/* TODO(v4.0.0): remove typeof check — legend will always be string */}\n {typeof legend === \"string\" ? stripInlineMarkdown(legend) : legend}\n {required && \", required\"}\n </legend>\n {!hideLabel && (\n <div className={styles[\"label-row\"]}>\n <FieldLabel\n aria-hidden\n required={required}\n moreInfo={moreInfo}\n moreInfoId={moreInfo ? moreInfoUid : undefined}\n {...legendProps}\n className={legendProps?.className}\n >\n {legend}\n </FieldLabel>\n </div>\n )}\n <RadioGroupContext.Provider value={contextValue}>\n <div\n className={styles[\"children\"]}\n style={{\n flexDirection: layoutStyles?.flexDirection,\n gap: layoutStyles?.gap,\n }}\n >\n {children}\n </div>\n </RadioGroupContext.Provider>\n {hasHelperText ? (\n <FieldMessage\n id={helperUid}\n hint={hint}\n error={errorMessages}\n warning={warning}\n description={description}\n />\n ) : null}\n </fieldset>\n );\n },\n);\n\nRadioGroup.displayName = \"RadioGroup\";\n","import * as React from \"react\";\nconst SvgRadioButtonUnchecked = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" }));\nexport default SvgRadioButtonUnchecked;\n","import * as React from \"react\";\nconst SvgRadioButtonChecked = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" }), /* @__PURE__ */ React.createElement(\"circle\", { cx: 12, cy: 12, r: 5 }));\nexport default SvgRadioButtonChecked;\n","import {\n forwardRef,\n ComponentPropsWithoutRef,\n ChangeEvent,\n ReactElement,\n useId,\n useState,\n} from \"react\";\nimport cx from \"classnames\";\nimport { Icon } from \"../../Icon\";\nimport Radio_outline from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_unchecked.svg\";\nimport Radio_checked from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_checked.svg\";\nimport styles from \"../Radio.module.scss\";\nimport { LayoutUtilProps, Svg } from \"../../../types\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { Helper, HelperProps } from \"../../../internal/components\";\nimport { RadioState } from \"../types\";\nimport { useRadioGroupContext } from \"./RadioGroupContext\";\n\n/**\n * Props for the Radio component\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\">\n * @extends LayoutUtilProps\n */\nexport type RadioProps = Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\"> &\n LayoutUtilProps & {\n /**\n * Controlled state\n * @default false\n */\n checked?: boolean;\n\n /**\n * Uncontrolled state\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Callback when radio is changed\n */\n onChange?: (e: ChangeEvent<HTMLInputElement>, state?: RadioState) => void;\n\n /**\n * Label for Radio\n * @remarks This should either be a string or have text content inside for accessibility\n */\n label?: ReactElement | string;\n\n /**\n * Error state for the radio\n * @default false\n */\n error?: boolean;\n\n /**\n * Icon overrides for checked and unchecked states\n */\n icons?: {\n /**\n * Icon to display when radio is checked\n */\n checked?: Svg;\n /**\n * Icon to display when radio is unchecked\n */\n unchecked?: Svg;\n };\n\n /**\n * Description text to display below the radio\n */\n description?: HelperProps[\"description\"];\n\n /**\n * When true, hides the radio for visual users\n * @default false\n */\n hideRadio?: boolean;\n\n /**\n * Additional className applied to the label wrapper span\n */\n labelWrapperClassName?: string;\n };\n\nconst RadioElement = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n checked: checkedProp,\n defaultChecked,\n value,\n icons,\n error,\n label,\n onChange,\n style,\n description,\n hideRadio = false,\n labelWrapperClassName,\n ...rest\n } = componentProps;\n const [checked, setChecked] = useState(checkedProp ?? defaultChecked);\n\n const groupContext = useRadioGroupContext();\n\n const {\n checked: checkedIcon = Radio_checked,\n unchecked: uncheckedIcon = Radio_outline,\n } = { ...icons };\n\n const isControlled = typeof checkedProp !== \"undefined\";\n\n const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) {\n setChecked(e.target.checked);\n }\n onChange?.(e, { value, checked: checkedProp ?? e.target.checked });\n };\n\n const helperUid = useId();\n\n // Combine local error state with group error state\n const hasError = error || groupContext?.hasError;\n\n const wrapperClassNames = cx(\n styles[\"wrapper\"],\n { [styles[\"focus\"]]: hideRadio },\n className,\n );\n\n const radioClassNames = cx(styles[\"radio\"], {\n [styles[\"radio-error\"]]: hasError,\n [styles[\"radio-checked\"]]: isControlled ? checkedProp : checked,\n });\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <div className={wrapperClassNames} style={styleCombined} data-anv=\"radio\">\n <label className={radioClassNames}>\n <input\n type=\"radio\"\n aria-checked={isControlled ? checkedProp : checked}\n checked={isControlled ? checkedProp : undefined}\n defaultChecked={defaultChecked}\n value={value}\n onChange={onChangeHandler}\n aria-describedby={description ? helperUid : undefined}\n ref={ref}\n {...rest}\n />\n\n <span\n className={cx(styles[\"icon-wrapper\"], {\n [styles[\"sr-only\"]]: hideRadio,\n })}\n aria-hidden\n >\n <Icon\n size=\"large\"\n svg={\n (isControlled ? checkedProp : checked)\n ? checkedIcon\n : uncheckedIcon\n }\n className={styles[\"icon\"]}\n />\n </span>\n\n <span\n className={cx(labelWrapperClassName, {\n [styles[\"focus-label\"]]: hideRadio,\n })}\n >\n {label}\n </span>\n </label>\n\n {description ? (\n <div className={styles[\"helper-wrapper\"]}>\n <Helper id={helperUid} description={description} />\n </div>\n ) : null}\n </div>\n );\n});\n\nRadioElement.displayName = \"RadioElement\";\n\n/**\n * Radio component for single selection from a group of options.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable icons for checked and unchecked states\n * - Error state with visual indicators\n * - Description text support\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Optional radio hiding for visual users\n * - Flexible labeling options\n * - Group support via Radio.Group\n *\n * @example\n * <Radio\n * label=\"Option 1\"\n * value=\"option1\"\n * checked={selectedValue === \"option1\"}\n * onChange={(e, state) => setSelectedValue(state?.value)}\n * />\n *\n * @example\n * <Radio\n * label=\"Custom styled option\"\n * value=\"custom\"\n * icons={{\n * checked: CustomCheckedIcon,\n * unchecked: CustomUncheckedIcon\n * }}\n * description=\"This option has custom styling\"\n * />\n *\n * @example\n * <Radio.Group legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </Radio.Group>\n */\nexport const Radio = RadioElement;\n"],"names":["Radio_checked","Radio_outline"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Radio-D5WyQN2i.js","sources":["../src/components/Radio/internal/RadioGroupContext.tsx","../src/components/Radio/RadioGroup.tsx","../../hammer-icon/mdi/two-tone/radio_button_unchecked.svg","../../hammer-icon/mdi/two-tone/radio_button_checked.svg","../src/components/Radio/internal/Radio.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/**\n * Context value for RadioGroup\n * @property {boolean} hasError - Whether the group has an error state\n */\nexport type RadioGroupContextValue = {\n /**\n * Whether the radio group has an error state\n */\n hasError: boolean;\n};\n\n/**\n * Context for sharing state between RadioGroup and child Radio components\n */\nexport const RadioGroupContext = createContext<\n RadioGroupContextValue | undefined\n>(undefined);\n\n/**\n * Hook to access RadioGroup context from child Radio components\n * @returns RadioGroupContextValue if inside a RadioGroup, undefined otherwise\n */\nexport const useRadioGroupContext = () => {\n return useContext(RadioGroupContext);\n};\n","import {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactElement,\n useId,\n useMemo,\n} from \"react\";\nimport { stripInlineMarkdown, warnOnce } from \"../../internal/functions\";\nimport styles from \"./Radio.module.scss\";\nimport cx from \"classnames\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { FieldLabel } from \"../FieldLabel\";\nimport type { FieldLabelProps as FieldLabelElementProps } from \"../FieldLabel\";\nimport { FieldLabelProps as InternalFieldLabelProps } from \"../../internal/types\";\nimport { HelperProps } from \"../../internal/components\";\nimport FieldMessage, { warnDeprecatedErrorUsage } from \"../FieldMessage\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\n/**\n * Props for the RadioGroup component\n * @extends ComponentPropsWithoutRef<\"fieldset\">\n * @extends LayoutUtilProps\n * @extends Omit<InternalFieldLabelProps, \"labelProps\">\n */\nexport type RadioGroupProps = ComponentPropsWithoutRef<\"fieldset\"> &\n LayoutUtilProps &\n Omit<InternalFieldLabelProps, \"labelProps\"> & {\n /**\n * Required flag for label\n * @remarks This does not enforce error when nothing is selected\n */\n required?: boolean;\n\n // TODO(v4.0.0): type becomes string only\n /**\n * Legend for the fieldset.\n * Passing `ReactNode` is deprecated — use a plain string with inline markdown instead.\n */\n legend: string | ReactElement;\n\n /**\n * Additional props for the legend `FieldLabel` (for example `aiMark`, `className`).\n */\n legendProps?: Omit<FieldLabelElementProps, \"el\">;\n\n /**\n * When `true`, hides the visual label row. The sr-only `<legend>` always remains for AT.\n * @default false\n */\n hideLabel?: boolean;\n\n /**\n * Error state for the field. Pass `true` to indicate error styling without a message.\n * Pass a string, string[], or ReactElement (deprecated) for error messages.\n */\n error?: boolean | string | ReactElement | string[];\n\n /**\n * @deprecated No longer used. Error messages always use `aria-live=\"assertive\"`.\n */\n errorAriaLive?: HelperProps[\"errorAriaLive\"];\n\n /**\n * Warning message(s) to display. Supports a single string or an array of strings.\n */\n warning?: string | string[];\n\n /**\n * Description text to display below the field.\n */\n description?: HelperProps[\"description\"];\n\n /**\n * Hint text to display below the field.\n */\n hint?: HelperProps[\"hint\"];\n };\n\n/**\n * RadioGroup component for grouping related radio options.\n *\n * Features:\n * - Groups multiple radio options together\n * - Legend support for group labeling\n * - Required field indication\n * - Accessibility support with proper fieldset semantics\n * - Layout utility props for positioning and spacing\n * - Focus and blur event handling\n * - More info support for additional context\n * - Automatic alignment based on flex direction\n *\n * @example\n * <RadioGroup legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </RadioGroup>\n *\n * @example\n * <RadioGroup\n * legend=\"Horizontal layout\"\n * flexDirection=\"row\"\n * gap=\"4\"\n * >\n * <Radio label=\"Yes\" value=\"yes\" />\n * <Radio label=\"No\" value=\"no\" />\n * </RadioGroup>\n */\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(\n (props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n children,\n description,\n error,\n errorAriaLive: _errorAriaLive,\n hint,\n warning,\n legend,\n moreInfo,\n legendProps,\n onBlur,\n onFocus,\n required,\n style,\n hideLabel = false,\n ...rest\n } = componentProps;\n\n const RadioGroupClassNames = cx(styles[\"radio-group\"], className);\n const helperUid = useId();\n const moreInfoUid = useId();\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n alignItems:\n layoutStyles?.alignItems ??\n (layoutStyles?.flexDirection === \"row\" ? \"center\" : undefined),\n };\n\n warnDeprecatedErrorUsage(\"RadioGroup\", error);\n\n // TODO(v4.0.0): remove once legend is string only\n if (typeof legend !== \"string\") {\n warnOnce(\n \"RadioGroup: Passing ReactNode to legend is deprecated. Use a plain string with inline markdown instead.\",\n );\n }\n\n const errorMessages =\n typeof error === \"boolean\" || error === undefined ? undefined : error;\n\n const hasHelperText = hint || errorMessages || warning || description;\n\n const ariaDescribedBy =\n [hasHelperText && helperUid, moreInfo && moreInfoUid]\n .filter(Boolean)\n .join(\" \") || undefined;\n\n const contextValue = useMemo(\n () => ({\n hasError: !!error,\n }),\n [error],\n );\n\n return (\n <fieldset\n role=\"radiogroup\"\n data-anv=\"radio-group\"\n className={RadioGroupClassNames}\n aria-required={required}\n style={styleCombined}\n ref={ref}\n onFocus={onFocus}\n onBlur={onBlur}\n {...rest}\n aria-describedby={ariaDescribedBy}\n >\n <legend className={styles[\"legend\"]}>\n {/* TODO(v4.0.0): remove typeof check — legend will always be string */}\n {typeof legend === \"string\" ? stripInlineMarkdown(legend) : legend}\n {required && \", required\"}\n </legend>\n {!hideLabel && (\n <div className={styles[\"label-row\"]}>\n <FieldLabel\n aria-hidden\n required={required}\n moreInfo={moreInfo}\n moreInfoId={moreInfo ? moreInfoUid : undefined}\n {...legendProps}\n className={legendProps?.className}\n >\n {legend}\n </FieldLabel>\n </div>\n )}\n <RadioGroupContext.Provider value={contextValue}>\n <div\n className={styles[\"children\"]}\n style={{\n flexDirection: layoutStyles?.flexDirection,\n gap: layoutStyles?.gap,\n }}\n >\n {children}\n </div>\n </RadioGroupContext.Provider>\n {hasHelperText ? (\n <FieldMessage\n id={helperUid}\n hint={hint}\n error={errorMessages}\n warning={warning}\n description={description}\n />\n ) : null}\n </fieldset>\n );\n },\n);\n\nRadioGroup.displayName = \"RadioGroup\";\n","import * as React from \"react\";\nconst SvgRadioButtonUnchecked = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" }));\nexport default SvgRadioButtonUnchecked;\n","import * as React from \"react\";\nconst SvgRadioButtonChecked = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" }), /* @__PURE__ */ React.createElement(\"circle\", { cx: 12, cy: 12, r: 5 }));\nexport default SvgRadioButtonChecked;\n","import {\n forwardRef,\n ComponentPropsWithoutRef,\n ChangeEvent,\n ReactElement,\n useId,\n useState,\n} from \"react\";\nimport cx from \"classnames\";\nimport { Icon } from \"../../Icon\";\nimport Radio_outline from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_unchecked.svg\";\nimport Radio_checked from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_checked.svg\";\nimport styles from \"../Radio.module.scss\";\nimport { LayoutUtilProps, Svg } from \"../../../types\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { Helper, HelperProps } from \"../../../internal/components\";\nimport { RadioState } from \"../types\";\nimport { useRadioGroupContext } from \"./RadioGroupContext\";\n\n/**\n * Props for the Radio component\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\">\n * @extends LayoutUtilProps\n */\nexport type RadioProps = Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\"> &\n LayoutUtilProps & {\n /**\n * Controlled state\n * @default false\n */\n checked?: boolean;\n\n /**\n * Uncontrolled state\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Callback when radio is changed\n */\n onChange?: (e: ChangeEvent<HTMLInputElement>, state?: RadioState) => void;\n\n /**\n * Label for Radio\n * @remarks This should either be a string or have text content inside for accessibility\n */\n label?: ReactElement | string;\n\n /**\n * Error state for the radio\n * @default false\n */\n error?: boolean;\n\n /**\n * Icon overrides for checked and unchecked states\n */\n icons?: {\n /**\n * Icon to display when radio is checked\n */\n checked?: Svg;\n /**\n * Icon to display when radio is unchecked\n */\n unchecked?: Svg;\n };\n\n /**\n * Description text to display below the radio\n */\n description?: HelperProps[\"description\"];\n\n /**\n * When true, hides the radio for visual users\n * @default false\n */\n hideRadio?: boolean;\n\n /**\n * Additional className applied to the label wrapper span\n */\n labelWrapperClassName?: string;\n };\n\nconst RadioElement = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n checked: checkedProp,\n defaultChecked,\n value,\n icons,\n error,\n label,\n onChange,\n style,\n description,\n hideRadio = false,\n labelWrapperClassName,\n ...rest\n } = componentProps;\n const [checked, setChecked] = useState(checkedProp ?? defaultChecked);\n\n const groupContext = useRadioGroupContext();\n\n const {\n checked: checkedIcon = Radio_checked,\n unchecked: uncheckedIcon = Radio_outline,\n } = { ...icons };\n\n const isControlled = typeof checkedProp !== \"undefined\";\n\n const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) {\n setChecked(e.target.checked);\n }\n onChange?.(e, { value, checked: checkedProp ?? e.target.checked });\n };\n\n const helperUid = useId();\n\n // Combine local error state with group error state\n const hasError = error || groupContext?.hasError;\n\n const wrapperClassNames = cx(\n styles[\"wrapper\"],\n { [styles[\"focus\"]]: hideRadio },\n className,\n );\n\n const radioClassNames = cx(styles[\"radio\"], {\n [styles[\"radio-error\"]]: hasError,\n [styles[\"radio-checked\"]]: isControlled ? checkedProp : checked,\n });\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <div className={wrapperClassNames} style={styleCombined} data-anv=\"radio\">\n <label className={radioClassNames}>\n <input\n type=\"radio\"\n aria-checked={isControlled ? checkedProp : checked}\n checked={isControlled ? checkedProp : undefined}\n defaultChecked={defaultChecked}\n value={value}\n onChange={onChangeHandler}\n aria-describedby={description ? helperUid : undefined}\n ref={ref}\n {...rest}\n />\n\n <span\n className={cx(styles[\"icon-wrapper\"], {\n [styles[\"sr-only\"]]: hideRadio,\n })}\n aria-hidden\n >\n <Icon\n size=\"large\"\n svg={\n (isControlled ? checkedProp : checked)\n ? checkedIcon\n : uncheckedIcon\n }\n className={styles[\"icon\"]}\n />\n </span>\n\n <span\n className={cx(labelWrapperClassName, {\n [styles[\"focus-label\"]]: hideRadio,\n })}\n >\n {label}\n </span>\n </label>\n\n {description ? (\n <div className={styles[\"helper-wrapper\"]}>\n <Helper id={helperUid} description={description} />\n </div>\n ) : null}\n </div>\n );\n});\n\nRadioElement.displayName = \"RadioElement\";\n\n/**\n * Radio component for single selection from a group of options.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable icons for checked and unchecked states\n * - Error state with visual indicators\n * - Description text support\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Optional radio hiding for visual users\n * - Flexible labeling options\n * - Group support via Radio.Group\n *\n * @example\n * <Radio\n * label=\"Option 1\"\n * value=\"option1\"\n * checked={selectedValue === \"option1\"}\n * onChange={(e, state) => setSelectedValue(state?.value)}\n * />\n *\n * @example\n * <Radio\n * label=\"Custom styled option\"\n * value=\"custom\"\n * icons={{\n * checked: CustomCheckedIcon,\n * unchecked: CustomUncheckedIcon\n * }}\n * description=\"This option has custom styling\"\n * />\n *\n * @example\n * <Radio.Group legend=\"Choose your preference\" required>\n * <Radio label=\"Option A\" value=\"a\" />\n * <Radio label=\"Option B\" value=\"b\" />\n * <Radio label=\"Option C\" value=\"c\" />\n * </Radio.Group>\n */\nexport const Radio = RadioElement;\n"],"names":["Radio_checked","Radio_outline"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,iBAAA,GAAoB,cAE/B,MAAS,CAAA;AAMJ,MAAM,uBAAuB,MAAM;AACxC,EAAA,OAAO,WAAW,iBAAiB,CAAA;AACrC,CAAA;;ACmFO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA,EAAe,cAAA;AAAA,MACf,IAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,GAAY,KAAA;AAAA,MACZ,GAAG;AAAA,KACL,GAAI,cAAA;AAEJ,IAAA,MAAM,oBAAA,GAAuB,EAAA,CAAG,MAAA,CAAO,aAAa,GAAG,SAAS,CAAA;AAChE,IAAA,MAAM,YAAY,KAAA,EAAM;AACxB,IAAA,MAAM,cAAc,KAAA,EAAM;AAE1B,IAAA,MAAM,aAAA,GAAgB;AAAA,MACpB,GAAG,KAAA;AAAA,MACH,GAAG,YAAA;AAAA,MACH,YACE,YAAA,EAAc,UAAA,KACb,YAAA,EAAc,aAAA,KAAkB,QAAQ,QAAA,GAAW,MAAA;AAAA,KACxD;AAEA,IAAA,wBAAA,CAAyB,cAAc,KAAK,CAAA;AAG5C,IAAA,IAAI,OAAO,WAAW,QAAA,EAAU;AAC9B,MAAA,QAAA;AAAA,QACE;AAAA,OACF;AAAA,IACF;AAEA,IAAA,MAAM,gBACJ,OAAO,KAAA,KAAU,SAAA,IAAa,KAAA,KAAU,SAAY,MAAA,GAAY,KAAA;AAElE,IAAA,MAAM,aAAA,GAAgB,IAAA,IAAQ,aAAA,IAAiB,OAAA,IAAW,WAAA;AAE1D,IAAA,MAAM,eAAA,GACJ,CAAC,aAAA,IAAiB,SAAA,EAAW,QAAA,IAAY,WAAW,CAAA,CACjD,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AAElB,IAAA,MAAM,YAAA,GAAe,OAAA;AAAA,MACnB,OAAO;AAAA,QACL,QAAA,EAAU,CAAC,CAAC;AAAA,OACd,CAAA;AAAA,MACA,CAAC,KAAK;AAAA,KACR;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,YAAA;AAAA,QACL,UAAA,EAAS,aAAA;AAAA,QACT,SAAA,EAAW,oBAAA;AAAA,QACX,eAAA,EAAe,QAAA;AAAA,QACf,KAAA,EAAO,aAAA;AAAA,QACP,GAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,kBAAA,EAAkB,eAAA;AAAA,QAElB,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAW,MAAA,CAAO,QAAQ,CAAA,EAE/B,QAAA,EAAA;AAAA,YAAA,OAAO,MAAA,KAAW,QAAA,GAAW,mBAAA,CAAoB,MAAM,CAAA,GAAI,MAAA;AAAA,YAC3D,QAAA,IAAY;AAAA,WAAA,EACf,CAAA;AAAA,UACC,CAAC,SAAA,oBACA,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,WAAW,CAAA,EAChC,QAAA,kBAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAW,IAAA;AAAA,cACX,QAAA;AAAA,cACA,QAAA;AAAA,cACA,UAAA,EAAY,WAAW,WAAA,GAAc,MAAA;AAAA,cACpC,GAAG,WAAA;AAAA,cACJ,WAAW,WAAA,EAAa,SAAA;AAAA,cAEvB,QAAA,EAAA;AAAA;AAAA,WACH,EACF,CAAA;AAAA,0BAEF,GAAA,CAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,OAAO,YAAA,EACjC,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,OAAO,UAAU,CAAA;AAAA,cAC5B,KAAA,EAAO;AAAA,gBACL,eAAe,YAAA,EAAc,aAAA;AAAA,gBAC7B,KAAK,YAAA,EAAc;AAAA,eACrB;AAAA,cAEC;AAAA;AAAA,WACH,EACF,CAAA;AAAA,UACC,aAAA,mBACC,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAI,SAAA;AAAA,cACJ,IAAA;AAAA,cACA,KAAA,EAAO,aAAA;AAAA,cACP,OAAA;AAAA,cACA;AAAA;AAAA,WACF,GACE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;ACjOpB,MAAC,uBAAuB,GAAG,CAAC,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,8HAA8H,EAAE,CAAC;;ACAzW,MAAC,qBAAqB,GAAG,CAAC,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,8HAA8H,EAAE,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;;ACqFrb,MAAM,YAAA,GAAe,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,OAAA,EAAS,WAAA;AAAA,IACT,cAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,qBAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,cAAA;AACJ,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAA,CAAS,eAAe,cAAc,CAAA;AAEpE,EAAA,MAAM,eAAe,oBAAA,EAAqB;AAE1C,EAAA,MAAM;AAAA,IACJ,SAAS,WAAA,GAAcA,qBAAA;AAAA,IACvB,WAAW,aAAA,GAAgBC;AAAA,GAC7B,GAAI,EAAE,GAAG,KAAA,EAAM;AAEf,EAAA,MAAM,YAAA,GAAe,OAAO,WAAA,KAAgB,WAAA;AAE5C,EAAA,MAAM,eAAA,GAAkB,CAAC,CAAA,KAAqC;AAC5D,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA,UAAA,CAAW,CAAA,CAAE,OAAO,OAAO,CAAA;AAAA,IAC7B;AACA,IAAA,QAAA,GAAW,CAAA,EAAG,EAAE,KAAA,EAAO,OAAA,EAAS,eAAe,CAAA,CAAE,MAAA,CAAO,SAAS,CAAA;AAAA,EACnE,CAAA;AAEA,EAAA,MAAM,YAAY,KAAA,EAAM;AAGxB,EAAA,MAAM,QAAA,GAAW,SAAS,YAAA,EAAc,QAAA;AAExC,EAAA,MAAM,iBAAA,GAAoB,EAAA;AAAA,IACxB,OAAO,SAAS,CAAA;AAAA,IAChB,EAAE,CAAC,MAAA,CAAO,OAAO,CAAC,GAAG,SAAA,EAAU;AAAA,IAC/B;AAAA,GACF;AAEA,EAAA,MAAM,eAAA,GAAkB,EAAA,CAAG,MAAA,CAAO,OAAO,CAAA,EAAG;AAAA,IAC1C,CAAC,MAAA,CAAO,aAAa,CAAC,GAAG,QAAA;AAAA,IACzB,CAAC,MAAA,CAAO,eAAe,CAAC,GAAG,eAAe,WAAA,GAAc;AAAA,GACzD,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,GAAG,KAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAmB,KAAA,EAAO,aAAA,EAAe,YAAS,OAAA,EAChE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OAAA,EAAA,EAAM,WAAW,eAAA,EAChB,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,OAAA;AAAA,UACL,cAAA,EAAc,eAAe,WAAA,GAAc,OAAA;AAAA,UAC3C,OAAA,EAAS,eAAe,WAAA,GAAc,MAAA;AAAA,UACtC,cAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAA,EAAU,eAAA;AAAA,UACV,kBAAA,EAAkB,cAAc,SAAA,GAAY,MAAA;AAAA,UAC5C,GAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,sBAEA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,cAAc,CAAA,EAAG;AAAA,YACpC,CAAC,MAAA,CAAO,SAAS,CAAC,GAAG;AAAA,WACtB,CAAA;AAAA,UACD,aAAA,EAAW,IAAA;AAAA,UAEX,QAAA,kBAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,OAAA;AAAA,cACL,GAAA,EAAA,CACG,YAAA,GAAe,WAAA,GAAc,OAAA,IAC1B,WAAA,GACA,aAAA;AAAA,cAEN,SAAA,EAAW,OAAO,MAAM;AAAA;AAAA;AAC1B;AAAA,OACF;AAAA,sBAEA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,GAAG,qBAAA,EAAuB;AAAA,YACnC,CAAC,MAAA,CAAO,aAAa,CAAC,GAAG;AAAA,WAC1B,CAAA;AAAA,UAEA,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EACF,CAAA;AAAA,IAEC,WAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,gBAAgB,CAAA,EACrC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,EAAA,EAAI,SAAA,EAAW,WAAA,EAA0B,GACnD,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ,CAAC,CAAA;AAED,YAAA,CAAa,WAAA,GAAc,cAAA;AA0CpB,MAAM,KAAA,GAAQ;;;;"}
|
package/dist/Radio.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
.anvil2 {.
|
|
1
|
+
.anvil2 {._wrapper_1jbrw_1 {
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
gap: var(--a2-size-1, 0.25rem);
|
|
5
|
-
}.
|
|
5
|
+
}._radio_1jbrw_7 {
|
|
6
6
|
--a2-internal-radio-focus-ring-color: var(--a2-mod-radio-focus-ring-color);
|
|
7
7
|
--a2-internal-radio-foreground-color: var(
|
|
8
8
|
--a2-mod-radio-unchecked-foreground-color
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
--a2-mod-radio-checked-icon-color-active: var(--a2-radio-default-checked-icon-color-active, var(--a2-foreground-color-primary-active, light-dark(var(--a2-color-blue-800, #003472), var(--a2-color-blue-200, #9ecaff))));
|
|
20
20
|
--a2-mod-radio-checked-icon-color-disabled: var(--a2-radio-default-checked-icon-color-disabled, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
|
|
21
21
|
--a2-mod-radio-checked-icon-color-hover: var(--a2-radio-default-checked-icon-color-hover, var(--a2-foreground-color-primary-hover, light-dark(var(--a2-color-blue-700, #1d4ca3), var(--a2-color-blue-200, #9ecaff))));
|
|
22
|
+
--a2-mod-radio-cursor: pointer;
|
|
22
23
|
--a2-mod-radio-error-checked-foreground-color: var(--a2-radio-error-checked-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
|
|
23
24
|
--a2-mod-radio-error-checked-icon-background-color: var(--a2-radio-error-checked-icon-background-color, var(--a2-background-color-transparent-danger, rgba(0, 0, 0, 0)));
|
|
24
25
|
--a2-mod-radio-error-checked-icon-background-color-active: var(--a2-radio-error-checked-icon-background-color-active, var(--a2-background-color-transparent-danger-active, light-dark(rgba(255, 57, 20, 0.3019607843), rgba(255, 134, 112, 0.2509803922))));
|
|
@@ -57,27 +58,29 @@
|
|
|
57
58
|
display: revert-layer;
|
|
58
59
|
align-items: flex-start;
|
|
59
60
|
color: var(--a2-internal-radio-foreground-color);
|
|
61
|
+
cursor: var(--a2-mod-radio-cursor);
|
|
60
62
|
display: inline-flex;
|
|
61
63
|
font-size: var(--a2-font-size-400, 1rem);
|
|
62
64
|
gap: var(--a2-size-2, 0.5rem);
|
|
63
65
|
line-height: 1.5;
|
|
64
66
|
position: relative;
|
|
65
|
-
}.
|
|
67
|
+
}._radio_1jbrw_7:hover:not(:has(input:disabled)), ._radio_1jbrw_7:has(input[data-interactive=hover]:not(:disabled)) {
|
|
66
68
|
--a2-internal-radio-icon-background-color: var(
|
|
67
69
|
--a2-mod-radio-unchecked-icon-background-color-hover
|
|
68
70
|
);
|
|
69
|
-
}.
|
|
71
|
+
}._radio_1jbrw_7:active:not(:has(input:disabled)), ._radio_1jbrw_7:has(input[data-interactive=active]:not(:disabled)) {
|
|
70
72
|
--a2-internal-radio-icon-background-color: var(
|
|
71
73
|
--a2-mod-radio-unchecked-icon-background-color-active
|
|
72
74
|
);
|
|
73
|
-
}.
|
|
75
|
+
}._radio_1jbrw_7:has(input:disabled) {
|
|
74
76
|
--a2-internal-radio-icon-color: var(
|
|
75
77
|
--a2-mod-radio-unchecked-icon-color-disabled
|
|
76
78
|
);
|
|
79
|
+
--a2-mod-radio-cursor: not-allowed;
|
|
77
80
|
opacity: var(--a2-opacity-disabled, 0.6);
|
|
78
|
-
}.
|
|
81
|
+
}._radio_1jbrw_7:has(input:disabled) ._icon-wrapper_1jbrw_87 {
|
|
79
82
|
outline-width: 0;
|
|
80
|
-
}.
|
|
83
|
+
}._radio_1jbrw_7 input {
|
|
81
84
|
border: 0;
|
|
82
85
|
clip: rect(0, 0, 0, 0);
|
|
83
86
|
height: 1px;
|
|
@@ -88,16 +91,16 @@
|
|
|
88
91
|
position: absolute;
|
|
89
92
|
white-space: nowrap;
|
|
90
93
|
width: 1px;
|
|
91
|
-
}._required-
|
|
94
|
+
}._required-asterisk_1jbrw_103 {
|
|
92
95
|
color: var(--a2-foreground-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)));
|
|
93
96
|
margin-inline-start: var(--a2-size-1, 0.25rem);
|
|
94
|
-
}._focus-
|
|
97
|
+
}._focus-label_1jbrw_108 {
|
|
95
98
|
color: var(--a2-internal-radio-foreground-color);
|
|
96
99
|
outline: 0 solid var(--a2-mod-radio-label-focus-ring-color, --a2-internal-radio-focus-ring-color);
|
|
97
100
|
outline-offset: var(--a2-size-half, 0.125rem);
|
|
98
101
|
border-radius: var(--a2-mod-radio-label-border-radius);
|
|
99
102
|
transition: background-color var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1)), outline var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
|
|
100
|
-
}._icon-
|
|
103
|
+
}._icon-wrapper_1jbrw_87 {
|
|
101
104
|
background-color: var(--a2-internal-radio-icon-background-color);
|
|
102
105
|
border-radius: var(--a2-radio-border-radius, var(--a2-border-radius-circular, 100%));
|
|
103
106
|
display: inline-flex;
|
|
@@ -105,22 +108,22 @@
|
|
|
105
108
|
position: relative;
|
|
106
109
|
transition: background-color var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1)), outline var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
|
|
107
110
|
}@media (prefers-reduced-motion: reduce) {
|
|
108
|
-
._icon-
|
|
111
|
+
._icon-wrapper_1jbrw_87 {
|
|
109
112
|
transition-duration: 0.01ms !important;
|
|
110
113
|
transition-property: outline;
|
|
111
114
|
}
|
|
112
|
-
}._helper-
|
|
115
|
+
}._helper-wrapper_1jbrw_131 {
|
|
113
116
|
margin-inline-start: var(--a2-size-8, 2rem);
|
|
114
|
-
}.
|
|
117
|
+
}._icon_1jbrw_87 {
|
|
115
118
|
border-radius: var(--a2-radio-border-radius, var(--a2-border-radius-circular, 100%));
|
|
116
119
|
color: var(--a2-internal-radio-icon-color);
|
|
117
|
-
}input:focus-visible ~ ._icon-
|
|
118
|
-
input:focus-visible ~ ._focus-
|
|
119
|
-
input[data-interactive=focus-visible] ~ ._icon-
|
|
120
|
-
input[data-interactive=focus-visible] ~ ._focus-
|
|
120
|
+
}input:focus-visible ~ ._icon-wrapper_1jbrw_87,
|
|
121
|
+
input:focus-visible ~ ._focus-label_1jbrw_108,
|
|
122
|
+
input[data-interactive=focus-visible] ~ ._icon-wrapper_1jbrw_87,
|
|
123
|
+
input[data-interactive=focus-visible] ~ ._focus-label_1jbrw_108 {
|
|
121
124
|
outline-width: var(--a2-size-half, 0.125rem);
|
|
122
|
-
}._radio-
|
|
123
|
-
._radio-
|
|
125
|
+
}._radio-checked_1jbrw_147,
|
|
126
|
+
._radio-indeterminate_1jbrw_148 {
|
|
124
127
|
--a2-internal-radio-foreground-color: var(
|
|
125
128
|
--a2-mod-radio-checked-foreground-color
|
|
126
129
|
);
|
|
@@ -128,30 +131,30 @@ input[data-interactive=focus-visible] ~ ._focus-label_bz07n_105 {
|
|
|
128
131
|
--a2-mod-radio-checked-icon-background-color
|
|
129
132
|
);
|
|
130
133
|
--a2-internal-radio-icon-color: var(--a2-mod-radio-checked-icon-color);
|
|
131
|
-
}._radio-
|
|
132
|
-
._radio-
|
|
133
|
-
._radio-
|
|
134
|
+
}._radio-checked_1jbrw_147:hover:not(:has(input:disabled)), ._radio-checked_1jbrw_147:has(input[data-interactive=hover]:not(:disabled)),
|
|
135
|
+
._radio-indeterminate_1jbrw_148:hover:not(:has(input:disabled)),
|
|
136
|
+
._radio-indeterminate_1jbrw_148:has(input[data-interactive=hover]:not(:disabled)) {
|
|
134
137
|
--a2-internal-radio-icon-background-color: var(
|
|
135
138
|
--a2-mod-radio-checked-icon-background-color-hover
|
|
136
139
|
);
|
|
137
140
|
--a2-internal-radio-icon-color: var(
|
|
138
141
|
--a2-mod-radio-checked-icon-color-hover
|
|
139
142
|
);
|
|
140
|
-
}._radio-
|
|
141
|
-
._radio-
|
|
142
|
-
._radio-
|
|
143
|
+
}._radio-checked_1jbrw_147:active:not(:has(input:disabled)), ._radio-checked_1jbrw_147:has(input[data-interactive=active]:not(:disabled)),
|
|
144
|
+
._radio-indeterminate_1jbrw_148:active:not(:has(input:disabled)),
|
|
145
|
+
._radio-indeterminate_1jbrw_148:has(input[data-interactive=active]:not(:disabled)) {
|
|
143
146
|
--a2-internal-radio-icon-background-color: var(
|
|
144
147
|
--a2-mod-radio-checked-icon-background-color-active
|
|
145
148
|
);
|
|
146
149
|
--a2-internal-radio-icon-color: var(
|
|
147
150
|
--a2-mod-radio-checked-icon-color-active
|
|
148
151
|
);
|
|
149
|
-
}._radio-
|
|
150
|
-
._radio-
|
|
152
|
+
}._radio-checked_1jbrw_147:has(input:disabled),
|
|
153
|
+
._radio-indeterminate_1jbrw_148:has(input:disabled) {
|
|
151
154
|
--a2-internal-radio-icon-color: var(
|
|
152
155
|
--a2-mod-radio-checked-icon-color-disabled
|
|
153
156
|
);
|
|
154
|
-
}._radio-
|
|
157
|
+
}._radio-error_1jbrw_184 {
|
|
155
158
|
--a2-internal-radio-focus-ring-color: var(
|
|
156
159
|
--a2-mod-radio-error-focus-ring-color
|
|
157
160
|
);
|
|
@@ -164,25 +167,25 @@ input[data-interactive=focus-visible] ~ ._focus-label_bz07n_105 {
|
|
|
164
167
|
--a2-internal-radio-icon-color: var(
|
|
165
168
|
--a2-mod-radio-error-unchecked-icon-color
|
|
166
169
|
);
|
|
167
|
-
}._radio-
|
|
170
|
+
}._radio-error_1jbrw_184:hover:not(:has(input:disabled)), ._radio-error_1jbrw_184:has(input[data-interactive=hover]:not(:disabled)) {
|
|
168
171
|
--a2-internal-radio-icon-background-color: var(
|
|
169
172
|
--a2-mod-radio-error-unchecked-icon-background-color-hover
|
|
170
173
|
);
|
|
171
174
|
--a2-internal-radio-icon-color: var(
|
|
172
175
|
--a2-mod-radio-error-unchecked-icon-color-hover
|
|
173
176
|
);
|
|
174
|
-
}._radio-
|
|
177
|
+
}._radio-error_1jbrw_184:active:not(:has(input:disabled)), ._radio-error_1jbrw_184:has(input[data-interactive=active]:not(:disabled)) {
|
|
175
178
|
--a2-internal-radio-icon-background-color: var(
|
|
176
179
|
--a2-mod-radio-error-unchecked-icon-background-color-active
|
|
177
180
|
);
|
|
178
181
|
--a2-internal-radio-icon-color: var(
|
|
179
182
|
--a2-mod-radio-error-unchecked-icon-color-active
|
|
180
183
|
);
|
|
181
|
-
}._radio-
|
|
184
|
+
}._radio-error_1jbrw_184:has(input:disabled) {
|
|
182
185
|
--a2-internal-radio-icon-color: var(
|
|
183
186
|
--a2-mod-radio-error-unchecked-icon-color-disabled
|
|
184
187
|
);
|
|
185
|
-
}._sr-
|
|
188
|
+
}._sr-only_1jbrw_220 {
|
|
186
189
|
border: 0;
|
|
187
190
|
clip: rect(0, 0, 0, 0);
|
|
188
191
|
height: 1px;
|
|
@@ -193,7 +196,7 @@ input[data-interactive=focus-visible] ~ ._focus-label_bz07n_105 {
|
|
|
193
196
|
position: absolute;
|
|
194
197
|
white-space: nowrap;
|
|
195
198
|
width: 1px;
|
|
196
|
-
}._radio-
|
|
199
|
+
}._radio-group_1jbrw_233 {
|
|
197
200
|
font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
|
|
198
201
|
font-size: 100%;
|
|
199
202
|
color: inherit;
|
|
@@ -207,7 +210,7 @@ input[data-interactive=focus-visible] ~ ._focus-label_bz07n_105 {
|
|
|
207
210
|
display: inline-flex;
|
|
208
211
|
flex-direction: column;
|
|
209
212
|
gap: var(--a2-size-2, 0.5rem);
|
|
210
|
-
}.
|
|
213
|
+
}._legend_1jbrw_249 {
|
|
211
214
|
border: 0;
|
|
212
215
|
clip: rect(0, 0, 0, 0);
|
|
213
216
|
height: 1px;
|
|
@@ -218,15 +221,15 @@ input[data-interactive=focus-visible] ~ ._focus-label_bz07n_105 {
|
|
|
218
221
|
position: absolute;
|
|
219
222
|
white-space: nowrap;
|
|
220
223
|
width: 1px;
|
|
221
|
-
}.
|
|
224
|
+
}._children_1jbrw_262 {
|
|
222
225
|
display: inline-flex;
|
|
223
226
|
flex-direction: column;
|
|
224
227
|
flex-wrap: wrap;
|
|
225
228
|
gap: var(--a2-size-2, 0.5rem);
|
|
226
|
-
}.
|
|
229
|
+
}._label_1jbrw_269._direction-row_1jbrw_269 {
|
|
227
230
|
justify-content: center;
|
|
228
231
|
min-height: var(--a2-size-6, 1.5rem);
|
|
229
|
-
}._label-
|
|
232
|
+
}._label-row_1jbrw_274 {
|
|
230
233
|
display: flex;
|
|
231
234
|
align-items: center;
|
|
232
235
|
}
|
package/dist/Radio.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { R as Radio, R as default } from './Radio-
|
|
1
|
+
export { R as Radio, R as default } from './Radio-BcHMk8dD.js';
|
|
2
2
|
//# sourceMappingURL=Radio.js.map
|
|
@@ -3,16 +3,16 @@ import * as React from 'react';
|
|
|
3
3
|
import React__default, { forwardRef, useRef, useState, useDebugValue, useEffect, useLayoutEffect, createRef, memo, createContext, createElement, version, useContext, useMemo, Fragment as Fragment$2, useCallback, Suspense, lazy, useImperativeHandle, useId } from 'react';
|
|
4
4
|
import ReactDOM__default, { flushSync } from 'react-dom';
|
|
5
5
|
import { c as cx } from './index-De1g9FRV.js';
|
|
6
|
-
import { F as FieldLabel } from './FieldLabel-
|
|
7
|
-
import { P as Popover } from './Popover-
|
|
6
|
+
import { F as FieldLabel } from './FieldLabel-D1qPAGtB.js';
|
|
7
|
+
import { P as Popover } from './Popover-8mTJoMy7.js';
|
|
8
8
|
import { D as Divider } from './Divider-CxtTyw8_.js';
|
|
9
9
|
import { M as Menu } from './Menu-W0c-xKdX.js';
|
|
10
10
|
import { S as SvgAdd } from './add-BcQkAUip.js';
|
|
11
|
-
import { T as Toolbar } from './Toolbar-
|
|
11
|
+
import { T as Toolbar } from './Toolbar-Bt3kShho.js';
|
|
12
12
|
import { D as DndHandleButton } from './DndHandleButton-CHTOYRlq.js';
|
|
13
|
-
import { L as Listbox } from './Listbox-
|
|
14
|
-
import { T as Text$2 } from './Text-
|
|
15
|
-
import { T as TextField } from './TextField-
|
|
13
|
+
import { L as Listbox } from './Listbox-CvQHBFWb.js';
|
|
14
|
+
import { T as Text$2 } from './Text-BTzgTpqu.js';
|
|
15
|
+
import { T as TextField } from './TextField-WTYZJlX3.js';
|
|
16
16
|
import { B as Button } from './Button-C_V2xQAs.js';
|
|
17
17
|
import { F as Flex } from './Flex-_orhvoxS.js';
|
|
18
18
|
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
|
|
@@ -23218,7 +23218,7 @@ const styles$1 = {
|
|
|
23218
23218
|
};
|
|
23219
23219
|
|
|
23220
23220
|
const DragHandle = lazy(
|
|
23221
|
-
() => import('./index-
|
|
23221
|
+
() => import('./index-DVYRUKtW.js').then((m) => ({
|
|
23222
23222
|
default: m.DragHandle
|
|
23223
23223
|
}))
|
|
23224
23224
|
);
|
|
@@ -30851,4 +30851,4 @@ const RichTextEditor = forwardRef(
|
|
|
30851
30851
|
RichTextEditor.displayName = "RichTextEditor";
|
|
30852
30852
|
|
|
30853
30853
|
export { AllSelection as A, DecorationSet as D, Extension as E, Fragment as F, MappablePosition as M, NodeSelection as N, PluginKey as P, RichTextEditor as R, Slice as S, TextSelection as T, Plugin as a, NodeRange as b, SelectionRange as c, Selection as d, Decoration as e, getUpdatedPosition as g, isFirefox as i };
|
|
30854
|
-
//# sourceMappingURL=RichTextEditor-
|
|
30854
|
+
//# sourceMappingURL=RichTextEditor-DstVbYch.js.map
|