@alto-avios/alto-ui 5.6.0 → 5.6.1
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/dist/assets/Checkbox.css +1 -1
- package/dist/assets/Radio.css +1 -1
- package/dist/components/Checkbox/Checkbox.js +4 -4
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Radio/Radio.js +2 -1
- package/dist/components/Radio/Radio.js.map +1 -1
- package/dist/utils/helpers/normalizeBooleanProp.d.ts +1 -0
- package/dist/utils/helpers/normalizeBooleanProp.js +2 -0
- package/dist/utils/helpers/normalizeBooleanProp.js.map +1 -0
- package/package.json +1 -1
package/dist/assets/Checkbox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._checkbox_1qjax_2{align-items:flex-start;box-sizing:border-box;color:var(--alto-sem-color-fg-primary);cursor:pointer;display:flex;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);gap:.571rem;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);min-height:36px;padding-top:var(--alto-sem-space-xs);text-align:left}._checkbox_1qjax_2:only-child{min-height:24px;padding-bottom:var(--alto-sem-space-xs)}._checkboxContainer_1qjax_24{display:flex;flex-direction:column}._checkboxLabel_1qjax_29{padding-left:var(--alto-sem-space-3xs)}._checkboxDescription_1qjax_33{padding-left:42px;text-align:left}._checkboxSvgWrapper_1qjax_38{align-items:center;background:var(--alto-sem-color-bg-layer2-default);border:2px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-checkbox-radius);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:1.5rem;min-width:1.5rem}._checkbox_1qjax_2 ._svg_1qjax_52{fill:none;min-height:1rem;min-width:1rem;stroke:var(--alto-sem-color-fg-accent-on-vibrant);stroke-dasharray:22px;stroke-dashoffset:66;stroke-width:3px;transition:all .2s}._checkbox_1qjax_2[data-hovered] ._checkboxSvgWrapper_1qjax_38{border-color:var(--alto-sem-color-border-primary-hover)}._checkbox_1qjax_2[data-pressed] ._checkboxSvgWrapper_1qjax_38{border-color:var(--alto-sem-color-border-primary-active)}._checkbox_1qjax_2[data-focus-visible] ._checkboxSvgWrapper_1qjax_38{outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md)}._defaultFocus_1qjax_80[data-focus-visible] ._checkboxSvgWrapper_1qjax_38{outline-color:var(--alto-sem-color-border-accent)}._whiteFocus_1qjax_84[data-focus-visible] ._checkboxSvgWrapper_1qjax_38{outline-color:var(--alto-sem-color-border-white)}._checkbox_1qjax_2[data-focus-visible]{outline:none}._checkbox_1qjax_2[data-disabled=true]{color:var(--alto-sem-color-fg-disabled-primary)}._checkboxSvgWrapper_1qjax_38[data-disabled=true]{background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle);cursor:default}._svg_1qjax_52[data-disabled=true]{stroke:var(--alto-sem-color-fg-disabled-on-subtle)}._checkbox_1qjax_2[data-selected] ._checkboxSvgWrapper_1qjax_38{background:var(--alto-sem-color-bg-accent-vibrant-default);border-color:var(--alto-sem-color-bg-accent-vibrant-default)}._checkbox_1qjax_2[data-selected][data-hovered] ._checkboxSvgWrapper_1qjax_38{background:var(--alto-sem-color-bg-accent-vibrant-hover);border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._checkbox_1qjax_2[data-selected][data-pressed] ._checkboxSvgWrapper_1qjax_38{background:var(--alto-sem-color-bg-accent-vibrant-active);border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._checkbox_1qjax_2[data-selected] ._svg_1qjax_52{stroke-dashoffset:44}._checkbox_1qjax_2[data-indeterminate] ._checkboxSvgWrapper_1qjax_38{background:var(--alto-sem-color-bg-accent-vibrant-default);border-color:var(--alto-sem-color-bg-accent-vibrant-default)}._checkbox_1qjax_2[data-indeterminate] ._svg_1qjax_52{fill:var(--alto-sem-color-fg-accent-on-vibrant);stroke:var(--alto-sem-color-fg-disabled-on-subtle)}._checkbox_1qjax_2[data-invalid] ._checkboxSvgWrapper_1qjax_38{background:var(--alto-sem-color-bg-critical-subtle-default);border-color:var(--alto-sem-color-border-critical)}._checkbox_1qjax_2[data-invalid][data-hovered] ._checkboxSvgWrapper_1qjax_38{background:var(--alto-sem-color-bg-critical-subtle-hover)}._checkbox_1qjax_2[data-invalid][data-pressed] ._checkboxSvgWrapper_1qjax_38{background:var(--alto-sem-color-bg-layer2-default)}._checkbox_1qjax_2[data-invalid][data-indeterminate] ._checkboxSvgWrapper_1qjax_38,._checkbox_1qjax_2[data-invalid][data-selected] ._checkboxSvgWrapper_1qjax_38{background:var(--alto-sem-color-bg-critical-vibrant-default);border-color:var(--alto-sem-color-bg-critical-vibrant-hover)}._checkbox_1qjax_2[data-invalid][data-indeterminate][data-hovered] ._checkboxSvgWrapper_1qjax_38,._checkbox_1qjax_2[data-invalid][data-selected][data-hovered] ._checkboxSvgWrapper_1qjax_38{background:var(--alto-sem-color-bg-critical-vibrant-hover)}._checkbox_1qjax_2[data-invalid][data-indeterminate][data-pressed] ._checkboxSvgWrapper_1qjax_38,._checkbox_1qjax_2[data-invalid][data-selected][data-pressed] ._checkboxSvgWrapper_1qjax_38{background:var(--alto-sem-color-bg-critical-subtle-active);border-color:var(--alto-sem-color-bg-critical-vibrant-active)}._checkbox_1qjax_2[data-disabled] ._checkboxSvgWrapper_1qjax_38{background-color:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._checkbox_1qjax_2[data-disabled] ._svg_1qjax_52{stroke:var(--alto-sem-color-fg-disabled-on-subtle)}._checkboxLabelWrapper_1qjax_179{display:flex;flex-direction:column;justify-content:center}
|
package/dist/assets/Radio.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._radio_11v6n_1{align-items:center;color:var(--alto-sem-color-fg-primary);cursor:pointer;display:flex;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);gap:var(--alto-sem-space-sm);justify-content:flex-start;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);min-height:48px;text-align:left}._radio_11v6n_1[data-focus-visible]{outline:none}._radio_11v6n_1:before{background-color:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-sem-radius-circle);box-sizing:border-box;content:"";display:block;flex:0 0 1.5rem;height:1.5rem;transition:all .2s;width:1.5rem}._radio_11v6n_1[data-hovered]:before{border-color:var(--alto-sem-color-border-primary-hover)}._radio_11v6n_1[data-focus-visible]:before{outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md);transition:none}._defaultFocus_11v6n_46[data-focus-visible]:before{outline-color:var(--alto-sem-color-border-accent)}._whiteFocus_11v6n_50[data-focus-visible]:before{outline-color:var(--alto-sem-color-border-white)}._radio_11v6n_1[data-pressed]:before{border-color:var(--alto-sem-color-border-primary-active)}._radio_11v6n_1[data-selected]:before{background-color:var(--alto-sem-color-fg-critical-on-vibrant);border-color:var(--alto-sem-color-bg-accent-vibrant-default);border-width:.5rem;box-shadow:0 0 0 1px var(--alto-sem-color-border-white)}._radio_11v6n_1[data-selected][data-hovered]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._radio_11v6n_1[data-selected][data-focused]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._radio_11v6n_1[data-selected][data-focus-visible]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._radio_11v6n_1[data-selected][data-pressed]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._radio_11v6n_1[data-invalid]:before{background:var(--alto-sem-color-bg-critical-subtle-default);border:var(--alto-sem-border-width-md) solid var(--alto-sem-color-border-critical);border-radius:var(--alto-sem-radius-circle)}._radio_11v6n_1[data-invalid][data-hovered]:before{background-color:var(--alto-sem-color-bg-layer2-hover);border-color:var(--alto-sem-color-border-critical)}._radio_11v6n_1[data-invalid][data-focused]:before{border-color:var(--alto-sem-color-border-critical)}._radio_11v6n_1[data-invalid][data-focus-visible]:before,._radio_11v6n_1[data-invalid][data-pressed]:before{background-color:var(--alto-sem-color-bg-layer2-default);border-color:var(--alto-sem-color-border-critical)}._radio_11v6n_1[data-invalid][data-selected]:before{background-color:var(--alto-sem-color-fg-critical-on-vibrant);border-color:var(--alto-sem-color-bg-critical-vibrant-default);border-width:.5rem}._radio_11v6n_1[data-disabled=true]{color:var(--alto-sem-color-fg-disabled-primary);cursor:default;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height)}._radio_11v6n_1[data-disabled=true]:before{background:var(--alto-sem-color-bg-disabled-subtle);border:1px solid var(--alto-sem-color-border-disabled-subtle);border-radius:var(--alto-sem-radius-circle)}._radio_11v6n_1[data-disabled=true][data-selected]:before{border-width:.5rem}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i,Fragment as a}from"react/jsx-runtime";import{forwardRef as r,useId as l,useMemo as
|
|
2
|
-
return e("div",{className:
|
|
1
|
+
import{jsxs as e,jsx as i,Fragment as a}from"react/jsx-runtime";import{forwardRef as r,useId as l,useMemo as s}from"react";import{Checkbox as t}from"react-aria-components";import{c as o}from"../../index-CCUt_dAN.js";import{normalizeBooleanProp as d}from"../../utils/helpers/normalizeBooleanProp.js";import n from"../FieldDescription/FieldDescription.js";import{FieldError as c}from"../FieldError/FieldError.js";import '../../assets/Checkbox.css';const u="_checkboxContainer_1qjax_24",m="_checkboxLabel_1qjax_29",h="_checkboxDescription_1qjax_33",_="_checkboxSvgWrapper_1qjax_38",f="_svg_1qjax_52",v="_checkboxLabelWrapper_1qjax_179",p={isInvalid:!0,validationErrors:["Invalid"],validationDetails:{valid:!1}},x=o("_checkbox_1qjax_2",{variants:{focusStyle:{default:"_defaultFocus_1qjax_80",white:"_whiteFocus_1qjax_84"}},defaultVariants:{focusStyle:"default"}}),b=r(({label:r,isIndeterminate:o,defaultSelected:b,isSelected:j,value:q,isDisabled:y,isReadOnly:I,isRequired:S,isInvalid:k,validate:F,autoFocus:N,name:D,validationBehavior:g,description:B,children:w,errorMessage:E,errorPrefix:R="Error:",testId:C,focusStyle:P="default",...L},O)=>{const W=l(),z=l(),M=s(()=>k?"function"==typeof E?E(p):E:null,[E,k]),V=[B?z:null,k&&M?W:null].filter(Boolean).join(" "),$=r||w,A=d(y);/* @__PURE__ */
|
|
2
|
+
return e("div",{className:u,"data-testid":C,children:[k&&M&&/* @__PURE__ */i(c,{id:W,errorPrefix:R,isInvalid:k,children:M}),
|
|
3
3
|
/* @__PURE__ */e("div",{className:v,children:[
|
|
4
|
-
/* @__PURE__ */i(
|
|
5
|
-
/* @__PURE__ */i("div",{className:`${_}`,"data-disabled":
|
|
4
|
+
/* @__PURE__ */i(t,{ref:O,className:x({focusStyle:P}),isIndeterminate:o,defaultSelected:b,isSelected:j,value:q,isDisabled:A,isReadOnly:I,isRequired:S,isInvalid:k,validate:F,autoFocus:N,name:D,validationBehavior:g,"aria-describedby":V||void 0,...L,children:({isIndeterminate:r})=>/* @__PURE__ */e(a,{children:[
|
|
5
|
+
/* @__PURE__ */i("div",{className:`${_}`,"data-disabled":y,children:/* @__PURE__ */i("svg",{className:f,viewBox:"0 0 18 18","aria-hidden":"true",children:r?/* @__PURE__ */i("rect",{x:1,y:7.5,width:15,height:3}):/* @__PURE__ */i("polyline",{points:"1 9 7 14 15 4"})})}),$?/* @__PURE__ */i("span",{className:m,children:$}):null]})}),B&&/* @__PURE__ */i(n,{id:z,className:h,children:B})]})]})});b.displayName="Checkbox";export{b as Checkbox,b as default};
|
|
6
6
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useMemo, useId, forwardRef } from 'react';\nimport { ValidationError } from '@react-types/shared';\nimport {\n ValidationResult,\n Checkbox as AriaCheckbox,\n CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\n\nimport FieldDescription from '../FieldDescription';\nimport FieldError from '../FieldError';\nimport styles from './Checkbox.module.css';\n\n// Extracted constant to avoid recreation on every render\nconst DEFAULT_VALIDATION_RESULT: ValidationResult = {\n isInvalid: true,\n validationErrors: ['Invalid'],\n validationDetails: { valid: false } as unknown as ValidityState,\n};\n\nexport interface CheckboxProps extends AriaCheckboxProps {\n /** The label of the checkbox, can be a string or a React node. */\n label?: string | React.ReactNode;\n /** Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. */\n isIndeterminate?: boolean;\n /** Whether the element should be selected (uncontrolled). */\n defaultSelected?: boolean;\n /** Whether the element should be selected (controlled). */\n isSelected?: boolean;\n /** The value of the input element, used when submitting an HTML form. See MDN. */\n value?: string;\n /** Whether the input is disabled. */\n isDisabled?: boolean;\n /** Whether the input can be selected but not changed by the user. */\n isReadOnly?: boolean;\n /** Whether user input is required on the input before form submission. */\n isRequired?: boolean;\n /** Whether the input value is invalid. */\n isInvalid?: boolean;\n /** A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior=\"native\". For realtime validation, use the isInvalid prop instead. */\n validate?: (value: unknown) => ValidationError | true | null | undefined;\n /** Whether the element should receive focus on render. */\n autoFocus?: boolean;\n /** The name of the input element, used when submitting an HTML form. See MDN. */\n name?: string;\n /**\n * Whether to use native HTML form validation to prevent form submission\n * when the value is missing or invalid, or mark the field as required\n * or invalid via ARIA.\n * @default 'aria'\n */\n validationBehavior?: 'native' | 'aria';\n /** Description text for the checkbox */\n description?: React.ReactNode;\n /** Alternate way to provide label content */\n children?: React.ReactNode;\n /** Focus style variant */\n focusStyle?: 'default' | 'white';\n /**\n * Error message to display when the checkbox is invalid\n * Can be a static string or a function that returns an error message\n * @default undefined\n */\n errorMessage?: string | ((validation: ValidationResult) => string);\n /**\n * Prefix text for screen readers only in error messages\n * @default 'Error:'\n */\n errorPrefix?: string;\n /**\n * Custom test ID for testing purposes\n * @default undefined\n */\n testId?: string;\n}\n\nconst checkbox = cva(styles.checkbox, {\n variants: {\n focusStyle: {\n default: styles.defaultFocus,\n white: styles.whiteFocus,\n },\n },\n defaultVariants: {\n focusStyle: 'default',\n },\n});\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n label,\n isIndeterminate,\n defaultSelected,\n isSelected,\n value,\n isDisabled,\n isReadOnly,\n isRequired,\n isInvalid,\n validate,\n autoFocus,\n name,\n validationBehavior,\n description,\n children,\n errorMessage,\n errorPrefix = 'Error:',\n testId,\n focusStyle = 'default',\n ...props\n },\n forwardedRef,\n ) => {\n // Generate unique IDs for accessibility\n const errorId = useId();\n const descriptionId = useId();\n\n // Resolve error message with memoization\n const resolvedErrorMessage = useMemo(() => {\n if (!isInvalid) return null;\n\n if (typeof errorMessage === 'function') {\n return errorMessage(DEFAULT_VALIDATION_RESULT);\n }\n\n return errorMessage;\n }, [errorMessage, isInvalid]);\n\n // Determine aria-describedby based on description, error, or both\n const describedById = [\n description ? descriptionId : null,\n isInvalid && resolvedErrorMessage ? errorId : null,\n ]\n .filter(Boolean)\n .join(' ');\n\n // Determine the final label content\n const labelContent = label || children;\n\n return (\n <div className={styles.checkboxContainer} data-testid={testId}>\n {isInvalid && resolvedErrorMessage && (\n <FieldError\n id={errorId}\n errorPrefix={errorPrefix}\n isInvalid={isInvalid}\n >\n {resolvedErrorMessage}\n </FieldError>\n )}\n <div className={styles.checkboxLabelWrapper}>\n <AriaCheckbox\n ref={forwardedRef}\n className={checkbox({ focusStyle })}\n isIndeterminate={isIndeterminate}\n defaultSelected={defaultSelected}\n isSelected={isSelected}\n value={value}\n isDisabled={
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useMemo, useId, forwardRef } from 'react';\nimport { ValidationError } from '@react-types/shared';\nimport {\n ValidationResult,\n Checkbox as AriaCheckbox,\n CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { normalizeBooleanProp } from '../../utils/helpers/normalizeBooleanProp';\n\nimport FieldDescription from '../FieldDescription';\nimport FieldError from '../FieldError';\nimport styles from './Checkbox.module.css';\n\n// Extracted constant to avoid recreation on every render\nconst DEFAULT_VALIDATION_RESULT: ValidationResult = {\n isInvalid: true,\n validationErrors: ['Invalid'],\n validationDetails: { valid: false } as unknown as ValidityState,\n};\n\nexport interface CheckboxProps extends AriaCheckboxProps {\n /** The label of the checkbox, can be a string or a React node. */\n label?: string | React.ReactNode;\n /** Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. */\n isIndeterminate?: boolean;\n /** Whether the element should be selected (uncontrolled). */\n defaultSelected?: boolean;\n /** Whether the element should be selected (controlled). */\n isSelected?: boolean;\n /** The value of the input element, used when submitting an HTML form. See MDN. */\n value?: string;\n /** Whether the input is disabled. */\n isDisabled?: boolean;\n /** Whether the input can be selected but not changed by the user. */\n isReadOnly?: boolean;\n /** Whether user input is required on the input before form submission. */\n isRequired?: boolean;\n /** Whether the input value is invalid. */\n isInvalid?: boolean;\n /** A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior=\"native\". For realtime validation, use the isInvalid prop instead. */\n validate?: (value: unknown) => ValidationError | true | null | undefined;\n /** Whether the element should receive focus on render. */\n autoFocus?: boolean;\n /** The name of the input element, used when submitting an HTML form. See MDN. */\n name?: string;\n /**\n * Whether to use native HTML form validation to prevent form submission\n * when the value is missing or invalid, or mark the field as required\n * or invalid via ARIA.\n * @default 'aria'\n */\n validationBehavior?: 'native' | 'aria';\n /** Description text for the checkbox */\n description?: React.ReactNode;\n /** Alternate way to provide label content */\n children?: React.ReactNode;\n /** Focus style variant */\n focusStyle?: 'default' | 'white';\n /**\n * Error message to display when the checkbox is invalid\n * Can be a static string or a function that returns an error message\n * @default undefined\n */\n errorMessage?: string | ((validation: ValidationResult) => string);\n /**\n * Prefix text for screen readers only in error messages\n * @default 'Error:'\n */\n errorPrefix?: string;\n /**\n * Custom test ID for testing purposes\n * @default undefined\n */\n testId?: string;\n}\n\nconst checkbox = cva(styles.checkbox, {\n variants: {\n focusStyle: {\n default: styles.defaultFocus,\n white: styles.whiteFocus,\n },\n },\n defaultVariants: {\n focusStyle: 'default',\n },\n});\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n label,\n isIndeterminate,\n defaultSelected,\n isSelected,\n value,\n isDisabled,\n isReadOnly,\n isRequired,\n isInvalid,\n validate,\n autoFocus,\n name,\n validationBehavior,\n description,\n children,\n errorMessage,\n errorPrefix = 'Error:',\n testId,\n focusStyle = 'default',\n ...props\n },\n forwardedRef,\n ) => {\n // Generate unique IDs for accessibility\n const errorId = useId();\n const descriptionId = useId();\n\n // Resolve error message with memoization\n const resolvedErrorMessage = useMemo(() => {\n if (!isInvalid) return null;\n\n if (typeof errorMessage === 'function') {\n return errorMessage(DEFAULT_VALIDATION_RESULT);\n }\n\n return errorMessage;\n }, [errorMessage, isInvalid]);\n\n // Determine aria-describedby based on description, error, or both\n const describedById = [\n description ? descriptionId : null,\n isInvalid && resolvedErrorMessage ? errorId : null,\n ]\n .filter(Boolean)\n .join(' ');\n\n // Determine the final label content\n const labelContent = label || children;\n\n // Find where isDisabled is used and ensure it is passed through normalizeBooleanProp before use.\n // Example: const resolvedIsDisabled = normalizeBooleanProp(isDisabled);\n // Use resolvedIsDisabled wherever isDisabled is passed to the underlying component.\n const resolvedIsDisabled = normalizeBooleanProp(isDisabled);\n\n return (\n <div className={styles.checkboxContainer} data-testid={testId}>\n {isInvalid && resolvedErrorMessage && (\n <FieldError\n id={errorId}\n errorPrefix={errorPrefix}\n isInvalid={isInvalid}\n >\n {resolvedErrorMessage}\n </FieldError>\n )}\n <div className={styles.checkboxLabelWrapper}>\n <AriaCheckbox\n ref={forwardedRef}\n className={checkbox({ focusStyle })}\n isIndeterminate={isIndeterminate}\n defaultSelected={defaultSelected}\n isSelected={isSelected}\n value={value}\n isDisabled={resolvedIsDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isInvalid={isInvalid}\n validate={validate}\n autoFocus={autoFocus}\n name={name}\n validationBehavior={validationBehavior}\n aria-describedby={describedById || undefined}\n {...props}\n >\n {({ isIndeterminate }: { isIndeterminate: boolean }) => (\n <>\n <div\n className={`${styles.checkboxSvgWrapper}`}\n data-disabled={isDisabled}\n >\n <svg\n className={styles.svg}\n viewBox=\"0 0 18 18\"\n aria-hidden=\"true\"\n >\n {isIndeterminate ? (\n <rect x={1} y={7.5} width={15} height={3} />\n ) : (\n <polyline points=\"1 9 7 14 15 4\" />\n )}\n </svg>\n </div>\n {labelContent ? (\n <span className={styles.checkboxLabel}>{labelContent}</span>\n ) : null}\n </>\n )}\n </AriaCheckbox>\n {description && (\n <FieldDescription\n id={descriptionId}\n className={styles.checkboxDescription}\n >\n {description}\n </FieldDescription>\n )}\n </div>\n </div>\n );\n },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["DEFAULT_VALIDATION_RESULT","isInvalid","validationErrors","validationDetails","valid","checkbox","cva","variants","focusStyle","default","white","defaultVariants","Checkbox","forwardRef","label","isIndeterminate","defaultSelected","isSelected","value","isDisabled","isReadOnly","isRequired","validate","autoFocus","name","validationBehavior","description","children","errorMessage","errorPrefix","testId","props","forwardedRef","errorId","useId","descriptionId","resolvedErrorMessage","useMemo","describedById","filter","Boolean","join","labelContent","resolvedIsDisabled","normalizeBooleanProp","className","styles","jsx","FieldError","id","AriaCheckbox","ref","jsxs","Fragment","viewBox","x","y","width","height","points","FieldDescription","displayName"],"mappings":"slBAeMA,EAA8C,CAClDC,WAAW,EACXC,iBAAkB,CAAC,WACnBC,kBAAmB,CAAEC,OAAO,IA2DxBC,EAAWC,sBAAqB,CACpCC,SAAU,CACRC,WAAY,CACVC,iCACAC,+BAGJC,gBAAiB,CACfH,WAAY,aAIHI,EAAWC,EACtB,EAEIC,QACAC,kBACAC,kBACAC,aACAC,QACAC,aACAC,aACAC,aACApB,YACAqB,WACAC,YACAC,OACAC,qBACAC,cACAC,WACAC,eACAC,cAAc,SACdC,SACAtB,aAAa,aACVuB,GAELC,KAGA,MAAMC,EAAUC,IACVC,EAAgBD,IAGhBE,EAAuBC,EAAQ,IAC9BpC,EAEuB,mBAAjB2B,EACFA,EAAa5B,GAGf4B,EANgB,KAOtB,CAACA,EAAc3B,IAGZqC,EAAgB,CACpBZ,EAAcS,EAAgB,KAC9BlC,GAAamC,EAAuBH,EAAU,MAE7CM,OAAOC,SACPC,KAAK,KAGFC,EAAe5B,GAASa,EAKxBgB,EAAqBC,EAAqBzB;AAEhD,SACG,MAAA,CAAI0B,UAAWC,EAA0B,cAAahB,EACpDH,SAAA,CAAA1B,GAAamC,kBACZW,EAACC,EAAA,CACCC,GAAIhB,EACJJ,cACA5B,YAEC0B,SAAAS;iBAGJ,MAAA,CAAIS,UAAWC,EACdnB,SAAA;eAAAoB,EAACG,EAAA,CACCC,IAAKnB,EACLa,UAAWxC,EAAS,CAAEG,eACtBO,kBACAC,kBACAC,aACAC,QACAC,WAAYwB,EACZvB,aACAC,aACApB,YACAqB,WACAC,YACAC,OACAC,qBACA,mBAAkBa,QAAiB,KAC/BP,EAEHJ,SAAA,EAAGZ,gBAAAA,oBACFqC,EAAAC,EAAA,CACE1B,SAAA;eAAAoB,EAAC,MAAA,CACCF,UAAW,GAAGC,IACd,gBAAe3B,EAEfQ,wBAAAoB,EAAC,MAAA,CACCF,UAAWC,EACXQ,QAAQ,YACR,cAAY,OAEX3B,SAAAZ,iBACCgC,EAAC,OAAA,CAAKQ,EAAG,EAAGC,EAAG,IAAKC,MAAO,GAAIC,OAAQ,mBAEvCX,EAAC,WAAA,CAASY,OAAO,sBAItBjB,iBACCK,EAAC,OAAA,CAAKF,UAAWC,EAAuBnB,aACtC,UAITD,kBACCqB,EAACa,EAAA,CACCX,GAAId,EACJU,UAAWC,EAEVnB,SAAAD,YAQfd,EAASiD,YAAc"}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{forwardRef as a}from"react";import{Radio as t}from"react-aria-components";import{c as o}from"../../index-CCUt_dAN.js";import{normalizeBooleanProp as r}from"../../utils/helpers/normalizeBooleanProp.js";import '../../assets/Radio.css';const s=o("_radio_11v6n_1",{variants:{focusStyle:{default:"_defaultFocus_11v6n_46",white:"_whiteFocus_11v6n_50"}},defaultVariants:{focusStyle:"default"}}),i=a(({value:a,children:o,isDisabled:i=!1,focusStyle:l="default",...u},c)=>{const f=r(i);/* @__PURE__ */
|
|
2
|
+
return e(t,{ref:c,className:s({focusStyle:l}),value:a,isDisabled:f,...u,children:o})});i.displayName="Radio";export{i as Radio,i as default};
|
|
2
3
|
//# sourceMappingURL=Radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { FocusableProps } from '@react-types/shared';\nimport { forwardRef, ReactNode } from 'react';\nimport { Radio as AriaRadio } from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\n\nimport styles from './Radio.module.css';\n\nconst radio = cva(styles.radio, {\n variants: {\n focusStyle: {\n default: styles.defaultFocus,\n white: styles.whiteFocus,\n },\n },\n defaultVariants: {\n focusStyle: 'default',\n },\n});\n\nexport interface RadioProps extends FocusableProps {\n /**\n * The value of the radio button, used when submitting an HTML form.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n */\n value: string;\n /**\n * The label for the Radio. Accepts any renderable node.\n */\n children?: ReactNode;\n /**\n * Whether the radio button is disabled or not.\n * Shows that a selection exists, but is not available in that circumstance.\n */\n isDisabled?: boolean;\n /**\n * \tThe focus style of the button\n */\n focusStyle?: 'default' | 'white';\n}\n\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>(\n (\n { value, children, isDisabled = false, focusStyle = 'default', ...props },\n forwardedRef,\n ) => {\n return (\n <AriaRadio\n ref={forwardedRef}\n className={radio({ focusStyle })}\n value={value}\n isDisabled={
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { FocusableProps } from '@react-types/shared';\nimport { forwardRef, ReactNode } from 'react';\nimport { Radio as AriaRadio } from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { normalizeBooleanProp } from '../../utils/helpers/normalizeBooleanProp';\n\nimport styles from './Radio.module.css';\n\nconst radio = cva(styles.radio, {\n variants: {\n focusStyle: {\n default: styles.defaultFocus,\n white: styles.whiteFocus,\n },\n },\n defaultVariants: {\n focusStyle: 'default',\n },\n});\n\nexport interface RadioProps extends FocusableProps {\n /**\n * The value of the radio button, used when submitting an HTML form.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n */\n value: string;\n /**\n * The label for the Radio. Accepts any renderable node.\n */\n children?: ReactNode;\n /**\n * Whether the radio button is disabled or not.\n * Shows that a selection exists, but is not available in that circumstance.\n */\n isDisabled?: boolean;\n /**\n * \tThe focus style of the button\n */\n focusStyle?: 'default' | 'white';\n}\n\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>(\n (\n { value, children, isDisabled = false, focusStyle = 'default', ...props },\n forwardedRef,\n ) => {\n const resolvedIsDisabled = normalizeBooleanProp(isDisabled);\n\n return (\n <AriaRadio\n ref={forwardedRef}\n className={radio({ focusStyle })}\n value={value}\n isDisabled={resolvedIsDisabled}\n {...props}\n >\n {children}\n </AriaRadio>\n );\n },\n);\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["radio","cva","variants","focusStyle","default","white","defaultVariants","Radio","forwardRef","value","children","isDisabled","props","forwardedRef","resolvedIsDisabled","normalizeBooleanProp","jsx","AriaRadio","ref","className","displayName"],"mappings":"8PAQMA,EAAQC,mBAAkB,CAC9BC,SAAU,CACRC,WAAY,CACVC,iCACAC,+BAGJC,gBAAiB,CACfH,WAAY,aAyBHI,EAAQC,EACnB,EACIC,QAAOC,WAAUC,cAAa,EAAOR,aAAa,aAAcS,GAClEC,KAEA,MAAMC,EAAqBC,EAAqBJ;AAEhD,OACEK,EAACC,EAAA,CACCC,IAAKL,EACLM,UAAWnB,EAAM,CAAEG,eACnBM,QACAE,WAAYG,KACRF,EAEHF,eAKTH,EAAMa,YAAc"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function normalizeBooleanProp(value: unknown): boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"normalizeBooleanProp.js","sources":["../../../src/utils/helpers/normalizeBooleanProp.ts"],"sourcesContent":["// Utility to normalize boolean-like props (e.g., isDisabled)\n// Accepts boolean, string ('true'/'false'), or other values\n// Returns a proper boolean\nexport function normalizeBooleanProp(value: unknown): boolean {\n if (typeof value === 'boolean') {\n return value;\n }\n\n if (typeof value === 'string') {\n const normalized = value.trim().toLowerCase();\n if (normalized === 'true') {\n return true;\n }\n if (normalized === 'false') {\n return false;\n }\n }\n\n return false;\n}\n"],"names":["normalizeBooleanProp","value","normalized","trim","toLowerCase"],"mappings":"AAGO,SAASA,EAAqBC,GACnC,GAAqB,kBAAVA,EACT,OAAOA,EAGT,GAAqB,iBAAVA,EAAoB,CAC7B,MAAMC,EAAaD,EAAME,OAAOC,cAChC,GAAmB,SAAfF,EACF,OAAO,EAET,GAAmB,UAAfA,EACF,OAAO,CAEX,CAEA,OAAO,CACT"}
|