@adgytec/adgytec-web-ui-components 1.1.5 → 2.0.0

package/dist/chunks/Radio.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio","names":[],"sources":["../../src/components/Input/Radio/context.ts","../../src/components/Input/Radio/radio.module.css","../../src/components/Input/Radio/Radio.tsx","../../src/components/Input/Radio/RadioGroup.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { RadioLabelPlacement } from \"./types\";\n\nexport type RadioGroupContextValue = {\n    labelPlacement?: RadioLabelPlacement;\n    containerStateLayer?: boolean;\n};\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>({});\n","/* configurable tokens\n*\n* --md-radio-icon-color\n* --md-radio-selected-icon-color\n*\n* --md-radio-interaction-icon-color\n* --md-radio-selected-interaction-icon-color\n*\n* --md-radio-state-layer-color\n* --md-radio-selected-state-layer-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .radio-group {\n        /* configurable tokens */\n        --_md-radio-icon-color: var(\n            --md-radio-icon-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n        --_md-radio-selected-icon-color: var(\n            --md-radio-selected-icon-color,\n            var(--md-sys-color-primary)\n        );\n\n        --_md-radio-interaction-icon-color: var(\n            --md-radio-interaction-icon-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-radio-selected-interaction-icon-color: var(\n            --md-radio-selected-interaction-icon-color,\n            var(--_md-radio-selected-icon-color)\n        );\n\n        --_md-radio-state-layer-color: var(\n            --md-radio-state-layer-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-radio-selected-state-layer-color: var(\n            --md-radio-selected-state-layer-color,\n            var(--_md-radio-selected-icon-color)\n        );\n\n        /* configurable tokens end */\n\n        display: grid;\n        gap: var(--md-sys-layout-space-16);\n\n        &[data-disabled] {\n            color: rgb(\n                from currentcolor r g b /\n                var(--md-sys-state-disabled-content)\n            );\n            cursor: default;\n        }\n    }\n\n    .radio-items {\n        display: grid;\n\n        &[data-orientation=\"horizontal\"] {\n            display: flex;\n        }\n    }\n\n    .radio {\n        /* invalid tokens */\n        --_md-radio-invalid-icon-color: var(--md-sys-color-error);\n        --_md-radio-invalid-state-layer-color: var(\n            --_md-radio-invalid-icon-color\n        );\n\n        /* indicator tokens */\n        --_md-radio-size: calc(20 * var(--dp, 1px));\n        --_md-radio-icon-size: calc(\n            var(--_md-radio-size) -\n            calc(10 * var(--dp, 1px))\n        );\n        --_md-radio-state-layer-size: calc(40 * var(--dp, 1px));\n\n        /* state layer tokens */\n        --_md-radio-pressed-state-layer-color: var(\n            --_md-radio-selected-state-layer-color\n        );\n        --_md-radio-pressed-selected-state-layer-color: var(\n            --_md-radio-state-layer-color\n        );\n\n        --_state-layer-opacity: 0;\n        --_state-color: var(--_md-radio-state-layer-color);\n\n        --_state-layer-color: rgb(\n            from var(--_state-color) r g b /\n            var(--_state-layer-opacity)\n        );\n\n        /* styles */\n        position: relative;\n\n        display: flex;\n        align-items: center;\n        gap: var(--md-sys-layout-space-16);\n\n        color: inherit;\n        cursor: pointer;\n\n        & * {\n            cursor: inherit;\n        }\n\n        &[data-disabled] {\n            cursor: default;\n        }\n\n        &[data-selected] {\n            --_state-color: var(--_md-radio-selected-state-layer-color);\n        }\n\n        &[data-pressed] {\n            --_state-layer-opacity: var(--md-sys-state-pressed);\n            --_state-color: var(--_md-radio-pressed-state-layer-color);\n\n            &[data-selected] {\n                --_state-color: var(\n                    --_md-radio-pressed-selected-state-layer-color\n                );\n            }\n        }\n\n        &[data-invalid] {\n            --_state-color: var(--_md-radio-invalid-state-layer-color);\n\n            &[data-selected] {\n                --_state-color: var(--_md-radio-invalid-state-layer-color);\n            }\n        }\n\n        &[data-hovered] {\n            --_state-layer-opacity: var(--md-sys-state-hover);\n            z-index: 1;\n        }\n\n        &[data-focus-visible] {\n            --_state-layer-opacity: var(--md-sys-state-focus);\n            z-index: 1;\n        }\n    }\n\n    .state-layer::before {\n        content: \"\";\n\n        position: absolute;\n        inset: calc(-1 * var(--md-sys-layout-space-12));\n\n        background-color: var(--_state-layer-color);\n        border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n        pointer-events: none;\n\n        transition: background-color\n            var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n\n    .indicator {\n        --_indicator-color: var(--_md-radio-icon-color);\n\n        position: relative;\n\n        inline-size: var(--_md-radio-size);\n        aspect-ratio: 1 / 1;\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        border: var(--md-sys-shape-border-width-thick) solid\n            var(--_indicator-color);\n\n        transition: border-color var(--md-sys-motion-expressive-default-effects)\n            var(--md-sys-motion-expressive-default-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-selected] {\n            --_indicator-color: var(--_md-radio-selected-icon-color);\n        }\n\n        &[data-invalid] {\n            --_indicator-color: var(--_md-radio-invalid-icon-color);\n        }\n\n        &[data-pressed],\n        &[data-hovered],\n        &[data-focus-visible] {\n            --_indicator-color: var(--_md-radio-interaction-icon-color);\n\n            &[data-selected] {\n                --_indicator-color: var(\n                    --_md-radio-selected-interaction-icon-color\n                );\n            }\n\n            &[data-invalid] {\n                --_indicator-color: var(--_md-radio-invalid-icon-color);\n            }\n        }\n\n        &[data-disabled] {\n            --_indicator-color: rgb(\n                from var(--md-sys-color-on-surface) r g b /\n                var(--md-sys-state-disabled-content)\n            );\n\n            &[data-selected] {\n                --_indicator-color: rgb(\n                    from var(--md-sys-color-on-surface) r g b /\n                    var(--md-sys-state-disabled-content)\n                );\n            }\n        }\n    }\n\n    /* state layer */\n    .indicator[data-show-state-layer]::before {\n        content: \"\";\n\n        position: absolute;\n        inset-block-start: 50%;\n        inset-inline-start: 50%;\n        transform: translate(-50%, -50%);\n\n        inline-size: var(--_md-radio-state-layer-size);\n        aspect-ratio: 1 / 1;\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        background-color: var(--_state-layer-color);\n\n        transition: background-color\n            var(--md-sys-motion-expressive-default-effects)\n            var(--md-sys-motion-expressive-default-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n\n    /* indicator center icon */\n    .indicator-icon {\n        content: \"\";\n\n        position: absolute;\n        inline-size: var(--_md-radio-icon-size);\n        aspect-ratio: 1 / 1;\n\n        inset-inline-start: 50%;\n        inset-block-start: 50%;\n        translate: -50% -50%;\n\n        background-color: var(--_indicator-color);\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        scale: 0;\n\n        transition:\n            background-color var(--md-sys-motion-expressive-default-effects)\n            var(--md-sys-motion-expressive-default-effects-duration),\n            scale var(--md-sys-motion-standard-default-spatial)\n            var(--md-sys-motion-standard-default-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-selected] {\n            scale: 1;\n        }\n    }\n\n    .indicator[data-focus-visible] {\n        --focus-indicator-color: var(--md-sys-color-secondary);\n        --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n        --focus-indicator-offset: calc(2 * var(--dp, 1px));\n\n        outline-width: var(--focus-indicator-thickness);\n        outline-style: solid;\n        outline-offset: var(--focus-indicator-offset);\n        outline-color: var(--focus-indicator-color);\n    }\n}\n","import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { Radio as AriaRadio } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioProps } from \"./types\";\n\nexport const Radio: React.FC<RadioProps> = ({\n    className,\n    children,\n    labelPlacement,\n    containerStateLayer,\n    ...props\n}) => {\n    const {\n        labelPlacement: groupLabelPlacement,\n        containerStateLayer: groupContainerStateLayer,\n    } = useContext(RadioGroupContext);\n    const placement = labelPlacement ?? groupLabelPlacement ?? \"end\";\n    const stateLayer = containerStateLayer ?? groupContainerStateLayer ?? false;\n\n    return (\n        <AriaRadio\n            className={(renderProps) =>\n                clsx(\n                    styles[\"radio\"],\n                    stateLayer && styles[\"state-layer\"],\n                    typography.labelLarge,\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n            data-radio\n        >\n            {(renderProps) => {\n                const {\n                    isSelected,\n                    isHovered,\n                    isDisabled,\n                    isFocused,\n                    isFocusVisible,\n                    isPressed,\n                    isInvalid,\n                } = renderProps;\n\n                const dataAttrs = {\n                    \"data-selected\": isSelected || undefined,\n                    \"data-hovered\": isHovered || undefined,\n                    \"data-disabled\": isDisabled || undefined,\n                    \"data-focused\": isFocused || undefined,\n                    \"data-focus-visible\": isFocusVisible || undefined,\n                    \"data-pressed\": isPressed || undefined,\n                    \"data-show-state-layer\": !stateLayer || undefined,\n                    \"data-invalid\": isInvalid || undefined,\n                };\n\n                const label =\n                    typeof children === \"function\"\n                        ? children(renderProps)\n                        : children;\n                return (\n                    <>\n                        {placement === \"start\" && label}\n\n                        <span\n                            className={clsx(styles[\"indicator\"], TapTarget)}\n                            {...dataAttrs}\n                        >\n                            <span\n                                className={clsx(styles[\"indicator-icon\"])}\n                                {...dataAttrs}\n                            ></span>\n                        </span>\n\n                        {placement === \"end\" && label}\n                    </>\n                );\n            }}\n        </AriaRadio>\n    );\n};\n","import { clsx } from \"clsx\";\nimport { RadioGroup as AriaRadioGroup } from \"react-aria-components\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { Label } from \"../Label\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioGroupProps } from \"./types\";\n\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    children,\n    className,\n    radioItemsGap = 24,\n    labelPlacement,\n    containerStateLayer,\n    ...props\n}) => {\n    return (\n        <RadioGroupContext value={{ labelPlacement, containerStateLayer }}>\n            <AriaRadioGroup\n                className={(renderProps) =>\n                    clsx(\n                        styles[\"radio-group\"],\n                        typeof className === \"function\"\n                            ? className(renderProps)\n                            : className\n                    )\n                }\n                {...props}\n                data-radio-group\n            >\n                {({ orientation, isInvalid }) => {\n                    const showDescription =\n                        description &&\n                        (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n                    return (\n                        <>\n                            {label && <Label>{label}</Label>}\n\n                            <div\n                                data-orientation={orientation}\n                                className={clsx(styles[\"radio-items\"])}\n                                style={{\n                                    gap: `calc(${radioItemsGap} * var(--dp, 1px))`,\n                                }}\n                            >\n                                {children}\n                            </div>\n\n                            {showDescription && (\n                                <Description>{description}</Description>\n                            )}\n                            <FieldError>{errorMessage}</FieldError>\n                        </>\n                    );\n                }}\n            </AriaRadioGroup>\n        </RadioGroupContext>\n    );\n};\n"],"mappings":";;;;;;;;;;AAQA,IAAa,IAAoB,EAAsC,CAAC,CAAC;;;;;;;GEC5D,KAA+B,EACxC,cACA,aACA,mBACA,wBACA,GAAG,QACD;CACF,IAAM,EACF,gBAAgB,GAChB,qBAAqB,MACrB,EAAW,CAAiB,GAC1B,IAAY,KAAkB,KAAuB,OACrD,IAAa,KAAuB,KAA4B;CAEtE,OACI,kBAAC,GAAD;EACI,YAAY,MACR,EACI,EAAO,OACP,KAAc,EAAO,gBACrB,EAAW,YACX,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,cAAA;aAEE,MAAgB;GACd,IAAM,EACF,eACA,cACA,eACA,cACA,mBACA,cACA,iBACA,GAEE,IAAY;IACd,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB,KAAkB,KAAA;IACxC,gBAAgB,KAAa,KAAA;IAC7B,yBAAyB,CAAC,KAAc,KAAA;IACxC,gBAAgB,KAAa,KAAA;GACjC,GAEM,IACF,OAAO,KAAa,aACd,EAAS,CAAW,IACpB;GACV,OACI,kBAAA,GAAA,EAAA,UAAA;IACK,MAAc,WAAW;IAE1B,kBAAC,QAAD;KACI,WAAW,EAAK,EAAO,WAAc,CAAS;KAC9C,GAAI;eAEJ,kBAAC,QAAD;MACI,WAAW,EAAK,EAAO,iBAAiB;MACxC,GAAI;KACD,CAAA;IACL,CAAA;IAEL,MAAc,SAAS;GAC1B,EAAA,CAAA;EAEV;CACO,CAAA;AAEnB,GC3Ea,KAAyC,EAClD,UACA,gBACA,iBACA,8BAA2B,IAC3B,aACA,cACA,mBAAgB,IAChB,mBACA,wBACA,GAAG,QAGC,kBAAC,GAAD;CAAmB,OAAO;EAAE;EAAgB;CAAoB;WAC5D,kBAAC,GAAD;EACI,YAAY,MACR,EACI,EAAO,gBACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,oBAAA;aAEE,EAAE,gBAAa,mBAAgB;GAC7B,IAAM,IACF,MACC,CAAC,KAAc,KAAa;GAEjC,OACI,kBAAA,GAAA,EAAA,UAAA;IACK,KAAS,kBAAC,GAAD,EAAA,UAAQ,EAAa,CAAA;IAE/B,kBAAC,OAAD;KACI,oBAAkB;KAClB,WAAW,EAAK,EAAO,cAAc;KACrC,OAAO,EACH,KAAK,QAAQ,EAAc,oBAC/B;KAEC;IACA,CAAA;IAEJ,KACG,kBAAC,GAAD,EAAA,UAAc,EAAyB,CAAA;IAE3C,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;GACxC,EAAA,CAAA;EAEV;CACY,CAAA;AACD,CAAA"}

