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

@adgytec/adgytec-web-ui-components 2.3.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 (448) hide show

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":"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"}
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"}

package/dist/chunks/Snackbar.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Snackbar","names":[],"sources":["../../src/components/Snackbar/context.ts","../../src/components/Snackbar/snackbar.module.css","../../src/components/Snackbar/SnackbarRegion.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { UNSTABLE_ToastQueue as ToastQueue } from \"react-aria-components\";\nimport type { SnackbarContent } from \"./types\";\n\nexport const SnackbarQueueContext =\n createContext<ToastQueue<SnackbarContent> \| null>(null);\n\nexport function useSnackbarQueue() {\n const queue = useContext(SnackbarQueueContext);\n\n if (!queue) {\n throw new Error(\"useSnackbarQueue must be used inside SnackbarRegion\");\n }\n\n return queue;\n}\n","/* configurable tokens\n\n --md-snackbar-background\n* --md-snackbar-color\n* --md-snackbar-action-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .snackbar-region {\n position: fixed;\n\n display: flex;\n flex-direction: column-reverse;\n gap: calc(2 var(--dp, 1px));\n\n inset-block-end: var(--md-sys-layout-space-24);\n\n inset-inline-start: 50%;\n translate: -50%;\n\n z-index: 999999;\n }\n\n .snackbar {\n --_md-snackbar-background: var(\n --md-snackbar-background,\n var(--md-sys-color-inverse-surface)\n );\n --_md-snackbar-color: var(\n --md-snackbar-color,\n var(--md-sys-color-inverse-on-surface)\n );\n --_md-snackbar-action-color: var(\n --md-snackbar-action-color,\n var(--md-sys-color-inverse-primary)\n );\n\n inline-size: min(90svi, calc(568 * var(--dp, 1px)));\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-4);\n\n padding-block: var(--md-sys-layout-space-4);\n padding-inline: var(--md-sys-layout-space-16);\n\n box-shadow: var(--md-sys-elevation-shadow-3);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n background-color: var(--_md-snackbar-background);\n color: var(--_md-snackbar-color);\n\n &[data-close] {\n padding-inline-end: var(--md-sys-layout-space-4);\n }\n\n &[data-action] {\n padding-inline-end: var(--md-sys-layout-space-8);\n }\n\n [data-close-button] {\n --md-button-color: var(--_md-snackbar-color);\n }\n }\n\n .snackbar-content {\n inline-size: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-8);\n\n [data-button] {\n --md-button-color: var(--_md-snackbar-action-color);\n }\n }\n\n .text {\n padding-block: calc(10 * var(--dp, 1px));\n }\n}\n","import { clsx } from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport {\n Text,\n UNSTABLE_Toast as Toast,\n UNSTABLE_ToastContent as ToastContent,\n UNSTABLE_ToastQueue as ToastQueue,\n UNSTABLE_ToastRegion as ToastRegion,\n} from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { SnackbarQueueContext } from \"./context\";\nimport styles from \"./snackbar.module.css\";\nimport type { SnackbarContent, SnackbarRegionProps } from \"./types\";\n\nexport const SnackbarRegion: React.FC<SnackbarRegionProps> = ({\n children,\n maxVisibleSnackbars = 1,\n}) => {\n const queue = useMemo(() => {\n return new ToastQueue<SnackbarContent>({\n maxVisibleToasts: maxVisibleSnackbars,\n });\n }, [maxVisibleSnackbars]);\n\n return (\n <SnackbarQueueContext value={queue}>\n {children}\n <ToastRegion\n queue={queue}\n className={clsx(styles[\"snackbar-region\"])}\n >\n {({ toast }) => (\n <Toast\n toast={toast}\n className={clsx(styles[\"snackbar\"])}\n data-close={!toast.content.hideCloseAction \|\| undefined}\n data-action={\n (toast.content.hideCloseAction &&\n !!toast.content.action) \|\|\n undefined\n }\n >\n <ToastContent className={styles[\"snackbar-content\"]}>\n <Text\n slot=\"description\"\n className={clsx(\n styles[\"text\"],\n typography.bodyMedium\n )}\n >\n {toast.content.supportingText}\n </Text>\n\n {toast.content.action}\n </ToastContent>\n\n {!toast.content.hideCloseAction && (\n <IconButton\n slot=\"close\"\n icon={X}\n color=\"standard\"\n data-close-button\n />\n )}\n </Toast>\n )}\n </ToastRegion>\n </SnackbarQueueContext>\n );\n};\n"],"mappings":";;;;;;;;~~AAIA~~,~~IAAa~~,~~IACT~~,EAAkD,IAAI;~~AAE1D~~,~~SAAO~~,IAAA;CACH,~~IAAA~~,~~IAAc~~,~~EAAW~~,CAAoB;CAE7C,IAAI,~~CAAC~~,GACD,MAAU,MAAM,qDAAqD;CACxE,~~OAEM~~;AAAK;;;;;;~~GEEH~~,KAAiD,EAC1D,aACA,yBAAsB,QACpB;CACF,~~IAAM~~,~~IAAQ~~,QACH,~~IAAI~~,EAA4B,EACnC,~~kBAAkB~~,EACtB,CAAC,GACF,~~CAAC~~,CAAmB,CAAC;CAExB,OACI,~~kBAAC~~,GAAD;EAAsB,~~OAAO~~;~~YAA7B~~,~~CACK~~,GACD,~~kBAAC~~,GAAD;GACW;GACP,~~WAAW~~,~~EAAK~~,EAAO,kBAAkB;~~cAEvC~~,EAAE,eACA,~~kBAAC~~,GAAD;IACW;IACP,~~WAAW~~,~~EAAK~~,~~EAAO~~,QAAW;IAClC,cAAY,~~CAAC~~,EAAM,QAAQ,mBAAmB,KAAA;IAC9C,~~eACK~~,EAAM,QAAQ,mBACX,CAAC,~~CAAC~~,EAAM,QAAQ,UACpB,KAAA;~~cAPR~~,CAUI,~~kBAAC~~,GAAD;KAAc,~~WAAW~~,EAAO;~~eAAhC~~,CACI,~~kBAAC~~,GAAD;MACI,MAAK;MACL,~~WAAW~~,~~EACP~~,~~EAAO~~,~~MACP~~,EAAW,UACf;~~gBAEC~~,EAAM,QAAQ;KACb,CAAA,~~GAEL~~,EAAM,QAAQ,MACL;~~QAEb~~,~~CAAC~~,EAAM,QAAQ,mBACZ,~~kBAAC~~,GAAD;KACI,MAAK;KACL,~~MAAM~~;KACN,OAAM;KACN,qBAAA;IAAiB,CAAA,CAGtB;;EAEF,CAAA,CACK;;AAE9B"}
1	+ {"version":3,"file":"Snackbar","names":["ToastQueue","ToastRegion","styles","Toast","ToastContent","typography","SnackbarQueueContext","createContext","useSnackbarQueue","queue","useContext","snackbar_module_default","SnackbarRegion","useMemo","UNSTABLE_ToastQueue","maxVisibleSnackbars","children","UNSTABLE_ToastRegion","clsx","UNSTABLE_Toast","\"snackbar\"","toast","UNSTABLE_ToastContent","Text","\"text\"","IconButton","X"],"sources":["../../src/components/Snackbar/context.ts","../../src/components/Snackbar/snackbar.module.css","../../src/components/Snackbar/SnackbarRegion.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { UNSTABLE_ToastQueue as ToastQueue } from \"react-aria-components\";\nimport type { SnackbarContent } from \"./types\";\n\n/*\n React context holding the active `ToastQueue` instance for snackbars,\n * or `null` if accessed outside a {@link SnackbarRegion}.\n /\nexport const SnackbarQueueContext =\n createContext<ToastQueue<SnackbarContent> \| null>(null);\n\n/\n Hook to access the active snackbar queue from any child component within a {@link SnackbarRegion}.\n \n Returns the underlying React Aria `ToastQueue` instance, allowing components\n * to enqueue new snackbars, dismiss existing ones, or inspect the queue.\n \n @throws {Error} If called outside of a {@link SnackbarRegion}.\n \n @example\n * ```tsx\n * import { Button, useSnackbarQueue } from \"@adgytec/web-ui-components\";\n \n export function CopyButton({ text }: { text: string }) {\n * const snackbarQueue = useSnackbarQueue();\n \n const handleCopy = async () => {\n * await navigator.clipboard.writeText(text);\n * snackbarQueue.add(\n * {\n * supportingText: \"Copied to clipboard\",\n * action: (\n * <Button color=\"text\" onPress={() => console.log(\"Undo\")}>\n * Undo\n * </Button>\n * ),\n * },\n * { timeout: 4000 }\n * );\n * };\n \n return <Button onPress={handleCopy}>Copy</Button>;\n * }\n * ```\n /\nexport function useSnackbarQueue() {\n const queue = useContext(SnackbarQueueContext);\n\n if (!queue) {\n throw new Error(\"useSnackbarQueue must be used inside SnackbarRegion\");\n }\n\n return queue;\n}\n","/ configurable tokens\n\n --md-snackbar-background\n* --md-snackbar-color\n* --md-snackbar-action-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .snackbar-region {\n position: fixed;\n\n display: flex;\n flex-direction: column-reverse;\n gap: calc(2 var(--dp, 1px));\n\n inset-block-end: var(--md-sys-layout-space-24);\n\n inset-inline-start: 50%;\n translate: -50%;\n\n z-index: 999999;\n }\n\n .snackbar {\n --_md-snackbar-background: var(\n --md-snackbar-background,\n var(--md-sys-color-inverse-surface)\n );\n --_md-snackbar-color: var(\n --md-snackbar-color,\n var(--md-sys-color-inverse-on-surface)\n );\n --_md-snackbar-action-color: var(\n --md-snackbar-action-color,\n var(--md-sys-color-inverse-primary)\n );\n\n inline-size: min(90svi, calc(568 * var(--dp, 1px)));\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-4);\n\n padding-block: var(--md-sys-layout-space-4);\n padding-inline: var(--md-sys-layout-space-16);\n\n box-shadow: var(--md-sys-elevation-shadow-3);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n background-color: var(--_md-snackbar-background);\n color: var(--_md-snackbar-color);\n\n &[data-close] {\n padding-inline-end: var(--md-sys-layout-space-4);\n }\n\n &[data-action] {\n padding-inline-end: var(--md-sys-layout-space-8);\n }\n\n [data-close-button] {\n --md-button-color: var(--_md-snackbar-color);\n }\n }\n\n .snackbar-content {\n inline-size: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-8);\n\n [data-button] {\n --md-button-color: var(--_md-snackbar-action-color);\n }\n }\n\n .text {\n padding-block: calc(10 * var(--dp, 1px));\n }\n}\n","import { clsx } from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport {\n Text,\n UNSTABLE_Toast as Toast,\n UNSTABLE_ToastContent as ToastContent,\n UNSTABLE_ToastQueue as ToastQueue,\n UNSTABLE_ToastRegion as ToastRegion,\n} from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { SnackbarQueueContext } from \"./context\";\nimport styles from \"./snackbar.module.css\";\nimport type { SnackbarContent, SnackbarRegionProps } from \"./types\";\n\n/*\n Root region component for managing and rendering [Material 3 Snackbars](https://m3.material.io/components/snackbar/overview).\n \n Wraps your application or a section of it to provide a snackbar context via {@link SnackbarQueueContext}.\n * Renders an underlying React Aria `ToastRegion` fixed at the bottom center of the viewport (elevated with\n * high z-index), displaying queued snackbar notifications with supporting text, optional actions,\n * and an optional dismiss button.\n \n Configurable CSS tokens:\n * - `--md-snackbar-background`: Background color of the snackbar (`var(--md-sys-color-inverse-surface)`).\n * - `--md-snackbar-color`: Text and icon color of the snackbar (`var(--md-sys-color-inverse-on-surface)`).\n * - `--md-snackbar-action-color`: Text color of the action button (`var(--md-sys-color-inverse-primary)`).\n \n @example\n * ```tsx\n * import {\n * Button,\n * SnackbarRegion,\n * useSnackbarQueue,\n * } from \"@adgytec/web-ui-components\";\n \n function NotificationTrigger() {\n * const queue = useSnackbarQueue();\n \n const showNotification = () => {\n * queue.add(\n * {\n * supportingText: \"File uploaded successfully.\",\n * action: (\n * <Button color=\"text\" onPress={() => console.log(\"View\")}>\n * View\n * </Button>\n * ),\n * },\n * { timeout: 5000 }\n * );\n * };\n \n return <Button onPress={showNotification}>Upload</Button>;\n * }\n \n export function App() {\n * return (\n * <SnackbarRegion maxVisibleSnackbars={1}>\n * <NotificationTrigger />\n * </SnackbarRegion>\n * );\n * }\n * ```\n */\nexport const SnackbarRegion: React.FC<SnackbarRegionProps> = ({\n children,\n maxVisibleSnackbars = 1,\n}) => {\n const queue = useMemo(() => {\n return new ToastQueue<SnackbarContent>({\n maxVisibleToasts: maxVisibleSnackbars,\n });\n }, [maxVisibleSnackbars]);\n\n return (\n <SnackbarQueueContext value={queue}>\n {children}\n <ToastRegion\n queue={queue}\n className={clsx(styles[\"snackbar-region\"])}\n >\n {({ toast }) => (\n <Toast\n toast={toast}\n className={clsx(styles[\"snackbar\"])}\n data-close={!toast.content.hideCloseAction \|\| undefined}\n data-action={\n (toast.content.hideCloseAction &&\n !!toast.content.action) \|\|\n undefined\n }\n >\n <ToastContent className={styles[\"snackbar-content\"]}>\n <Text\n slot=\"description\"\n className={clsx(\n styles[\"text\"],\n typography.bodyMedium\n )}\n >\n {toast.content.supportingText}\n </Text>\n\n {toast.content.action}\n </ToastContent>\n\n {!toast.content.hideCloseAction && (\n <IconButton\n slot=\"close\"\n icon={X}\n color=\"standard\"\n data-close-button\n />\n )}\n </Toast>\n )}\n </ToastRegion>\n </SnackbarQueueContext>\n );\n};\n"],"mappings":";;;;;;;;AAQA,IAAaM,IACTC,EAAkD,IAAI;AAoC1D,SAAOC,IAAA;CACH,IAAAC,IAAcC,EAAWJ,CAAoB;CAE7C,IAAI,CAACG,GACD,MAAU,MAAM,qDAAqD;CACxE,OAEMA;AAAK;;;;;;GEcHG,KAAiD,EAC1D,aACA,yBAAsB,QACpB;CACF,IAAMH,IAAQI,QACH,IAAIb,EAA4B,EACnC,kBAAkBe,EACtB,CAAC,GACF,CAACA,CAAmB,CAAC;CAExB,OACI,kBAACT,GAAD;EAAsB,OAAOG;EAA7B,UAAA,CACKO,GACD,kBAACf,GAAD;GACW;GACP,WAAWiB,EAAKhB,EAAO,kBAAkB;GAEvC,WAAA,EAAE,eACA,kBAACC,GAAD;IACW;IACP,WAAWe,EAAKhB,EAAOkB,QAAW;IAClC,cAAY,CAACC,EAAM,QAAQ,mBAAmB,KAAA;IAC9C,eACKA,EAAM,QAAQ,mBACX,CAAC,CAACA,EAAM,QAAQ,UACpB,KAAA;IAPR,UAAA,CAUI,kBAACjB,GAAD;KAAc,WAAWF,EAAO;KAAhC,UAAA,CACI,kBAACqB,GAAD;MACI,MAAK;MACL,WAAWL,EACPhB,EAAOsB,MACPnB,EAAW,UACf;MAEC,UAAAgB,EAAM,QAAQ;KACb,CAAA,GAELA,EAAM,QAAQ,MACL;IAEb,CAAA,GAAA,CAACA,EAAM,QAAQ,mBACZ,kBAACI,GAAD;KACI,MAAK;KACL,MAAMC;KACN,OAAM;KACN,qBAAA;IAAiB,CAAA,CAGtB;;EAEF,CAAA,CACK;;AAE9B"}

