npm - @adgytec/adgytec-web-ui-components - Versions diffs - 2.2.0 → 2.3.1 - Mend

@adgytec/adgytec-web-ui-components 2.2.0 → 2.3.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.

Files changed (504) hide show

package/dist/chunks/Radio.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio","names":["renderProps"],"sources":["../../src/components/Input/Radio/context.ts","../../src/components/Input/Radio/radio.module.css","../../src/components/Input/Radio/Radio.tsx","../../src/components/Input/Radio/RadioGroup.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { RadioLabelPlacement } from \"./types\";\n\nexport type RadioGroupContextValue = {\n labelPlacement?: RadioLabelPlacement;\n containerStateLayer?: boolean;\n};\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>({});\n","/* configurable tokens\n\n --md-radio-icon-color\n* --md-radio-selected-icon-color\n\n --md-radio-interaction-icon-color\n* --md-radio-selected-interaction-icon-color\n\n --md-radio-state-layer-color\n* --md-radio-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .radio-group {\n / configurable tokens /\n --_md-radio-icon-color: var(\n --md-radio-icon-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-radio-selected-icon-color: var(\n --md-radio-selected-icon-color,\n var(--md-sys-color-primary)\n );\n\n --_md-radio-interaction-icon-color: var(\n --md-radio-interaction-icon-color,\n var(--md-sys-color-on-surface)\n );\n --_md-radio-selected-interaction-icon-color: var(\n --md-radio-selected-interaction-icon-color,\n var(--_md-radio-selected-icon-color)\n );\n\n --_md-radio-state-layer-color: var(\n --md-radio-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-radio-selected-state-layer-color: var(\n --md-radio-selected-state-layer-color,\n var(--_md-radio-selected-icon-color)\n );\n\n / configurable tokens end /\n\n display: grid;\n gap: var(--md-sys-layout-space-16);\n\n &[data-disabled] {\n color: rgb(\n from currentcolor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n }\n\n .radio-items {\n display: grid;\n\n &[data-orientation=\"horizontal\"] {\n display: flex;\n }\n }\n\n .radio {\n / invalid tokens /\n --_md-radio-invalid-icon-color: var(--md-sys-color-error);\n --_md-radio-invalid-state-layer-color: var(\n --_md-radio-invalid-icon-color\n );\n\n / indicator tokens /\n --_md-radio-size: calc(20 var(--dp, 1px));\n --_md-radio-icon-size: calc(\n var(--_md-radio-size) -\n calc(10 * var(--dp, 1px))\n );\n --_md-radio-state-layer-size: calc(40 * var(--dp, 1px));\n\n /* state layer tokens /\n --_md-radio-pressed-state-layer-color: var(\n --_md-radio-selected-state-layer-color\n );\n --_md-radio-pressed-selected-state-layer-color: var(\n --_md-radio-state-layer-color\n );\n\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-radio-state-layer-color);\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / styles /\n position: relative;\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-16);\n\n color: inherit;\n cursor: pointer;\n\n & {\n cursor: inherit;\n }\n\n &[data-disabled] {\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-radio-selected-state-layer-color);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n --_state-color: var(--_md-radio-pressed-state-layer-color);\n\n &[data-selected] {\n --_state-color: var(\n --_md-radio-pressed-selected-state-layer-color\n );\n }\n }\n\n &[data-invalid] {\n --_state-color: var(--_md-radio-invalid-state-layer-color);\n\n &[data-selected] {\n --_state-color: var(--_md-radio-invalid-state-layer-color);\n }\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n z-index: 1;\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n z-index: 1;\n }\n }\n\n .state-layer::before {\n content: \"\";\n\n position: absolute;\n inset: calc(-1 * var(--md-sys-layout-space-12));\n\n background-color: var(--_state-layer-color);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n pointer-events: none;\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .indicator {\n --_indicator-color: var(--_md-radio-icon-color);\n\n position: relative;\n\n inline-size: var(--_md-radio-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n border: var(--md-sys-shape-border-width-thick) solid\n var(--_indicator-color);\n\n transition: border-color var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-selected] {\n --_indicator-color: var(--_md-radio-selected-icon-color);\n }\n\n &[data-invalid] {\n --_indicator-color: var(--_md-radio-invalid-icon-color);\n }\n\n &[data-pressed],\n &[data-hovered],\n &[data-focus-visible] {\n --_indicator-color: var(--_md-radio-interaction-icon-color);\n\n &[data-selected] {\n --_indicator-color: var(\n --_md-radio-selected-interaction-icon-color\n );\n }\n\n &[data-invalid] {\n --_indicator-color: var(--_md-radio-invalid-icon-color);\n }\n }\n\n &[data-disabled] {\n --_indicator-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-selected] {\n --_indicator-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n }\n\n /* state layer /\n .indicator[data-show-state-layer]::before {\n content: \"\";\n\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_md-radio-state-layer-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n background-color: var(--_state-layer-color);\n\n transition: background-color\n var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n / indicator center icon /\n .indicator-icon {\n content: \"\";\n\n position: absolute;\n inline-size: var(--_md-radio-icon-size);\n aspect-ratio: 1 / 1;\n\n inset-inline-start: 50%;\n inset-block-start: 50%;\n translate: -50% -50%;\n\n background-color: var(--_indicator-color);\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n scale: 0;\n\n transition:\n background-color var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration),\n scale var(--md-sys-motion-standard-default-spatial)\n var(--md-sys-motion-standard-default-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-selected] {\n scale: 1;\n }\n }\n\n .indicator[data-focus-visible] {\n --focus-indicator-color: var(--md-sys-color-secondary);\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n}\n","import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { Radio as AriaRadio } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioProps } from \"./types\";\n\nexport const Radio: React.FC<RadioProps> = ({\n className,\n children,\n labelPlacement,\n containerStateLayer,\n ...props\n}) => {\n const {\n labelPlacement: groupLabelPlacement,\n containerStateLayer: groupContainerStateLayer,\n } = useContext(RadioGroupContext);\n const placement = labelPlacement ?? groupLabelPlacement ?? \"end\";\n const stateLayer = containerStateLayer ?? groupContainerStateLayer ?? false;\n\n return (\n <AriaRadio\n className={(renderProps) =>\n clsx(\n styles[\"radio\"],\n stateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-radio\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isInvalid,\n } = renderProps;\n\n const dataAttrs = {\n \"data-selected\": isSelected \|\| undefined,\n \"data-hovered\": isHovered \|\| undefined,\n \"data-disabled\": isDisabled \|\| undefined,\n \"data-focused\": isFocused \|\| undefined,\n \"data-focus-visible\": isFocusVisible \|\| undefined,\n \"data-pressed\": isPressed \|\| undefined,\n \"data-show-state-layer\": !stateLayer \|\| undefined,\n \"data-invalid\": isInvalid \|\| undefined,\n };\n\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n return (\n <>\n {placement === \"start\" && label}\n\n <span\n className={clsx(styles[\"indicator\"], TapTarget)}\n {...dataAttrs}\n >\n <span\n className={clsx(styles[\"indicator-icon\"])}\n {...dataAttrs}\n ></span>\n </span>\n\n {placement === \"end\" && label}\n </>\n );\n }}\n </AriaRadio>\n );\n};\n","import { clsx } from \"clsx\";\nimport { RadioGroup as AriaRadioGroup } from \"react-aria-components\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { Label } from \"../Label\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioGroupProps } from \"./types\";\n\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\n label,\n description,\n errorMessage,\n showDescriptionOnInvalid = false,\n children,\n className,\n radioItemsGap = 24,\n labelPlacement,\n containerStateLayer,\n ...props\n}) => {\n return (\n <RadioGroupContext value={{ labelPlacement, containerStateLayer }}>\n <AriaRadioGroup\n className={(renderProps) =>\n clsx(\n styles[\"radio-group\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-radio-group\n >\n {({ orientation, isInvalid }) => {\n const showDescription =\n description &&\n (!isInvalid \|\| (isInvalid && showDescriptionOnInvalid));\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <div\n data-orientation={orientation}\n className={clsx(styles[\"radio-items\"])}\n style={{\n gap: `calc(${radioItemsGap} * var(--dp, 1px))`,\n }}\n >\n {children}\n </div>\n\n {showDescription && (\n <Description>{description}</Description>\n )}\n <FieldError>{errorMessage}</FieldError>\n </>\n );\n }}\n </AriaRadioGroup>\n </RadioGroupContext>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Radio","names":["renderProps","Radio","_c","styles","_Fragment","AriaRadio","RadioGroup","AriaRadioGroup","styles","_Fragment","Label","FieldError","require_compiler_runtime","typography","FieldError$1","Label$1","import_compiler_runtime","RadioGroupContext","createContext","radio_module_default","Radio$1","$","children","className","containerStateLayer","labelPlacement","props","t0","groupLabelPlacement","groupContainerStateLayer","useContext","placement","stateLayer","t1","clsx","renderProps","t2","renderProps_0","dataAttrs","isSelected","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","isInvalid","label","Fragment","TapTarget","t3","Radio","RadioGroup$1","RadioGroup","showDescription","description","showDescriptionOnInvalid","orientation","radioItemsGap","Description","errorMessage"],"sources":["../../src/components/Input/Radio/context.ts","../../src/components/Input/Radio/radio.module.css","../../src/components/Input/Radio/Radio.tsx","../../src/components/Input/Radio/RadioGroup.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { RadioLabelPlacement } from \"./types\";\n\n/*\n Shared context value provided by {@link RadioGroup} to child {@link Radio} components.\n /\nexport interface RadioGroupContextValue {\n /* Inherited label placement. /\n labelPlacement?: RadioLabelPlacement;\n /* Inherited container state layer flag. /\n containerStateLayer?: boolean;\n}\n\n/\n Context communicating group-level styling configurations to nested radio buttons.\n /\nexport const RadioGroupContext = createContext<RadioGroupContextValue>({});\n","/ configurable tokens\n\n --md-radio-icon-color\n* --md-radio-selected-icon-color\n\n --md-radio-interaction-icon-color\n* --md-radio-selected-interaction-icon-color\n\n --md-radio-state-layer-color\n* --md-radio-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .radio-group {\n / configurable tokens /\n --_md-radio-icon-color: var(\n --md-radio-icon-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-radio-selected-icon-color: var(\n --md-radio-selected-icon-color,\n var(--md-sys-color-primary)\n );\n\n --_md-radio-interaction-icon-color: var(\n --md-radio-interaction-icon-color,\n var(--md-sys-color-on-surface)\n );\n --_md-radio-selected-interaction-icon-color: var(\n --md-radio-selected-interaction-icon-color,\n var(--_md-radio-selected-icon-color)\n );\n\n --_md-radio-state-layer-color: var(\n --md-radio-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-radio-selected-state-layer-color: var(\n --md-radio-selected-state-layer-color,\n var(--_md-radio-selected-icon-color)\n );\n\n / configurable tokens end /\n\n display: grid;\n gap: var(--md-sys-layout-space-16);\n\n &[data-disabled] {\n color: rgb(\n from currentcolor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n }\n\n .radio-items {\n display: grid;\n\n &[data-orientation=\"horizontal\"] {\n display: flex;\n }\n }\n\n .radio {\n / invalid tokens /\n --_md-radio-invalid-icon-color: var(--md-sys-color-error);\n --_md-radio-invalid-state-layer-color: var(\n --_md-radio-invalid-icon-color\n );\n\n / indicator tokens /\n --_md-radio-size: calc(20 var(--dp, 1px));\n --_md-radio-icon-size: calc(\n var(--_md-radio-size) -\n calc(10 * var(--dp, 1px))\n );\n --_md-radio-state-layer-size: calc(40 * var(--dp, 1px));\n\n /* state layer tokens /\n --_md-radio-pressed-state-layer-color: var(\n --_md-radio-selected-state-layer-color\n );\n --_md-radio-pressed-selected-state-layer-color: var(\n --_md-radio-state-layer-color\n );\n\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-radio-state-layer-color);\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / styles /\n position: relative;\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-16);\n\n color: inherit;\n cursor: pointer;\n\n & {\n cursor: inherit;\n }\n\n &[data-disabled] {\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-radio-selected-state-layer-color);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n --_state-color: var(--_md-radio-pressed-state-layer-color);\n\n &[data-selected] {\n --_state-color: var(\n --_md-radio-pressed-selected-state-layer-color\n );\n }\n }\n\n &[data-invalid] {\n --_state-color: var(--_md-radio-invalid-state-layer-color);\n\n &[data-selected] {\n --_state-color: var(--_md-radio-invalid-state-layer-color);\n }\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n z-index: 1;\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n z-index: 1;\n }\n }\n\n .state-layer::before {\n content: \"\";\n\n position: absolute;\n inset: calc(-1 * var(--md-sys-layout-space-12));\n\n background-color: var(--_state-layer-color);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n pointer-events: none;\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .indicator {\n --_indicator-color: var(--_md-radio-icon-color);\n\n position: relative;\n\n inline-size: var(--_md-radio-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n border: var(--md-sys-shape-border-width-thick) solid\n var(--_indicator-color);\n\n transition: border-color var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-selected] {\n --_indicator-color: var(--_md-radio-selected-icon-color);\n }\n\n &[data-invalid] {\n --_indicator-color: var(--_md-radio-invalid-icon-color);\n }\n\n &[data-pressed],\n &[data-hovered],\n &[data-focus-visible] {\n --_indicator-color: var(--_md-radio-interaction-icon-color);\n\n &[data-selected] {\n --_indicator-color: var(\n --_md-radio-selected-interaction-icon-color\n );\n }\n\n &[data-invalid] {\n --_indicator-color: var(--_md-radio-invalid-icon-color);\n }\n }\n\n &[data-disabled] {\n --_indicator-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-selected] {\n --_indicator-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n }\n\n /* state layer /\n .indicator[data-show-state-layer]::before {\n content: \"\";\n\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_md-radio-state-layer-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n background-color: var(--_state-layer-color);\n\n transition: background-color\n var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n / indicator center icon /\n .indicator-icon {\n content: \"\";\n\n position: absolute;\n inline-size: var(--_md-radio-icon-size);\n aspect-ratio: 1 / 1;\n\n inset-inline-start: 50%;\n inset-block-start: 50%;\n translate: -50% -50%;\n\n background-color: var(--_indicator-color);\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n scale: 0;\n\n transition:\n background-color var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration),\n scale var(--md-sys-motion-standard-default-spatial)\n var(--md-sys-motion-standard-default-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-selected] {\n scale: 1;\n }\n }\n\n .indicator[data-focus-visible] {\n --focus-indicator-color: var(--md-sys-color-secondary);\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n}\n","import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { Radio as AriaRadio } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioProps } from \"./types\";\n\n/*\n A radio button control implementing Material Design 3 Radio guidelines.\n \n Designed for single-choice options within a {@link RadioGroup}. Features animated\n * selection dot scaling, state layers, and flexible label positioning.\n \n @example\n * ```tsx\n * import { RadioGroup, Radio } from '@adgytec/web-ui-components';\n \n <RadioGroup label=\"Select an option\">\n * <Radio value=\"1\">Option One</Radio>\n * <Radio value=\"2\">Option Two</Radio>\n * </RadioGroup>\n * ```\n /\nexport const Radio: React.FC<RadioProps> = ({\n className,\n children,\n labelPlacement,\n containerStateLayer,\n ...props\n}) => {\n const {\n labelPlacement: groupLabelPlacement,\n containerStateLayer: groupContainerStateLayer,\n } = useContext(RadioGroupContext);\n const placement = labelPlacement ?? groupLabelPlacement ?? \"end\";\n const stateLayer = containerStateLayer ?? groupContainerStateLayer ?? false;\n\n return (\n <AriaRadio\n className={(renderProps) =>\n clsx(\n styles[\"radio\"],\n stateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-radio\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isInvalid,\n } = renderProps;\n\n const dataAttrs = {\n \"data-selected\": isSelected \|\| undefined,\n \"data-hovered\": isHovered \|\| undefined,\n \"data-disabled\": isDisabled \|\| undefined,\n \"data-focused\": isFocused \|\| undefined,\n \"data-focus-visible\": isFocusVisible \|\| undefined,\n \"data-pressed\": isPressed \|\| undefined,\n \"data-show-state-layer\": !stateLayer \|\| undefined,\n \"data-invalid\": isInvalid \|\| undefined,\n };\n\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n return (\n <>\n {placement === \"start\" && label}\n\n <span\n className={clsx(styles[\"indicator\"], TapTarget)}\n {...dataAttrs}\n >\n <span\n className={clsx(styles[\"indicator-icon\"])}\n {...dataAttrs}\n ></span>\n </span>\n\n {placement === \"end\" && label}\n </>\n );\n }}\n </AriaRadio>\n );\n};\n","import { clsx } from \"clsx\";\nimport { RadioGroup as AriaRadioGroup } from \"react-aria-components\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { Label } from \"../Label\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioGroupProps } from \"./types\";\n\n/\n A container managing mutually exclusive {@link Radio} options.\n \n Coordinates single-selection radio values, keyboard navigation arrow-key roving,\n * accessible labels, helper descriptions, and validation error messages.\n \n @example\n * ```tsx\n * import { RadioGroup, Radio } from '@adgytec/web-ui-components';\n \n <RadioGroup label=\"Delivery Speed\" defaultValue=\"standard\">\n * <Radio value=\"standard\">Standard (3-5 days)</Radio>\n * <Radio value=\"express\">Express (1-2 days)</Radio>\n * <Radio value=\"overnight\">Overnight</Radio>\n * </RadioGroup>\n * ```\n /\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\n label,\n description,\n errorMessage,\n showDescriptionOnInvalid = false,\n children,\n className,\n radioItemsGap = 24,\n labelPlacement,\n containerStateLayer,\n ...props\n}) => {\n return (\n <RadioGroupContext value={{ labelPlacement, containerStateLayer }}>\n <AriaRadioGroup\n className={(renderProps) =>\n clsx(\n styles[\"radio-group\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-radio-group\n >\n {({ orientation, isInvalid }) => {\n const showDescription =\n description &&\n (!isInvalid \|\| (isInvalid && showDescriptionOnInvalid));\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <div\n data-orientation={orientation}\n className={clsx(styles[\"radio-items\"])}\n style={{\n gap: `calc(${radioItemsGap} var(--dp, 1px))`,\n }}\n >\n {children}\n </div>\n\n {showDescription && (\n <Description>{description}</Description>\n )}\n <FieldError>{errorMessage}</FieldError>\n </>\n );\n }}\n </AriaRadioGroup>\n </RadioGroupContext>\n );\n};\n"],"mappings":"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"}