package/dist/chunks/RichTooltip

@@ -0,0 +1,11 @@
+import e from "clsx";
+import { jsx as t } from "react/jsx-runtime";
+import '../assets/RichTooltip.css';var n = { tooltip: "_tooltip_m5ize_9" }, r = ({ className: r, ...i }) => /* @__PURE__ */ t("div", {
+	className: e(n.tooltip, r),
+	...i,
+	"data-rich-tooltip": !0
+});
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=RichTooltip.map

package/dist/chunks/RichTooltip.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTooltip","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltip/richTooltip.module.css","../../src/components/Tooltip/RichTooltip/RichTooltip/RichTooltip.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-rich-tooltip-background\n* --md-rich-tooltip-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .tooltip {\n        --_md-rich-tooltip-background: var(\n            --md-rich-tooltip-background,\n            var(--md-sys-color-surface-container)\n        );\n        --_md-rich-tooltip-color: var(\n            --md-rich-tooltip-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n\n        display: grid;\n        gap: var(--md-sys-layout-space-12);\n\n        padding-block-start: var(--md-sys-layout-space-12);\n        padding-block-end: var(--md-sys-layout-space-8);\n\n        background-color: var(--_md-rich-tooltip-background);\n        color: var(--_md-rich-tooltip-color);\n\n        border-radius: var(--md-sys-shape-corner-radius-medium);\n        box-shadow: var(--md-sys-elevation-shadow-2);\n\n        max-inline-size: calc(300 * var(--dp, 1px));\n    }\n}\n","// https://m3.material.io/components/tooltips/guidelines#00e87770-86d0-436d-b50b-436ff3cefe75\n// use this with popover, for more details read the article\n\nimport clsx from \"clsx\";\nimport styles from \"./richTooltip.module.css\";\n\nexport const RichTooltip: React.FC<React.ComponentPropsWithRef<\"div\">> = ({\n    className,\n    ...props\n}) => {\n    return (\n        <div\n            className={clsx(styles[\"tooltip\"], className)}\n            {...props}\n            data-rich-tooltip\n        />\n    );\n};\n"],"mappings":";;yCCMa,KAA6D,EACtE,cACA,GAAG,QAGC,kBAAC,OAAD;CACI,WAAW,EAAK,EAAO,SAAY,CAAS;CAC5C,GAAI;CACJ,qBAAA;AACH,CAAA"}

package/dist/chunks/RichTooltipActions

@@ -0,0 +1,10 @@
+import e from "clsx";
+import { jsx as t } from "react/jsx-runtime";
+import '../assets/RichTooltipActions.css';var n = { actions: "_actions_yji6y_2" }, r = ({ className: r, ...i }) => /* @__PURE__ */ t("div", {
+	className: e(n.actions, r),
+	...i
+});
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=RichTooltipActions.map

package/dist/chunks/RichTooltipActions.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTooltipActions","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipActions/richTooltipActions.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipActions/RichTooltipActions.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .actions {\n        display: flex;\n        align-items: center;\n        gap: var(--md-sys-layout-space-4);\n    }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipActions.module.css\";\n\n// use Button color -> text and size -> small\nexport const RichTooltipActions: React.FC<\n    React.ComponentPropsWithRef<\"div\">\n> = ({ className, ...props }) => {\n    return <div className={clsx(styles[\"actions\"], className)} {...props} />;\n};\n"],"mappings":";;yCCIa,KAER,EAAE,cAAW,GAAG,QACV,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,SAAY,CAAS;CAAG,GAAI;AAAQ,CAAA"}

package/dist/chunks/RichTooltipInfo

@@ -0,0 +1,10 @@
+import e from "clsx";
+import { jsx as t } from "react/jsx-runtime";
+import '../assets/RichTooltipInfo.css';var n = { info: "_info_xsenv_2" }, r = ({ className: r, ...i }) => /* @__PURE__ */ t("div", {
+	className: e(n.info, r),
+	...i
+});
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=RichTooltipInfo.map