package/dist/chunks/SplitButton CHANGED Viewed

@@ -5,8 +5,8 @@ import { useMemo as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 import { Toolbar as a } from "react-aria-components";
 import '../assets/SplitButton.css';//#region src/components/Button/SplitButton/SplitButton/splitButton.module.css
-var o = { "split-button": "_split-button_1mye6_2" }, s = ({ color: s = "filled", size: c = "small", isPending: l, isDisabled: u, children: d, className: f, ...p }) => /* @__PURE__ */ i(t, {
-	value: r(() => ({
+var o = { "split-button": "_split-button_1mye6_2" }, s = ({ color: s = "filled", size: c = "small", isPending: l, isDisabled: u, children: d, className: f, ...p }) => {
+	let m = r(() => ({
 		isPending: l,
 		isDisabled: u,
 		color: s,
@@ -16,14 +16,17 @@ var o = { "split-button": "_split-button_1mye6_2" }, s = ({ color: s = "filled",
 		u,
 		s,
 		c
-	]),
-	children: /* @__PURE__ */ i(a, {
-		className: n(o["split-button"], e(c), f),
-		...p,
-		"data-split-button": !0,
-		children: d
-	})
-});
+	]);
+	return /* @__PURE__ */ i(t, {
+		value: m,
+		children: /* @__PURE__ */ i(a, {
+			className: n(o["split-button"], e(c), f),
+			...p,
+			"data-split-button": !0,
+			children: d
+		})
+	});
+};
 //#endregion
 export { s as t };

package/dist/chunks/SplitButton.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButton","names":[],"sources":["../../src/components/Button/SplitButton/SplitButton/splitButton.module.css","../../src/components/Button/SplitButton/SplitButton/SplitButton.tsx"],"sourcesContent":["@layer adgytec.overrides {\n .split-button [data-visual-button] {\n --_md-button-shape-motion: var(--md-sys-motion-standard-fast-spatial);\n --_md-button-shape-motion-duration: var(\n --md-sys-motion-standard-fast-spatial-duration\n );\n }\n}\n\n@layer adgytec.comps {\n .split-button {\n display: inline-flex;\n gap: calc(2 * var(--dp, 1px));\n }\n}\n","import { clsx } from \"clsx\";\nimport { useMemo } from \"react\";\nimport { Toolbar } from \"react-aria-components\";\nimport { splitButtonSizeConfig } from \"../core\";\nimport { SplitButtonContext } from \"../SplitButtonContext\";\nimport styles from \"./splitButton.module.css\";\nimport type { SplitButtonProps } from \"./types\";\n\nexport const SplitButton: React.FC<SplitButtonProps> = ({\n color = \"filled\",\n size = \"small\",\n\n isPending,\n isDisabled,\n\n children,\n className,\n\n ...props\n}) => {\n const contextValue = useMemo(\n () => ({\n isPending,\n isDisabled,\n color,\n size,\n }),\n [isPending, isDisabled, color, size]\n );\n\n return (\n <SplitButtonContext value={contextValue}>\n <Toolbar\n className={clsx(\n styles[\"split-button\"],\n splitButtonSizeConfig(size),\n className\n )}\n {...props}\n data-split-button\n >\n {children}\n </Toolbar>\n </SplitButtonContext>\n );\n};\n"],"mappings":";;;;;;;~~qDCQa~~,KAA2C,EACpD,WAAQ,UACR,UAAO,SAEP,cACA,eAEA,aACA,cAEA,~~GAAG~~,~~QAaC~~,~~kBAAC~~,~~GAAD;CAAoB~~,~~OAXH,~~SACV;EACH;EACA;EACA;EACA;CACJ,IACA;~~EAAC~~;~~EAAW~~;~~EAAY~~;~~EAAO~~;CAAI,~~CAIR~~;~~WACvB~~,~~kBAAC~~,GAAD;~~EACI~~,~~WAAW~~,~~EACP~~,EAAO,~~iBACP~~,~~EAAsB~~,CAAI,~~GAC1B~~,CACJ;~~EACA~~,~~GAAI~~;~~EACJ~~,qBAAA;~~EAEC~~;~~CACI~~,CAAA;~~AACO~~,CAAA"}
1	+ {"version":3,"file":"SplitButton","names":["styles","splitButtonSizeConfig","splitButton_module_default","SplitButton","props","contextValue","useMemo","isPending","isDisabled","color","size","SplitButtonContext","Toolbar","clsx","className"],"sources":["../../src/components/Button/SplitButton/SplitButton/splitButton.module.css","../../src/components/Button/SplitButton/SplitButton/SplitButton.tsx"],"sourcesContent":["@layer adgytec.overrides {\n .split-button [data-visual-button] {\n --_md-button-shape-motion: var(--md-sys-motion-standard-fast-spatial);\n --_md-button-shape-motion-duration: var(\n --md-sys-motion-standard-fast-spatial-duration\n );\n }\n}\n\n@layer adgytec.comps {\n .split-button {\n display: inline-flex;\n gap: calc(2 * var(--dp, 1px));\n }\n}\n","import { clsx } from \"clsx\";\nimport { useMemo } from \"react\";\nimport { Toolbar } from \"react-aria-components\";\nimport { splitButtonSizeConfig } from \"../core\";\nimport { SplitButtonContext } from \"../SplitButtonContext\";\nimport styles from \"./splitButton.module.css\";\nimport type { SplitButtonProps } from \"./types\";\n\n/*\n A composite button container implementing Material Design 3 Split Buttons.\n \n Couples a primary action button ({@link SplitButtonPrimary}) with an adjacent dropdown menu trigger\n * ({@link SplitButtonTrigger}) inside an accessible React Aria `Toolbar`.\n * Synchronizes size, color variant, disabled, and pending states across both button parts via context.\n \n @example\n * ```tsx\n * <SplitButton color=\"tonal\">\n * <SplitButtonPrimary icon={Save} onPress={handleSave}>\n * Save\n * </SplitButtonPrimary>\n * <MenuTrigger>\n * <SplitButtonTrigger aria-label=\"More save options\" />\n * <MenuPopover>\n * <Menu>\n * <MenuItem label=\"Save as draft\" />\n * </Menu>\n * </MenuPopover>\n * </MenuTrigger>\n * </SplitButton>\n * ```\n */\nexport const SplitButton: React.FC<SplitButtonProps> = ({\n color = \"filled\",\n size = \"small\",\n\n isPending,\n isDisabled,\n\n children,\n className,\n\n ...props\n}) => {\n const contextValue = useMemo(\n () => ({\n isPending,\n isDisabled,\n color,\n size,\n }),\n [isPending, isDisabled, color, size]\n );\n\n return (\n <SplitButtonContext value={contextValue}>\n <Toolbar\n className={clsx(\n styles[\"split-button\"],\n splitButtonSizeConfig(size),\n className\n )}\n {...props}\n data-split-button\n >\n {children}\n </Toolbar>\n </SplitButtonContext>\n );\n};\n"],"mappings":";;;;;;;qDCgCaG,KAA2C,EACpD,WAAQ,UACR,UAAO,SAEP,cACA,eAEA,aACA,cAEA,GAAGC,QACD;CACF,IAAMC,IAAeC,SACV;EACH;EACA;EACA;EACA;CACJ,IACA;EAACC;EAAWC;EAAYC;EAAOC;CAAI,CACvC;CAEA,OACI,kBAACC,GAAD;EAAoB,OAAON;EACvB,UAAA,kBAACO,GAAD;GACI,WAAWC,EACPb,EAAO,iBACPC,EAAsBS,CAAI,GAC1BI,CACJ;GACA,GAAIV;GACJ,qBAAA;GAEC;EACI,CAAA;CACO,CAAA;AAE5B"}

package/dist/chunks/SplitButtonTrigger CHANGED Viewed

@@ -11,19 +11,20 @@ import { Button as _ } from "react-aria-components";
 import { ChevronDown as v } from "lucide-react";
 import '../assets/SplitButtonTrigger.css';//#region src/components/Button/SplitButton/SplitButtonTrigger/splitButtonTrigger.module.css
 var y = e(), b = { trigger: "_trigger_5plck_2" }, x = (e) => {
-	let x = (0, y.c)(23), S, C, w, T, E, D;
+	let x = (0, y.c)(24), S, C, w, T, E, D;
 	x[0] === e ? (S = x[1], C = x[2], w = x[3], T = x[4], E = x[5], D = x[6]) : ({tooltip: D, onPress: T, isDisabled: C, isPending: w, className: S, ...E} = e, x[0] = e, x[1] = S, x[2] = C, x[3] = w, x[4] = T, x[5] = E, x[6] = D);
 	let O = p(), { splashInfo: k, handlePress: A } = i(T), j = w || O.isPending, M = C || O.isDisabled, N;
 	x[7] !== S || x[8] !== O.color ? (N = (e) => m(o, t, d, l(O.color), typeof S == "function" ? S(e) : S), x[7] = S, x[8] = O.color, x[9] = N) : N = x[9];
 	let P;
-	x[10] !== k || x[11] !== O.size ? (P = (e) => {
+	x[10] !== j || x[11] !== k || x[12] !== O.size ? (P = (e) => {
 		let { isDisabled: t, isFocusVisible: i, isFocused: o, isPressed: c, isHovered: l } = e, d = {
 			"data-hovered": l || void 0,
 			"data-disabled": t || void 0,
 			"data-focused": o || void 0,
 			"data-focus-visible": i || void 0,
 			"data-pressed": c || void 0,
-			"data-visual-button": !0
+			"data-visual-button": !0,
+			"data-pending": j || void 0
 		};
 		return /* @__PURE__ */ g("span", {
 			className: m(a, s, b.trigger, u),
@@ -33,9 +34,9 @@ var y = e(), b = { trigger: "_trigger_5plck_2" }, x = (e) => {
 				size: f[O.size]
 			})]
 		});
-	}, x[10] = k, x[11] = O.size, x[12] = P) : P = x[12];
+	}, x[10] = j, x[11] = k, x[12] = O.size, x[13] = P) : P = x[13];
 	let F;
-	x[13] !== M || x[14] !== A || x[15] !== j || x[16] !== E || x[17] !== N || x[18] !== P ? (F = /* @__PURE__ */ h(_, {
+	x[14] !== M || x[15] !== A || x[16] !== j || x[17] !== E || x[18] !== N || x[19] !== P ? (F = /* @__PURE__ */ h(_, {
 		onPress: A,
 		isDisabled: M,
 		isPending: j,
@@ -44,9 +45,9 @@ var y = e(), b = { trigger: "_trigger_5plck_2" }, x = (e) => {
 		"data-button": !0,
 		"data-split-button-trigger": !0,
 		children: P
-	}), x[13] = M, x[14] = A, x[15] = j, x[16] = E, x[17] = N, x[18] = P, x[19] = F) : F = x[19];
+	}), x[14] = M, x[15] = A, x[16] = j, x[17] = E, x[18] = N, x[19] = P, x[20] = F) : F = x[20];
 	let I;
-	return x[20] !== F || x[21] !== D ? (I = c(F, D), x[20] = F, x[21] = D, x[22] = I) : I = x[22], I;
+	return x[21] !== F || x[22] !== D ? (I = c(F, D), x[21] = F, x[22] = D, x[23] = I) : I = x[23], I;
 };
 //#endregion
 export { x as t };

package/dist/chunks/SplitButtonTrigger.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButtonTrigger","names":["ChevronDown","handlePress","disabled","pending"],"sources":["../../src/components/Button/SplitButton/SplitButtonTrigger/splitButtonTrigger.module.css","../../src/components/Button/SplitButton/SplitButtonTrigger/SplitButtonTrigger.tsx"],"sourcesContent":["@layer adgytec.comps {\n .trigger {\n --rotate: 0;\n\n &[data-pressed] {\n --rotate: 180deg;\n }\n\n > svg {\n rotate: var(--rotate);\n transition: rotate 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 }\n}\n","import { clsx } from \"clsx\";\nimport { ChevronDown } from \"lucide-react\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport {\n ButtonCore,\n ButtonReset,\n buttonColorBase,\n buttonColorConfig,\n withTooltip,\n} from \"../../core\";\nimport {\n SplitButtonTriggerBase,\n SplitButtonTriggerIconSize,\n SplitButtonVariantBase,\n} from \"../core\";\nimport { useSplitButtonContext } from \"../SplitButtonContext\";\nimport styles from \"./splitButtonTrigger.module.css\";\nimport type { SplitButtonTriggerProps } from \"./types\";\n\nexport const SplitButtonTrigger: React.FC<SplitButtonTriggerProps> = ({\n tooltip,\n onPress,\n isDisabled,\n isPending,\n className,\n ...props\n}) => {\n const splitButtonState = useSplitButtonContext();\n\n const { splashInfo, handlePress } = useSplash(onPress);\n\n const pending = isPending \|\| splitButtonState.isPending;\n const disabled = isDisabled \|\| splitButtonState.isDisabled;\n\n return withTooltip(\n <AriaButton\n onPress={handlePress}\n isDisabled={disabled}\n isPending={pending}\n className={(renderProps) =>\n clsx(\n ButtonReset,\n TapTarget,\n SplitButtonTriggerBase,\n buttonColorConfig(splitButtonState.color),\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-button\n data-split-button-trigger\n >\n {({\n isDisabled,\n isFocusVisible,\n isFocused,\n isPressed,\n isHovered,\n }) => {\n const dataAttrs = {\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-visual-button\": true,\n };\n\n return (\n <span\n className={clsx(\n ButtonCore,\n buttonColorBase,\n styles[\"trigger\"],\n SplitButtonVariantBase\n )}\n {...dataAttrs}\n >\n {splashInfo && <Splash {...splashInfo} />}\n <Icon\n icon={ChevronDown}\n size={\n SplitButtonTriggerIconSize[\n splitButtonState.size\n ]\n }\n />\n </span>\n );\n }}\n </AriaButton>,\n tooltip\n );\n};\n"],"mappings":";;;;;;;;;;;;~~kDCuBa~~,KAAwD,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,EAAA,~~GAAA~~,~~GAAA~~,~~GAAA~~,~~GAAA~~,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,KAOpE,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,OAPqE,~~uEAAA~~,~~KAAA~~,GAOrE,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CACG,~~IAAA~~,~~IAAyB~~,EAAsB,GAE/C,EAAA,eAAA,~~mBAAoC~~,~~EAAU~~,CAAO,~~GAErD~~,~~IAAgB~~,~~KAAa~~,EAAgB,~~WAC7C~~,~~IAAiB~~,~~KAAc~~,EAAgB,~~YAAY~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,EAAA,SAOxC,KAAA,~~MACP~~,~~EACI~~,~~GACA~~,~~GACA~~,~~GACA~~,~~EAAkB~~,EAAgB,KAAM,GACxC,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CACF,~~IAFd~~,CAGJ,GAAC,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,EAAA,OAAA,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,EAAA,QAMJ,KAAA,MAAA;EAAC,IAAA,EAAA,~~YAAA~~,GAAA,mBAAA,cAAA,cAAA,~~iBAAA~~,~~GAOE~~,IAAkB;GAAA,~~gBACE~~,KAAA,KAAA;GAAsB,~~iBACrB~~,KAAA,KAAA;GAAuB,~~gBACxB~~,KAAA,KAAA;GAAsB,~~sBAChB~~,KAAA,KAAA;GAA2B,~~gBACjC~~,KAAA,KAAA;GAAsB,sBAChB;~~EAC1B~~;EAAE,OAGE,kBAAA,QAAA;GACe,~~WAAA~~,~~EACP~~,~~GACA~~,~~GACA~~,EAAM,~~SACN~~,CACJ;GAAC,~~GACG~~;~~aAPR~~,~~CASK~~,KAAc,~~kBAAC~~,GAAD,EAAO,~~GAAK~~,EAAU,CAAA,GACrC,kBAAC,GAAD;~~IACUA~~,MAAA;IAEF,~~MAAA~~,~~EACI~~,EAAgB;GACnB,CAAA,CAGN;;CAAA,GAEd,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,EAAA,~~MAAA~~,EAAA,MAAA,KAAA,~~IAAA~~,EAAA;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAxDL~~,IAAA,~~kBAAC~~,GAAD;~~EACaC~~,SAAA;~~EACGC~~,YAAA;~~EACDC~~,~~WAAA~~;EACA,~~WAAA~~;EASN,~~GAED~~;EACJ,eAAA;EACA,6BAAA;~~YAEC~~;CAnBM,CAAA,~~GAyDE~~,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,KAAA,~~IAAA~~,EAAA;CAAA,~~IAAA~~;CAEhB,~~OAFgB~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KA1DV~~,~~IAAA~~,~~EACH~~,~~GA0DA~~,CACJ,GAAC,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,KAAA,~~IAAA~~,EAAA,~~KA5DM~~;~~AA4DN~~"}
1	+ {"version":3,"file":"SplitButtonTrigger","names":["ChevronDown","handlePress","disabled","pending","_c","styles","AriaButton","require_compiler_runtime","Icon","Splash","useSplash","ButtonCore","ButtonReset","buttonColorBase","withTooltip","buttonColorConfig","SplitButtonVariantBase","SplitButtonTriggerBase","SplitButtonTriggerIconSize","import_compiler_runtime","splitButtonTrigger_module_default","SplitButtonTrigger","$","className","isDisabled","isPending","onPress","props","tooltip","t0","splitButtonState","useSplitButtonContext","pending","disabled","t1","clsx","TapTarget","renderProps","t2","splashInfo","isDisabled_0","t3","dataAttrs","isHovered","isFocused","isFocusVisible","isPressed","ChevronDown","handlePress","Button","t4"],"sources":["../../src/components/Button/SplitButton/SplitButtonTrigger/splitButtonTrigger.module.css","../../src/components/Button/SplitButton/SplitButtonTrigger/SplitButtonTrigger.tsx"],"sourcesContent":["@layer adgytec.comps {\n .trigger {\n --rotate: 0;\n\n &[data-pressed] {\n --rotate: 180deg;\n }\n\n > svg {\n rotate: var(--rotate);\n transition: rotate 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 }\n}\n","import { clsx } from \"clsx\";\nimport { ChevronDown } from \"lucide-react\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport {\n ButtonCore,\n ButtonReset,\n buttonColorBase,\n buttonColorConfig,\n withTooltip,\n} from \"../../core\";\nimport {\n SplitButtonTriggerBase,\n SplitButtonTriggerIconSize,\n SplitButtonVariantBase,\n} from \"../core\";\nimport { useSplitButtonContext } from \"../SplitButtonContext\";\nimport styles from \"./splitButtonTrigger.module.css\";\nimport type { SplitButtonTriggerProps } from \"./types\";\n\n/*\n The dropdown menu trigger button within a {@link SplitButton}.\n \n Renders a chevron icon indicating that more actions are available in an adjacent menu.\n * Inherits visual styling (size and color) and states (disabled, pending) from the parent `SplitButtonContext`.\n * Typically wrapped inside a `MenuTrigger` component alongside a `MenuPopover`.\n \n @example\n * ```tsx\n * <MenuTrigger>\n * <SplitButtonTrigger aria-label=\"More options\" />\n * <MenuPopover>\n * <Menu>\n * <MenuItem label=\"Export\" />\n * </Menu>\n * </MenuPopover>\n * </MenuTrigger>\n * ```\n */\nexport const SplitButtonTrigger: React.FC<SplitButtonTriggerProps> = ({\n tooltip,\n onPress,\n isDisabled,\n isPending,\n className,\n ...props\n}) => {\n const splitButtonState = useSplitButtonContext();\n\n const { splashInfo, handlePress } = useSplash(onPress);\n\n const pending = isPending \|\| splitButtonState.isPending;\n const disabled = isDisabled \|\| splitButtonState.isDisabled;\n\n return withTooltip(\n <AriaButton\n onPress={handlePress}\n isDisabled={disabled}\n isPending={pending}\n className={(renderProps) =>\n clsx(\n ButtonReset,\n TapTarget,\n SplitButtonTriggerBase,\n buttonColorConfig(splitButtonState.color),\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-button\n data-split-button-trigger\n >\n {({\n isDisabled,\n isFocusVisible,\n isFocused,\n isPressed,\n isHovered,\n }) => {\n const dataAttrs = {\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-visual-button\": true,\n \"data-pending\": pending \|\| undefined,\n };\n\n return (\n <span\n className={clsx(\n ButtonCore,\n buttonColorBase,\n styles[\"trigger\"],\n SplitButtonVariantBase\n )}\n {...dataAttrs}\n >\n {splashInfo && <Splash {...splashInfo} />}\n <Icon\n icon={ChevronDown}\n size={\n SplitButtonTriggerIconSize[\n splitButtonState.size\n ]\n }\n />\n </span>\n );\n }}\n </AriaButton>,\n tooltip\n );\n};\n"],"mappings":";;;;;;;;;;;;kDC0CaqB,KAAwD,MAAA;CAAA,IAAAC,KAAA,GAAAlB,EAAAA,EAAAA,CAAA,EAAA,GAAAmB,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC;CAAA,AAAAN,EAAA,OAAAO,KAOpE,IAAAP,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,OAPqE,oEAAA,GAAAK,KAAAE,GAOrE,EAAA,KAAAA,GAAA,EAAA,KAAAN,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC;CACG,IAAAE,IAAyBC,EAAsB,GAE/C,EAAA,eAAA,mBAAoCrB,EAAUgB,CAAO,GAErDM,IAAgBP,KAAaK,EAAgB,WAC7CG,IAAiBT,KAAcM,EAAgB,YAAYI;CAAA,AAAAZ,EAAA,OAAAC,KAAAD,EAAA,OAAAQ,EAAA,SAOxC,KAAA,MACPK,EACIvB,GACAwB,GACAnB,GACAF,EAAkBe,EAAgB,KAAM,GACxC,OAAOP,KAAc,aACfA,EAAUc,CACF,IAFdd,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAO,EAAA,OAAA,EAAA,KAAAI,KAAA,IAAAZ,EAAA;CAAA,IAAAgB;CAAA,AAAAhB,EAAA,QAAAU,KAAAV,EAAA,QAAAiB,KAAAjB,EAAA,QAAAQ,EAAA,QAMJ,KAAA,MAAA;EAAC,IAAA,EAAA,YAAAU,GAAA,mBAAA,cAAA,cAAA,iBAAAC,GAOEC,IAAkB;GAAA,gBACEC,KAAA,KAAA;GAAsB,iBACrBH,KAAA,KAAA;GAAuB,gBACxBI,KAAA,KAAA;GAAsB,sBAChBC,KAAA,KAAA;GAA2B,gBACjCC,KAAA,KAAA;GAAsB,sBAChB;GAAI,gBACVd,KAAA,KAAA;EACpB;EAAE,OAGE,kBAAA,QAAA;GACe,WAAAG,EACPxB,GACAE,GACAR,EAAM,SACNW,CACJ;GAAC,GACG0B;GAPR,UAAA,CASKH,KAAc,kBAAC9B,GAAD,EAAO,GAAK8B,EAAU,CAAA,GACrC,kBAAC/B,GAAD;IACUR,MAAA+C;IAEF,MAAA7B,EACIY,EAAgB;GACnB,CAAA,CAGN;;CAAA,GAEd,EAAA,MAAAE,GAAA,EAAA,MAAAO,GAAA,EAAA,MAAAT,EAAA,MAAA,EAAA,MAAAQ,KAAA,IAAAhB,EAAA;CAAA,IAAAmB;CAAA,AAAAnB,EAAA,QAAAW,KAAAX,EAAA,QAAA0B,KAAA1B,EAAA,QAAAU,KAAAV,EAAA,QAAAK,KAAAL,EAAA,QAAAY,KAAAZ,EAAA,QAAAgB,KAzDL,IAAA,kBAAChC,GAAD;EACaL,SAAA+C;EACG9C,YAAA+B;EACD9B,WAAA6B;EACA,WAAAE;EASN,GAEDP;EACJ,eAAA;EACA,6BAAA;EAEC,UAAAW;CAnBM,CAAA,GA0DE,EAAA,MAAAL,GAAA,EAAA,MAAAe,GAAA,EAAA,MAAAhB,GAAA,EAAA,MAAAL,GAAA,EAAA,MAAAO,GAAA,EAAA,MAAAI,GAAA,EAAA,MAAAG,KAAA,IAAAnB,EAAA;CAAA,IAAA4B;CAEhB,OAFgB5B,EAAA,QAAAmB,KAAAnB,EAAA,QAAAM,KA3DV,IAAAd,EACH2B,GA2DAb,CACJ,GAAC,EAAA,MAAAa,GAAA,EAAA,MAAAb,GAAA,EAAA,MAAAsB,KAAA,IAAA5B,EAAA,KA7DM4B;AA6DN"}

package/dist/chunks/SubmenuPopover.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubmenuPopover","names":[],"sources":["../../src/components/Menu/SubmenuPopover/submenuPopover.module.css","../../src/components/Menu/SubmenuPopover/SubmenuPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n display: grid;\n grid-template-rows: 1fr;\n }\n}\n","import clsx from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./submenuPopover.module.css\";\n\~~nexport~~ ~~const~~ SubmenuPopover: ~~React.FC<\~~n React.ComponentPropsWithRef<typeof Popover>\n> = ({ offset = -1, className, ...props }) => {\n return (\n <Popover\n offset={offset}\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":";;;~~yCCIa~~,~~KAER~~,~~EAAE~~,YAAS,~~IAAI~~,~~cAAW~~,~~GAAG~~,~~QAE1B~~,~~kBAAC~~,GAAD;CACY;CACR,YAAY,~~MACR~~,~~EACI~~,~~EAAO~~,SACP,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CAAW,~~IACrB~~,CACV;CAEJ,~~GAAI~~;AAAM,CAAA"}
1	+ {"version":3,"file":"SubmenuPopover","names":["clsx","styles","Popover","clsx$1","submenuPopover_module_default","SubmenuPopover","props","\"popover\"","className","renderProps"],"sources":["../../src/components/Menu/SubmenuPopover/submenuPopover.module.css","../../src/components/Menu/SubmenuPopover/SubmenuPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n display: grid;\n grid-template-rows: 1fr;\n }\n}\n","import clsx from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./submenuPopover.module.css\";\n\n/*\n Props for the [`SubmenuPopover`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Menu/SubmenuPopover/SubmenuPopover.tsx) component.\n /\nexport interface SubmenuPopoverProps\n extends React.ComponentPropsWithRef<typeof Popover> {}\n\n/\n Specialized popover container for nested cascading submenus.\n \n Defaults to an `offset` of `-1` px so the submenu slightly overlaps the parent\n * menu edge according to Material Design 3 menu specifications.\n \n @example\n * ```tsx\n * <SubmenuPopover>\n * <Menu>\n * <MenuItem label=\"Sub-item 1\" />\n * <MenuItem label=\"Sub-item 2\" />\n * </Menu>\n * </SubmenuPopover>\n * ```\n */\nexport const SubmenuPopover: React.FC<SubmenuPopoverProps> = ({\n offset = -1,\n className,\n ...props\n}) => {\n return (\n <Popover\n offset={offset}\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":";;;yCC0BaK,KAAiD,EAC1D,YAAS,IACT,cACA,GAAGC,QAGC,kBAACJ,GAAD;CACY;CACR,YAAY,MACRF,EACIC,EAAOM,SACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAIF;AAAM,CAAA"}

package/dist/chunks/Switch.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch","names":["renderProps"],"sources":["../../src/components/Input/Switch/switch.module.css","../../src/components/Input/Switch/Switch.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-switch-handle-color\n* --md-switch-selected-handle-color\n\n --md-switch-handle-interaction-color\n* --md-switch-selected-handle-interaction-color\n\n --md-switch-handle-icon-color\n* --md-switch-selected-handle-icon-color\n\n --md-switch-track-color\n* --md-switch-selected-track-color\n* --md-switch-track-outline-color\n\n --md-switch-state-layer-color\n* --md-switch-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .switch {\n / switch tokens /\n / handle tokens /\n --_md-switch-handle-color: var(\n --md-switch-handle-color,\n var(--md-sys-color-outline)\n );\n --_md-switch-selected-handle-color: var(\n --md-switch-selected-handle-color,\n var(--md-sys-color-on-primary)\n );\n\n / for hovered, focused and pressed state /\n --_md-switch-handle-interaction-color: var(\n --md-switch-handle-interaction-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-switch-selected-handle-interaction-color: var(\n --md-switch-selected-handle-interaction-color,\n var(--md-sys-color-primary-container)\n );\n\n / handle icon tokens /\n --_md-switch-handle-icon-color: var(\n --md-switch-handle-icon-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-handle-icon-color: var(\n --md-switch-selected-handle-icon-color,\n var(--md-sys-color-primary)\n );\n\n / track tokens /\n --_md-switch-track-color: var(\n --md-switch-track-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-track-color: var(\n --md-switch-selected-track-color,\n var(--md-sys-color-primary)\n );\n --_md-switch-track-outline-color: var(\n --md-switch-track-outline-color,\n var(--md-sys-color-outline)\n );\n\n / state layer tokens /\n --_md-switch-state-layer-color: var(\n --md-switch-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-switch-selected-state-layer-color: var(\n --md-switch-selected-state-layer-color,\n var(--_md-switch-selected-track-color)\n );\n\n / configurable tokens end /\n\n / handle specific tokens /\n / size /\n --_md-switch-handle-size: calc(16 var(--dp, 1px));\n --_md-switch-handle-with-icon-size: calc(24 * var(--dp, 1px));\n --_md-switch-selected-handle-size: calc(24 * var(--dp, 1px));\n --_md-switch-pressed-handle-size: calc(28 * var(--dp, 1px));\n\n /* shape /\n --_md-switch-handle-shape: var(--md-sys-shape-corner-radius-full);\n\n / handle tokens end /\n\n / track tokens /\n / dimensions and shape /\n --_md-switch-track-block-size: calc(32 var(--dp, 1px));\n --_md-switch-track-inline-size: calc(52 * var(--dp, 1px));\n --_md-switch-track-shape: var(--md-sys-shape-corner-radius-full);\n\n /* outline /\n --_md-switch-track-outline-thickness: calc(2 var(--dp, 1px));\n\n /* track tokens end /\n\n / state layer tokens /\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-switch-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 / state layer tokens end /\n\n position: relative;\n display: inline-flex;\n\n align-items: center;\n justify-content: space-between;\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 color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-switch-selected-state-layer-color);\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 &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\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 .icon {\n color: var(--_icon-color);\n }\n\n .handle {\n /* derived size /\n --_handle-size: var(--_md-switch-handle-size);\n --_handle-color: var(--_md-switch-handle-color);\n --_handle-x: calc(6 var(--dp, 1px));\n\n --_icon-color: var(--_md-switch-handle-icon-color);\n\n /* handle style /\n position: absolute;\n inset-block-start: 50%;\n translate: var(--_handle-x) -50%;\n\n inline-size: var(--_handle-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_md-switch-handle-shape);\n\n background-color: var(--_handle-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition:\n translate var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n inline-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n block-size 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-icon] {\n --_handle-size: var(--_md-switch-handle-with-icon-size);\n --_handle-x: calc(2 var(--dp, 1px));\n }\n\n &[data-selected] {\n --_handle-color: var(--_md-switch-selected-handle-color);\n --_handle-size: var(--_md-switch-selected-handle-size);\n --_handle-x: calc(22 * var(--dp, 1px));\n --_icon-color: var(--_md-switch-selected-handle-icon-color);\n }\n\n &[data-pressed] {\n --_handle-size: var(--_md-switch-pressed-handle-size);\n --_handle-x: 0;\n\n &[data-selected] {\n --_handle-x: calc(20 * var(--dp, 1px));\n }\n }\n\n &[data-focus-visible],\n &[data-hovered],\n &[data-pressed] {\n --_handle-color: var(--_md-switch-handle-interaction-color);\n\n &[data-selected] {\n --_handle-color: var(\n --_md-switch-selected-handle-interaction-color\n );\n }\n }\n\n &[data-disabled] {\n --_icon-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-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 --_icon-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-surface) r g b /\n 1\n );\n }\n }\n }\n\n /* handle state layer /\n .handle[data-show-state-layer]::before {\n --_state-size: calc(40 var(--dp, 1px));\n --_state-shape: var(--md-sys-shape-corner-radius-full);\n\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(--_state-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_state-shape);\n\n background-color: var(--_state-layer-color);\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 .track {\n --_track-color: var(--_md-switch-track-color);\n --_track-outline-color: var(--_md-switch-track-outline-color);\n\n position: relative;\n border-radius: var(--_md-switch-track-shape);\n\n inline-size: var(--_md-switch-track-inline-size);\n min-inline-size: var(--_md-switch-track-inline-size);\n\n block-size: var(--_md-switch-track-block-size);\n min-block-size: var(--_md-switch-track-block-size);\n\n border-width: var(--_md-switch-track-outline-thickness);\n border-style: solid;\n border-color: var(--_track-outline-color);\n\n background-color: var(--_track-color);\n\n transition:\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n border-color 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 .track[data-disabled] {\n --_track-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_track-outline-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-selected] {\n --_track-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 .track[data-selected] {\n --_track-color: var(--_md-switch-selected-track-color);\n --_track-outline-color: transparent;\n }\n\n .track[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 { Check, type LucideIcon, X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Switch as AriaSwitch } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport styles from \"./switch.module.css\";\nimport type { SwitchProps } from \"./types\";\n\nexport const Switch: React.FC<SwitchProps> = ({\n className,\n children,\n icon = \"selected\",\n labelPlacement = \"start\",\n containerStateLayer = false,\n unselectedIcon = X,\n selectedIcon = Check,\n ...props\n}) => {\n return (\n <AriaSwitch\n className={(renderProps) =>\n clsx(\n styles[\"switch\"],\n containerStateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-switch\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isReadOnly,\n } = renderProps;\n\n let iconValue: LucideIcon \| undefined;\n if (icon !== \"none\" && isSelected) {\n iconValue = selectedIcon;\n }\n\n if (icon === \"both\" && !isSelected) {\n iconValue = unselectedIcon;\n }\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-readonly\": isReadOnly \|\| undefined,\n \"data-icon\": iconValue ? true : undefined,\n \"data-show-state-layer\": !containerStateLayer \|\| undefined,\n };\n\n let iconElement: ReactNode;\n if (iconValue) {\n iconElement = (\n <Icon\n icon={iconValue}\n size={16}\n className={clsx(styles[\"icon\"])}\n {...dataAttrs}\n />\n );\n }\n\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n\n return (\n <>\n {labelPlacement === \"start\" && label}\n\n <span\n {...dataAttrs}\n className={clsx(styles[\"track\"], TapTarget)}\n >\n <span\n {...dataAttrs}\n className={clsx(styles[\"handle\"])}\n >\n {iconElement}\n </span>\n </span>\n\n {labelPlacement === \"end\" && label}\n </>\n );\n }}\n </AriaSwitch>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCUa,KAAiC,EAC1C,cACA,aACA,UAAO,YACP,oBAAiB,SACjB,yBAAsB,IACtB,oBAAiB,GACjB,kBAAe,GACf,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,QACP,KAAuB,EAAO,gBAC9B,EAAW,YACX,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;CACJ,eAAA;YAEEA,MAAgB;EACd,IAAM,EACF,eACA,cACA,eACA,cACA,mBACA,cACA,kBACAA,GAEA;EAKJ,AAJI,MAAS,UAAU,MACnB,IAAY,IAGZ,MAAS,UAAU,CAAC,MACpB,IAAY;EAGhB,IAAM,IAAY;GACd,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,sBAAsB,KAAkB,KAAA;GACxC,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,aAAa,IAAY,KAAO,KAAA;GAChC,yBAAyB,CAAC,KAAuB,KAAA;EACrD,GAEI;EACJ,AAAI,MACA,IACI,kBAAC,GAAD;GACI,MAAM;GACN,MAAM;GACN,WAAW,EAAK,EAAO,IAAO;GAC9B,GAAI;EAAU,CAAA;EAK1B,IAAM,IACF,OAAO,KAAa,aACd,EAASA,CAAW,IACpB;EAEV,OACI,kBAAA,GAAA,EAAA,UAAA;GACK,MAAmB,WAAW;GAE/B,kBAAC,QAAD;IACI,GAAI;IACJ,WAAW,EAAK,EAAO,OAAU,CAAS;cAE1C,kBAAC,QAAD;KACI,GAAI;KACJ,WAAW,EAAK,EAAO,MAAS;eAE/B;IACC,CAAA;GACJ,CAAA;GAEL,MAAmB,SAAS;EACjC,EAAA,CAAA;CAER;AACQ,CAAA"}
1	+ {"version":3,"file":"Switch","names":["renderProps","Switch","AriaSwitch","clsx","styles","_Fragment","TapTarget","Icon","clsx$1","switch_module_default","\"switch\"","Switch$1","X","Check","props","Switch","containerStateLayer","typography","className","renderProps","renderProps_0","iconValue","icon","isSelected","selectedIcon","unselectedIcon","dataAttrs","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","isReadOnly","iconElement","\"icon\"","label","children","Fragment","labelPlacement","\"track\"","\"handle\""],"sources":["../../src/components/Input/Switch/switch.module.css","../../src/components/Input/Switch/Switch.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-switch-handle-color\n* --md-switch-selected-handle-color\n\n --md-switch-handle-interaction-color\n* --md-switch-selected-handle-interaction-color\n\n --md-switch-handle-icon-color\n* --md-switch-selected-handle-icon-color\n\n --md-switch-track-color\n* --md-switch-selected-track-color\n* --md-switch-track-outline-color\n\n --md-switch-state-layer-color\n* --md-switch-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .switch {\n / switch tokens /\n / handle tokens /\n --_md-switch-handle-color: var(\n --md-switch-handle-color,\n var(--md-sys-color-outline)\n );\n --_md-switch-selected-handle-color: var(\n --md-switch-selected-handle-color,\n var(--md-sys-color-on-primary)\n );\n\n / for hovered, focused and pressed state /\n --_md-switch-handle-interaction-color: var(\n --md-switch-handle-interaction-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-switch-selected-handle-interaction-color: var(\n --md-switch-selected-handle-interaction-color,\n var(--md-sys-color-primary-container)\n );\n\n / handle icon tokens /\n --_md-switch-handle-icon-color: var(\n --md-switch-handle-icon-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-handle-icon-color: var(\n --md-switch-selected-handle-icon-color,\n var(--md-sys-color-primary)\n );\n\n / track tokens /\n --_md-switch-track-color: var(\n --md-switch-track-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-track-color: var(\n --md-switch-selected-track-color,\n var(--md-sys-color-primary)\n );\n --_md-switch-track-outline-color: var(\n --md-switch-track-outline-color,\n var(--md-sys-color-outline)\n );\n\n / state layer tokens /\n --_md-switch-state-layer-color: var(\n --md-switch-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-switch-selected-state-layer-color: var(\n --md-switch-selected-state-layer-color,\n var(--_md-switch-selected-track-color)\n );\n\n / configurable tokens end /\n\n / handle specific tokens /\n / size /\n --_md-switch-handle-size: calc(16 var(--dp, 1px));\n --_md-switch-handle-with-icon-size: calc(24 * var(--dp, 1px));\n --_md-switch-selected-handle-size: calc(24 * var(--dp, 1px));\n --_md-switch-pressed-handle-size: calc(28 * var(--dp, 1px));\n\n /* shape /\n --_md-switch-handle-shape: var(--md-sys-shape-corner-radius-full);\n\n / handle tokens end /\n\n / track tokens /\n / dimensions and shape /\n --_md-switch-track-block-size: calc(32 var(--dp, 1px));\n --_md-switch-track-inline-size: calc(52 * var(--dp, 1px));\n --_md-switch-track-shape: var(--md-sys-shape-corner-radius-full);\n\n /* outline /\n --_md-switch-track-outline-thickness: calc(2 var(--dp, 1px));\n\n /* track tokens end /\n\n / state layer tokens /\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-switch-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 / state layer tokens end /\n\n position: relative;\n display: inline-flex;\n\n align-items: center;\n justify-content: space-between;\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 color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-switch-selected-state-layer-color);\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 &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\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 .icon {\n color: var(--_icon-color);\n }\n\n .handle {\n /* derived size /\n --_handle-size: var(--_md-switch-handle-size);\n --_handle-color: var(--_md-switch-handle-color);\n --_handle-x: calc(6 var(--dp, 1px));\n\n --_icon-color: var(--_md-switch-handle-icon-color);\n\n /* handle style /\n position: absolute;\n inset-block-start: 50%;\n translate: var(--_handle-x) -50%;\n\n inline-size: var(--_handle-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_md-switch-handle-shape);\n\n background-color: var(--_handle-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition:\n translate var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n inline-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n block-size 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-icon] {\n --_handle-size: var(--_md-switch-handle-with-icon-size);\n --_handle-x: calc(2 var(--dp, 1px));\n }\n\n &[data-selected] {\n --_handle-color: var(--_md-switch-selected-handle-color);\n --_handle-size: var(--_md-switch-selected-handle-size);\n --_handle-x: calc(22 * var(--dp, 1px));\n --_icon-color: var(--_md-switch-selected-handle-icon-color);\n }\n\n &[data-pressed] {\n --_handle-size: var(--_md-switch-pressed-handle-size);\n --_handle-x: 0;\n\n &[data-selected] {\n --_handle-x: calc(20 * var(--dp, 1px));\n }\n }\n\n &[data-focus-visible],\n &[data-hovered],\n &[data-pressed] {\n --_handle-color: var(--_md-switch-handle-interaction-color);\n\n &[data-selected] {\n --_handle-color: var(\n --_md-switch-selected-handle-interaction-color\n );\n }\n }\n\n &[data-disabled] {\n --_icon-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-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 --_icon-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-surface) r g b /\n 1\n );\n }\n }\n }\n\n /* handle state layer /\n .handle[data-show-state-layer]::before {\n --_state-size: calc(40 var(--dp, 1px));\n --_state-shape: var(--md-sys-shape-corner-radius-full);\n\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(--_state-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_state-shape);\n\n background-color: var(--_state-layer-color);\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 .track {\n --_track-color: var(--_md-switch-track-color);\n --_track-outline-color: var(--_md-switch-track-outline-color);\n\n position: relative;\n border-radius: var(--_md-switch-track-shape);\n\n inline-size: var(--_md-switch-track-inline-size);\n min-inline-size: var(--_md-switch-track-inline-size);\n\n block-size: var(--_md-switch-track-block-size);\n min-block-size: var(--_md-switch-track-block-size);\n\n border-width: var(--_md-switch-track-outline-thickness);\n border-style: solid;\n border-color: var(--_track-outline-color);\n\n background-color: var(--_track-color);\n\n transition:\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n border-color 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 .track[data-disabled] {\n --_track-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_track-outline-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-selected] {\n --_track-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 .track[data-selected] {\n --_track-color: var(--_md-switch-selected-track-color);\n --_track-outline-color: transparent;\n }\n\n .track[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 { Check, type LucideIcon, X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Switch as AriaSwitch } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport styles from \"./switch.module.css\";\nimport type { SwitchProps } from \"./types\";\n\n/*\n A toggle switch control implementing Material Design 3 Switch specifications.\n \n Toggles a binary on/off setting with animated sliding thumb indicator, support for optional\n * handle icons (such as checkmark and cross), and configurable label placement.\n \n @example\n * ```tsx\n * import { Switch } from '@adgytec/web-ui-components';\n \n <Switch isSelected={airplaneMode} onChange={setAirplaneMode}>\n * Airplane Mode\n * </Switch>\n * ```\n */\nexport const Switch: React.FC<SwitchProps> = ({\n className,\n children,\n icon = \"selected\",\n labelPlacement = \"start\",\n containerStateLayer = false,\n unselectedIcon = X,\n selectedIcon = Check,\n ...props\n}) => {\n return (\n <AriaSwitch\n className={(renderProps) =>\n clsx(\n styles[\"switch\"],\n containerStateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-switch\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isReadOnly,\n } = renderProps;\n\n let iconValue: LucideIcon \| undefined;\n if (icon !== \"none\" && isSelected) {\n iconValue = selectedIcon;\n }\n\n if (icon === \"both\" && !isSelected) {\n iconValue = unselectedIcon;\n }\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-readonly\": isReadOnly \|\| undefined,\n \"data-icon\": iconValue ? true : undefined,\n \"data-show-state-layer\": !containerStateLayer \|\| undefined,\n };\n\n let iconElement: ReactNode;\n if (iconValue) {\n iconElement = (\n <Icon\n icon={iconValue}\n size={16}\n className={clsx(styles[\"icon\"])}\n {...dataAttrs}\n />\n );\n }\n\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n\n return (\n <>\n {labelPlacement === \"start\" && label}\n\n <span\n {...dataAttrs}\n className={clsx(styles[\"track\"], TapTarget)}\n >\n <span\n {...dataAttrs}\n className={clsx(styles[\"handle\"])}\n >\n {iconElement}\n </span>\n </span>\n\n {labelPlacement === \"end\" && label}\n </>\n );\n }}\n </AriaSwitch>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCyBaC,KAAiC,EAC1C,cACA,aACA,UAAO,YACP,oBAAiB,SACjB,yBAAsB,IACtB,oBAAiBW,GACjB,kBAAeC,GACf,GAAGC,QAGC,kBAACZ,GAAD;CACI,YAAY,MACRC,EACIC,EAAOM,QACPM,KAAuBZ,EAAO,gBAC9Ba,EAAW,YACX,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAIJ;CACJ,eAAA;CAEEd,WAAAA,MAAgB;EACd,IAAM,EACF,eACA,cACA,eACA,cACA,mBACA,cACA,kBACAA,GAEAqB;EAKJ,AAJIC,MAAS,UAAUC,MACnB,IAAYC,IAGZF,MAAS,UAAU,CAACC,MACpB,IAAYE;EAGhB,IAAMC,IAAY;GACd,iBAAiBH,KAAc,KAAA;GAC/B,gBAAgBI,KAAa,KAAA;GAC7B,iBAAiBC,KAAc,KAAA;GAC/B,gBAAgBC,KAAa,KAAA;GAC7B,sBAAsBC,KAAkB,KAAA;GACxC,gBAAgBC,KAAa,KAAA;GAC7B,iBAAiBC,KAAc,KAAA;GAC/B,aAAaX,IAAY,KAAO,KAAA;GAChC,yBAAyB,CAACL,KAAuB,KAAA;EACrD,GAEIiB;EACJ,AAAIZ,MACA,IACI,kBAACd,GAAD;GACI,MAAMc;GACN,MAAM;GACN,WAAWlB,EAAKC,EAAO8B,IAAO;GAC9B,GAAIR;EAAU,CAAA;EAK1B,IAAMS,IACF,OAAOC,KAAa,aACdA,EAASpC,CAAW,IACpBoC;EAEV,OACI,kBAAA/B,GAAA,EAAA,UAAA;GACKiC,MAAmB,WAAWH;GAE/B,kBAAC,QAAD;IACI,GAAIT;IACJ,WAAWvB,EAAKC,EAAOmC,OAAUjC,CAAS;IAE1C,UAAA,kBAAC,QAAD;KACI,GAAIoB;KACJ,WAAWvB,EAAKC,EAAOoC,MAAS;KAE/B,UAAAP;IACC,CAAA;GACJ,CAAA;GAELK,MAAmB,SAASH;EACjC,EAAA,CAAA;CAER;AACQ,CAAA"}

package/dist/chunks/Tab.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab","names":["icon","handlePress","label"],"sources":["../../src/components/Tabs/Tab/tab.module.css","../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tab {\n --_state-color: var(--md-sys-color-on-surface);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n --_color: var(--_md-tabs-color);\n\n --_focus-inset-inline-start: var(--md-sys-layout-space-4);\n --_focus-inset-inline-end: var(--md-sys-layout-space-4);\n --_focus-inset-block-start: var(--md-sys-layout-space-4);\n --_focus-inset-block-end: var(--md-sys-layout-space-4);\n\n position: relative;\n outline: none;\n\n padding-block: calc(14 * var(--dp, 1px));\n padding-inline: var(--md-sys-layout-space-16);\n\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-8);\n\n color: var(--_color);\n\n cursor: pointer;\n\n transition: color 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-icon] {\n padding-block: var(--md-sys-layout-space-12);\n }\n\n &[data-selected] {\n --_color: var(--_md-tabs-active-color);\n\n --_focus-inset-inline-end: var(--_focus-inset-inline-end-active);\n --_focus-inset-block-end: var(--_focus-inset-block-end-active);\n }\n\n &[data-hovered] {\n --_color: var(--_md-tabs-active-color);\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n\n &[data-disabled] {\n cursor: default;\n\n --_color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n --_md-tabs-active-indicator-color: var(--_color);\n }\n }\n\n /* state layer /\n .tab::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-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\n / focus indicator /\n .tab[data-focus-visible]::after {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n content: \"\";\n position: absolute;\n\n inset-inline-start: var(--_focus-inset-inline-start);\n inset-inline-end: var(--_focus-inset-inline-end);\n inset-block-start: var(--_focus-inset-block-start);\n inset-block-end: var(--_focus-inset-block-end);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-color: var(--focus-indicator-color);\n\n border-radius: var(--md-sys-shape-corner-radius-small);\n\n z-index: 1;\n }\n\n .selection-indicator {\n position: absolute;\n\n transition-timing-function: var(--md-sys-motion-standard-fast-spatial);\n transition-duration: var(\n --md-sys-motion-standard-fast-spatial-duration\n );\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .splash {\n position: absolute;\n inset: 0;\n overflow: clip;\n }\n}\n","import clsx from \"clsx\";\nimport type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Tab as AriaTab, SelectionIndicator } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { typography } from \"@/utils\";\nimport styles from \"./tab.module.css\";\n\~~nexport~~ ~~const~~ Tab: React~~.FC<\~~n Omit<React.ComponentPropsWithRef<typeof AriaTab>, \"children\"> & {\n label?: ReactNode;\n icon?: LucideIcon;\n }\n> = ({ ~~className~~, ~~label~~, icon, ~~onPress~~, ...props }) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <AriaTab\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n styles[\"tab\"],\n typography.titleSmall,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-icon={icon ? true : undefined}\n data-tab={true}\n >\n {splashInfo && (\n <span className={clsx(styles[\"splash\"])}>\n <Splash {...splashInfo} />\n </span>\n )}\n {icon && <Icon icon={icon} size={24} />}\n {label}\n <SelectionIndicator\n className={clsx(styles[\"selection-indicator\"])}\n data-selection-indicator={true}\n />\n </AriaTab>\n );\n};\n"],"mappings":";;;;;;;;;;;;~~GCUa~~,~~KAKT~~,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,EAAA,~~GAAA~~,~~GAAA~~,~~GAAA~~,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAA8C~~,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,~~OAA7C~~,~~iDAAA~~,~~KAAA~~,~~GAA6C~~,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;~~CAC9C~~,IAAA,EAAA,eAAA,~~mBAAoC~~,~~EAAU~~,CAAO,~~GAAE~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,IAY1C,~~IAAA~~,EAAA,MAPM,KAAA,~~MACP~~,~~EACI~~,EAAM,~~KACN~~,EAAU,YACV,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CACF,~~IAFd~~,CAGJ,GAAC,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAGM,~~IAAA~~,~~IAAA~~,IAAA,KAAA,KAAA,~~GAAuB~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,IAOjC,~~IAAA~~,EAAA,MAJA,~~IAAA~~,KACG,kBAAA,QAAA;EAAiB,~~WAAA~~,~~EAAK~~,EAAM,MAAU;~~YAClC~~,~~kBAAC~~,GAAD,EAAO,~~GAAK~~,EAAU,CAAA;CACnB,CAAA,GACV,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~QAAA~~,IACsC,~~IAAA~~,EAAA,OAAtC,~~IAAA~~,KAAQ,~~kBAAC~~,GAAD;EAAY;EAAY,MAAA;CAAE,CAAA,GAAI,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,QAAA,OAAA,IAAA,2BAAA,KAEvC,IAAA,~~kBAAC~~,GAAD;EACe,~~WAAA~~,~~EAAK~~,EAAO,sBAAsB;EACnB,4BAAA;CAAI,CAAA,GAChC,EAAA,~~MAAA~~,KAAA,~~IAAA~~,EAAA;CAAA,~~IAAA~~;CACI,~~OADJ~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,KAzBN,IAAA,~~kBAAC~~,GAAD;~~EACaC~~,~~SAAA~~;EACE,~~WAAA~~;EAON,~~GAED~~;EACO,~~aAAA~~;EACD,YAAA;~~YAbd~~;~~GAeK~~;~~GAKA~~;~~GACA~~;~~GACD~~;EAtBI;KA0BE,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,KAAA,~~IAAA~~,EAAA,~~KA1BV~~;AA0BU"}
1	+ {"version":3,"file":"Tab","names":["icon","handlePress","label","Tab","_c","clsx","styles","AriaTab","require_compiler_runtime","Icon","Splash","useSplash","clsx$1","import_compiler_runtime","tab_module_default","Tab$1","$","className","icon","label","onPress","props","t0","t1","typography","renderProps","t2","t3","splashInfo","t4","t5","SelectionIndicator","t6","handlePress","Tab"],"sources":["../../src/components/Tabs/Tab/tab.module.css","../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tab {\n --_state-color: var(--md-sys-color-on-surface);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n --_color: var(--_md-tabs-color);\n\n --_focus-inset-inline-start: var(--md-sys-layout-space-4);\n --_focus-inset-inline-end: var(--md-sys-layout-space-4);\n --_focus-inset-block-start: var(--md-sys-layout-space-4);\n --_focus-inset-block-end: var(--md-sys-layout-space-4);\n\n position: relative;\n outline: none;\n\n padding-block: calc(14 * var(--dp, 1px));\n padding-inline: var(--md-sys-layout-space-16);\n\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-8);\n\n color: var(--_color);\n\n cursor: pointer;\n\n transition: color 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-icon] {\n padding-block: var(--md-sys-layout-space-12);\n }\n\n &[data-selected] {\n --_color: var(--_md-tabs-active-color);\n\n --_focus-inset-inline-end: var(--_focus-inset-inline-end-active);\n --_focus-inset-block-end: var(--_focus-inset-block-end-active);\n }\n\n &[data-hovered] {\n --_color: var(--_md-tabs-active-color);\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n\n &[data-disabled] {\n cursor: default;\n\n --_color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n --_md-tabs-active-indicator-color: var(--_color);\n }\n }\n\n /* state layer /\n .tab::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-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\n / focus indicator /\n .tab[data-focus-visible]::after {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n content: \"\";\n position: absolute;\n\n inset-inline-start: var(--_focus-inset-inline-start);\n inset-inline-end: var(--_focus-inset-inline-end);\n inset-block-start: var(--_focus-inset-block-start);\n inset-block-end: var(--_focus-inset-block-end);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-color: var(--focus-indicator-color);\n\n border-radius: var(--md-sys-shape-corner-radius-small);\n\n z-index: 1;\n }\n\n .selection-indicator {\n position: absolute;\n\n transition-timing-function: var(--md-sys-motion-standard-fast-spatial);\n transition-duration: var(\n --md-sys-motion-standard-fast-spatial-duration\n );\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .splash {\n position: absolute;\n inset: 0;\n overflow: clip;\n }\n}\n","import clsx from \"clsx\";\nimport type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Tab as AriaTab, SelectionIndicator } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { typography } from \"@/utils\";\nimport styles from \"./tab.module.css\";\n\n/*\n Props for the {@link Tab} component.\n * Extends React Aria Components `Tab` props (omitting raw `children` in favor of `label` and `icon`).\n /\nexport interface TabProps\n extends Omit<React.ComponentPropsWithRef<typeof AriaTab>, \"children\"> {\n /\n Text label to display inside the tab.\n /\n label?: ReactNode;\n\n /\n Optional icon displayed alongside the tab label.\n /\n icon?: LucideIcon;\n}\n\n/\n An individual interactive tab button within a {@link TabList}, conforming to\n * [Material 3 Tabs](https://m3.material.io/components/tabs/overview).\n \n Extends React Aria Components `Tab` with Material 3 styling, supporting:\n * - A text `label` and an optional `icon` (rendered via {@link Icon}).\n * - Interactive ripple feedback via {@link Splash}.\n * - An animated {@link SelectionIndicator} that underlines or highlights the active tab.\n * - State layer feedback on hover, focus-visible, and pressed states.\n \n @example\n * ```tsx\n * import { Tab } from \"@adgytec/web-ui-components\";\n * import { Home } from \"lucide-react\";\n \n export function Example() {\n * return <Tab id=\"home\" label=\"Home\" icon={Home} />;\n * }\n * ```\n */\nexport const Tab: React.FC<TabProps> = ({\n className,\n label,\n icon,\n onPress,\n ...props\n}) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <AriaTab\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n styles[\"tab\"],\n typography.titleSmall,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-icon={icon ? true : undefined}\n data-tab={true}\n >\n {splashInfo && (\n <span className={clsx(styles[\"splash\"])}>\n <Splash {...splashInfo} />\n </span>\n )}\n {icon && <Icon icon={icon} size={24} />}\n {label}\n <SelectionIndicator\n className={clsx(styles[\"selection-indicator\"])}\n data-selection-indicator={true}\n />\n </AriaTab>\n );\n};\n"],"mappings":";;;;;;;;;;;;GC+CaG,KAA0B,MAAA;CAAA,IAAAa,KAAA,GAAAZ,EAAAA,EAAAA,CAAA,EAAA,GAAAa,GAAAC,GAAAC,GAAAC,GAAAC;CAAA,AAAAL,EAAA,OAAAM,KAMtC,IAAAN,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,OANuC,8CAAA,GAAAK,KAAAC,GAMvC,EAAA,KAAAA,GAAA,EAAA,KAAAL,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC;CACG,IAAA,EAAA,eAAA,mBAAoCV,EAAUS,CAAO,GAAEG;CAAA,AAAAP,EAAA,OAAAC,IAY1C,IAAAD,EAAA,MAPM,KAAA,MACPX,EACIC,EAAM,KACNkB,EAAU,YACV,OAAOP,KAAc,aACfA,EAAUQ,CACF,IAFdR,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAM;CAGM,IAAAG,IAAAR,IAAA,KAAA,KAAA,GAAuBS;CAAA,AAAAX,EAAA,OAAAY,IAOjC,IAAAZ,EAAA,MAJA,IAAAY,KACG,kBAAA,QAAA;EAAiB,WAAAvB,EAAKC,EAAM,MAAU;EAClC,UAAA,kBAACI,GAAD,EAAO,GAAKkB,EAAU,CAAA;CACnB,CAAA,GACV,EAAA,KAAAA,GAAA,EAAA,KAAAD;CAAA,IAAAE;CAAA,AAAAb,EAAA,QAAAE,IACsC,IAAAF,EAAA,OAAtC,IAAAE,KAAQ,kBAACT,GAAD;EAAY;EAAY,MAAA;CAAE,CAAA,GAAI,EAAA,MAAAS,GAAA,EAAA,MAAAW;CAAA,IAAAC;CAAA,AAAAd,EAAA,QAAA,OAAA,IAAA,2BAAA,KAEvC,IAAA,kBAACe,GAAD;EACe,WAAA1B,EAAKC,EAAO,sBAAsB;EACnB,4BAAA;CAAI,CAAA,GAChC,EAAA,MAAAwB,KAAA,IAAAd,EAAA;CAAA,IAAAgB;CACI,OADJhB,EAAA,QAAAiB,KAAAjB,EAAA,QAAAG,KAAAH,EAAA,QAAAK,KAAAL,EAAA,QAAAO,KAAAP,EAAA,QAAAU,KAAAV,EAAA,QAAAW,KAAAX,EAAA,QAAAa,KAzBN,IAAA,kBAACtB,GAAD;EACaN,SAAAgC;EACE,WAAAV;EAON,GAEDF;EACO,aAAAK;EACD,YAAA;EAbd,UAAA;GAeKC;GAKAE;GACAV;GACDW;EAtBI;KA0BE,EAAA,MAAAG,GAAA,EAAA,MAAAd,GAAA,EAAA,MAAAE,GAAA,EAAA,MAAAE,GAAA,EAAA,MAAAG,GAAA,EAAA,MAAAC,GAAA,EAAA,MAAAE,GAAA,EAAA,MAAAG,KAAA,IAAAhB,EAAA,KA1BVgB;AA0BU"}