package/dist/chunks/RichTooltip.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTooltip","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltip/richTooltip.module.css","../../src/components/Tooltip/RichTooltip/RichTooltip/RichTooltip.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-rich-tooltip-background\n* --md-rich-tooltip-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .tooltip {\n --_md-rich-tooltip-background: var(\n --md-rich-tooltip-background,\n var(--md-sys-color-surface-container)\n );\n --_md-rich-tooltip-color: var(\n --md-rich-tooltip-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n display: grid;\n gap: var(--md-sys-layout-space-12);\n\n padding-block-start: var(--md-sys-layout-space-12);\n padding-block-end: var(--md-sys-layout-space-8);\n\n background-color: var(--_md-rich-tooltip-background);\n color: var(--_md-rich-tooltip-color);\n\n border-radius: var(--md-sys-shape-corner-radius-medium);\n box-shadow: var(--md-sys-elevation-shadow-2);\n\n max-inline-size: calc(300 var(--dp, 1px));\n }\n}\n","// https://m3.material.io/components/tooltips/guidelines#00e87770-86d0-436d-b50b-436ff3cefe75\n// use this with popover, for more details read the article\n\nimport clsx from \"clsx\";\nimport styles from \"./richTooltip.module.css\";\n\~~nexport~~ ~~const~~ RichTooltip: React.~~FC<React.~~ComponentPropsWithRef<\"div\">> = ({\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(styles[\"tooltip\"], className)}\n {...props}\n data-rich-tooltip\n />\n );\n};\n"],"mappings":";;;;~~kDCMa~~,~~KAA4D~~,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,CAAA,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAGxE~~,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,~~OAHyE~~,~~kBAAA~~,~~KAAA~~,~~GAGzE~~,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,IAGwD,~~IAAA~~,EAAA,MAAlC,~~IAAA~~,~~EAAK~~,EAAM,~~SAAa~~,CAAS,GAAC,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAG/C,OAH+C,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,KADjD,IAAA,kBAAA,OAAA;EACe,~~WAAA~~;EAAkC,~~GACzC~~;EACJ,qBAAA;CAAiB,CAAA,GACnB,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA,~~IAJF~~;AAIE"}
1	+ {"version":3,"file":"RichTooltip","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","richTooltip_module_default","RichTooltip","$","className","props","t0","t1","t2"],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltip/richTooltip.module.css","../../src/components/Tooltip/RichTooltip/RichTooltip/RichTooltip.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-rich-tooltip-background\n* --md-rich-tooltip-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .tooltip {\n --_md-rich-tooltip-background: var(\n --md-rich-tooltip-background,\n var(--md-sys-color-surface-container)\n );\n --_md-rich-tooltip-color: var(\n --md-rich-tooltip-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n display: grid;\n gap: var(--md-sys-layout-space-12);\n\n padding-block-start: var(--md-sys-layout-space-12);\n padding-block-end: var(--md-sys-layout-space-8);\n\n background-color: var(--_md-rich-tooltip-background);\n color: var(--_md-rich-tooltip-color);\n\n border-radius: var(--md-sys-shape-corner-radius-medium);\n box-shadow: var(--md-sys-elevation-shadow-2);\n\n max-inline-size: calc(300 var(--dp, 1px));\n }\n}\n","// https://m3.material.io/components/tooltips/guidelines#00e87770-86d0-436d-b50b-436ff3cefe75\n// use this with popover, for more details read the article\n\nimport clsx from \"clsx\";\nimport styles from \"./richTooltip.module.css\";\n\n/*\n Props for the {@link RichTooltip} component.\n * Extends standard `HTMLDivElement` attributes.\n \n Configurable CSS tokens:\n * - `--md-rich-tooltip-background`: Background color of the rich tooltip (`var(--md-sys-color-surface-container)`).\n * - `--md-rich-tooltip-color`: Text color of the rich tooltip (`var(--md-sys-color-on-surface-variant)`).\n /\nexport interface RichTooltipProps extends React.ComponentPropsWithRef<\"div\"> {}\n\n/\n Container component implementing [Material 3 Rich Tooltips](https://m3.material.io/components/tooltips/overview#89f33800-4f51-4043-9884-219159f427f7).\n \n Rich tooltips provide contextual information, descriptive subheads, body copy, and optional actions.\n * Typically rendered inside a `Popover` component triggered by a `DialogTrigger`.\n \n Configurable CSS tokens:\n * - `--md-rich-tooltip-background`: Background color of the rich tooltip (`var(--md-sys-color-surface-container)`).\n * - `--md-rich-tooltip-color`: Text color of the rich tooltip (`var(--md-sys-color-on-surface-variant)`).\n \n @example\n * ```tsx\n * import {\n * Button,\n * Popover,\n * RichTooltip,\n * RichTooltipActions,\n * RichTooltipInfo,\n * RichTooltipSubhead,\n * RichTooltipText,\n * } from \"@adgytec/web-ui-components\";\n * import { DialogTrigger } from \"react-aria-components\";\n \n export function Example() {\n * return (\n * <DialogTrigger>\n * <Button label=\"More Info\" />\n * <Popover>\n * <RichTooltip>\n * <RichTooltipInfo>\n * <RichTooltipSubhead>Feature Overview</RichTooltipSubhead>\n * <RichTooltipText>\n * Detailed explanation of this feature and its benefits.\n * </RichTooltipText>\n * </RichTooltipInfo>\n * <RichTooltipActions>\n * <Button label=\"Learn More\" size=\"small\" color=\"text\" />\n * </RichTooltipActions>\n * </RichTooltip>\n * </Popover>\n * </DialogTrigger>\n * );\n * }\n * ```\n */\nexport const RichTooltip: React.FC<RichTooltipProps> = ({\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(styles[\"tooltip\"], className)}\n {...props}\n data-rich-tooltip\n />\n );\n};\n"],"mappings":";;;;kDC6DaO,KAA0C,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGtD,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHuD,eAAA,GAAAE,KAAAC,GAGvD,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAGwD,IAAAD,EAAA,MAAlC,IAAAP,EAAKC,EAAM,SAAaO,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAG/C,OAH+CL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KADjD,IAAA,kBAAA,OAAA;EACe,WAAAA;EAAkC,GACzCF;EACJ,qBAAA;CAAiB,CAAA,GACnB,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAJFK;AAIE"}

package/dist/chunks/RichTooltipActions.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTooltipActions","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipActions/richTooltipActions.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipActions/RichTooltipActions.tsx"],"sourcesContent":["@layer adgytec.comps {\n .actions {\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-4);\n }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipActions.module.css\";\n\n// ~~use~~ ~~Button~~ ~~color~~ -> ~~text~~ ~~and~~ ~~size~~ -> ~~small\nexport~~ ~~const~~ ~~RichTooltipActions:~~ ~~React.FC<\~~n React.ComponentPropsWithRef<\"div\">\n> = ({ className, ...props }) => {\n return <div className={clsx(styles[\"actions\"], className)} {...props} />;\n};\n"],"mappings":";;;;~~kDCIa~~,~~KAET~~,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,CAAA,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAAwB~~,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,~~OAAvB~~,~~kBAAA~~,~~KAAA~~,~~GAAuB~~,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~IACiC~~,~~IAAA~~,EAAA,MAAlC,~~IAAA~~,~~EAAK~~,EAAM,~~SAAa~~,CAAS,GAAC,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAe,~~OAAf~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,KAAlD,IAAA,kBAAA,OAAA;EAAgB,~~WAAA~~;EAAkC,~~GAAM~~;CAAK,CAAA,GAAI,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA,~~IAAjE~~;AAAiE"}
1	+ {"version":3,"file":"RichTooltipActions","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","richTooltipActions_module_default","RichTooltipActions","$","className","props","t0","t1","t2"],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipActions/richTooltipActions.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipActions/RichTooltipActions.tsx"],"sourcesContent":["@layer adgytec.comps {\n .actions {\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-4);\n }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipActions.module.css\";\n\n/*\n Props for the {@link RichTooltipActions} component.\n * Extends standard `HTMLDivElement` attributes.\n /\nexport interface RichTooltipActionsProps\n extends React.ComponentPropsWithRef<\"div\"> {}\n\n/\n Action button container for a {@link RichTooltip}.\n \n Renders action elements at the bottom of the rich tooltip with proper horizontal alignment and spacing.\n * Recommended to contain buttons with `size=\"small\"` and `color=\"text\"`.\n \n @example\n * ```tsx\n * import { Button, RichTooltipActions } from \"@adgytec/web-ui-components\";\n \n export function Example() {\n * return (\n * <RichTooltipActions>\n * <Button label=\"Dismiss\" size=\"small\" color=\"text\" />\n * <Button label=\"Learn More\" size=\"small\" color=\"text\" />\n * </RichTooltipActions>\n * );\n * }\n * ```\n */\nexport const RichTooltipActions: React.FC<RichTooltipActionsProps> = ({\n className,\n ...props\n}) => {\n return <div className={clsx(styles[\"actions\"], className)} {...props} />;\n};\n"],"mappings":";;;;kDC8BaO,KAAwD,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGpE,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHqE,eAAA,GAAAE,KAAAC,GAGrE,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAC4D,IAAAD,EAAA,MAAlC,IAAAP,EAAKC,EAAM,SAAaO,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAAe,OAAfL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAAlD,IAAA,kBAAA,OAAA;EAAgB,WAAAA;EAAkC,GAAMF;CAAK,CAAA,GAAI,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAAjEK;AAAiE"}

package/dist/chunks/RichTooltipInfo.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTooltipInfo","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/richTooltipInfo.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/RichTooltipInfo.tsx"],"sourcesContent":["@layer adgytec.comps {\n .info {\n padding-inline: var(--md-sys-layout-space-16);\n\n display: grid;\n gap: var(--md-sys-layout-space-4);\n }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipInfo.module.css\";\n\~~nexport~~ ~~const~~ RichTooltipInfo: React.~~FC<React.~~ComponentPropsWithRef<\"div\">> = ({\n className,\n ...props\n}) => {\n return <div className={clsx(styles[\"info\"], className)} {...props} />;\n};\n"],"mappings":";;;;~~4CCGa~~,~~KAAgE~~,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,CAAA,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAG5E~~,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,~~OAH6E~~,~~kBAAA~~,~~KAAA~~,~~GAG7E~~,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,IACyD,~~IAAA~~,EAAA,MAA/B,~~IAAA~~,~~EAAK~~,EAAM,~~MAAU~~,CAAS,GAAC,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAe,~~OAAf~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,KAA/C,IAAA,kBAAA,OAAA;EAAgB,~~WAAA~~;EAA+B,~~GAAM~~;CAAK,CAAA,GAAI,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA,~~IAA9D~~;AAA8D"}
1	+ {"version":3,"file":"RichTooltipInfo","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","richTooltipInfo_module_default","RichTooltipInfo","$","className","props","t0","t1","t2"],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/richTooltipInfo.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/RichTooltipInfo.tsx"],"sourcesContent":["@layer adgytec.comps {\n .info {\n padding-inline: var(--md-sys-layout-space-16);\n\n display: grid;\n gap: var(--md-sys-layout-space-4);\n }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipInfo.module.css\";\n\n/*\n Props for the {@link RichTooltipInfo} component.\n * Extends standard `HTMLDivElement` attributes.\n /\nexport interface RichTooltipInfoProps\n extends React.ComponentPropsWithRef<\"div\"> {}\n\n/\n Text content container for a {@link RichTooltip}.\n \n Houses the {@link RichTooltipSubhead} title and {@link RichTooltipText} description\n * with proper Material 3 padding and spacing.\n \n @example\n * ```tsx\n * import {\n * RichTooltipInfo,\n * RichTooltipSubhead,\n * RichTooltipText,\n * } from \"@adgytec/web-ui-components\";\n \n export function Example() {\n * return (\n * <RichTooltipInfo>\n * <RichTooltipSubhead>Header Title</RichTooltipSubhead>\n * <RichTooltipText>Informative description goes here.</RichTooltipText>\n * </RichTooltipInfo>\n * );\n * }\n * ```\n */\nexport const RichTooltipInfo: React.FC<RichTooltipInfoProps> = ({\n className,\n ...props\n}) => {\n return <div className={clsx(styles[\"info\"], className)} {...props} />;\n};\n"],"mappings":";;;;4CCkCaO,KAAkD,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAG9D,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAH+D,eAAA,GAAAE,KAAAC,GAG/D,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IACyD,IAAAD,EAAA,MAA/B,IAAAP,EAAKC,EAAM,MAAUO,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAAe,OAAfL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAA/C,IAAA,kBAAA,OAAA;EAAgB,WAAAA;EAA+B,GAAMF;CAAK,CAAA,GAAI,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAA9DK;AAA8D"}