package/dist/chunks/RichTooltipInfo.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTooltipInfo","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/richTooltipInfo.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/RichTooltipInfo.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .info {\n        padding-inline: var(--md-sys-layout-space-16);\n\n        display: grid;\n        gap: var(--md-sys-layout-space-4);\n    }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipInfo.module.css\";\n\nexport const RichTooltipInfo: React.FC<React.ComponentPropsWithRef<\"div\">> = ({\n    className,\n    ...props\n}) => {\n    return <div className={clsx(styles[\"info\"], className)} {...props} />;\n};\n"],"mappings":";;mCCGa,KAAiE,EAC1E,cACA,GAAG,QAEI,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,MAAS,CAAS;CAAG,GAAI;AAAQ,CAAA"}

package/dist/chunks/SearchField

@@ -0,0 +1,35 @@
+import { t as e } from "./Icon";
+import { t } from "./base";
+import { IconButton as n } from "../components/Button/IconButton/index.js";
+import { clsx as r } from "clsx";
+import { Input as i, SearchField as a } from "react-aria-components";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Search as l, X as u } from "lucide-react";
+import '../assets/SearchField.css';var d = {
+	"search-field": "_search-field_dol97_10",
+	input: "_input_dol97_74"
+}, f = ({ placeholder: f = "Search", className: p, ...m }) => /* @__PURE__ */ s(a, {
+	className: (e) => r(d["search-field"], typeof p == "function" ? p(e) : p),
+	...m,
+	children: ({ isEmpty: a }) => /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s(e, {
+			icon: l,
+			size: 24,
+			"data-search-icon": !0
+		}),
+		/* @__PURE__ */ s(i, {
+			className: r(d.input, t.bodyLarge),
+			placeholder: f
+		}),
+		!a && /* @__PURE__ */ s(n, {
+			icon: u,
+			size: "small",
+			width: "default",
+			color: "standard"
+		})
+	] })
+});
+//#endregion
+export { f as t };
+
+//# sourceMappingURL=SearchField.map

package/dist/chunks/SearchField.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField","names":[],"sources":["../../src/components/Input/SearchField/searchField.module.css","../../src/components/Input/SearchField/SearchField.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-search-field-background\n* --md-search-field-color\n* --md-search-field-supporting-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .search-field {\n        --_md-search-field-background: var(\n            --md-search-field-background,\n            var(--md-sys-color-surface-container-high)\n        );\n        --_md-search-field-color: var(\n            --md-search-field-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-search-field-supporting-color: var(\n            --md-search-field-supporting-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n\n        display: flex;\n        align-items: center;\n\n        background-color: var(--_md-search-field-background);\n        color: var(--_md-search-field-color);\n\n        box-shadow: var(--md-sys-elevation-shadow-3);\n\n        padding-block: var(--md-sys-layout-space-8);\n        padding-inline-start: var(--md-sys-layout-space-16);\n        padding-inline-end: var(--md-sys-layout-space-8);\n\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        &[data-empty] {\n            padding-block: var(--md-sys-layout-space-16);\n        }\n\n        &:has([data-focused]) {\n            --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n            --focus-indicator-offset: calc(2 * var(--dp, 1px));\n            --focus-indicator-color: var(--md-sys-color-secondary);\n\n            outline-width: var(--focus-indicator-thickness);\n            outline-style: solid;\n            outline-offset: var(--focus-indicator-offset);\n            outline-color: var(--focus-indicator-color);\n        }\n\n        &[data-disabled] {\n            --_md-search-field-background: rgb(\n                from var(--md-sys-color-surface-container-high) r g b /\n                var(--md-sys-state-disabled-container)\n            );\n            --_md-search-field-color: rgb(\n                from currentColor r g b /\n                var(--md-sys-state-disabled-content)\n            );\n            box-shadow: none;\n        }\n    }\n\n    .search-field [data-button] {\n        --md-button-color: var(--_md-search-field-supporting-color);\n\n        &[data-disabled] [data-visual-button] {\n            background-color: transparent;\n        }\n    }\n\n    .input {\n        all: unset;\n\n        width: 100%;\n\n        padding-inline-start: var(--md-sys-layout-space-16);\n        padding-inline-end: var(--md-sys-layout-space-8);\n\n        &[data-disabled] {\n            cursor: default;\n        }\n    }\n\n    .input::placeholder {\n        color: var(--_md-search-field-supporting-color);\n    }\n\n    .input[data-disabled]::placeholder {\n        color: rgb(\n            from currentColor r g b /\n            var(--md-sys-state-disabled-content)\n        );\n    }\n}\n","import { clsx } from \"clsx\";\nimport { Search, X } from \"lucide-react\";\nimport { SearchField as AriaSearchField, Input } from \"react-aria-components\";\nimport { IconButton } from \"@/components/Button\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport styles from \"./searchField.module.css\";\nimport type { SearchFieldProps } from \"./types\";\n\nexport const SearchField: React.FC<SearchFieldProps> = ({\n    placeholder = \"Search\",\n    className,\n    ...props\n}) => {\n    return (\n        <AriaSearchField\n            className={(renderProps) =>\n                clsx(\n                    styles[\"search-field\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        >\n            {({ isEmpty }) => (\n                <>\n                    <Icon icon={Search} size={24} data-search-icon />\n\n                    <Input\n                        className={clsx(styles[\"input\"], typography.bodyLarge)}\n                        placeholder={placeholder}\n                    />\n\n                    {!isEmpty && (\n                        <IconButton\n                            icon={X}\n                            size=\"small\"\n                            width=\"default\"\n                            color=\"standard\"\n                        />\n                    )}\n                </>\n            )}\n        </AriaSearchField>\n    );\n};\n"],"mappings":";;;;;;;;;;GCSa,KAA2C,EACpD,iBAAc,UACd,cACA,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,iBACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;YAEF,EAAE,iBACA,kBAAA,GAAA,EAAA,UAAA;EACI,kBAAC,GAAD;GAAM,MAAM;GAAQ,MAAM;GAAI,oBAAA;EAAkB,CAAA;EAEhD,kBAAC,GAAD;GACI,WAAW,EAAK,EAAO,OAAU,EAAW,SAAS;GACxC;EAChB,CAAA;EAEA,CAAC,KACE,kBAAC,GAAD;GACI,MAAM;GACN,MAAK;GACL,OAAM;GACN,OAAM;EACT,CAAA;CAEP,EAAA,CAAA;AAEO,CAAA"}

package/dist/chunks/SelectPopover

@@ -0,0 +1,11 @@
+import { t as e } from "./Popover";
+import { clsx as t } from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import '../assets/SelectPopover.css';var r = { popover: "_popover_108ip_2" }, i = ({ className: i, ...a }) => /* @__PURE__ */ n(e, {
+	className: (e) => t(r.popover, typeof i == "function" ? i(e) : i),
+	...a
+});
+//#endregion
+export { i as t };
+
+//# sourceMappingURL=SelectPopover.map

package/dist/chunks/SelectPopover.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPopover","names":[],"sources":["../../src/components/Input/Select/SelectPopover/selectPopover.module.css","../../src/components/Input/Select/SelectPopover/SelectPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .popover {\n        min-inline-size: var(--trigger-width);\n\n        display: grid;\n        grid-template-rows: 1fr;\n    }\n}\n","import { clsx } from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./selectPopover.module.css\";\n\nexport const SelectPopover: React.FC<\n    React.ComponentPropsWithRef<typeof Popover>\n> = ({ className, ...props }) => {\n    return (\n        <Popover\n            className={(renderProps) =>\n                clsx(\n                    styles[\"popover\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;yCCIa,KAER,EAAE,cAAW,GAAG,QAEb,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,SACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;AACP,CAAA"}

package/dist/chunks/SelectTrigger

@@ -0,0 +1,31 @@
+import { t as e } from "./Icon";
+import { t } from "./base";
+import { d as n, o as r, s as i } from "./core4";
+import a from "clsx";
+import { Button as o, SelectStateContext as s, SelectValue as c } from "react-aria-components";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ChevronDown as d } from "lucide-react";
+import { useContext as f } from "react";
+import '../assets/SelectTrigger.css';var p = {
+	trigger: "_trigger_pud16_2",
+	"select-value": "_select-value_pud16_37"
+}, m = (m) => {
+	let h = f(s)?.displayValidation.isInvalid;
+	return /* @__PURE__ */ u(o, {
+		className: a(n, i, r, t.bodyLarge, p.trigger),
+		...m,
+		"data-invalid": h || void 0,
+		"data-select-trigger": !0,
+		children: [/* @__PURE__ */ l(c, {
+			className: a(p["select-value"]),
+			children: ({ selectedText: e, isPlaceholder: t, defaultChildren: n }) => t ? n : e
+		}), /* @__PURE__ */ l(e, {
+			icon: d,
+			size: 24
+		})]
+	});
+};
+//#endregion
+export { m as t };
+
+//# sourceMappingURL=SelectTrigger.map

package/dist/chunks/SelectTrigger.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger","names":[],"sources":["../../src/components/Input/Select/SelectTrigger/selectTrigger.module.css","../../src/components/Input/Select/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["@layer adgytec.overrides {\n    .trigger {\n        --rotate: 0;\n\n        justify-content: space-between;\n        cursor: pointer;\n\n        &[data-pressed] {\n            --rotate: 180deg;\n        }\n\n        > svg {\n            color: var(--group-color);\n            rotate: var(--rotate);\n            transition: rotate var(--md-sys-motion-expressive-fast-spatial)\n                var(--md-sys-motion-expressive-fast-spatial-duration);\n\n            @media (prefers-reduced-motion) {\n                transition: none;\n            }\n        }\n\n        &[data-pressed] {\n            --outline-color: var(--outline-color-focused-normal);\n            --outline-color-focused: var(--outline-color);\n\n            &[data-invalid] {\n                --outline-color: var(--outline-color-invalid);\n            }\n        }\n\n        &[data-disabled] {\n            cursor: default;\n        }\n    }\n\n    .select-value {\n        flex: 1;\n        text-align: start;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n\n        &[data-placeholder] {\n            color: var(--placeholder-color);\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useContext } from \"react\";\nimport { Button, SelectStateContext, SelectValue } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport {\n    EditorInputStyles,\n    EditorStyles,\n    TextFieldIconSize,\n    UnsetStyles,\n} from \"../../core\";\nimport styles from \"./selectTrigger.module.css\";\n\nexport const SelectTrigger: React.FC<\n    Omit<React.ComponentPropsWithRef<typeof Button>, \"children\">\n> = (props) => {\n    const selectContextVal = useContext(SelectStateContext);\n    const invalid = selectContextVal?.displayValidation.isInvalid;\n\n    return (\n        <Button\n            className={clsx(\n                UnsetStyles,\n                EditorStyles,\n                EditorInputStyles,\n                typography.bodyLarge,\n                styles[\"trigger\"]\n            )}\n            {...props}\n            data-invalid={invalid || undefined}\n            data-select-trigger={true}\n        >\n            <SelectValue className={clsx(styles[\"select-value\"])}>\n                {({ selectedText, isPlaceholder, defaultChildren }) =>\n                    isPlaceholder ? defaultChildren : selectedText\n                }\n            </SelectValue>\n\n            <Icon icon={ChevronDown} size={TextFieldIconSize} />\n        </Button>\n    );\n};\n"],"mappings":";;;;;;;;;;;GCca,KAER,MAAU;CAEX,IAAM,IADmB,EAAW,CACpB,GAAkB,kBAAkB;CAEpD,OACI,kBAAC,GAAD;EACI,WAAW,EACP,GACA,GACA,GACA,EAAW,WACX,EAAO,OACX;EACA,GAAI;EACJ,gBAAc,KAAW,KAAA;EACzB,uBAAqB;YAVzB,CAYI,kBAAC,GAAD;GAAa,WAAW,EAAK,EAAO,eAAe;cAC7C,EAAE,iBAAc,kBAAe,yBAC7B,IAAgB,IAAkB;EAE7B,CAAA,GAEb,kBAAC,GAAD;GAAM,MAAM;GAAa,MAAA;EAA0B,CAAA,CAC/C;;AAEhB"}

package/dist/chunks/SideSheet