package/dist/chunks/SearchField.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchField","names":[],"sources":["../../src/components/Input/SearchField/searchField.module.css","../../src/components/Input/SearchField/SearchField.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-search-field-background\n* --md-search-field-color\n* --md-search-field-supporting-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .search-field {\n --_md-search-field-background: var(\n --md-search-field-background,\n var(--md-sys-color-surface-container-high)\n );\n --_md-search-field-color: var(\n --md-search-field-color,\n var(--md-sys-color-on-surface)\n );\n --_md-search-field-supporting-color: var(\n --md-search-field-supporting-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n display: flex;\n align-items: center;\n\n background-color: var(--_md-search-field-background);\n color: var(--_md-search-field-color);\n\n box-shadow: var(--md-sys-elevation-shadow-3);\n\n padding-block: var(--md-sys-layout-space-8);\n padding-inline-start: var(--md-sys-layout-space-16);\n padding-inline-end: var(--md-sys-layout-space-8);\n\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n &[data-empty] {\n padding-block: var(--md-sys-layout-space-16);\n }\n\n &:has([data-focused]) {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n\n &[data-disabled] {\n --_md-search-field-background: rgb(\n from var(--md-sys-color-surface-container-high) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_md-search-field-color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n box-shadow: none;\n }\n }\n\n .search-field [data-button] {\n --md-button-color: var(--_md-search-field-supporting-color);\n\n &[data-disabled] [data-visual-button] {\n background-color: transparent;\n }\n }\n\n .input {\n all: unset;\n\n width: 100%;\n\n padding-inline-start: var(--md-sys-layout-space-16);\n padding-inline-end: var(--md-sys-layout-space-8);\n\n &[data-disabled] {\n cursor: default;\n }\n }\n\n .input::placeholder {\n color: var(--_md-search-field-supporting-color);\n }\n\n .input[data-disabled]::placeholder {\n color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n}\n","import { clsx } from \"clsx\";\nimport { Search, X } from \"lucide-react\";\nimport { SearchField as AriaSearchField, Input } from \"react-aria-components\";\nimport { IconButton } from \"@/components/Button\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport styles from \"./searchField.module.css\";\nimport type { SearchFieldProps } from \"./types\";\n\nexport const SearchField: React.FC<SearchFieldProps> = ({\n placeholder = \"Search\",\n className,\n ...props\n}) => {\n return (\n <AriaSearchField\n className={(renderProps) =>\n clsx(\n styles[\"search-field\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n >\n {({ isEmpty }) => (\n <>\n <Icon icon={Search} size={24} data-search-icon />\n\n <Input\n className={clsx(styles[\"input\"], typography.bodyLarge)}\n placeholder={placeholder}\n />\n\n {!isEmpty && (\n <IconButton\n icon={X}\n size=\"small\"\n width=\"default\"\n color=\"standard\"\n />\n )}\n </>\n )}\n </AriaSearchField>\n );\n};\n"],"mappings":";;;;;;;;;;~~GCSa~~,KAA2C,EACpD,iBAAc,UACd,cACA,~~GAAG~~,QAGC,~~kBAAC~~,GAAD;CACI,YAAY,~~MACR~~,~~EACI~~,EAAO,iBACP,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CAAW,~~IACrB~~,CACV;CAEJ,~~GAAI~~;~~YAEF~~,EAAE,iBACA,~~kBAAA~~,GAAA,EAAA,UAAA;EACI,~~kBAAC~~,GAAD;GAAM,~~MAAM~~;GAAQ,MAAM;GAAI,oBAAA;EAAgB,CAAA;EAE9C,~~kBAAC~~,GAAD;GACI,~~WAAW~~,~~EAAK~~,~~EAAO~~,~~OAAU~~,EAAW,SAAS;GACxC;EAAY,CAAA;EAG5B,~~CAAC~~,KACE,~~kBAAC~~,GAAD;GACI,~~MAAM~~;GACN,MAAK;GACL,OAAM;GACN,OAAM;EAAU,CAAA;CAG5B,EAAA,CAAA;AAES,CAAA"}
1	+ {"version":3,"file":"SearchField","names":["SearchField","AriaSearchField","styles","_Fragment","typography","searchField_module_default","SearchField$1","props","SearchField","clsx","className","renderProps","Fragment","Icon","Search","Input","\"input\"","isEmpty","IconButton","X"],"sources":["../../src/components/Input/SearchField/searchField.module.css","../../src/components/Input/SearchField/SearchField.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-search-field-background\n* --md-search-field-color\n* --md-search-field-supporting-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .search-field {\n --_md-search-field-background: var(\n --md-search-field-background,\n var(--md-sys-color-surface-container-high)\n );\n --_md-search-field-color: var(\n --md-search-field-color,\n var(--md-sys-color-on-surface)\n );\n --_md-search-field-supporting-color: var(\n --md-search-field-supporting-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n display: flex;\n align-items: center;\n\n background-color: var(--_md-search-field-background);\n color: var(--_md-search-field-color);\n\n box-shadow: var(--md-sys-elevation-shadow-3);\n\n padding-block: var(--md-sys-layout-space-8);\n padding-inline-start: var(--md-sys-layout-space-16);\n padding-inline-end: var(--md-sys-layout-space-8);\n\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n &[data-empty] {\n padding-block: var(--md-sys-layout-space-16);\n }\n\n &:has([data-focused]) {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n\n &[data-disabled] {\n --_md-search-field-background: rgb(\n from var(--md-sys-color-surface-container-high) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_md-search-field-color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n box-shadow: none;\n }\n }\n\n .search-field [data-button] {\n --md-button-color: var(--_md-search-field-supporting-color);\n\n &[data-disabled] [data-visual-button] {\n background-color: transparent;\n }\n }\n\n .input {\n all: unset;\n\n width: 100%;\n\n padding-inline-start: var(--md-sys-layout-space-16);\n padding-inline-end: var(--md-sys-layout-space-8);\n\n &[data-disabled] {\n cursor: default;\n }\n }\n\n .input::placeholder {\n color: var(--_md-search-field-supporting-color);\n }\n\n .input[data-disabled]::placeholder {\n color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n}\n","import { clsx } from \"clsx\";\nimport { Search, X } from \"lucide-react\";\nimport { SearchField as AriaSearchField, Input } from \"react-aria-components\";\nimport { IconButton } from \"@/components/Button\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport styles from \"./searchField.module.css\";\nimport type { SearchFieldProps } from \"./types\";\n\n/*\n A search input field providing a leading search icon and automatic clear button.\n \n Implements accessible search interactions based on React Aria's `SearchField`,\n * clearing text via keyboard (`Escape`) or the integrated clear button.\n \n @example\n * ```tsx\n * import { SearchField } from '@adgytec/web-ui-components';\n \n <SearchField\n * placeholder=\"Search documents...\"\n * onSubmit={(query) => console.log('Searching for:', query)}\n * />\n * ```\n */\nexport const SearchField: React.FC<SearchFieldProps> = ({\n placeholder = \"Search\",\n className,\n ...props\n}) => {\n return (\n <AriaSearchField\n className={(renderProps) =>\n clsx(\n styles[\"search-field\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n >\n {({ isEmpty }) => (\n <>\n <Icon icon={Search} size={24} data-search-icon />\n\n <Input\n className={clsx(styles[\"input\"], typography.bodyLarge)}\n placeholder={placeholder}\n />\n\n {!isEmpty && (\n <IconButton\n icon={X}\n size=\"small\"\n width=\"default\"\n color=\"standard\"\n />\n )}\n </>\n )}\n </AriaSearchField>\n );\n};\n"],"mappings":";;;;;;;;;;GCyBaA,KAA2C,EACpD,iBAAc,UACd,cACA,GAAGO,QAGC,kBAACN,GAAD;CACI,YAAY,MACRQ,EACIP,EAAO,iBACP,OAAOQ,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAIH;CAEF,WAAA,EAAE,iBACA,kBAAAJ,GAAA,EAAA,UAAA;EACI,kBAACU,GAAD;GAAM,MAAMC;GAAQ,MAAM;GAAI,oBAAA;EAAgB,CAAA;EAE9C,kBAACC,GAAD;GACI,WAAWN,EAAKP,EAAOc,OAAUZ,EAAW,SAAS;GACxC;EAAY,CAAA;EAG5B,CAACa,KACE,kBAACC,GAAD;GACI,MAAMC;GACN,MAAK;GACL,OAAM;GACN,OAAM;EAAU,CAAA;CAG5B,EAAA,CAAA;AAES,CAAA"}

package/dist/chunks/SelectPopover.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectPopover","names":[],"sources":["../../src/components/Input/Select/SelectPopover/selectPopover.module.css","../../src/components/Input/Select/SelectPopover/SelectPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n min-inline-size: var(--trigger-width);\n\n display: grid;\n grid-template-rows: 1fr;\n }\n}\n","import { clsx } from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./selectPopover.module.css\";\n\~~nexport~~ ~~const~~ SelectPopover: ~~React.FC<\~~n React.ComponentPropsWithRef<typeof Popover>\n> = ({ className, ...props }) => {\n return (\n <Popover\n className={(renderProps) =>\n clsx(\n styles[\"popover\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;~~kDCIa~~,~~KAET~~,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,CAAA,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAAwB~~,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,~~OAAvB~~,~~kBAAA~~,~~KAAA~~,~~GAAuB~~,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~IASX~~,~~IAAA~~,EAAA,MANM,KAAA,~~MACP~~,~~EACI~~,EAAM,SACN,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CACF,~~IAFd~~,CAGJ,GAAC,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAGP,~~OAHO~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,KAPT,IAAA,~~kBAAC~~,GAAD;EACe,~~WAAA~~;EAMN,~~GAED~~;CAAK,CAAA,GACX,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA,~~IAVF~~;AAUE"}
1	+ {"version":3,"file":"SelectPopover","names":["_c","styles","require_compiler_runtime","import_compiler_runtime","selectPopover_module_default","SelectPopover","$","className","props","t0","t1","clsx","renderProps","t2","Popover"],"sources":["../../src/components/Input/Select/SelectPopover/selectPopover.module.css","../../src/components/Input/Select/SelectPopover/SelectPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n min-inline-size: var(--trigger-width);\n\n display: grid;\n grid-template-rows: 1fr;\n }\n}\n","import { clsx } from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./selectPopover.module.css\";\n\n/*\n Props for the {@link SelectPopover} component.\n * Extends {@link Popover} props.\n /\nexport interface SelectPopoverProps\n extends React.ComponentPropsWithRef<typeof Popover> {}\n\n/\n Floating dropdown container for displaying {@link SelectList} items.\n */\nexport const SelectPopover: React.FC<SelectPopoverProps> = ({\n className,\n ...props\n}) => {\n return (\n <Popover\n className={(renderProps) =>\n clsx(\n styles[\"popover\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;kDCcaK,KAA8C,MAAA;CAAA,IAAAC,KAAA,GAAAN,EAAAA,EAAAA,CAAA,CAAA,GAAAO,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAG1D,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAH2D,eAAA,GAAAE,KAAAC,GAG3D,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IASgB,IAAAD,EAAA,MANM,KAAA,MACPK,EACIV,EAAM,SACN,OAAOM,KAAc,aACfA,EAAUK,CACF,IAFdL,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAG;CAGP,OAHOP,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAPT,IAAA,kBAACI,GAAD;EACe,WAAAJ;EAMN,GAEDF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAG,KAAA,IAAAP,EAAA,IAVFO;AAUE"}

package/dist/chunks/SelectTrigger.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectTrigger","names":["ChevronDown","TextFieldIconSize"],"sources":["../../src/components/Input/Select/SelectTrigger/selectTrigger.module.css","../../src/components/Input/Select/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["@layer adgytec.overrides {\n .trigger {\n --rotate: 0;\n\n justify-content: space-between;\n cursor: pointer;\n\n &[data-pressed] {\n --rotate: 180deg;\n }\n\n > svg {\n color: var(--group-color);\n rotate: var(--rotate);\n transition: rotate var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n &[data-pressed] {\n --outline-color: var(--outline-color-focused-normal);\n --outline-color-focused: var(--outline-color);\n\n &[data-invalid] {\n --outline-color: var(--outline-color-invalid);\n }\n }\n\n &[data-disabled] {\n cursor: default;\n }\n }\n\n .select-value {\n flex: 1;\n text-align: start;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &[data-placeholder] {\n color: var(--placeholder-color);\n }\n }\n}\n","import clsx from \"clsx\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useContext } from \"react\";\nimport { Button, SelectStateContext, SelectValue } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport {\n EditorInputStyles,\n EditorStyles,\n TextFieldIconSize,\n UnsetStyles,\n} from \"../../core\";\nimport styles from \"./selectTrigger.module.css\";\n\~~nexport~~ ~~const~~ SelectTrigger: React~~.FC<\~~n Omit<React.ComponentPropsWithRef<typeof Button>, \"children\">\n> = (props) => {\n const selectContextVal = useContext(SelectStateContext);\n const invalid = selectContextVal?.displayValidation.isInvalid;\n\n return (\n <Button\n className={clsx(\n UnsetStyles,\n EditorStyles,\n EditorInputStyles,\n typography.bodyLarge,\n styles[\"trigger\"]\n )}\n {...props}\n data-invalid={invalid \|\| undefined}\n data-select-trigger={true}\n >\n <SelectValue className={clsx(styles[\"select-value\"])}>\n {({ selectedText, isPlaceholder, defaultChildren }) =>\n isPlaceholder ? defaultChildren : selectedText\n }\n </SelectValue>\n\n <Icon icon={ChevronDown} size={TextFieldIconSize} />\n </Button>\n );\n};\n"],"mappings":";;;;;;;;;;;;;~~GCca~~,~~KAET~~,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,CAAA,~~GAEA~~,~~IADyB~~,~~EAAW~~,CACpB,CAAA,EAAgB,kBAA6B,~~WAAC~~;CAAA,~~AAAA~~,EAAA,OAAA,OAAA,IAAA,2BAAA,KAI3C,~~IAAA~~,~~EACP~~,~~GACA~~,~~GACA~~,~~GACA~~,EAAU,~~WACV~~,EAAM,OACV,GAAC,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA;CAEa,~~IAAA~~,~~IAAA~~,KAAA,KAAA,~~GAAoB~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,OAAA,OAAA,IAAA,2BAAA,KAGlC,IAAA,~~kBAAC~~,GAAD;EAAwB,~~WAAA~~,~~EAAK~~,EAAO,eAAe;~~YAC9C~~;CADO,CAAA,GAMZ,IAAA,~~kBAAC~~,GAAD;~~EAAYA~~,~~MAAA~~;~~EAAmBC~~,MAAAA;CAAiB,CAAA,GAAI,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,MAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA;CAAA,~~IAAA~~;CAC/C,OAD+C,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,KAlBxD,IAAA,~~kBAAC~~,GAAD;EACe,~~WAAA~~;EAMV,~~GACG~~;EACU,~~gBAAA~~;EACO,uBAAA;~~YAVzB~~,~~CAYI~~,~~GAMA~~,CAlBG;KAmBE,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA,~~IAnBT~~;AAmBS;~~AAxBb~~,~~SAAA~~,EAAA,GAAA;~~CAkBc~~,IAAA,EAAA,iBAAA,kBAAA,~~uBAAA~~;CAAgD,~~OAC9C~~,~~IAAA~~,~~IAAA~~;AAA8C"}
1	+ {"version":3,"file":"SelectTrigger","names":["ChevronDown","TextFieldIconSize","_c","clsx","styles","require_compiler_runtime","Icon","UnsetStyles","EditorInputStyles","EditorStyles","clsx$1","import_compiler_runtime","selectTrigger_module_default","SelectTrigger","$","invalid","useContext","SelectStateContext","t0","typography","t1","t2","t3","SelectValue","_temp","ChevronDown","t4","props","Button","isPlaceholder","defaultChildren","selectedText"],"sources":["../../src/components/Input/Select/SelectTrigger/selectTrigger.module.css","../../src/components/Input/Select/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["@layer adgytec.overrides {\n .trigger {\n --rotate: 0;\n\n justify-content: space-between;\n cursor: pointer;\n\n &[data-pressed] {\n --rotate: 180deg;\n }\n\n > svg {\n color: var(--group-color);\n rotate: var(--rotate);\n transition: rotate var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n &[data-pressed] {\n --outline-color: var(--outline-color-focused-normal);\n --outline-color-focused: var(--outline-color);\n\n &[data-invalid] {\n --outline-color: var(--outline-color-invalid);\n }\n }\n\n &[data-disabled] {\n cursor: default;\n }\n }\n\n .select-value {\n flex: 1;\n text-align: start;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &[data-placeholder] {\n color: var(--placeholder-color);\n }\n }\n}\n","import clsx from \"clsx\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useContext } from \"react\";\nimport { Button, SelectStateContext, SelectValue } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport {\n EditorInputStyles,\n EditorStyles,\n TextFieldIconSize,\n UnsetStyles,\n} from \"../../core\";\nimport styles from \"./selectTrigger.module.css\";\n\n/*\n Props for the {@link SelectTrigger} component.\n * Extends React Aria's `Button` props (excluding `children`).\n /\nexport interface SelectTriggerProps\n extends Omit<React.ComponentPropsWithRef<typeof Button>, \"children\"> {}\n\n/\n The clickable input trigger button that displays the selected value and toggles the select dropdown menu.\n */\nexport const SelectTrigger: React.FC<SelectTriggerProps> = (props) => {\n const selectContextVal = useContext(SelectStateContext);\n const invalid = selectContextVal?.displayValidation.isInvalid;\n\n return (\n <Button\n className={clsx(\n UnsetStyles,\n EditorStyles,\n EditorInputStyles,\n typography.bodyLarge,\n styles[\"trigger\"]\n )}\n {...props}\n data-invalid={invalid \|\| undefined}\n data-select-trigger={true}\n >\n <SelectValue className={clsx(styles[\"select-value\"])}>\n {({ selectedText, isPlaceholder, defaultChildren }) =>\n isPlaceholder ? defaultChildren : selectedText\n }\n </SelectValue>\n\n <Icon icon={ChevronDown} size={TextFieldIconSize} />\n </Button>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCwBaa,KAA8C,MAAA;CAAA,IAAAC,KAAA,GAAAZ,EAAAA,EAAAA,CAAA,CAAA,GAEvDa,IADyBC,EAAWC,CACpB,CAAA,EAAgB,kBAA6B,WAACC;CAAA,AAAAJ,EAAA,OAAA,OAAA,IAAA,2BAAA,KAI3C,IAAAX,EACPI,GACAE,GACAD,GACAW,EAAU,WACVf,EAAM,OACV,GAAC,EAAA,KAAAc,KAAA,IAAAJ,EAAA;CAEa,IAAAM,IAAAL,KAAA,KAAA,GAAoBM,GAAAC;CAAA,AAAAR,EAAA,OAAA,OAAA,IAAA,2BAAA,KAGlC,IAAA,kBAACS,GAAD;EAAwB,WAAApB,EAAKC,EAAO,eAAe;EAC9C,UAAAoB;CADO,CAAA,GAMZ,IAAA,kBAAClB,GAAD;EAAYN,MAAAyB;EAAmBxB,MAAAA;CAAiB,CAAA,GAAI,EAAA,KAAAoB,GAAA,EAAA,KAAAC,MAAA,IAAAR,EAAA,IAAA,IAAAA,EAAA;CAAA,IAAAY;CAC/C,OAD+CZ,EAAA,OAAAa,KAAAb,EAAA,OAAAM,KAlBxD,IAAA,kBAACQ,GAAD;EACe,WAAAV;EAMV,GACGS;EACU,gBAAAP;EACO,uBAAA;EAVzB,UAAA,CAYIC,GAMAC,CAlBG;KAmBE,EAAA,KAAAK,GAAA,EAAA,KAAAP,GAAA,EAAA,KAAAM,KAAA,IAAAZ,EAAA,IAnBTY;AAmBS;AAxB0C,SAAAF,EAAA,GAAA;CAkBzC,IAAA,EAAA,iBAAA,kBAAA,uBAAAN;CAAgD,OAC9CW,IAAAC,IAAAC;AAA8C"}

package/dist/chunks/SideSheet CHANGED Viewed

@@ -10,13 +10,13 @@ import { Dialog as u, Header as d, Heading as f } from "react-aria-components";
 import { X as p } from "lucide-react";
 import '../assets/SideSheet.css';//#region src/components/Sheets/SideSheet/sideSheet.module.css
 var m = e(), h = {
-	"side-sheet-dialog": "_side-sheet-dialog_x6kag_10",
-	"side-sheet": "_side-sheet_x6kag_10",
-	header: "_header_x6kag_70",
-	close: "_close_x6kag_80",
-	headline: "_headline_x6kag_84",
-	main: "_main_x6kag_88",
-	actions: "_actions_x6kag_95"
+	"side-sheet-dialog": "_side-sheet-dialog_6ff5y_10",
+	"side-sheet": "_side-sheet_6ff5y_10",
+	header: "_header_6ff5y_70",
+	close: "_close_6ff5y_80",
+	headline: "_headline_6ff5y_84",
+	main: "_main_6ff5y_88",
+	actions: "_actions_6ff5y_95"
 }, g = (e) => {
 	let t = (0, m.c)(10), n, s;
 	t[0] === e ? (n = t[1], s = t[2]) : ({className: n, ...s} = e, t[0] = e, t[1] = n, t[2] = s);

package/dist/chunks/SideSheet.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideSheet","names":["alignment","layout","headline","X","alignment"],"sources":["../../src/components/Sheets/SideSheet/sideSheet.module.css","../../src/components/Sheets/SideSheet/SideSheetDialog.tsx","../../src/components/Sheets/SideSheet/SideSheet.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-side-sheet-background\n* --md-side-sheet-color\n* --md-side-sheet-headline-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .side-sheet-dialog {\n --_md-side-sheet-background: var(\n --md-side-sheet-background,\n var(--md-sys-color-surface-container-low)\n );\n --_md-side-sheet-color: var(\n --md-side-sheet-color,\n var(--md-sys-color-on-surface)\n );\n --_md-side-sheet-headline-color: var(\n --md-side-sheet-headline-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-side-sheet-padding-inline: var(--md-sys-layout-space-16);\n --_max-inline-size: calc(400 var(--dp, 1px));\n\n inline-size: min(100svi, var(--_max-inline-size));\n block-size: 100dvb;\n\n display: grid;\n grid-template-rows: 1fr;\n\n background-color: var(--_md-side-sheet-background);\n color: var(--_md-side-sheet-color);\n\n box-shadow: var(--md-sys-elevation-shadow-1);\n border-radius: var(--md-sys-shape-corner-radius-large);\n\n outline: none;\n\n &[data-layout=\"detached\"] {\n block-size: calc(100dvb - calc(2 * var(--_detached-margin)));\n inline-size: min(\n calc(100svi - calc(2 * var(--_detached-margin))),\n var(--_max-inline-size)\n );\n }\n\n &[data-layout=\"standard\"] {\n &[data-alignment=\"start\"] {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n &[data-alignment=\"end\"] {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n }\n }\n\n .side-sheet {\n grid-template-rows: auto 1fr;\n padding-block: var(--md-sys-layout-space-16);\n\n &[data-actions] {\n grid-template-rows: auto 1fr auto;\n }\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-12);\n\n padding-inline: var(--_md-side-sheet-padding-inline);\n padding-block-end: var(--md-sys-layout-space-12);\n }\n\n .close {\n margin-inline-start: auto;\n }\n\n .headline {\n color: var(--_md-side-sheet-headline-color);\n }\n\n .main {\n padding-inline: var(--_md-side-sheet-padding-inline);\n overflow-y: auto;\n\n padding-block: var(--md-sys-layout-space-12);\n }\n\n .actions {\n --_divider-thickness: calc(1 * var(--dp, 1px));\n --_divider-color: rgb(\n from var(--md-sys-color-outline) r g b /\n var(--md-sys-state-divider)\n );\n\n padding-inline: var(--_md-side-sheet-padding-inline);\n padding-block-start: var(--md-sys-layout-space-12);\n display: flex;\n gap: var(--md-sys-layout-space-12);\n\n border-block-start: var(--_divider-thickness) solid\n var(--_divider-color);\n\n /* biome-ignore lint: different elements /\n &[data-alignment=\"start\"] {\n justify-content: end;\n }\n\n / biome-ignore lint: different elements */\n &[data-alignment=\"end\"] {\n justify-content: start;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { Dialog } from \"react-aria-components\";\nimport { DialogContext } from \"@/components/Dialog\";\nimport { SideSheetContext } from \"../SideSheetModal\";\nimport styles from \"./sideSheet.module.css\";\nimport type { SideSheetDialogProps } from \"./types\";\n\nexport const SideSheetDialog: React.FC<SideSheetDialogProps> = ({\n className,\n ...props\n}) => {\n const { layout, alignment } = useContext(SideSheetContext);\n\n return (\n <DialogContext value={true}>\n <Dialog\n className={clsx(styles[\"side-sheet-dialog\"], className)}\n data-alignment={alignment}\n data-layout={layout}\n {...props}\n />\n </DialogContext>\n );\n};\n","import clsx from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useContext } from \"react\";\nimport { Header, Heading } from \"react-aria-components\";\nimport { IconButton } from \"@/components/Button\";\nimport { typography } from \"@/utils\";\nimport { SideSheetContext } from \"../SideSheetModal\";\nimport { SideSheetDialog } from \"./SideSheetDialog\";\nimport styles from \"./sideSheet.module.css\";\nimport type { SideSheetProps } from \"./types\";\n\nexport const SideSheet: React.FC<SideSheetProps> = ({\n headline,\n actions,\n className,\n children,\n ...props\n}) => {\n const { alignment } = useContext(SideSheetContext);\n const hasActions = Array.isArray(actions) ? actions.length > 0 : !!actions;\n\n return (\n <SideSheetDialog\n className={clsx(styles[\"side-sheet\"], className)}\n {...props}\n data-actions={hasActions \|\| undefined}\n >\n {(renderProps) => (\n <>\n <Header\n className={clsx(styles[\"header\"])}\n data-headline={!!headline \|\| undefined}\n >\n {headline && (\n <Heading\n slot=\"title\"\n className={clsx(\n styles[\"headline\"],\n typography.titleLarge\n )}\n >\n {headline}\n </Heading>\n )}\n\n <IconButton\n slot=\"close\"\n icon={X}\n color=\"standard\"\n className={clsx(styles[\"close\"])}\n />\n </Header>\n\n <div className={clsx(styles[\"main\"])}>\n {typeof children === \"function\"\n ? children(renderProps)\n : children}\n </div>\n\n {hasActions && (\n <div\n className={clsx(styles[\"actions\"])}\n data-alignment={alignment}\n >\n {typeof actions === \"function\"\n ? actions(renderProps)\n : actions}\n </div>\n )}\n </>\n )}\n </SideSheetDialog>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"SideSheet","names":["alignment","layout","_c","clsx","styles","headline","X","alignment","_c","clsx","styles","_Fragment","require_compiler_runtime","SideSheetContext","clsx$1","import_compiler_runtime","sideSheet_module_default","SideSheetDialog","$","className","props","t0","useContext","t1","t2","alignment","layout","DialogContext","Dialog","SideSheet","actions","children","headline","hasActions","t3","Fragment","Header","Heading","typography","IconButton","X","renderProps","t4"],"sources":["../../src/components/Sheets/SideSheet/sideSheet.module.css","../../src/components/Sheets/SideSheet/SideSheetDialog.tsx","../../src/components/Sheets/SideSheet/SideSheet.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-side-sheet-background\n* --md-side-sheet-color\n* --md-side-sheet-headline-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .side-sheet-dialog {\n --_md-side-sheet-background: var(\n --md-side-sheet-background,\n var(--md-sys-color-surface-container-low)\n );\n --_md-side-sheet-color: var(\n --md-side-sheet-color,\n var(--md-sys-color-on-surface)\n );\n --_md-side-sheet-headline-color: var(\n --md-side-sheet-headline-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-side-sheet-padding-inline: var(--md-sys-layout-space-16);\n --_max-inline-size: calc(400 var(--dp, 1px));\n\n inline-size: min(100svi, var(--_max-inline-size));\n block-size: 100dvb;\n\n display: grid;\n grid-template-rows: 1fr;\n\n background-color: var(--_md-side-sheet-background);\n color: var(--_md-side-sheet-color);\n\n box-shadow: var(--md-sys-elevation-shadow-1);\n border-radius: var(--md-sys-shape-corner-radius-large);\n\n outline: none;\n\n &[data-layout=\"detached\"] {\n block-size: calc(100dvb - calc(2 * var(--_detached-margin)));\n inline-size: min(\n calc(100svi - calc(2 * var(--_detached-margin))),\n var(--_max-inline-size)\n );\n }\n\n &[data-layout=\"standard\"] {\n &[data-alignment=\"start\"] {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n &[data-alignment=\"end\"] {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n }\n }\n\n .side-sheet {\n grid-template-rows: auto 1fr;\n padding-block: var(--md-sys-layout-space-16);\n\n &[data-actions] {\n grid-template-rows: auto 1fr auto;\n }\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-12);\n\n padding-inline: var(--_md-side-sheet-padding-inline);\n padding-block-end: var(--md-sys-layout-space-12);\n }\n\n .close {\n margin-inline-start: auto;\n }\n\n .headline {\n color: var(--_md-side-sheet-headline-color);\n }\n\n .main {\n padding-inline: var(--_md-side-sheet-padding-inline);\n overflow-y: auto;\n\n padding-block: var(--md-sys-layout-space-12);\n }\n\n .actions {\n --_divider-thickness: calc(1 * var(--dp, 1px));\n --_divider-color: rgb(\n from var(--md-sys-color-outline) r g b /\n var(--md-sys-state-divider)\n );\n\n padding-inline: var(--_md-side-sheet-padding-inline);\n padding-block-start: var(--md-sys-layout-space-12);\n display: flex;\n gap: var(--md-sys-layout-space-12);\n\n border-block-start: var(--_divider-thickness) solid\n var(--_divider-color);\n\n &[data-alignment=\"start\"] {\n justify-content: end;\n }\n\n &[data-alignment=\"end\"] {\n justify-content: start;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { Dialog } from \"react-aria-components\";\nimport { DialogContext } from \"@/components/Dialog\";\nimport { SideSheetContext } from \"../SideSheetModal\";\nimport styles from \"./sideSheet.module.css\";\nimport type { SideSheetDialogProps } from \"./types\";\n\n/*\n Low-level dialog container for side sheets, useful for custom layout structures.\n \n Consumes {@link SideSheetContext} to apply appropriate `data-alignment` and `data-layout`\n * attributes for responsive positioning, border radiuses, and size constraints.\n * Also provides `DialogContext` with `true` for modal integration.\n \n @example\n * ```tsx\n * import { DialogTrigger, Header, Heading } from \"react-aria-components\";\n * import {\n * Button,\n * IconButton,\n * ModalOverlay,\n * SideSheetDialog,\n * SideSheetModal,\n * } from \"@adgytec/web-ui-components\";\n * import { X } from \"lucide-react\";\n \n export function Example() {\n * return (\n * <DialogTrigger>\n * <Button label=\"Open Custom Sheet\" />\n * <ModalOverlay>\n * <SideSheetModal alignment=\"end\" layout=\"standard\">\n * <SideSheetDialog>\n * {({ close }) => (\n * <>\n * <Header>\n * <Heading slot=\"title\">Custom Title</Heading>\n * <IconButton icon={X} onPress={close} aria-label=\"Close\" />\n * </Header>\n * <div>Custom content goes here.</div>\n * </>\n * )}\n * </SideSheetDialog>\n * </SideSheetModal>\n * </ModalOverlay>\n * </DialogTrigger>\n * );\n * }\n * ```\n /\nexport const SideSheetDialog: React.FC<SideSheetDialogProps> = ({\n className,\n ...props\n}) => {\n const { layout, alignment } = useContext(SideSheetContext);\n\n return (\n <DialogContext value={true}>\n <Dialog\n className={clsx(styles[\"side-sheet-dialog\"], className)}\n data-alignment={alignment}\n data-layout={layout}\n {...props}\n />\n </DialogContext>\n );\n};\n","import clsx from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useContext } from \"react\";\nimport { Header, Heading } from \"react-aria-components\";\nimport { IconButton } from \"@/components/Button\";\nimport { typography } from \"@/utils\";\nimport { SideSheetContext } from \"../SideSheetModal\";\nimport { SideSheetDialog } from \"./SideSheetDialog\";\nimport styles from \"./sideSheet.module.css\";\nimport type { SideSheetProps } from \"./types\";\n\n/\n High-level content container for side sheets, conforming to\n * [Material 3 Side Sheets](https://m3.material.io/components/side-sheets/overview).\n \n Provides a standard structured side sheet layout containing:\n * - A top header with an optional `headline` (`typography.titleLarge`) and a built-in close `IconButton` (`X`).\n * - A scrollable `main` content area.\n * - An optional bottom `actions` footer, automatically aligned with the sheet's alignment setting.\n \n Configurable CSS tokens:\n * - `--md-side-sheet-background`: Background color of the side sheet (`var(--md-sys-color-surface-container-low)`).\n * - `--md-side-sheet-color`: Text color of the side sheet (`var(--md-sys-color-on-surface)`).\n * - `--md-side-sheet-headline-color`: Color of the side sheet headline (`var(--md-sys-color-on-surface-variant)`).\n \n @example\n * ```tsx\n * import { DialogTrigger } from \"react-aria-components\";\n * import {\n * Button,\n * ModalOverlay,\n * SideSheet,\n * SideSheetModal,\n * } from \"@adgytec/web-ui-components\";\n \n export function Example() {\n * return (\n * <DialogTrigger>\n * <Button label=\"Open Side Sheet\" />\n * <ModalOverlay>\n * <SideSheetModal alignment=\"end\" layout=\"standard\">\n * <SideSheet\n * headline=\"Side Sheet Title\"\n * actions={[\n * <Button key=\"save\" label=\"Save\" onPress={() => {}} />,\n * <Button key=\"cancel\" label=\"Cancel\" variant=\"outline\" onPress={() => {}} />,\n * ]}\n * >\n * <p>This is the side sheet content.</p>\n * </SideSheet>\n * </SideSheetModal>\n * </ModalOverlay>\n * </DialogTrigger>\n * );\n * }\n * ```\n */\nexport const SideSheet: React.FC<SideSheetProps> = ({\n headline,\n actions,\n className,\n children,\n ...props\n}) => {\n const { alignment } = useContext(SideSheetContext);\n const hasActions = Array.isArray(actions) ? actions.length > 0 : !!actions;\n\n return (\n <SideSheetDialog\n className={clsx(styles[\"side-sheet\"], className)}\n {...props}\n data-actions={hasActions \|\| undefined}\n >\n {(renderProps) => (\n <>\n <Header\n className={clsx(styles[\"header\"])}\n data-headline={!!headline \|\| undefined}\n >\n {headline && (\n <Heading\n slot=\"title\"\n className={clsx(\n styles[\"headline\"],\n typography.titleLarge\n )}\n >\n {headline}\n </Heading>\n )}\n\n <IconButton\n slot=\"close\"\n icon={X}\n color=\"standard\"\n className={clsx(styles[\"close\"])}\n />\n </Header>\n\n <div className={clsx(styles[\"main\"])}>\n {typeof children === \"function\"\n ? children(renderProps)\n : children}\n </div>\n\n {hasActions && (\n <div\n className={clsx(styles[\"actions\"])}\n data-alignment={alignment}\n >\n {typeof actions === \"function\"\n ? actions(renderProps)\n : actions}\n </div>\n )}\n </>\n )}\n </SideSheetDialog>\n );\n};\n"],"mappings":"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"}

package/dist/chunks/SideSheetModal.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideSheetModal","names":[],"sources":["../../src/components/Sheets/SideSheetModal/context.ts","../../src/components/Sheets/SideSheetModal/sideSheetModal.module.css","../../src/components/Sheets/SideSheetModal/SideSheetModal.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { SheetLayout } from \"../core\";\nimport type { SideSheetAlignment } from \"./types\";\n\nexport type SideSheetContextValue = {\n layout: SheetLayout;\n alignment: SideSheetAlignment;\n};\n\nexport const SideSheetContext = createContext<SideSheetContextValue>({\n layout: \"standard\",\n alignment: \"end\",\n});\n","@layer adgytec.comps {\n .modal {\n --_detached-margin: var(--md-sys-layout-space-16);\n\n position: fixed;\n\n &[data-layout=\"detached\"] {\n margin: var(--_detached-margin);\n }\n\n &[data-alignment=\"start\"] {\n --_from: -100%;\n }\n\n &[data-alignment=\"end\"] {\n --_from: 100%;\n\n inset-inline-end: 0;\n }\n\n transition: translate var(--_modal-motion) var(--_modal-motion-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-entering],\n &[data-exiting] {\n translate: var(--_from);\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Modal } from \"react-aria-components\";\nimport { SideSheetContext } from \"./context\";\nimport styles from \"./sideSheetModal.module.css\";\nimport type { SideSheetModalProps } from \"./types\";\n\nexport const SideSheetModal: React.FC<SideSheetModalProps> = ({\n className,\n alignment = \"end\",\n layout = \"standard\",\n ...props\n}) => {\n return (\n <SideSheetContext value={{ alignment, layout }}>\n <Modal\n data-alignment={alignment}\n data-layout={layout}\n className={(renderProps) =>\n clsx(\n styles[\"modal\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n </SideSheetContext>\n );\n};\n"],"mappings":";;;;;~~AASA~~,~~IAAa~~,~~IAAmB~~,EAAqC;CACjE,QAAQ;CACR,WAAW;AACf,CAAC,~~oCENY~~,KAAiD,EAC1D,cACA,eAAY,OACZ,YAAS,YACT,~~GAAG~~,QAGC,~~kBAAC~~,GAAD;CAAkB,OAAO;EAAE;EAAW;CAAO;~~WACzC~~,~~kBAAC~~,GAAD;EACI,~~kBAAgB~~;EAChB,~~eAAa~~;EACb,YAAY,~~MACR~~,~~EACI~~,~~EAAO~~,OACP,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CAAW,~~IACrB~~,CACV;EAEJ,~~GAAI~~;CAAM,CAAA;AAEA,CAAA"}
1	+ {"version":3,"file":"SideSheetModal","names":["clsx","styles","clsx$1","SideSheetContext","createContext","sideSheetModal_module_default","SideSheetModal","props","Modal","alignment","layout","\"modal\"","className","renderProps"],"sources":["../../src/components/Sheets/SideSheetModal/context.ts","../../src/components/Sheets/SideSheetModal/sideSheetModal.module.css","../../src/components/Sheets/SideSheetModal/SideSheetModal.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { SheetLayout } from \"../core\";\nimport type { SideSheetAlignment } from \"./types\";\n\n/*\n Context value passed from {@link SideSheetModal} to descendant side sheet components like {@link SideSheetDialog} and {@link SideSheet}.\n /\nexport type SideSheetContextValue = {\n /\n Current layout style (`\"standard\"` or `\"detached\"`).\n /\n layout: SheetLayout;\n /\n Current alignment edge (`\"start\"` or `\"end\"`).\n /\n alignment: SideSheetAlignment;\n};\n\n/\n React context providing layout and alignment properties for side sheets.\n * Default values are `layout: \"standard\"` and `alignment: \"end\"`.\n /\nexport const SideSheetContext = createContext<SideSheetContextValue>({\n layout: \"standard\",\n alignment: \"end\",\n});\n","@layer adgytec.comps {\n .modal {\n --_detached-margin: var(--md-sys-layout-space-16);\n\n position: fixed;\n\n &[data-layout=\"detached\"] {\n margin: var(--_detached-margin);\n }\n\n &[data-alignment=\"start\"] {\n --_from: -100%;\n }\n\n &[data-alignment=\"end\"] {\n --_from: 100%;\n\n inset-inline-end: 0;\n }\n\n transition: translate var(--_modal-motion) var(--_modal-motion-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-entering],\n &[data-exiting] {\n translate: var(--_from);\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Modal } from \"react-aria-components\";\nimport { SideSheetContext } from \"./context\";\nimport styles from \"./sideSheetModal.module.css\";\nimport type { SideSheetModalProps } from \"./types\";\n\n/\n Modal container for a side sheet ({@link SideSheet} or {@link SideSheetDialog}).\n \n Implements [Material 3 Side Sheets](https://m3.material.io/components/side-sheets/overview)\n * positioning and animations using React Aria Components `Modal`. Sets `data-alignment` and\n * `data-layout` attributes to control entry/exit slide animations and viewport anchoring,\n * and provides layout and alignment configurations to children through {@link SideSheetContext}.\n \n @example\n * ```tsx\n * import { DialogTrigger } from \"react-aria-components\";\n * import {\n * Button,\n * ModalOverlay,\n * SideSheet,\n * SideSheetModal,\n * } from \"@adgytec/web-ui-components\";\n \n export function Example() {\n * return (\n * <DialogTrigger>\n * <Button label=\"Open Details\" />\n * <ModalOverlay>\n * <SideSheetModal alignment=\"end\" layout=\"standard\">\n * <SideSheet headline=\"Details\">\n * <p>Side sheet content goes here.</p>\n * </SideSheet>\n * </SideSheetModal>\n * </ModalOverlay>\n * </DialogTrigger>\n * );\n * }\n * ```\n */\nexport const SideSheetModal: React.FC<SideSheetModalProps> = ({\n className,\n alignment = \"end\",\n layout = \"standard\",\n ...props\n}) => {\n return (\n <SideSheetContext value={{ alignment, layout }}>\n <Modal\n data-alignment={alignment}\n data-layout={layout}\n className={(renderProps) =>\n clsx(\n styles[\"modal\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n </SideSheetContext>\n );\n};\n"],"mappings":";;;;;AAsBA,IAAaG,IAAmBC,EAAqC;CACjE,QAAQ;CACR,WAAW;AACf,CAAC,oCEeYE,KAAiD,EAC1D,cACA,eAAY,OACZ,YAAS,YACT,GAAGC,QAGC,kBAACJ,GAAD;CAAkB,OAAO;EAAE;EAAW;CAAO;CACzC,UAAA,kBAACK,GAAD;EACI,kBAAgBC;EAChB,eAAaC;EACb,YAAY,MACRV,EACIC,EAAOU,OACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;EAEJ,GAAIL;CAAM,CAAA;AAEA,CAAA"}

package/dist/chunks/Slider.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider","names":[],"sources":["../../src/components/Input/Slider/Slider/slider.module.css","../../src/components/Input/Slider/Slider/Slider.tsx"],"sourcesContent":["@layer adgytec.comps {\n .visual-track {\n position: absolute;\n inset: 0;\n z-index: 0;\n\n border-radius: var(--_md-slider-track-shape);\n\n display: flex;\n gap: var(--_track-gap);\n\n &[data-orientation=\"horizontal\"] {\n inset-inline: var(--_orientation-inset);\n }\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column-reverse;\n inset-block: var(--_orientation-inset);\n }\n }\n\n .active-track {\n background-color: var(--_active-track-color);\n border-radius: var(--_md-slider-track-shape);\n\n &[data-orientation=\"horizontal\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-orientation=\"vertical\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n\n .inactive-track {\n background-color: var(--_inactive-track-color);\n border-radius: var(--_md-slider-track-shape);\n\n &[data-orientation=\"horizontal\"] {\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-orientation=\"vertical\"] {\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n\n .icon {\n --_min-icon-gap: calc(var(--_track-gap) / 1.5);\n\n position: absolute;\n\n color: var(--_md-slider-icon-color);\n transition: color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-minimum-value] {\n color: var(--_md-slider-minimum-value-icon-color);\n }\n\n &[data-disabled] {\n color: rgb(\n from var(--md-sys-color-inverse-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-minimum-value] {\n color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n &[data-orientation=\"horizontal\"] {\n inset-block-start: 50%;\n translate: 0 -50%;\n\n &[data-minimum-value] {\n inset-inline-start: var(--_min-icon-gap);\n }\n }\n\n &[data-orientation=\"vertical\"] {\n inset-block-end: 0;\n inset-inline-start: 50%;\n translate: -50% 0;\n\n &[data-minimum-value] {\n inset-block-end: var(--_min-icon-gap);\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Slider as AriaSlider, SliderTrack } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Label } from \"../../Label\";\nimport {\n SliderColors,\n SliderSizeStyles,\n SliderStyles,\n TrackContainerStyles,\n TrackStyles,\n} from \"../core\";\nimport { SliderStops } from \"../SliderStops\";\nimport { SliderThumb } from \"../SliderThumb\";\nimport styles from \"./slider.module.css\";\nimport type { SliderProps } from \"./types\";\n\nexport const Slider = <T extends number>({\n label,\n thumbLabel,\n size = \"small\",\n step = 1,\n minValue = 0,\n maxValue = 100,\n showInBetweenSteps,\n insetIcon,\n minInsetIcon,\n maxStops,\n outputRenderer,\n className,\n ...props\n}: SliderProps<T>) => {\n const canShowIcon = size !== \"extra-small\" && size !== \"small\";\n const iconSize = size === \"extra-large\" ? 32 : 24;\n\n return (\n <AriaSlider\n minValue={minValue}\n maxValue={maxValue}\n step={step}\n className={(renderProps) =>\n clsx(\n SliderStyles,\n SliderColors,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n >\n {({ orientation, state, isDisabled }) => {\n const thumbValue = state.getThumbPercent(0);\n\n let visibleIcon = insetIcon;\n if (thumbValue === 0 && minInsetIcon) {\n visibleIcon = minInsetIcon;\n }\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <div\n className={clsx(TrackContainerStyles)}\n data-orientation={orientation}\n >\n <SliderTrack\n className={clsx(\n TrackStyles,\n SliderSizeStyles(size)\n )}\n >\n <div\n className={clsx(styles[\"visual-track\"])}\n data-orientation={orientation}\n >\n <div\n className={clsx(styles[\"active-track\"])}\n data-orientation={orientation}\n style={{\n flexGrow: state.getThumbPercent(0),\n }}\n />\n\n <div\n className={clsx(\n styles[\"inactive-track\"]\n )}\n style={{\n flexGrow:\n 1 - state.getThumbPercent(0),\n }}\n data-orientation={orientation}\n />\n </div>\n\n {canShowIcon && visibleIcon && (\n <Icon\n icon={visibleIcon}\n size={iconSize}\n className={clsx(styles[\"icon\"])}\n data-minimum-value={\n thumbValue === 0 \|\| undefined\n }\n data-disabled={isDisabled \|\| undefined}\n data-orientation={orientation}\n />\n )}\n\n <SliderThumb\n size={size}\n orientation={orientation}\n aria-label={thumbLabel}\n outputRenderer={outputRenderer}\n />\n\n <SliderStops\n minValue={minValue}\n maxValue={maxValue}\n step={step}\n orientation={orientation}\n showInBetweenSteps={showInBetweenSteps}\n maxStops={maxStops}\n />\n </SliderTrack>\n </div>\n </>\n );\n }}\n </AriaSlider>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCgBa,KAA4B,EACrC,UACA,eACA,UAAO,SACP,UAAO,GACP,cAAW,GACX,cAAW,KACX,uBACA,cACA,iBACA,aACA,mBACA,cACA,GAAG,QACe;CAClB,IAAM,IAAc,MAAS,iBAAiB,MAAS,SACjD,IAAW,MAAS,gBAAgB,KAAK;CAE/C,OACI,kBAAC,GAAD;EACc;EACA;EACJ;EACN,YAAY,MACR,EACI,GACA,GACA,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;aAEF,EAAE,gBAAa,UAAO,oBAAiB;GACrC,IAAM,IAAa,EAAM,gBAAgB,CAAC,GAEtC,IAAc;GAKlB,OAJI,MAAe,KAAK,MACpB,IAAc,IAId,kBAAA,GAAA,EAAA,UAAA,CACK,KAAS,kBAAC,GAAD,EAAA,UAAQ,EAAa,CAAA,GAE/B,kBAAC,OAAD;IACI,WAAW,EAAK,CAAoB;IACpC,oBAAkB;cAElB,kBAAC,GAAD;KACI,WAAW,EACP,GACA,EAAiB,CAAI,CACzB;eAJJ;MAMI,kBAAC,OAAD;OACI,WAAW,EAAK,EAAO,eAAe;OACtC,oBAAkB;iBAFtB,CAII,kBAAC,OAAD;QACI,WAAW,EAAK,EAAO,eAAe;QACtC,oBAAkB;QAClB,OAAO,EACH,UAAU,EAAM,gBAAgB,CAAC,EACrC;OAAE,CAAA,GAGN,kBAAC,OAAD;QACI,WAAW,EACP,EAAO,iBACX;QACA,OAAO,EACH,UACI,IAAI,EAAM,gBAAgB,CAAC,EACnC;QACA,oBAAkB;OAAY,CAAA,CAEjC;;MAEJ,KAAe,KACZ,kBAAC,GAAD;OACI,MAAM;OACN,MAAM;OACN,WAAW,EAAK,EAAO,IAAO;OAC9B,sBACI,MAAe,KAAK,KAAA;OAExB,iBAAe,KAAc,KAAA;OAC7B,oBAAkB;MAAY,CAAA;MAItC,kBAAC,GAAD;OACU;OACO;OACb,cAAY;OACI;MAAe,CAAA;MAGnC,kBAAC,GAAD;OACc;OACA;OACJ;OACO;OACO;OACV;MAAS,CAAA;KAEd;;GACZ,CAAA,CACT,EAAA,CAAA;EAER;CACQ,CAAA;AAEpB"}
1	+ {"version":3,"file":"Slider","names":["Slider","AriaSlider","clsx","_Fragment","Label","styles","SliderThumb","Icon","Label$1","SliderStyles","SliderColors","TrackContainerStyles","TrackStyles","SliderStops","SliderThumb$1","clsx$1","slider_module_default","Slider$1","props","canShowIcon","size","iconSize","Slider","className","renderProps","thumbValue","state","visibleIcon","insetIcon","minInsetIcon","Fragment","label","orientation","SliderTrack","SliderSizeStyles","\"icon\"","isDisabled","thumbLabel"],"sources":["../../src/components/Input/Slider/Slider/slider.module.css","../../src/components/Input/Slider/Slider/Slider.tsx"],"sourcesContent":["@layer adgytec.comps {\n .visual-track {\n position: absolute;\n inset: 0;\n z-index: 0;\n\n border-radius: var(--_md-slider-track-shape);\n\n display: flex;\n gap: var(--_track-gap);\n\n &[data-orientation=\"horizontal\"] {\n inset-inline: var(--_orientation-inset);\n }\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column-reverse;\n inset-block: var(--_orientation-inset);\n }\n }\n\n .active-track {\n background-color: var(--_active-track-color);\n border-radius: var(--_md-slider-track-shape);\n\n &[data-orientation=\"horizontal\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-orientation=\"vertical\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n\n .inactive-track {\n background-color: var(--_inactive-track-color);\n border-radius: var(--_md-slider-track-shape);\n\n &[data-orientation=\"horizontal\"] {\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-orientation=\"vertical\"] {\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n\n .icon {\n --_min-icon-gap: calc(var(--_track-gap) / 1.5);\n\n position: absolute;\n\n color: var(--_md-slider-icon-color);\n transition: color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-minimum-value] {\n color: var(--_md-slider-minimum-value-icon-color);\n }\n\n &[data-disabled] {\n color: rgb(\n from var(--md-sys-color-inverse-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-minimum-value] {\n color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n &[data-orientation=\"horizontal\"] {\n inset-block-start: 50%;\n translate: 0 -50%;\n\n &[data-minimum-value] {\n inset-inline-start: var(--_min-icon-gap);\n }\n }\n\n &[data-orientation=\"vertical\"] {\n inset-block-end: 0;\n inset-inline-start: 50%;\n translate: -50% 0;\n\n &[data-minimum-value] {\n inset-block-end: var(--_min-icon-gap);\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Slider as AriaSlider, SliderTrack } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Label } from \"../../Label\";\nimport {\n SliderColors,\n SliderSizeStyles,\n SliderStyles,\n TrackContainerStyles,\n TrackStyles,\n} from \"../core\";\nimport { SliderStops } from \"../SliderStops\";\nimport { SliderThumb } from \"../SliderThumb\";\nimport styles from \"./slider.module.css\";\nimport type { SliderProps } from \"./types\";\n\n/*\n Material Design 3 single-value slider component.\n \n Allows users to choose a specific numeric value along a track using a draggable thumb.\n * Supports configurable sizes, step indicators via [`SliderStops`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Input/Slider/SliderStops/SliderStops.tsx),\n * inset icons with automatic minimum-value swapping, and custom output formatting.\n \n @example\n * ```tsx\n * import { Slider } from \"@adgytec/web-ui-components\";\n * import { Volume2, VolumeX } from \"lucide-react\";\n \n <Slider\n * label=\"Volume\"\n * minValue={0}\n * maxValue={100}\n * defaultValue={50}\n * size=\"medium\"\n * insetIcon={Volume2}\n * minInsetIcon={VolumeX}\n * />\n * ```\n */\nexport const Slider = <T extends number>({\n label,\n thumbLabel,\n size = \"small\",\n step = 1,\n minValue = 0,\n maxValue = 100,\n showInBetweenSteps,\n insetIcon,\n minInsetIcon,\n maxStops,\n outputRenderer,\n className,\n ...props\n}: SliderProps<T>) => {\n const canShowIcon = size !== \"extra-small\" && size !== \"small\";\n const iconSize = size === \"extra-large\" ? 32 : 24;\n\n return (\n <AriaSlider\n minValue={minValue}\n maxValue={maxValue}\n step={step}\n className={(renderProps) =>\n clsx(\n SliderStyles,\n SliderColors,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n >\n {({ orientation, state, isDisabled }) => {\n const thumbValue = state.getThumbPercent(0);\n\n let visibleIcon = insetIcon;\n if (thumbValue === 0 && minInsetIcon) {\n visibleIcon = minInsetIcon;\n }\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <div\n className={clsx(TrackContainerStyles)}\n data-orientation={orientation}\n >\n <SliderTrack\n className={clsx(\n TrackStyles,\n SliderSizeStyles(size)\n )}\n >\n <div\n className={clsx(styles[\"visual-track\"])}\n data-orientation={orientation}\n >\n <div\n className={clsx(styles[\"active-track\"])}\n data-orientation={orientation}\n style={{\n flexGrow: state.getThumbPercent(0),\n }}\n />\n\n <div\n className={clsx(\n styles[\"inactive-track\"]\n )}\n style={{\n flexGrow:\n 1 - state.getThumbPercent(0),\n }}\n data-orientation={orientation}\n />\n </div>\n\n {canShowIcon && visibleIcon && (\n <Icon\n icon={visibleIcon}\n size={iconSize}\n className={clsx(styles[\"icon\"])}\n data-minimum-value={\n thumbValue === 0 \|\| undefined\n }\n data-disabled={isDisabled \|\| undefined}\n data-orientation={orientation}\n />\n )}\n\n <SliderThumb\n size={size}\n orientation={orientation}\n aria-label={thumbLabel}\n outputRenderer={outputRenderer}\n />\n\n <SliderStops\n minValue={minValue}\n maxValue={maxValue}\n step={step}\n orientation={orientation}\n showInBetweenSteps={showInBetweenSteps}\n maxStops={maxStops}\n />\n </SliderTrack>\n </div>\n </>\n );\n }}\n </AriaSlider>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCuCaA,KAA4B,EACrC,UACA,eACA,UAAO,SACP,UAAO,GACP,cAAW,GACX,cAAW,KACX,uBACA,cACA,iBACA,aACA,mBACA,cACA,GAAGkB,QACe;CAClB,IAAMC,IAAcC,MAAS,iBAAiBA,MAAS,SACjDC,IAAWD,MAAS,gBAAgB,KAAK;CAE/C,OACI,kBAACnB,GAAD;EACc;EACA;EACJ;EACN,YAAY,MACRC,EACIO,GACAC,GACA,OAAOa,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;EAEJ,GAAIL;EAEF,WAAA,EAAE,gBAAa,UAAO,oBAAiB;GACrC,IAAMO,IAAaC,EAAM,gBAAgB,CAAC,GAEtCC,IAAcC;GAKlB,OAJIH,MAAe,KAAKI,MACpB,IAAcA,IAId,kBAAA1B,GAAA,EAAA,UAAA,CACK4B,KAAS,kBAAC3B,GAAD,EAAA,UAAQ2B,EAAa,CAAA,GAE/B,kBAAC,OAAD;IACI,WAAW7B,EAAKS,CAAoB;IACpC,oBAAkBqB;IAElB,UAAA,kBAACC,GAAD;KACI,WAAW/B,EACPU,GACAsB,EAAiBd,CAAI,CACzB;KAJJ,UAAA;MAMI,kBAAC,OAAD;OACI,WAAWlB,EAAKG,EAAO,eAAe;OACtC,oBAAkB2B;OAFtB,UAAA,CAII,kBAAC,OAAD;QACI,WAAW9B,EAAKG,EAAO,eAAe;QACtC,oBAAkB2B;QAClB,OAAO,EACH,UAAUN,EAAM,gBAAgB,CAAC,EACrC;OAAE,CAAA,GAGN,kBAAC,OAAD;QACI,WAAWxB,EACPG,EAAO,iBACX;QACA,OAAO,EACH,UACI,IAAIqB,EAAM,gBAAgB,CAAC,EACnC;QACA,oBAAkBM;OAAY,CAAA,CAEjC;;MAEJb,KAAeQ,KACZ,kBAACpB,GAAD;OACI,MAAMoB;OACN,MAAMN;OACN,WAAWnB,EAAKG,EAAO8B,IAAO;OAC9B,sBACIV,MAAe,KAAK,KAAA;OAExB,iBAAeW,KAAc,KAAA;OAC7B,oBAAkBJ;MAAY,CAAA;MAItC,kBAAC1B,GAAD;OACU;OACO;OACb,cAAY+B;OACI;MAAe,CAAA;MAGnC,kBAACxB,GAAD;OACc;OACA;OACJ;OACO;OACO;OACV;MAAS,CAAA;KAEd;;GACZ,CAAA,CACT,EAAA,CAAA;EAER;CACQ,CAAA;AAEpB"}

package/dist/chunks/SliderOutput.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderOutput","names":[],"sources":["../../src/components/Input/Slider/SliderThumb/context.ts","../../src/components/Input/Slider/SliderOutput/sliderOutput.module.css","../../src/components/Input/Slider/SliderOutput/SliderOutput.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type SliderThumbStateContextValue = {\n isDragging?: boolean;\n isHovered?: boolean;\n isFocused?: boolean;\n isFocusVisible?: boolean;\n};\n\nexport const SliderThumbStateContext =\n createContext<SliderThumbStateContextValue>({});\n","@layer adgytec.comps {\n .output {\n position: absolute;\n\n padding-block: var(--md-sys-layout-space-12);\n padding-inline: var(--md-sys-layout-space-16);\n\n background-color: var(--_md-slider-output-background);\n color: var(--_md-slider-output-color);\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n &[data-orientation=\"horizontal\"] {\n inset-block-end: 100%;\n inset-inline-start: 50%;\n translate: -50% calc(-4 * var(--dp, 1px));\n\n transform-origin: bottom;\n }\n\n &[data-orientation=\"vertical\"] {\n inset-inline-end: 100%;\n inset-block-start: 50%;\n translate: calc(-4 * var(--dp, 1px)) -50%;\n\n transform-origin: right;\n }\n\n scale: 0;\n opacity: 0;\n\n transition:\n scale var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n opacity var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-dragging],\n &[data-focus-visible] {\n scale: 1;\n opacity: 1;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { SliderOutput as AriaSliderOutput } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { SliderThumbStateContext } from \"../SliderThumb/context\";\nimport styles from \"./sliderOutput.module.css\";\n\~~nexport~~ ~~const~~ SliderOutput: ~~React.FC<\~~n React.ComponentPropsWithRef<typeof AriaSliderOutput>\n> = ({ className, ...props }) => {\n const { isDragging, isHovered, isFocused, isFocusVisible } = useContext(\n SliderThumbStateContext\n );\n\n return (\n <AriaSliderOutput\n className={(renderProps) =>\n clsx(\n styles[\"output\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-focus-visible={isFocusVisible \|\| undefined}\n data-dragging={isDragging \|\| undefined}\n data-hovered={isHovered \|\| undefined}\n data-focused={isFocused \|\| undefined}\n data-slider-output\n />\n );\n};\n"],"mappings":";;;;;;;~~aASA~~,~~IAAA~~,~~EAAA~~,~~CAAA~~,~~CAAA~~,~~sCEFa~~,~~KAET~~,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,EAAA,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAAwB~~,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,~~OAAvB~~,~~kBAAA~~,~~KAAA~~,~~GAAuB~~,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;~~CACxB~~,IAAA,EAAA,eAAA,cAAA,cAAA,~~sBAA6D~~,~~EACzD~~,CACJ,~~GAAE~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,IAWW,~~IAAA~~,EAAA,MAPM,KAAA,~~MACP~~,~~EACI~~,EAAM,~~QACN~~,EAAU,YACV,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CACF,~~IAFd~~,CAGJ,GAAC,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAGe,~~IAAA~~,~~IAAA~~,KAAA,KAAA,~~GACL~~,~~IAAA~~,KAAA,KAAA,~~GACD~~,~~IAAA~~,KAAA,KAAA,~~GACA~~,~~IAAA~~,KAAA,KAAA,~~GAAsB~~;CAEtC,~~OAFsC~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~QAAA~~,KAdxC,IAAA,~~kBAAC~~,GAAD;EACe,~~WAAA~~;EAON,~~GAED~~;EACgB,~~sBAAA~~;EACL,~~iBAAA~~;EACD,~~gBAAA~~;EACA,~~gBAAA~~;EACd,sBAAA;CAAkB,CAAA,GACpB,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,KAAA,~~IAAA~~,EAAA,~~KAhBF~~;AAgBE"}
1	+ {"version":3,"file":"SliderOutput","names":["SliderOutput","_c","clsx","styles","AriaSliderOutput","require_compiler_runtime","clsx$1","import_compiler_runtime","SliderThumbStateContext","createContext","sliderOutput_module_default","SliderOutput$1","$","className","props","t0","useContext","t1","typography","renderProps","t2","isFocusVisible","t3","isDragging","t4","isHovered","t5","isFocused","t6","SliderOutput"],"sources":["../../src/components/Input/Slider/SliderThumb/context.ts","../../src/components/Input/Slider/SliderOutput/sliderOutput.module.css","../../src/components/Input/Slider/SliderOutput/SliderOutput.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\n/*\n State values exposed by the parent [`SliderThumb`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Input/Slider/SliderThumb/SliderThumb.tsx)\n * representing current user interactions.\n /\nexport type SliderThumbStateContextValue = {\n /\n Whether the slider thumb is currently being dragged.\n /\n isDragging?: boolean;\n /\n Whether the slider thumb is currently hovered by a pointer.\n /\n isHovered?: boolean;\n /\n Whether the slider thumb currently has input focus.\n /\n isFocused?: boolean;\n /\n Whether the slider thumb has visible focus styling (e.g. via keyboard navigation).\n /\n isFocusVisible?: boolean;\n};\n\n/\n React context providing thumb interaction state to child components such as\n * [`SliderOutput`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Input/Slider/SliderOutput/SliderOutput.tsx).\n /\nexport const SliderThumbStateContext =\n createContext<SliderThumbStateContextValue>({});\n","@layer adgytec.comps {\n .output {\n position: absolute;\n\n padding-block: var(--md-sys-layout-space-12);\n padding-inline: var(--md-sys-layout-space-16);\n\n background-color: var(--_md-slider-output-background);\n color: var(--_md-slider-output-color);\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n &[data-orientation=\"horizontal\"] {\n inset-block-end: 100%;\n inset-inline-start: 50%;\n translate: -50% calc(-4 var(--dp, 1px));\n\n transform-origin: bottom;\n }\n\n &[data-orientation=\"vertical\"] {\n inset-inline-end: 100%;\n inset-block-start: 50%;\n translate: calc(-4 * var(--dp, 1px)) -50%;\n\n transform-origin: right;\n }\n\n scale: 0;\n opacity: 0;\n\n transition:\n scale var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n opacity var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-dragging],\n &[data-focus-visible] {\n scale: 1;\n opacity: 1;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { SliderOutput as AriaSliderOutput } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { SliderThumbStateContext } from \"../SliderThumb/context\";\nimport styles from \"./sliderOutput.module.css\";\n\n/*\n Props for the [`SliderOutput`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Input/Slider/SliderOutput/SliderOutput.tsx) component.\n /\nexport interface SliderOutputProps\n extends React.ComponentPropsWithRef<typeof AriaSliderOutput> {}\n\n/\n Output tooltip / badge component displaying the current value of the slider thumb.\n \n Automatically connects to [`SliderThumbStateContext`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Input/Slider/SliderThumb/context.ts)\n * to reflect hover, focus, and dragging states on data attributes.\n \n @example\n * ```tsx\n * <SliderOutput>\n * {({ state }) => `${state.getThumbValueLabel(0)}%`}\n * </SliderOutput>\n * ```\n */\nexport const SliderOutput: React.FC<SliderOutputProps> = ({\n className,\n ...props\n}) => {\n const { isDragging, isHovered, isFocused, isFocusVisible } = useContext(\n SliderThumbStateContext\n );\n\n return (\n <AriaSliderOutput\n className={(renderProps) =>\n clsx(\n styles[\"output\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-focus-visible={isFocusVisible \|\| undefined}\n data-dragging={isDragging \|\| undefined}\n data-hovered={isHovered \|\| undefined}\n data-focused={isFocused \|\| undefined}\n data-slider-output\n />\n );\n};\n"],"mappings":";;;;;;;aA6BaQ,IACTC,EAA4C,CAAC,CAAC,sCEJrCT,KAA4C,MAAA;CAAA,IAAAY,KAAA,GAAAX,EAAAA,EAAAA,CAAA,EAAA,GAAAY,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGxD,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHyD,eAAA,GAAAE,KAAAC,GAGzD,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CACG,IAAA,EAAA,eAAA,cAAA,cAAA,sBAA6DE,EACzDR,CACJ,GAAES;CAAA,AAAAL,EAAA,OAAAC,IAWW,IAAAD,EAAA,MAPM,KAAA,MACPV,EACIC,EAAM,QACNe,EAAU,YACV,OAAOL,KAAc,aACfA,EAAUM,CACF,IAFdN,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAI;CAGe,IAAAG,IAAAC,KAAA,KAAA,GACLC,IAAAC,KAAA,KAAA,GACDC,IAAAC,KAAA,KAAA,GACAC,IAAAC,KAAA,KAAA,GAAsBC;CAEtC,OAFsChB,EAAA,OAAAE,KAAAF,EAAA,OAAAK,KAAAL,EAAA,OAAAQ,KAAAR,EAAA,OAAAU,KAAAV,EAAA,OAAAY,KAAAZ,EAAA,QAAAc,KAdxC,IAAA,kBAACtB,GAAD;EACe,WAAAa;EAON,GAEDH;EACgB,sBAAAM;EACL,iBAAAE;EACD,gBAAAE;EACA,gBAAAE;EACd,sBAAA;CAAkB,CAAA,GACpB,EAAA,KAAAZ,GAAA,EAAA,KAAAG,GAAA,EAAA,KAAAG,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,GAAA,EAAA,MAAAE,GAAA,EAAA,MAAAE,KAAA,IAAAhB,EAAA,KAhBFgB;AAgBE"}

package/dist/chunks/SliderStops CHANGED Viewed

@@ -61,7 +61,7 @@ var a = 20, o = (e) => {
 			stopValue: i
 		});
 	}
-}, m = ({ firstThumbValue: e, secondThumbValue: t, stopValue: n }) => n === e || n === t, h = ({ slider: e, midValue: t, stopValue: n }) => e === "centered" ? n === t : !1, g = {
+}, m = ({ firstThumbValue: e, secondThumbValue: t, stopValue: n }) => n === e || n === t, h = ({ slider: e, midValue: t, stopValue: n }) => e === "centered" && n === t, g = {
 	stops: "_stops_2wvkt_2",
 	stop: "_stop_2wvkt_2"
 }, _ = ({ orientation: a, slider: o = "standard", minValue: s, maxValue: c, step: u, showInBetweenSteps: d, maxStops: f }) => {
@@ -103,9 +103,9 @@ var a = 20, o = (e) => {
 				slider: o,
 				midValue: y,
 				stopValue: t
-			});
+			}), l = a === "horizontal" ? { insetInlineStart: `${n * 100}%` } : { insetBlockEnd: `${n * 100}%` };
 			return /* @__PURE__ */ r("div", {
-				style: a === "horizontal" ? { insetInlineStart: `${n * 100}%` } : { insetBlockEnd: `${n * 100}%` },
+				style: l,
 				"data-orientation": a,
 				className: e(g.stop),
 				"data-disabled": v.isDisabled || void 0,

package/dist/chunks/SliderStops.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderStops","names":["stops"],"sources":["../../src/components/Input/Slider/SliderStops/core.ts","../../src/components/Input/Slider/SliderStops/sliderStops.module.css","../../src/components/Input/Slider/SliderStops/SliderStops.tsx"],"sourcesContent":["import type { SliderVariant } from \"../core\";\nimport type { CalculateStops, Stop } from \"./types\";\n\nconst DEFAULT_MAX_STOPS = 20;\n\n/*\n React Aria style clamp.\n /\nexport const clamp = (\n value: number,\n min: number = -Infinity,\n max: number = Infinity\n): number => {\n return Math.min(Math.max(value, min), max);\n};\n\n/\n React Aria precision extraction.\n \n Handles:\n * - 0.1\n * - 0.01\n * - 1e-7\n /\nexport const getStepPrecision = (step: number): number => {\n let precision = 0;\n\n const stepString = step.toString();\n\n const exponentialIndex = stepString.toLowerCase().indexOf(\"e-\");\n\n if (exponentialIndex > 0) {\n precision =\n Math.abs(Math.floor(Math.log10(Math.abs(step)))) + exponentialIndex;\n } else {\n const pointIndex = stepString.indexOf(\".\");\n\n if (pointIndex >= 0) {\n precision = stepString.length - pointIndex;\n }\n }\n\n return precision;\n};\n\n/\n React Aria style precision correction.\n /\nexport const roundToStepPrecision = (value: number, step: number): number => {\n const precision = getStepPrecision(step);\n\n if (precision <= 0) {\n return value;\n }\n\n const pow = 10 * precision;\n\n return Math.round(value * pow) / pow;\n};\n\n/*\n React Aria snap implementation.\n /\nexport const snapValueToStep = ({\n value,\n minValue,\n maxValue,\n step,\n}: {\n value: number;\n minValue: number;\n maxValue: number;\n step: number;\n}): number => {\n const remainder = (value - minValue) % step;\n\n let snappedValue = roundToStepPrecision(\n Math.abs(remainder) 2 >= step\n ? value + Math.sign(remainder) * (step - Math.abs(remainder))\n : value - remainder,\n step\n );\n\n if (snappedValue < minValue) {\n snappedValue = minValue;\n } else if (snappedValue > maxValue) {\n snappedValue =\n minValue +\n Math.floor(\n roundToStepPrecision((maxValue - minValue) / step, step)\n ) \n step;\n }\n\n snappedValue = roundToStepPrecision(snappedValue, step);\n\n return snappedValue;\n};\n\n/\n Generates all valid slider stops using\n * the same stepping logic as React Aria.\n /\nexport const calcStops: CalculateStops = ({\n minValue,\n maxValue,\n step,\n showInBetweenSteps = true,\n maxStops = DEFAULT_MAX_STOPS,\n}) => {\n /\n Invalid configuration fallback.\n /\n if (step <= 0 \|\| Number.isNaN(step) \|\| maxValue < minValue) {\n return [];\n }\n\n const range = maxValue - minValue;\n\n /\n React Aria consistent last valid stop.\n \n Example:\n * min=0\n * max=10\n * step=3\n \n valid values:\n * 0 3 6 9\n /\n const lastStopValue = snapValueToStep({\n value: maxValue,\n minValue,\n maxValue,\n step,\n });\n\n const createStop = (stopValue: number): Stop => ({\n stopValue,\n percent: range === 0 ? 0 : (stopValue - minValue) / range,\n });\n\n /\n Reduced stop rendering mode.\n /\n if (step === 1 \|\| !showInBetweenSteps) {\n return [createStop(minValue), createStop(lastStopValue)];\n }\n\n const stops: Stop[] = [];\n\n let value = minValue;\n\n while (value <= lastStopValue) {\n stops.push(createStop(value));\n\n const nextValue = snapValueToStep({\n value: value + step,\n minValue,\n maxValue,\n step,\n });\n\n /\n Prevent infinite loops caused by\n * floating precision edge cases.\n /\n if (nextValue === value) {\n break;\n }\n\n value = nextValue;\n\n /\n DOM safety guard.\n /\n if (stops.length > maxStops) {\n return [createStop(minValue), createStop(lastStopValue)];\n }\n }\n\n return stops;\n};\n\nconst checkInActiveRangeStandardSlider = ({\n thumbValue,\n stopValue,\n}: {\n thumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue < thumbValue;\n};\n\nconst checkInActiveRangeRangeSlider = ({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue > firstThumbValue && stopValue < secondThumbValue;\n};\n\nconst checkInActiveRangeCenteredSlider = ({\n thumbValue,\n stopValue,\n midValue,\n}: {\n thumbValue: number;\n stopValue: number;\n midValue: number;\n}): boolean => {\n return (\n (stopValue < midValue && stopValue > thumbValue) \|\|\n (stopValue > midValue && stopValue < thumbValue) \|\|\n stopValue === midValue\n );\n};\n\nexport const checkInActiveRange = ({\n slider,\n midValue,\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n slider: SliderVariant;\n midValue: number;\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n switch (slider) {\n case \"standard\":\n return checkInActiveRangeStandardSlider({\n thumbValue: firstThumbValue,\n stopValue,\n });\n\n case \"range\":\n return checkInActiveRangeRangeSlider({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n case \"centered\":\n return checkInActiveRangeCenteredSlider({\n thumbValue: firstThumbValue,\n midValue,\n stopValue,\n });\n }\n};\n\nexport const checkIsBelowThumb = ({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue === firstThumbValue \|\| stopValue === secondThumbValue;\n};\n\nexport const shouldHide = ({\n slider,\n midValue,\n stopValue,\n}: {\n slider: SliderVariant;\n midValue: number;\n stopValue: number;\n}): boolean => {\n if (slider !== \"centered\") {\n return false;\n }\n\n return stopValue === midValue;\n};\n","@layer adgytec.comps {\n .stops {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n .stop {\n position: absolute;\n\n &[data-orientation=\"horizontal\"] {\n inset-block-start: 50%;\n translate: -50% -50%;\n }\n\n &[data-orientation=\"vertical\"] {\n inset-inline-start: 50%;\n translate: -50% 50%;\n }\n\n inline-size: var(--md-sys-layout-space-4);\n aspect-ratio: 1 / 1;\n\n border-radius: var(--md-sys-shape-corner-radius-full);\n background-color: var(--_md-slider-inactive-stop-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-in-active] {\n background-color: var(--_md-slider-active-stop-color);\n }\n\n &[data-hide] {\n background-color: transparent;\n }\n\n &[data-disabled] {\n background-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-in-active] {\n background-color: rgb(\n from var(--md-sys-color-inverse-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n\n &[data-hide] {\n background-color: transparent;\n }\n }\n\n &[data-below-thumb] {\n background-color: transparent;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { useContext, useMemo } from \"react\";\nimport { SliderStateContext } from \"react-aria-components\";\nimport {\n calcStops,\n checkInActiveRange,\n checkIsBelowThumb,\n shouldHide,\n} from \"./core\";\nimport styles from \"./sliderStops.module.css\";\nimport type { SliderStopsProps } from \"./types\";\n\nexport const SliderStops: React.FC<SliderStopsProps> = ({\n orientation,\n slider = \"standard\",\n minValue,\n maxValue,\n step,\n showInBetweenSteps,\n maxStops,\n}) => {\n const stops = useMemo(() => {\n const stops = calcStops({\n minValue,\n maxValue,\n step,\n showInBetweenSteps,\n maxStops,\n });\n if (orientation === \"vertical\") {\n stops.reverse();\n }\n\n return stops;\n }, [minValue, maxValue, step, showInBetweenSteps, orientation, maxStops]);\n\n const sliderState = useContext(SliderStateContext);\n if (!sliderState) return null;\n\n const midValue = (minValue + maxValue) / 2;\n const firstThumbValue = sliderState.getThumbValue(0);\n const secondThumbValue = sliderState.getThumbValue(1) ?? NaN;\n\n const shouldHideActive = stops.length === 2;\n\n return (\n <div\n className={clsx(styles[\"stops\"])}\n data-orientation={orientation}\n data-slider-stops\n >\n {stops.map(({ stopValue, percent }) => {\n const inActiveRange = checkInActiveRange({\n slider,\n midValue,\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n const belowThumb = checkIsBelowThumb({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n const hide = shouldHide({ slider, midValue, stopValue });\n\n const style =\n orientation === \"horizontal\"\n ? { insetInlineStart: `${percent 100}%` }\n : { insetBlockEnd: `${percent * 100}%` };\n\n return (\n <div\n key={stopValue}\n style={style}\n data-orientation={orientation}\n className={clsx(styles[\"stop\"])}\n data-disabled={sliderState.isDisabled \|\| undefined}\n data-below-thumb={belowThumb \|\| undefined}\n data-stop-value={stopValue}\n data-in-active={inActiveRange \|\| undefined}\n data-hide={\n hide \|\|\n (shouldHideActive && inActiveRange) \|\|\n undefined\n }\n data-slider-stop\n />\n );\n })}\n </div>\n );\n};\n"],"mappings":";;;;;AAGA,IAAM,IAAoB,IAqBb,KAAoB,MAAyB;CACtD,IAAI,IAAY,GAEV,IAAa,EAAK,SAAS,GAE3B,IAAmB,EAAW,YAAY,CAAC,CAAC,QAAQ,IAAI;CAE9D,IAAI,IAAmB,GACnB,IACI,KAAK,IAAI,KAAK,MAAM,KAAK,MAAM,KAAK,IAAI,CAAI,CAAC,CAAC,CAAC,IAAI;MACpD;EACH,IAAM,IAAa,EAAW,QAAQ,GAAG;EAEzC,AAAI,KAAc,MACd,IAAY,EAAW,SAAS;CAExC;CAEA,OAAO;AACX,GAKa,KAAwB,GAAe,MAAyB;CACzE,IAAM,IAAY,EAAiB,CAAI;CAEvC,IAAI,KAAa,GACb,OAAO;CAGX,IAAM,IAAM,MAAM;CAElB,OAAO,KAAK,MAAM,IAAQ,CAAG,IAAI;AACrC,GAKa,KAAmB,EAC5B,UACA,aACA,aACA,cAMU;CACV,IAAM,KAAa,IAAQ,KAAY,GAEnC,IAAe,EACf,KAAK,IAAI,CAAS,IAAI,KAAK,IACrB,IAAQ,KAAK,KAAK,CAAS,KAAK,IAAO,KAAK,IAAI,CAAS,KACzD,IAAQ,GACd,CACJ;CAeA,OAbI,IAAe,IACf,IAAe,IACR,IAAe,MACtB,IACI,IACA,KAAK,MACD,GAAsB,IAAW,KAAY,GAAM,CAAI,CAC3D,IACI,IAGZ,IAAe,EAAqB,GAAc,CAAI,GAE/C;AACX,GAMa,KAA6B,EACtC,aACA,aACA,SACA,wBAAqB,IACrB,cAAW,QACT;CAIF,IAAI,KAAQ,KAAK,OAAO,MAAM,CAAI,KAAK,IAAW,GAC9C,OAAO,CAAA;CAGX,IAAM,IAAQ,IAAW,GAanB,IAAgB,EAAgB;EAClC,OAAO;EACP;EACA;EACA;CACJ,CAAC,GAEK,KAAc,OAA6B;EAC7C;EACA,SAAS,MAAU,IAAI,KAAK,IAAY,KAAY;CACxD;CAKA,IAAI,MAAS,KAAK,CAAC,GACf,OAAO,CAAC,EAAW,CAAQ,GAAG,EAAW,CAAa,CAAC;CAG3D,IAAM,IAAgB,CAAA,GAElB,IAAQ;CAEZ,OAAO,KAAS,IAAe;EAC3B,EAAM,KAAK,EAAW,CAAK,CAAC;EAE5B,IAAM,IAAY,EAAgB;GAC9B,OAAO,IAAQ;GACf;GACA;GACA;EACJ,CAAC;EAMD,IAAI,MAAc,GACd;EAQJ,IALA,IAAQ,GAKJ,EAAM,SAAS,GACf,OAAO,CAAC,EAAW,CAAQ,GAAG,EAAW,CAAa,CAAC;CAE/D;CAEA,OAAO;AACX,GAEM,KAAoC,EACtC,eACA,mBAKO,IAAY,GAGjB,KAAiC,EACnC,oBACA,qBACA,mBAMO,IAAY,KAAmB,IAAY,GAGhD,KAAoC,EACtC,eACA,cACA,kBAOK,IAAY,KAAY,IAAY,KACpC,IAAY,KAAY,IAAY,KACrC,MAAc,GAIT,KAAsB,EAC/B,WACA,aACA,oBACA,qBACA,mBAOW;CACX,QAAQ,GAAR;EACI,KAAK,YACD,OAAO,EAAiC;GACpC,YAAY;GACZ;EACJ,CAAC;EAEL,KAAK,SACD,OAAO,EAA8B;GACjC;GACA;GACA;EACJ,CAAC;EAEL,KAAK,YACD,OAAO,EAAiC;GACpC,YAAY;GACZ;GACA;EACJ,CAAC;CACT;AACJ,GAEa,KAAqB,EAC9B,oBACA,qBACA,mBAMO,MAAc,KAAmB,MAAc,GAG7C,KAAc,EACvB,WACA,aACA,mBAMI,MAAW,aAIR,MAAc,IAHV;;;GE5QF,KAA2C,EACpD,gBACA,YAAS,YACT,aACA,aACA,SACA,uBACA,kBACE;CACF,IAAMA,IAAQ,QAAc;EACxB,IAAM,IAAQ,EAAU;GACpB;GACA;GACA;GACA;GACA;EACJ,CAAC;EAKD,OAJI,MAAgB,cAChB,EAAM,QAAQ,GAGX;CACX,GAAG;EAAC;EAAU;EAAU;EAAM;EAAoB;EAAa;CAAQ,CAAC,GAElE,IAAc,EAAW,CAAkB;CACjD,IAAI,CAAC,GAAa,OAAO;CAEzB,IAAM,KAAY,IAAW,KAAY,GACnC,IAAkB,EAAY,cAAc,CAAC,GAC7C,IAAmB,EAAY,cAAc,CAAC,KAAK,KAEnD,IAAmBA,EAAM,WAAW;CAE1C,OACI,kBAAC,OAAD;EACI,WAAW,EAAK,EAAO,KAAQ;EAC/B,oBAAkB;EAClB,qBAAA;YAECA,EAAM,KAAK,EAAE,cAAW,iBAAc;GACnC,IAAM,IAAgB,EAAmB;IACrC;IACA;IACA;IACA;IACA;GACJ,CAAC,GAEK,IAAa,EAAkB;IACjC;IACA;IACA;GACJ,CAAC,GAEK,IAAO,EAAW;IAAE;IAAQ;IAAU;GAAU,CAAC;GAOvD,OACI,kBAAC,OAAD;IAEW,OAPX,MAAgB,eACV,EAAE,kBAAkB,GAAG,IAAU,IAAG,GAAI,IACxC,EAAE,eAAe,GAAG,IAAU,IAAG,GAAI;IAMvC,oBAAkB;IAClB,WAAW,EAAK,EAAO,IAAO;IAC9B,iBAAe,EAAY,cAAc,KAAA;IACzC,oBAAkB,KAAc,KAAA;IAChC,mBAAiB;IACjB,kBAAgB,KAAiB,KAAA;IACjC,aACI,KACC,KAAoB,KACrB,KAAA;IAEJ,oBAAA;GAAgB,GAbX,CAaW;EAG5B,CAAC;CACA,CAAA;AAEb"}
1	+ {"version":3,"file":"SliderStops","names":["stops","clsx","styles","clsx$1","DEFAULT_MAX_STOPS","getStepPrecision","precision","stepString","step","exponentialIndex","pointIndex","roundToStepPrecision","value","pow","snapValueToStep","remainder","minValue","snappedValue","maxValue","calcStops","range","lastStopValue","createStop","stopValue","showInBetweenSteps","stops","nextValue","maxStops","checkInActiveRangeStandardSlider","thumbValue","checkInActiveRangeRangeSlider","firstThumbValue","secondThumbValue","checkInActiveRangeCenteredSlider","midValue","checkInActiveRange","slider","checkIsBelowThumb","shouldHide","sliderStops_module_default","SliderStops","stops_0","useMemo","orientation","sliderState","useContext","SliderStateContext","shouldHideActive","\"stops\"","inActiveRange","belowThumb","hide","style","percent","\"stop\""],"sources":["../../src/components/Input/Slider/SliderStops/core.ts","../../src/components/Input/Slider/SliderStops/sliderStops.module.css","../../src/components/Input/Slider/SliderStops/SliderStops.tsx"],"sourcesContent":["import type { SliderVariant } from \"../core\";\nimport type { CalculateStops, Stop } from \"./types\";\n\nconst DEFAULT_MAX_STOPS = 20;\n\n/*\n Clamps a numeric value between minimum and maximum bounds.\n \n @param value - The input value to clamp.\n * @param min - The lower bound. Defaults to `-Infinity`.\n * @param max - The upper bound. Defaults to `Infinity`.\n * @returns The clamped value within `[min, max]`.\n /\nexport const clamp = (\n value: number,\n min: number = -Infinity,\n max: number = Infinity\n): number => {\n return Math.min(Math.max(value, min), max);\n};\n\n/\n Calculates the decimal precision (number of decimal places) of a step value.\n \n Supports standard fractional numbers (e.g. `0.01` -> 2) and scientific notation (e.g. `1e-7` -> 7).\n \n @param step - The step increment.\n * @returns The number of decimal places represented by the step.\n /\nexport const getStepPrecision = (step: number): number => {\n let precision = 0;\n\n const stepString = step.toString();\n\n const exponentialIndex = stepString.toLowerCase().indexOf(\"e-\");\n\n if (exponentialIndex > 0) {\n precision =\n Math.abs(Math.floor(Math.log10(Math.abs(step)))) + exponentialIndex;\n } else {\n const pointIndex = stepString.indexOf(\".\");\n\n if (pointIndex >= 0) {\n precision = stepString.length - pointIndex;\n }\n }\n\n return precision;\n};\n\n/\n Rounds a numeric value to the precision determined by the step value\n * to eliminate floating-point calculation inaccuracies.\n \n @param value - The value to round.\n * @param step - The step determining precision.\n * @returns The rounded numeric value.\n /\nexport const roundToStepPrecision = (value: number, step: number): number => {\n const precision = getStepPrecision(step);\n\n if (precision <= 0) {\n return value;\n }\n\n const pow = 10 * precision;\n\n return Math.round(value * pow) / pow;\n};\n\n/*\n Snaps a given number to the nearest valid step increment between min and max bounds.\n \n @param options - Configuration object containing value, minValue, maxValue, and step.\n * @returns The snapped value aligned to the step grid.\n /\nexport const snapValueToStep = ({\n value,\n minValue,\n maxValue,\n step,\n}: {\n value: number;\n minValue: number;\n maxValue: number;\n step: number;\n}): number => {\n const remainder = (value - minValue) % step;\n\n let snappedValue = roundToStepPrecision(\n Math.abs(remainder) 2 >= step\n ? value + Math.sign(remainder) * (step - Math.abs(remainder))\n : value - remainder,\n step\n );\n\n if (snappedValue < minValue) {\n snappedValue = minValue;\n } else if (snappedValue > maxValue) {\n snappedValue =\n minValue +\n Math.floor(\n roundToStepPrecision((maxValue - minValue) / step, step)\n ) \n step;\n }\n\n snappedValue = roundToStepPrecision(snappedValue, step);\n\n return snappedValue;\n};\n\n/\n Generates all valid slider tick stops along the track using stepping logic\n * compatible with React Aria.\n \n If the number of generated stops exceeds `maxStops` or `showInBetweenSteps` is false,\n * only the minimum and maximum boundaries are returned to prevent excessive DOM nodes.\n \n @param options - Stop calculation configuration.\n * @returns Array of calculated {@link Stop} objects with `stopValue` and `percent`.\n /\nexport const calcStops: CalculateStops = ({\n minValue,\n maxValue,\n step,\n showInBetweenSteps = true,\n maxStops = DEFAULT_MAX_STOPS,\n}) => {\n /\n Invalid configuration fallback.\n /\n if (step <= 0 \|\| Number.isNaN(step) \|\| maxValue < minValue) {\n return [];\n }\n\n const range = maxValue - minValue;\n\n /\n React Aria consistent last valid stop.\n \n Example:\n * min=0\n * max=10\n * step=3\n \n valid values:\n * 0 3 6 9\n /\n const lastStopValue = snapValueToStep({\n value: maxValue,\n minValue,\n maxValue,\n step,\n });\n\n const createStop = (stopValue: number): Stop => ({\n stopValue,\n percent: range === 0 ? 0 : (stopValue - minValue) / range,\n });\n\n /\n Reduced stop rendering mode.\n /\n if (step === 1 \|\| !showInBetweenSteps) {\n return [createStop(minValue), createStop(lastStopValue)];\n }\n\n const stops: Stop[] = [];\n\n let value = minValue;\n\n while (value <= lastStopValue) {\n stops.push(createStop(value));\n\n const nextValue = snapValueToStep({\n value: value + step,\n minValue,\n maxValue,\n step,\n });\n\n /\n Prevent infinite loops caused by\n * floating precision edge cases.\n /\n if (nextValue === value) {\n break;\n }\n\n value = nextValue;\n\n /\n DOM safety guard.\n /\n if (stops.length > maxStops) {\n return [createStop(minValue), createStop(lastStopValue)];\n }\n }\n\n return stops;\n};\n\nconst checkInActiveRangeStandardSlider = ({\n thumbValue,\n stopValue,\n}: {\n thumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue < thumbValue;\n};\n\nconst checkInActiveRangeRangeSlider = ({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue > firstThumbValue && stopValue < secondThumbValue;\n};\n\nconst checkInActiveRangeCenteredSlider = ({\n thumbValue,\n stopValue,\n midValue,\n}: {\n thumbValue: number;\n stopValue: number;\n midValue: number;\n}): boolean => {\n return (\n (stopValue < midValue && stopValue > thumbValue) \|\|\n (stopValue > midValue && stopValue < thumbValue) \|\|\n stopValue === midValue\n );\n};\n\n/\n Determines whether a given tick stop falls within the active (highlighted) track range\n * for the specified slider variant.\n \n - Standard slider: stops strictly below the thumb.\n * - Range slider: stops strictly between the start and end thumbs.\n * - Centered slider: stops between the mid-value and the thumb position.\n \n @param options - Configuration containing the slider variant, thumb values, mid-value, and stopValue.\n * @returns `true` if the stop is within the active highlighted track segment.\n /\nexport const checkInActiveRange = ({\n slider,\n midValue,\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n slider: SliderVariant;\n midValue: number;\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n switch (slider) {\n case \"standard\":\n return checkInActiveRangeStandardSlider({\n thumbValue: firstThumbValue,\n stopValue,\n });\n\n case \"range\":\n return checkInActiveRangeRangeSlider({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n case \"centered\":\n return checkInActiveRangeCenteredSlider({\n thumbValue: firstThumbValue,\n midValue,\n stopValue,\n });\n }\n};\n\n/\n Checks whether a given stop coincides directly with any active thumb position.\n \n @param options - First and second thumb values, plus the candidate stopValue.\n * @returns `true` if the stop is located directly underneath a thumb.\n /\nexport const checkIsBelowThumb = ({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue === firstThumbValue \|\| stopValue === secondThumbValue;\n};\n\n/\n Checks whether a stop indicator should be visually hidden.\n \n For centered sliders, the center anchor point is hidden to avoid overlapping track visuals.\n \n @param options - Slider variant, midValue, and stopValue.\n * @returns `true` if the stop indicator should be hidden.\n /\nexport const shouldHide = ({\n slider,\n midValue,\n stopValue,\n}: {\n slider: SliderVariant;\n midValue: number;\n stopValue: number;\n}): boolean => {\n if (slider !== \"centered\") {\n return false;\n }\n\n return stopValue === midValue;\n};\n","@layer adgytec.comps {\n .stops {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n .stop {\n position: absolute;\n\n &[data-orientation=\"horizontal\"] {\n inset-block-start: 50%;\n translate: -50% -50%;\n }\n\n &[data-orientation=\"vertical\"] {\n inset-inline-start: 50%;\n translate: -50% 50%;\n }\n\n inline-size: var(--md-sys-layout-space-4);\n aspect-ratio: 1 / 1;\n\n border-radius: var(--md-sys-shape-corner-radius-full);\n background-color: var(--_md-slider-inactive-stop-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-in-active] {\n background-color: var(--_md-slider-active-stop-color);\n }\n\n &[data-hide] {\n background-color: transparent;\n }\n\n &[data-disabled] {\n background-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-in-active] {\n background-color: rgb(\n from var(--md-sys-color-inverse-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n\n &[data-hide] {\n background-color: transparent;\n }\n }\n\n &[data-below-thumb] {\n background-color: transparent;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { useContext, useMemo } from \"react\";\nimport { SliderStateContext } from \"react-aria-components\";\nimport {\n calcStops,\n checkInActiveRange,\n checkIsBelowThumb,\n shouldHide,\n} from \"./core\";\nimport styles from \"./sliderStops.module.css\";\nimport type { SliderStopsProps } from \"./types\";\n\n/\n Component that renders step tick mark indicators along a slider track.\n \n Positions tick indicators using percentage offsets computed from `minValue`, `maxValue`,\n * and `step`. Distinguishes between active and inactive track sections and hides stops\n * directly beneath active thumbs.\n \n @example\n * ```tsx\n * <SliderStops\n * minValue={0}\n * maxValue={100}\n * step={10}\n * orientation=\"horizontal\"\n * showInBetweenSteps\n * />\n * ```\n /\nexport const SliderStops: React.FC<SliderStopsProps> = ({\n orientation,\n slider = \"standard\",\n minValue,\n maxValue,\n step,\n showInBetweenSteps,\n maxStops,\n}) => {\n const stops = useMemo(() => {\n const stops = calcStops({\n minValue,\n maxValue,\n step,\n showInBetweenSteps,\n maxStops,\n });\n if (orientation === \"vertical\") {\n stops.reverse();\n }\n\n return stops;\n }, [minValue, maxValue, step, showInBetweenSteps, orientation, maxStops]);\n\n const sliderState = useContext(SliderStateContext);\n if (!sliderState) return null;\n\n const midValue = (minValue + maxValue) / 2;\n const firstThumbValue = sliderState.getThumbValue(0);\n const secondThumbValue = sliderState.getThumbValue(1) ?? NaN;\n\n const shouldHideActive = stops.length === 2;\n\n return (\n <div\n className={clsx(styles[\"stops\"])}\n data-orientation={orientation}\n data-slider-stops\n >\n {stops.map(({ stopValue, percent }) => {\n const inActiveRange = checkInActiveRange({\n slider,\n midValue,\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n const belowThumb = checkIsBelowThumb({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n const hide = shouldHide({ slider, midValue, stopValue });\n\n const style =\n orientation === \"horizontal\"\n ? { insetInlineStart: `${percent 100}%` }\n : { insetBlockEnd: `${percent * 100}%` };\n\n return (\n <div\n key={stopValue}\n style={style}\n data-orientation={orientation}\n className={clsx(styles[\"stop\"])}\n data-disabled={sliderState.isDisabled \|\| undefined}\n data-below-thumb={belowThumb \|\| undefined}\n data-stop-value={stopValue}\n data-in-active={inActiveRange \|\| undefined}\n data-hide={\n hide \|\|\n (shouldHideActive && inActiveRange) \|\|\n undefined\n }\n data-slider-stop\n />\n );\n })}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/chunks/SliderThumb.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderThumb","names":[],"sources":["../../src/components/Input/Slider/SliderThumb/sliderThumb.module.css","../../src/components/Input/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["@layer adgytec.comps {\n .thumb {\n /* thumb /\n --_md-slider-thumb-thickness: var(--md-sys-layout-space-4);\n }\n\n .extra-small {\n / thumb /\n --_md-slider-thumb-size: calc(44 var(--dp, 1px));\n }\n\n .small {\n /* thumb /\n --_md-slider-thumb-size: calc(44 var(--dp, 1px));\n }\n\n .medium {\n /* thumb /\n --_md-slider-thumb-size: calc(52 var(--dp, 1px));\n }\n\n .large {\n /* thumb /\n --_md-slider-thumb-size: calc(68 var(--dp, 1px));\n }\n\n .extra-large {\n /* thumb /\n --_md-slider-thumb-size: calc(108 var(--dp, 1px));\n }\n\n .thumb {\n --_thumb-block-size: var(--_md-slider-thumb-size);\n --_thumb-inline-size: var(--_md-slider-thumb-thickness);\n\n position: absolute;\n transform-origin: center;\n\n &[data-orientation=\"horizontal\"] {\n inset-block-start: 50%;\n }\n\n &[data-orientation=\"vertical\"] {\n --_thumb-block-size: var(--_md-slider-thumb-thickness);\n --_thumb-inline-size: var(--_md-slider-thumb-size);\n\n inset-inline-start: 50%;\n }\n\n inline-size: var(--_thumb-inline-size);\n block-size: var(--_thumb-block-size);\n\n outline: none;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n background-color: var(--_md-slider-thumb-color);\n\n transition:\n block-size var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n inline-size var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-z-index-increase] {\n z-index: 1;\n }\n\n &[data-focus-visible]::before {\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-offset: calc(6 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n z-index: 2;\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n\n &[data-dragging],\n &[data-focus-visible] {\n --_md-slider-thumb-thickness: calc(2 * var(--dp, 1px));\n }\n\n &[data-disabled] {\n background-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n}\n","import clsx from \"clsx\";\nimport type { Orientation } from \"react-aria\";\nimport { SliderThumb as AriaSliderThumb } from \"react-aria-components\";\nimport type { OutputRenderer, SliderSize } from \"../core\";\nimport { SliderOutput } from \"../SliderOutput\";\nimport { SliderThumbStateContext } from \"./context\";\nimport styles from \"./sliderThumb.module.css\";\n\~~nexport~~ ~~const~~ SliderThumb: ~~React.FC<\~~n Omit<React.ComponentPropsWithRef<typeof AriaSliderThumb>, \"children\"> & {\n orientation: Orientation;\n size: SliderSize;\n outputRenderer?: OutputRenderer;\n }\n> = ({ index = 0, orientation, className, size, outputRenderer, ...props }) => {\n return (\n <AriaSliderThumb\n index={index}\n className={(renderProps) =>\n clsx(\n styles[\"thumb\"],\n styles[size],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n data-orientation={orientation}\n {...props}\n data-slider-thumb\n >\n {(renderProp) => (\n <SliderThumbStateContext value={renderProp}>\n {outputRenderer ? (\n typeof outputRenderer === \"function\" ? (\n outputRenderer({\n ...renderProp,\n thumbIndex: index,\n })\n ) : (\n outputRenderer\n )\n ) : (\n <SliderOutput>\n {({ state }) => state.getThumbValueLabel(index)}\n </SliderOutput>\n )}\n </SliderThumbStateContext>\n )}\n </AriaSliderThumb>\n );\n};\n"],"mappings":";;;;;;;;;;;~~GCQa~~,~~KAMR~~,~~EAAE~~,WAAQ,~~GAAG~~,~~gBAAa~~,~~cAAW~~,~~SAAM~~,~~mBAAgB~~,~~GAAG~~,~~QAE3D~~,~~kBAAC~~,GAAD;CACW;CACP,YAAY,~~MACR~~,~~EACI~~,~~EAAO~~,~~OACP~~,~~EAAO~~,IACP,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CAAW,~~IACrB~~,CACV;CAEJ,~~oBAAkB~~;CAClB,~~GAAI~~;CACJ,qBAAA;~~YAEE~~,MACE,~~kBAAC~~,GAAD;EAAyB,~~OAAO~~;~~YAC3B~~,IACG,~~OAAO~~,KAAmB,~~aACtB~~,EAAe;GACX,~~GAAG~~;GACH,~~YAAY~~;EAChB,CAAC,~~IAED~~,IAGJ,~~kBAAC~~,GAAD,EAAA,WACM,EAAE,~~eAAY~~,EAAM,~~mBAAmB~~,CAAK,EACpC,CAAA;CAEG,CAAA;AAEhB,CAAA"}
1	+ {"version":3,"file":"SliderThumb","names":["SliderThumb","AriaSliderThumb","clsx","styles","SliderOutput","SliderThumbStateContext","clsx$1","sliderThumb_module_default","SliderThumb$1","props","SliderThumb","\"thumb\"","size","className","renderProps","orientation","renderProp","outputRenderer","index","SliderOutput$1","state"],"sources":["../../src/components/Input/Slider/SliderThumb/sliderThumb.module.css","../../src/components/Input/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["@layer adgytec.comps {\n .thumb {\n /* thumb /\n --_md-slider-thumb-thickness: var(--md-sys-layout-space-4);\n }\n\n .extra-small {\n / thumb /\n --_md-slider-thumb-size: calc(44 var(--dp, 1px));\n }\n\n .small {\n /* thumb /\n --_md-slider-thumb-size: calc(44 var(--dp, 1px));\n }\n\n .medium {\n /* thumb /\n --_md-slider-thumb-size: calc(52 var(--dp, 1px));\n }\n\n .large {\n /* thumb /\n --_md-slider-thumb-size: calc(68 var(--dp, 1px));\n }\n\n .extra-large {\n /* thumb /\n --_md-slider-thumb-size: calc(108 var(--dp, 1px));\n }\n\n .thumb {\n --_thumb-block-size: var(--_md-slider-thumb-size);\n --_thumb-inline-size: var(--_md-slider-thumb-thickness);\n\n position: absolute;\n transform-origin: center;\n\n &[data-orientation=\"horizontal\"] {\n inset-block-start: 50%;\n }\n\n &[data-orientation=\"vertical\"] {\n --_thumb-block-size: var(--_md-slider-thumb-thickness);\n --_thumb-inline-size: var(--_md-slider-thumb-size);\n\n inset-inline-start: 50%;\n }\n\n inline-size: var(--_thumb-inline-size);\n block-size: var(--_thumb-block-size);\n\n outline: none;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n background-color: var(--_md-slider-thumb-color);\n\n transition:\n block-size var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n inline-size var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-z-index-increase] {\n z-index: 1;\n }\n\n &[data-focus-visible]::before {\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-offset: calc(6 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n z-index: 2;\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n\n &[data-dragging],\n &[data-focus-visible] {\n --_md-slider-thumb-thickness: calc(2 * var(--dp, 1px));\n }\n\n &[data-disabled] {\n background-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n}\n","import clsx from \"clsx\";\nimport type { Orientation } from \"react-aria\";\nimport { SliderThumb as AriaSliderThumb } from \"react-aria-components\";\nimport type { OutputRenderer, SliderSize } from \"../core\";\nimport { SliderOutput } from \"../SliderOutput\";\nimport { SliderThumbStateContext } from \"./context\";\nimport styles from \"./sliderThumb.module.css\";\n\n/*\n Props for the [`SliderThumb`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Input/Slider/SliderThumb/SliderThumb.tsx) component.\n /\nexport interface SliderThumbProps\n extends Omit<\n React.ComponentPropsWithRef<typeof AriaSliderThumb>,\n \"children\"\n > {\n /\n Layout orientation of the slider track.\n /\n orientation: Orientation;\n /\n Size variant determining the dimensions of the thumb handle.\n /\n size: SliderSize;\n /\n Custom renderer or static node for the thumb value tooltip output.\n /\n outputRenderer?: OutputRenderer;\n}\n\n/\n Draggable handle component within a slider track.\n \n Wraps React Aria's `SliderThumb`, managing state transitions (drag, hover, focus)\n * and hosting the [`SliderOutput`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Input/Slider/SliderOutput/SliderOutput.tsx)\n * value bubble.\n \n @example\n * ```tsx\n * <SliderThumb\n * index={0}\n * size=\"medium\"\n * orientation=\"horizontal\"\n * aria-label=\"Volume level\"\n * />\n * ```\n */\nexport const SliderThumb: React.FC<SliderThumbProps> = ({\n index = 0,\n orientation,\n className,\n size,\n outputRenderer,\n ...props\n}) => {\n return (\n <AriaSliderThumb\n index={index}\n className={(renderProps) =>\n clsx(\n styles[\"thumb\"],\n styles[size],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n data-orientation={orientation}\n {...props}\n data-slider-thumb\n >\n {(renderProp) => (\n <SliderThumbStateContext value={renderProp}>\n {outputRenderer ? (\n typeof outputRenderer === \"function\" ? (\n outputRenderer({\n ...renderProp,\n thumbIndex: index,\n })\n ) : (\n outputRenderer\n )\n ) : (\n <SliderOutput>\n {({ state }) => state.getThumbValueLabel(index)}\n </SliderOutput>\n )}\n </SliderThumbStateContext>\n )}\n </AriaSliderThumb>\n );\n};\n"],"mappings":";;;;;;;;;;;GC+CaA,KAA2C,EACpD,WAAQ,GACR,gBACA,cACA,SACA,mBACA,GAAGS,QAGC,kBAACR,GAAD;CACW;CACP,YAAY,MACRC,EACIC,EAAOQ,OACPR,EAAOS,IACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,oBAAkBE;CAClB,GAAIN;CACJ,qBAAA;CAEE,WAAA,MACE,kBAACJ,GAAD;EAAyB,OAAOW;EAC3B,UAAAC,IACG,OAAOA,KAAmB,aACtBA,EAAe;GACX,GAAGD;GACH,YAAYE;EAChB,CAAC,IAEDD,IAGJ,kBAACb,GAAD,EAAA,WACM,EAAE,eAAYgB,EAAM,mBAAmBF,CAAK,EACpC,CAAA;CAEG,CAAA;AAEhB,CAAA"}