@@ -0,0 +1,52 @@
+import { t as e } from "./base";
+import { IconButton as t } from "../components/Button/IconButton/index.js";
+import { n } from "./SideSheetModal";
+import r from "clsx";
+import { Dialog as i, Header as a, Heading as o } from "react-aria-components";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { X as u } from "lucide-react";
+import { useContext as d } from "react";
+import '../assets/SideSheet.css';var f = {
+	"side-sheet": "_side-sheet_jd041_10",
+	header: "_header_jd041_65",
+	headline: "_headline_jd041_75",
+	main: "_main_jd041_79",
+	actions: "_actions_jd041_86"
+}, p = ({ headline: p, actions: m, className: h, children: g, ..._ }) => {
+	let { layout: v, alignment: y } = d(n), b = Array.isArray(m) ? m.length > 0 : !!m;
+	return /* @__PURE__ */ c(i, {
+		className: r(f["side-sheet"], h),
+		..._,
+		"data-alignment": y,
+		"data-layout": v,
+		"data-actions": b || void 0,
+		children: (n) => /* @__PURE__ */ l(s, { children: [
+			/* @__PURE__ */ l(a, {
+				className: r(f.header),
+				"data-headline": !!p || void 0,
+				children: [p && /* @__PURE__ */ c(o, {
+					slot: "title",
+					className: r(f.headline, e.titleLarge),
+					children: p
+				}), /* @__PURE__ */ c(t, {
+					slot: "close",
+					icon: u,
+					color: "standard"
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: r(f.main),
+				children: typeof g == "function" ? g(n) : g
+			}),
+			b && /* @__PURE__ */ c("div", {
+				className: r(f.actions),
+				"data-alignment": y,
+				children: typeof m == "function" ? m(n) : m
+			})
+		] })
+	});
+};
+//#endregion
+export { p as t };
+
+//# sourceMappingURL=SideSheet.map

package/dist/chunks/SideSheet.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideSheet","names":[],"sources":["../../src/components/Sheets/SideSheet/sideSheet.module.css","../../src/components/Sheets/SideSheet/SideSheet.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-side-sheet-background\n* --md-side-sheet-color\n* --md-side-sheet-headline-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .side-sheet {\n        --_md-side-sheet-background: var(\n            --md-side-sheet-background,\n            var(--md-sys-color-surface-container-low)\n        );\n        --_md-side-sheet-color: var(\n            --md-side-sheet-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-side-sheet-headline-color: var(\n            --md-side-sheet-headline-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n        --_md-side-sheet-padding-inline: var(--md-sys-layout-space-16);\n        --_max-inline-size: calc(400 * var(--dp, 1px));\n\n        inline-size: min(100svi, var(--_max-inline-size));\n        block-size: 100svb;\n\n        display: grid;\n        grid-template-rows: auto 1fr;\n\n        background-color: var(--_md-side-sheet-background);\n        color: var(--_md-side-sheet-color);\n\n        box-shadow: var(--md-sys-elevation-shadow-1);\n        border-radius: var(--md-sys-shape-corner-radius-large);\n\n        padding-block: var(--md-sys-layout-space-16);\n\n        &[data-actions] {\n            grid-template-rows: auto 1fr auto;\n        }\n\n        &[data-layout=\"detached\"] {\n            block-size: calc(100svb - calc(2 * var(--_detached-margin)));\n            inline-size: min(\n                calc(100svi - calc(2 * var(--_detached-margin))),\n                var(--_max-inline-size)\n            );\n        }\n\n        &[data-layout=\"standard\"] {\n            &[data-alignment=\"start\"] {\n                border-start-start-radius: 0;\n                border-end-start-radius: 0;\n            }\n\n            &[data-alignment=\"end\"] {\n                border-start-end-radius: 0;\n                border-end-end-radius: 0;\n            }\n        }\n    }\n\n    .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--md-sys-layout-space-12);\n\n        padding-inline: var(--_md-side-sheet-padding-inline);\n        padding-block-end: var(--md-sys-layout-space-12);\n    }\n\n    .headline {\n        color: var(--_md-side-sheet-headline-color);\n    }\n\n    .main {\n        padding-inline: var(--_md-side-sheet-padding-inline);\n        overflow-y: auto;\n\n        padding-block: var(--md-sys-layout-space-12);\n    }\n\n    .actions {\n        --_divider-thickness: calc(1 * var(--dp, 1px));\n        --_divider-color: rgb(\n            from var(--md-sys-color-outline) r g b /\n            var(--md-sys-state-divider)\n        );\n\n        padding-inline: var(--_md-side-sheet-padding-inline);\n        padding-block-start: var(--md-sys-layout-space-12);\n        display: flex;\n        gap: var(--md-sys-layout-space-12);\n\n        border-block-start: var(--_divider-thickness) solid\n            var(--_divider-color);\n\n        /* biome-ignore lint: different elements */\n        &[data-alignment=\"start\"] {\n            justify-content: end;\n        }\n\n        /* biome-ignore lint: different elements */\n        &[data-alignment=\"end\"] {\n            justify-content: start;\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useContext } from \"react\";\nimport { Dialog, Header, Heading } from \"react-aria-components\";\nimport { IconButton } from \"@/components/Button\";\nimport { typography } from \"@/utils\";\nimport { SideSheetContext } from \"../SideSheetModal\";\nimport styles from \"./sideSheet.module.css\";\nimport type { SideSheetProps } from \"./types\";\n\nexport const SideSheet: React.FC<SideSheetProps> = ({\n    headline,\n    actions,\n    className,\n    children,\n    ...props\n}) => {\n    const { layout, alignment } = useContext(SideSheetContext);\n    const hasActions = Array.isArray(actions) ? actions.length > 0 : !!actions;\n\n    return (\n        <Dialog\n            className={clsx(styles[\"side-sheet\"], className)}\n            {...props}\n            data-alignment={alignment}\n            data-layout={layout}\n            data-actions={hasActions || undefined}\n        >\n            {(renderProps) => (\n                <>\n                    <Header\n                        className={clsx(styles[\"header\"])}\n                        data-headline={!!headline || undefined}\n                    >\n                        {headline && (\n                            <Heading\n                                slot=\"title\"\n                                className={clsx(\n                                    styles[\"headline\"],\n                                    typography.titleLarge\n                                )}\n                            >\n                                {headline}\n                            </Heading>\n                        )}\n\n                        <IconButton slot=\"close\" icon={X} color=\"standard\" />\n                    </Header>\n\n                    <div className={clsx(styles[\"main\"])}>\n                        {typeof children === \"function\"\n                            ? children(renderProps)\n                            : children}\n                    </div>\n\n                    {hasActions && (\n                        <div\n                            className={clsx(styles[\"actions\"])}\n                            data-alignment={alignment}\n                        >\n                            {typeof actions === \"function\"\n                                ? actions(renderProps)\n                                : actions}\n                        </div>\n                    )}\n                </>\n            )}\n        </Dialog>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;GCUa,KAAuC,EAChD,aACA,YACA,cACA,aACA,GAAG,QACD;CACF,IAAM,EAAE,WAAQ,iBAAc,EAAW,CAAgB,GACnD,IAAa,MAAM,QAAQ,CAAO,IAAI,EAAQ,SAAS,IAAI,CAAC,CAAC;CAEnE,OACI,kBAAC,GAAD;EACI,WAAW,EAAK,EAAO,eAAe,CAAS;EAC/C,GAAI;EACJ,kBAAgB;EAChB,eAAa;EACb,gBAAc,KAAc,KAAA;aAE1B,MACE,kBAAA,GAAA,EAAA,UAAA;GACI,kBAAC,GAAD;IACI,WAAW,EAAK,EAAO,MAAS;IAChC,iBAAe,CAAC,CAAC,KAAY,KAAA;cAFjC,CAIK,KACG,kBAAC,GAAD;KACI,MAAK;KACL,WAAW,EACP,EAAO,UACP,EAAW,UACf;eAEC;IACI,CAAA,GAGb,kBAAC,GAAD;KAAY,MAAK;KAAQ,MAAM;KAAG,OAAM;IAAY,CAAA,CAChD;;GAER,kBAAC,OAAD;IAAK,WAAW,EAAK,EAAO,IAAO;cAC9B,OAAO,KAAa,aACf,EAAS,CAAW,IACpB;GACL,CAAA;GAEJ,KACG,kBAAC,OAAD;IACI,WAAW,EAAK,EAAO,OAAU;IACjC,kBAAgB;cAEf,OAAO,KAAY,aACd,EAAQ,CAAW,IACnB;GACL,CAAA;EAEX,EAAA,CAAA;CAEF,CAAA;AAEhB"}

package/dist/chunks/SideSheetModal

@@ -0,0 +1,24 @@
+import e from "clsx";
+import { Modal as t } from "react-aria-components";
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as r } from "react";
+import '../assets/SideSheetModal.css';//#region src/components/Sheets/SideSheetModal/context.ts
+var i = r({
+	layout: "standard",
+	alignment: "end"
+}), a = { modal: "_modal_1gjq1_2" }, o = ({ className: r, alignment: o = "end", layout: s = "standard", ...c }) => /* @__PURE__ */ n(i, {
+	value: {
+		alignment: o,
+		layout: s
+	},
+	children: /* @__PURE__ */ n(t, {
+		"data-alignment": o,
+		"data-layout": s,
+		className: (t) => e(a.modal, typeof r == "function" ? r(t) : r),
+		...c
+	})
+});
+//#endregion
+export { i as n, o as t };
+
+//# sourceMappingURL=SideSheetModal.map

package/dist/chunks/SideSheetModal.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideSheetModal","names":[],"sources":["../../src/components/Sheets/SideSheetModal/context.ts","../../src/components/Sheets/SideSheetModal/sideSheetModal.module.css","../../src/components/Sheets/SideSheetModal/SideSheetModal.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { SheetLayout } from \"../core\";\nimport type { SideSheetAlignment } from \"./types\";\n\nexport type SideSheetContextValue = {\n    layout: SheetLayout;\n    alignment: SideSheetAlignment;\n};\n\nexport const SideSheetContext = createContext<SideSheetContextValue>({\n    layout: \"standard\",\n    alignment: \"end\",\n});\n","@layer adgytec.comps {\n    .modal {\n        --_detached-margin: var(--md-sys-layout-space-16);\n\n        position: fixed;\n\n        &[data-layout=\"detached\"] {\n            margin: var(--_detached-margin);\n        }\n\n        &[data-alignment=\"start\"] {\n            --_from: -100%;\n        }\n\n        &[data-alignment=\"end\"] {\n            --_from: 100%;\n\n            inset-inline-end: 0;\n        }\n\n        transition: translate var(--_modal-motion) var(--_modal-motion-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-entering],\n        &[data-exiting] {\n            translate: var(--_from);\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { Modal } from \"react-aria-components\";\nimport { SideSheetContext } from \"./context\";\nimport styles from \"./sideSheetModal.module.css\";\nimport type { SideSheetModalProps } from \"./types\";\n\nexport const SideSheetModal: React.FC<SideSheetModalProps> = ({\n    className,\n    alignment = \"end\",\n    layout = \"standard\",\n    ...props\n}) => {\n    return (\n        <SideSheetContext value={{ alignment, layout }}>\n            <Modal\n                data-alignment={alignment}\n                data-layout={layout}\n                className={(renderProps) =>\n                    clsx(\n                        styles[\"modal\"],\n                        typeof className === \"function\"\n                            ? className(renderProps)\n                            : className\n                    )\n                }\n                {...props}\n            />\n        </SideSheetContext>\n    );\n};\n"],"mappings":";;;;;AASA,IAAa,IAAmB,EAAqC;CACjE,QAAQ;CACR,WAAW;AACf,CAAC,oCENY,KAAiD,EAC1D,cACA,eAAY,OACZ,YAAS,YACT,GAAG,QAGC,kBAAC,GAAD;CAAkB,OAAO;EAAE;EAAW;CAAO;WACzC,kBAAC,GAAD;EACI,kBAAgB;EAChB,eAAa;EACb,YAAY,MACR,EACI,EAAO,OACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;CACP,CAAA;AACa,CAAA"}

package/dist/chunks/Slider

@@ -0,0 +1,74 @@
+import { t as e } from "./Icon";
+import { Label as t } from "../components/Input/Label/index.js";
+import { a as n, c as r, i, o as a, s as o } from "./core7";
+import { t as s } from "./SliderStops";
+import { t as c } from "./SliderThumb";
+import l from "clsx";
+import { Slider as u, SliderTrack as d } from "react-aria-components";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import '../assets/Slider.css';var h = {
+	"visual-track": "_visual-track_17jx5_2",
+	"active-track": "_active-track_17jx5_22",
+	"inactive-track": "_inactive-track_17jx5_37",
+	icon: "_icon_17jx5_52"
+}, g = ({ label: g, thumbLabel: _, size: v = "small", step: y = 1, minValue: b = 0, maxValue: x = 100, showInBetweenSteps: S, insetIcon: C, minInsetIcon: w, maxStops: T, outputRenderer: E, className: D, ...O }) => {
+	let k = v !== "extra-small" && v !== "small", A = v === "extra-large" ? 32 : 24;
+	return /* @__PURE__ */ p(u, {
+		minValue: b,
+		maxValue: x,
+		step: y,
+		className: (e) => l(n, r, typeof D == "function" ? D(e) : D),
+		...O,
+		children: ({ orientation: n, state: r, isDisabled: u }) => {
+			let D = r.getThumbPercent(0), O = C;
+			return D === 0 && w && (O = w), /* @__PURE__ */ m(f, { children: [g && /* @__PURE__ */ p(t, { children: g }), /* @__PURE__ */ p("div", {
+				className: l(a),
+				"data-orientation": n,
+				children: /* @__PURE__ */ m(d, {
+					className: l(o, i(v)),
+					children: [
+						/* @__PURE__ */ m("div", {
+							className: l(h["visual-track"]),
+							"data-orientation": n,
+							children: [/* @__PURE__ */ p("div", {
+								className: l(h["active-track"]),
+								"data-orientation": n,
+								style: { flexGrow: r.getThumbPercent(0) }
+							}), /* @__PURE__ */ p("div", {
+								className: l(h["inactive-track"]),
+								style: { flexGrow: 1 - r.getThumbPercent(0) },
+								"data-orientation": n
+							})]
+						}),
+						k && O && /* @__PURE__ */ p(e, {
+							icon: O,
+							size: A,
+							className: l(h.icon),
+							"data-minimum-value": D === 0 || void 0,
+							"data-disabled": u || void 0,
+							"data-orientation": n
+						}),
+						/* @__PURE__ */ p(c, {
+							size: v,
+							orientation: n,
+							"aria-label": _,
+							outputRenderer: E
+						}),
+						/* @__PURE__ */ p(s, {
+							minValue: b,
+							maxValue: x,
+							step: y,
+							orientation: n,
+							showInBetweenSteps: S,
+							maxStops: T
+						})
+					]
+				})
+			})] });
+		}
+	});
+};
+//#endregion
+export { g as t };
+
+//# sourceMappingURL=Slider.map

package/dist/chunks/Slider.map

@@ -0,0 +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;OACH,CAAA,GAED,kBAAC,OAAD;QACI,WAAW,EACP,EAAO,iBACX;QACA,OAAO,EACH,UACI,IAAI,EAAM,gBAAgB,CAAC,EACnC;QACA,oBAAkB;OACrB,CAAA,CACA;;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;MACrB,CAAA;MAGL,kBAAC,GAAD;OACU;OACO;OACb,cAAY;OACI;MACnB,CAAA;MAED,kBAAC,GAAD;OACc;OACA;OACJ;OACO;OACO;OACV;MACb,CAAA;KACQ;;GACZ,CAAA,CACP,EAAA,CAAA;EAEV;CACQ,CAAA;AAEpB"}

package/dist/chunks/SliderOutput

@@ -0,0 +1,22 @@
+import { t as e } from "./base";
+import t from "clsx";
+import { SliderOutput as n } from "react-aria-components";
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as i, useContext as a } from "react";
+import '../assets/SliderOutput.css';//#region src/components/Input/Slider/SliderThumb/context.ts
+var o = i({}), s = { output: "_output_licmo_2" }, c = ({ className: i, ...c }) => {
+	let { isDragging: l, isHovered: u, isFocused: d, isFocusVisible: f } = a(o);
+	return /* @__PURE__ */ r(n, {
+		className: (n) => t(s.output, e.labelLarge, typeof i == "function" ? i(n) : i),
+		...c,
+		"data-focus-visible": f || void 0,
+		"data-dragging": l || void 0,
+		"data-hovered": u || void 0,
+		"data-focused": d || void 0,
+		"data-slider-output": !0
+	});
+};
+//#endregion
+export { o as n, c as t };
+
+//# sourceMappingURL=SliderOutput.map

package/dist/chunks/SliderOutput.map

@@ -0,0 +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,IACT,EAA4C,CAAC,CAAC,sCEHrC,KAER,EAAE,cAAW,GAAG,QAAY;CAC7B,IAAM,EAAE,eAAY,cAAW,cAAW,sBAAmB,EACzD,CACJ;CAEA,OACI,kBAAC,GAAD;EACI,YAAY,MACR,EACI,EAAO,QACP,EAAW,YACX,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,sBAAoB,KAAkB,KAAA;EACtC,iBAAe,KAAc,KAAA;EAC7B,gBAAc,KAAa,KAAA;EAC3B,gBAAc,KAAa,KAAA;EAC3B,sBAAA;CACH,CAAA;AAET"}

package/dist/chunks/SliderStops

@@ -0,0 +1,124 @@
+import e from "clsx";
+import { SliderStateContext as t } from "react-aria-components";
+import { jsx as n } from "react/jsx-runtime";
+import { useContext as r, useMemo as i } from "react";
+import '../assets/SliderStops.css';//#region src/components/Input/Slider/SliderStops/core.ts
+var a = 20, o = (e) => {
+	let t = 0, n = e.toString(), r = n.toLowerCase().indexOf("e-");
+	if (r > 0) t = Math.abs(Math.floor(Math.log10(Math.abs(e)))) + r;
+	else {
+		let e = n.indexOf(".");
+		e >= 0 && (t = n.length - e);
+	}
+	return t;
+}, s = (e, t) => {
+	let n = o(t);
+	if (n <= 0) return e;
+	let r = 10 ** n;
+	return Math.round(e * r) / r;
+}, c = ({ value: e, minValue: t, maxValue: n, step: r }) => {
+	let i = (e - t) % r, a = s(Math.abs(i) * 2 >= r ? e + Math.sign(i) * (r - Math.abs(i)) : e - i, r);
+	return a < t ? a = t : a > n && (a = t + Math.floor(s((n - t) / r, r)) * r), a = s(a, r), a;
+}, l = ({ minValue: e, maxValue: t, step: n, showInBetweenSteps: r = !0, maxStops: i = a }) => {
+	if (n <= 0 || Number.isNaN(n) || t < e) return [];
+	let o = t - e, s = c({
+		value: t,
+		minValue: e,
+		maxValue: t,
+		step: n
+	}), l = (t) => ({
+		stopValue: t,
+		percent: o === 0 ? 0 : (t - e) / o
+	});
+	if (n === 1 || !r) return [l(e), l(s)];
+	let u = [], d = e;
+	for (; d <= s;) {
+		u.push(l(d));
+		let r = c({
+			value: d + n,
+			minValue: e,
+			maxValue: t,
+			step: n
+		});
+		if (r === d) break;
+		if (d = r, u.length > i) return [l(e), l(s)];
+	}
+	return u;
+}, u = ({ thumbValue: e, stopValue: t }) => t < e, d = ({ firstThumbValue: e, secondThumbValue: t, stopValue: n }) => n > e && n < t, f = ({ thumbValue: e, stopValue: t, midValue: n }) => t < n && t > e || t > n && t < e || t === n, p = ({ slider: e, midValue: t, firstThumbValue: n, secondThumbValue: r, stopValue: i }) => {
+	switch (e) {
+		case "standard": return u({
+			thumbValue: n,
+			stopValue: i
+		});
+		case "range": return d({
+			firstThumbValue: n,
+			secondThumbValue: r,
+			stopValue: i
+		});
+		case "centered": return f({
+			thumbValue: n,
+			midValue: t,
+			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 = {
+	stops: "_stops_2wvkt_2",
+	stop: "_stop_2wvkt_2"
+}, _ = ({ orientation: a, slider: o = "standard", minValue: s, maxValue: c, step: u, showInBetweenSteps: d, maxStops: f }) => {
+	let _ = i(() => {
+		let e = l({
+			minValue: s,
+			maxValue: c,
+			step: u,
+			showInBetweenSteps: d,
+			maxStops: f
+		});
+		return a === "vertical" && e.reverse(), e;
+	}, [
+		s,
+		c,
+		u,
+		d,
+		a,
+		f
+	]), v = r(t);
+	if (!v) return null;
+	let y = (s + c) / 2, b = v.getThumbValue(0), x = v.getThumbValue(1) ?? NaN, S = _.length === 2;
+	return /* @__PURE__ */ n("div", {
+		className: e(g.stops),
+		"data-orientation": a,
+		"data-slider-stops": !0,
+		children: _.map(({ stopValue: t, percent: r }) => {
+			let i = p({
+				slider: o,
+				midValue: y,
+				firstThumbValue: b,
+				secondThumbValue: x,
+				stopValue: t
+			}), s = m({
+				firstThumbValue: b,
+				secondThumbValue: x,
+				stopValue: t
+			}), c = h({
+				slider: o,
+				midValue: y,
+				stopValue: t
+			});
+			return /* @__PURE__ */ n("div", {
+				style: a === "horizontal" ? { insetInlineStart: `${r * 100}%` } : { insetBlockEnd: `${r * 100}%` },
+				"data-orientation": a,
+				className: e(g.stop),
+				"data-disabled": v.isDisabled || void 0,
+				"data-below-thumb": s || void 0,
+				"data-stop-value": t,
+				"data-in-active": i || void 0,
+				"data-hide": c || S && i || void 0,
+				"data-slider-stop": !0
+			}, t);
+		})
+	});
+};
+//#endregion
+export { _ as t };
+
+//# sourceMappingURL=SliderStops.map

package/dist/chunks/SliderStops.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderStops","names":[],"sources":["../../src/components/Input/Slider/SliderStops/core.ts","../../src/components/Input/Slider/SliderStops/sliderStops.module.css","../../src/components/Input/Slider/SliderStops/SliderStops.tsx"],"sourcesContent":["import type { SliderVariant } from \"../core\";\nimport type { CalculateStops, Stop } from \"./types\";\n\nconst DEFAULT_MAX_STOPS = 20;\n\n/**\n * React Aria style clamp.\n */\nexport const clamp = (\n    value: number,\n    min: number = -Infinity,\n    max: number = Infinity\n): number => {\n    return Math.min(Math.max(value, min), max);\n};\n\n/**\n * React Aria precision extraction.\n *\n * Handles:\n * - 0.1\n * - 0.01\n * - 1e-7\n */\nexport const getStepPrecision = (step: number): number => {\n    let precision = 0;\n\n    const stepString = step.toString();\n\n    const exponentialIndex = stepString.toLowerCase().indexOf(\"e-\");\n\n    if (exponentialIndex > 0) {\n        precision =\n            Math.abs(Math.floor(Math.log10(Math.abs(step)))) + exponentialIndex;\n    } else {\n        const pointIndex = stepString.indexOf(\".\");\n\n        if (pointIndex >= 0) {\n            precision = stepString.length - pointIndex;\n        }\n    }\n\n    return precision;\n};\n\n/**\n * React Aria style precision correction.\n */\nexport const roundToStepPrecision = (value: number, step: number): number => {\n    const precision = getStepPrecision(step);\n\n    if (precision <= 0) {\n        return value;\n    }\n\n    const pow = 10 ** precision;\n\n    return Math.round(value * pow) / pow;\n};\n\n/**\n * React Aria snap implementation.\n */\nexport const snapValueToStep = ({\n    value,\n    minValue,\n    maxValue,\n    step,\n}: {\n    value: number;\n    minValue: number;\n    maxValue: number;\n    step: number;\n}): number => {\n    const remainder = (value - minValue) % step;\n\n    let snappedValue = roundToStepPrecision(\n        Math.abs(remainder) * 2 >= step\n            ? value + Math.sign(remainder) * (step - Math.abs(remainder))\n            : value - remainder,\n        step\n    );\n\n    if (snappedValue < minValue) {\n        snappedValue = minValue;\n    } else if (snappedValue > maxValue) {\n        snappedValue =\n            minValue +\n            Math.floor(\n                roundToStepPrecision((maxValue - minValue) / step, step)\n            ) *\n                step;\n    }\n\n    snappedValue = roundToStepPrecision(snappedValue, step);\n\n    return snappedValue;\n};\n\n/**\n * Generates all valid slider stops using\n * the same stepping logic as React Aria.\n */\nexport const calcStops: CalculateStops = ({\n    minValue,\n    maxValue,\n    step,\n    showInBetweenSteps = true,\n    maxStops = DEFAULT_MAX_STOPS,\n}) => {\n    /**\n     * Invalid configuration fallback.\n     */\n    if (step <= 0 || Number.isNaN(step) || maxValue < minValue) {\n        return [];\n    }\n\n    const range = maxValue - minValue;\n\n    /**\n     * React Aria consistent last valid stop.\n     *\n     * Example:\n     * min=0\n     * max=10\n     * step=3\n     *\n     * valid values:\n     * 0 3 6 9\n     */\n    const lastStopValue = snapValueToStep({\n        value: maxValue,\n        minValue,\n        maxValue,\n        step,\n    });\n\n    const createStop = (stopValue: number): Stop => ({\n        stopValue,\n        percent: range === 0 ? 0 : (stopValue - minValue) / range,\n    });\n\n    /**\n     * Reduced stop rendering mode.\n     */\n    if (step === 1 || !showInBetweenSteps) {\n        return [createStop(minValue), createStop(lastStopValue)];\n    }\n\n    const stops: Stop[] = [];\n\n    let value = minValue;\n\n    while (value <= lastStopValue) {\n        stops.push(createStop(value));\n\n        const nextValue = snapValueToStep({\n            value: value + step,\n            minValue,\n            maxValue,\n            step,\n        });\n\n        /**\n         * Prevent infinite loops caused by\n         * floating precision edge cases.\n         */\n        if (nextValue === value) {\n            break;\n        }\n\n        value = nextValue;\n\n        /**\n         * DOM safety guard.\n         */\n        if (stops.length > maxStops) {\n            return [createStop(minValue), createStop(lastStopValue)];\n        }\n    }\n\n    return stops;\n};\n\nconst checkInActiveRangeStandardSlider = ({\n    thumbValue,\n    stopValue,\n}: {\n    thumbValue: number;\n    stopValue: number;\n}): boolean => {\n    return stopValue < thumbValue;\n};\n\nconst checkInActiveRangeRangeSlider = ({\n    firstThumbValue,\n    secondThumbValue,\n    stopValue,\n}: {\n    firstThumbValue: number;\n    secondThumbValue: number;\n    stopValue: number;\n}): boolean => {\n    return stopValue > firstThumbValue && stopValue < secondThumbValue;\n};\n\nconst checkInActiveRangeCenteredSlider = ({\n    thumbValue,\n    stopValue,\n    midValue,\n}: {\n    thumbValue: number;\n    stopValue: number;\n    midValue: number;\n}): boolean => {\n    return (\n        (stopValue < midValue && stopValue > thumbValue) ||\n        (stopValue > midValue && stopValue < thumbValue) ||\n        stopValue === midValue\n    );\n};\n\nexport const checkInActiveRange = ({\n    slider,\n    midValue,\n    firstThumbValue,\n    secondThumbValue,\n    stopValue,\n}: {\n    slider: SliderVariant;\n    midValue: number;\n    firstThumbValue: number;\n    secondThumbValue: number;\n    stopValue: number;\n}): boolean => {\n    switch (slider) {\n        case \"standard\":\n            return checkInActiveRangeStandardSlider({\n                thumbValue: firstThumbValue,\n                stopValue,\n            });\n\n        case \"range\":\n            return checkInActiveRangeRangeSlider({\n                firstThumbValue,\n                secondThumbValue,\n                stopValue,\n            });\n\n        case \"centered\":\n            return checkInActiveRangeCenteredSlider({\n                thumbValue: firstThumbValue,\n                midValue,\n                stopValue,\n            });\n    }\n};\n\nexport const checkIsBelowThumb = ({\n    firstThumbValue,\n    secondThumbValue,\n    stopValue,\n}: {\n    firstThumbValue: number;\n    secondThumbValue: number;\n    stopValue: number;\n}): boolean => {\n    return stopValue === firstThumbValue || stopValue === secondThumbValue;\n};\n\nexport const shouldHide = ({\n    slider,\n    midValue,\n    stopValue,\n}: {\n    slider: SliderVariant;\n    midValue: number;\n    stopValue: number;\n}): boolean => {\n    if (slider !== \"centered\") {\n        return false;\n    }\n\n    return stopValue === midValue;\n};\n","@layer adgytec.comps {\n    .stops {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n    }\n\n    .stop {\n        position: absolute;\n\n        &[data-orientation=\"horizontal\"] {\n            inset-block-start: 50%;\n            translate: -50% -50%;\n        }\n\n        &[data-orientation=\"vertical\"] {\n            inset-inline-start: 50%;\n            translate: -50% 50%;\n        }\n\n        inline-size: var(--md-sys-layout-space-4);\n        aspect-ratio: 1 / 1;\n\n        border-radius: var(--md-sys-shape-corner-radius-full);\n        background-color: var(--_md-slider-inactive-stop-color);\n\n        transition: background-color var(--md-sys-motion-standard-fast-spatial)\n            var(--md-sys-motion-standard-fast-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-in-active] {\n            background-color: var(--_md-slider-active-stop-color);\n        }\n\n        &[data-hide] {\n            background-color: transparent;\n        }\n\n        &[data-disabled] {\n            background-color: rgb(\n                from var(--md-sys-color-on-surface) r g b /\n                var(--md-sys-state-disabled-container)\n            );\n\n            &[data-in-active] {\n                background-color: rgb(\n                    from var(--md-sys-color-inverse-on-surface) r g b /\n                    var(--md-sys-state-disabled-content)\n                );\n            }\n\n            &[data-hide] {\n                background-color: transparent;\n            }\n        }\n\n        &[data-below-thumb] {\n            background-color: transparent;\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { useContext, useMemo } from \"react\";\nimport { SliderStateContext } from \"react-aria-components\";\nimport {\n    calcStops,\n    checkInActiveRange,\n    checkIsBelowThumb,\n    shouldHide,\n} from \"./core\";\nimport styles from \"./sliderStops.module.css\";\nimport type { SliderStopsProps } from \"./types\";\n\nexport const SliderStops: React.FC<SliderStopsProps> = ({\n    orientation,\n    slider = \"standard\",\n    minValue,\n    maxValue,\n    step,\n    showInBetweenSteps,\n    maxStops,\n}) => {\n    const stops = useMemo(() => {\n        const stops = calcStops({\n            minValue,\n            maxValue,\n            step,\n            showInBetweenSteps,\n            maxStops,\n        });\n        if (orientation === \"vertical\") {\n            stops.reverse();\n        }\n\n        return stops;\n    }, [minValue, maxValue, step, showInBetweenSteps, orientation, maxStops]);\n\n    const sliderState = useContext(SliderStateContext);\n    if (!sliderState) return null;\n\n    const midValue = (minValue + maxValue) / 2;\n    const firstThumbValue = sliderState.getThumbValue(0);\n    const secondThumbValue = sliderState.getThumbValue(1) ?? NaN;\n\n    const shouldHideActive = stops.length === 2;\n\n    return (\n        <div\n            className={clsx(styles[\"stops\"])}\n            data-orientation={orientation}\n            data-slider-stops\n        >\n            {stops.map(({ stopValue, percent }) => {\n                const inActiveRange = checkInActiveRange({\n                    slider,\n                    midValue,\n                    firstThumbValue,\n                    secondThumbValue,\n                    stopValue,\n                });\n\n                const belowThumb = checkIsBelowThumb({\n                    firstThumbValue,\n                    secondThumbValue,\n                    stopValue,\n                });\n\n                const hide = shouldHide({ slider, midValue, stopValue });\n\n                const style =\n                    orientation === \"horizontal\"\n                        ? { insetInlineStart: `${percent * 100}%` }\n                        : { insetBlockEnd: `${percent * 100}%` };\n\n                return (\n                    <div\n                        key={stopValue}\n                        style={style}\n                        data-orientation={orientation}\n                        className={clsx(styles[\"stop\"])}\n                        data-disabled={sliderState.isDisabled || undefined}\n                        data-below-thumb={belowThumb || undefined}\n                        data-stop-value={stopValue}\n                        data-in-active={inActiveRange || undefined}\n                        data-hide={\n                            hide ||\n                            (shouldHideActive && inActiveRange) ||\n                            undefined\n                        }\n                        data-slider-stop\n                    />\n                );\n            })}\n        </div>\n    );\n};\n"],"mappings":";;;;;AAGA,IAAM,IAAoB,IAqBb,KAAoB,MAAyB;CACtD,IAAI,IAAY,GAEV,IAAa,EAAK,SAAS,GAE3B,IAAmB,EAAW,YAAY,EAAE,QAAQ,IAAI;CAE9D,IAAI,IAAmB,GACnB,IACI,KAAK,IAAI,KAAK,MAAM,KAAK,MAAM,KAAK,IAAI,CAAI,CAAC,CAAC,CAAC,IAAI;MACpD;EACH,IAAM,IAAa,EAAW,QAAQ,GAAG;EAEzC,AAAI,KAAc,MACd,IAAY,EAAW,SAAS;CAExC;CAEA,OAAO;AACX,GAKa,KAAwB,GAAe,MAAyB;CACzE,IAAM,IAAY,EAAiB,CAAI;CAEvC,IAAI,KAAa,GACb,OAAO;CAGX,IAAM,IAAM,MAAM;CAElB,OAAO,KAAK,MAAM,IAAQ,CAAG,IAAI;AACrC,GAKa,KAAmB,EAC5B,UACA,aACA,aACA,cAMU;CACV,IAAM,KAAa,IAAQ,KAAY,GAEnC,IAAe,EACf,KAAK,IAAI,CAAS,IAAI,KAAK,IACrB,IAAQ,KAAK,KAAK,CAAS,KAAK,IAAO,KAAK,IAAI,CAAS,KACzD,IAAQ,GACd,CACJ;CAeA,OAbI,IAAe,IACf,IAAe,IACR,IAAe,MACtB,IACI,IACA,KAAK,MACD,GAAsB,IAAW,KAAY,GAAM,CAAI,CAC3D,IACI,IAGZ,IAAe,EAAqB,GAAc,CAAI,GAE/C;AACX,GAMa,KAA6B,EACtC,aACA,aACA,SACA,wBAAqB,IACrB,cAAW,QACT;CAIF,IAAI,KAAQ,KAAK,OAAO,MAAM,CAAI,KAAK,IAAW,GAC9C,OAAO,CAAC;CAGZ,IAAM,IAAQ,IAAW,GAanB,IAAgB,EAAgB;EAClC,OAAO;EACP;EACA;EACA;CACJ,CAAC,GAEK,KAAc,OAA6B;EAC7C;EACA,SAAS,MAAU,IAAI,KAAK,IAAY,KAAY;CACxD;CAKA,IAAI,MAAS,KAAK,CAAC,GACf,OAAO,CAAC,EAAW,CAAQ,GAAG,EAAW,CAAa,CAAC;CAG3D,IAAM,IAAgB,CAAC,GAEnB,IAAQ;CAEZ,OAAO,KAAS,IAAe;EAC3B,EAAM,KAAK,EAAW,CAAK,CAAC;EAE5B,IAAM,IAAY,EAAgB;GAC9B,OAAO,IAAQ;GACf;GACA;GACA;EACJ,CAAC;EAMD,IAAI,MAAc,GACd;EAQJ,IALA,IAAQ,GAKJ,EAAM,SAAS,GACf,OAAO,CAAC,EAAW,CAAQ,GAAG,EAAW,CAAa,CAAC;CAE/D;CAEA,OAAO;AACX,GAEM,KAAoC,EACtC,eACA,mBAKO,IAAY,GAGjB,KAAiC,EACnC,oBACA,qBACA,mBAMO,IAAY,KAAmB,IAAY,GAGhD,KAAoC,EACtC,eACA,cACA,kBAOK,IAAY,KAAY,IAAY,KACpC,IAAY,KAAY,IAAY,KACrC,MAAc,GAIT,KAAsB,EAC/B,WACA,aACA,oBACA,qBACA,mBAOW;CACX,QAAQ,GAAR;EACI,KAAK,YACD,OAAO,EAAiC;GACpC,YAAY;GACZ;EACJ,CAAC;EAEL,KAAK,SACD,OAAO,EAA8B;GACjC;GACA;GACA;EACJ,CAAC;EAEL,KAAK,YACD,OAAO,EAAiC;GACpC,YAAY;GACZ;GACA;EACJ,CAAC;CACT;AACJ,GAEa,KAAqB,EAC9B,oBACA,qBACA,mBAMO,MAAc,KAAmB,MAAc,GAG7C,KAAc,EACvB,WACA,aACA,mBAMI,MAAW,aAIR,MAAc,IAHV;;;GE5QF,KAA2C,EACpD,gBACA,YAAS,YACT,aACA,aACA,SACA,uBACA,kBACE;CACF,IAAM,IAAQ,QAAc;EACxB,IAAM,IAAQ,EAAU;GACpB;GACA;GACA;GACA;GACA;EACJ,CAAC;EAKD,OAJI,MAAgB,cAChB,EAAM,QAAQ,GAGX;CACX,GAAG;EAAC;EAAU;EAAU;EAAM;EAAoB;EAAa;CAAQ,CAAC,GAElE,IAAc,EAAW,CAAkB;CACjD,IAAI,CAAC,GAAa,OAAO;CAEzB,IAAM,KAAY,IAAW,KAAY,GACnC,IAAkB,EAAY,cAAc,CAAC,GAC7C,IAAmB,EAAY,cAAc,CAAC,KAAK,KAEnD,IAAmB,EAAM,WAAW;CAE1C,OACI,kBAAC,OAAD;EACI,WAAW,EAAK,EAAO,KAAQ;EAC/B,oBAAkB;EAClB,qBAAA;YAEC,EAAM,KAAK,EAAE,cAAW,iBAAc;GACnC,IAAM,IAAgB,EAAmB;IACrC;IACA;IACA;IACA;IACA;GACJ,CAAC,GAEK,IAAa,EAAkB;IACjC;IACA;IACA;GACJ,CAAC,GAEK,IAAO,EAAW;IAAE;IAAQ;IAAU;GAAU,CAAC;GAOvD,OACI,kBAAC,OAAD;IAEW,OAPX,MAAgB,eACV,EAAE,kBAAkB,GAAG,IAAU,IAAI,GAAG,IACxC,EAAE,eAAe,GAAG,IAAU,IAAI,GAAG;IAMvC,oBAAkB;IAClB,WAAW,EAAK,EAAO,IAAO;IAC9B,iBAAe,EAAY,cAAc,KAAA;IACzC,oBAAkB,KAAc,KAAA;IAChC,mBAAiB;IACjB,kBAAgB,KAAiB,KAAA;IACjC,aACI,KACC,KAAoB,KACrB,KAAA;IAEJ,oBAAA;GACH,GAdQ,CAcR;EAET,CAAC;CACA,CAAA;AAEb"}

package/dist/chunks/SliderThumb

@@ -0,0 +1,29 @@
+import { n as e, t } from "./SliderOutput";
+import n from "clsx";
+import { SliderThumb as r } from "react-aria-components";
+import { jsx as i } from "react/jsx-runtime";
+import '../assets/SliderThumb.css';var a = {
+	thumb: "_thumb_1e0w6_2",
+	"extra-small": "_extra-small_1e0w6_7",
+	small: "_small_1e0w6_12",
+	medium: "_medium_1e0w6_17",
+	large: "_large_1e0w6_22",
+	"extra-large": "_extra-large_1e0w6_27"
+}, o = ({ index: o = 0, orientation: s, className: c, size: l, outputRenderer: u, ...d }) => /* @__PURE__ */ i(r, {
+	index: o,
+	className: (e) => n(a.thumb, a[l], typeof c == "function" ? c(e) : c),
+	"data-orientation": s,
+	...d,
+	"data-slider-thumb": !0,
+	children: (n) => /* @__PURE__ */ i(e, {
+		value: n,
+		children: u ? typeof u == "function" ? u({
+			...n,
+			thumbIndex: o
+		}) : u : /* @__PURE__ */ i(t, { children: ({ state: e }) => e.getThumbValueLabel(o) })
+	})
+});
+//#endregion
+export { o as t };
+
+//# sourceMappingURL=SliderThumb.map