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/CalendarMenuItem.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarMenuItem","names":[],"sources":["../../src/components/Calendar/CalendarMenuItem/calendarMenuItem.module.css","../../src/components/Calendar/CalendarMenuItem/CalendarMenuItem.tsx"],"sourcesContent":["@layer adgytec.comps {\n .item {\n --_state-color: var(--_md-calendar-cell-state-layer-color,);\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 padding-block: var(--md-sys-layout-space-12);\n padding-inline-start: calc(52 * var(--dp, 1px));\n margin-inline-end: var(--md-sys-layout-space-12);\n\n color: var(--_md-calendar-cell-color);\n\n position: relative;\n\n cursor: pointer;\n\n border-end-end-radius: var(--md-sys-shape-corner-radius-extra-small);\n border-start-end-radius: var(--md-sys-shape-corner-radius-extra-small);\n outline: none;\n\n [data-selected-icon] {\n position: absolute;\n\n inset-inline-start: var(--md-sys-layout-space-12);\n inset-block-start: 50%;\n translate: 0 -50%;\n }\n\n &[data-selected] {\n color: var(--_md-calendar-menu-selected-color);\n background-color: var(--_md-calendar-menu-selected-background);\n }\n\n &[data-focus-visible] {\n z-index: 1;\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\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\n .item::before,\n .item::after {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\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 .item::after {\n background-color: var(--_state-layer-color);\n }\n\n .item[data-focus-visible]::before {\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-offset: calc(1 * 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","import clsx from \"clsx\";\nimport { ListBoxItem } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport styles from \"./calendarMenuItem.module.css\";\n\~~nexport~~ ~~const~~ CalendarMenuItem: React~~.FC<\~~n React.ComponentPropsWithRef<typeof ListBoxItem>\n> = ({ className, ...props }) => {\n return (\n <ListBoxItem\n className={(renderProps) =>\n clsx(\n styles[\"item\"],\n typography.bodyLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;~~4CCKa~~,~~KAET~~,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,CAAA,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAAwB~~,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,~~OAAvB~~,~~kBAAA~~,~~KAAA~~,~~GAAuB~~,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~IAUX~~,~~IAAA~~,EAAA,MAPM,KAAA,~~MACP~~,~~EACI~~,EAAM,~~MACN~~,EAAU,WACV,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CACF,~~IAFd~~,CAGJ,GAAC,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAGP,~~OAHO~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,KART,IAAA,~~kBAAC~~,GAAD;EACe,~~WAAA~~;EAON,~~GAED~~;CAAK,CAAA,GACX,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA,~~IAXF~~;AAWE"}
1	+ {"version":3,"file":"CalendarMenuItem","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","calendarMenuItem_module_default","CalendarMenuItem","$","className","props","t0","t1","typography","renderProps","t2","ListBoxItem"],"sources":["../../src/components/Calendar/CalendarMenuItem/calendarMenuItem.module.css","../../src/components/Calendar/CalendarMenuItem/CalendarMenuItem.tsx"],"sourcesContent":["@layer adgytec.comps {\n .item {\n --_state-color: var(--_md-calendar-cell-state-layer-color);\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 padding-block: var(--md-sys-layout-space-12);\n padding-inline-start: calc(52 * var(--dp, 1px));\n margin-inline-end: var(--md-sys-layout-space-12);\n\n color: var(--_md-calendar-cell-color);\n\n position: relative;\n\n cursor: pointer;\n\n border-end-end-radius: var(--md-sys-shape-corner-radius-extra-small);\n border-start-end-radius: var(--md-sys-shape-corner-radius-extra-small);\n outline: none;\n\n [data-selected-icon] {\n position: absolute;\n\n inset-inline-start: var(--md-sys-layout-space-12);\n inset-block-start: 50%;\n translate: 0 -50%;\n }\n\n &[data-selected] {\n color: var(--_md-calendar-menu-selected-color);\n background-color: var(--_md-calendar-menu-selected-background);\n }\n\n &[data-focus-visible] {\n z-index: 1;\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\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\n .item::before,\n .item::after {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\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 .item::after {\n background-color: var(--_state-layer-color);\n }\n\n .item[data-focus-visible]::before {\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-offset: calc(1 * 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","import clsx from \"clsx\";\nimport { ListBoxItem } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport styles from \"./calendarMenuItem.module.css\";\n\n/*\n Props for the {@link CalendarMenuItem} component.\n * Extends React Aria's {@link ListBoxItem} props.\n /\nexport interface CalendarMenuItemProps\n extends React.ComponentPropsWithRef<typeof ListBoxItem> {}\n\n/\n An individual selectable item within the calendar month and year picker menus.\n \n Implements Material Design 3 selection styles, focus outlines, and typography.\n */\nexport const CalendarMenuItem: React.FC<CalendarMenuItemProps> = ({\n className,\n ...props\n}) => {\n return (\n <ListBoxItem\n className={(renderProps) =>\n clsx(\n styles[\"item\"],\n typography.bodyLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;4CCiBaO,KAAoD,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGhE,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHiE,eAAA,GAAAE,KAAAC,GAGjE,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAUgB,IAAAD,EAAA,MAPM,KAAA,MACPP,EACIC,EAAM,MACNW,EAAU,WACV,OAAOJ,KAAc,aACfA,EAAUK,CACF,IAFdL,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAG;CAGP,OAHOP,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KART,IAAA,kBAACI,GAAD;EACe,WAAAJ;EAON,GAEDF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAG,KAAA,IAAAP,EAAA,IAXFO;AAWE"}

package/dist/chunks/Card.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card","names":["renderProps"],"sources":["../../src/components/Card/Card/card.module.css","../../src/components/Card/Card/Card.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-card-background\n* --md-card-icon-color\n* --md-card-elevation\n* --md-card-outline\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .card {\n --_md-card-background: var(\n --md-card-background,\n var(--_md-card-background-default)\n );\n --_md-card-icon-color: var(\n --md-card-icon-color,\n var(--md-sys-color-primary)\n );\n\n --_md-card-elevation: var(\n --md-card-elevation,\n var(--_md-card-elevation-default, var(--md-sys-elevation-shadow-0))\n );\n\n --md-card-shape: var(--md-sys-shape-corner-radius-medium);\n --md-card-padding: var(--md-sys-layout-space-16);\n\n / state layer /\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 / variable to use /\n --_background-color: var(--_md-card-background);\n --_shadow: var(--_md-card-elevation);\n\n border-radius: var(--md-card-shape);\n background-color: var(--_background-color);\n color: var(--_color);\n\n position: relative;\n overflow: clip;\n\n box-shadow: var(--_shadow);\n\n transition: box-shadow 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-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n --_shadow: var(--md-sys-elevation-shadow-1);\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-dragging] {\n --_state-layer-opacity: var(--md-sys-state-dragged);\n --_shadow: var(--md-sys-elevation-shadow-3);\n }\n\n &[data-disabled] {\n --_background-color: rgb(\n from var(--md-sys-color-surface) r g b /\n var(--md-sys-state-disabled-content)\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 --_state-layer-color: var(--_background-color);\n }\n }\n\n / state layer /\n .card::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 .card[data-focus-visible] {\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 z-index: 1;\n }\n\n .elevated {\n --_md-card-elevation-default: var(--md-sys-elevation-shadow-1);\n --_md-card-background-default: var(\n --md-sys-color-surface-container-low\n );\n\n &[data-hovered] {\n --_shadow: var(--md-sys-elevation-shadow-2);\n }\n\n &[data-dragging] {\n --_shadow: var(--md-sys-elevation-shadow-4);\n }\n }\n\n .filled {\n --_md-card-background-default: var(\n --md-sys-color-surface-container-highest\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 }\n\n .outlined {\n --_md-card-outline: var(\n --md-card-outline,\n var(--md-sys-color-outline-variant)\n );\n\n --_md-card-background-default: var(--md-sys-color-surface);\n\n /* variables to use */\n --_outline-color: var(--_md-card-outline);\n --_outline-width: var(--md-sys-shape-border-width-thin);\n\n border: var(--_outline-width) solid var(--_outline-color);\n\n &[data-focus-visible] {\n --_outline-color: var(--md-sys-color-on-surface);\n }\n\n &[data-disabled] {\n --_outline-color: rgb(\n from var(--md-sys-color-outline) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n}\n","import clsx from \"clsx\";\nimport { GridListItem } from \"react-aria-components\";\nimport { Splash, useSplash } from \"@/components/Splash\";\nimport styles from \"./card.module.css\";\nimport type { CardProps } from \"./types\";\n\nexport const Card: React.FC<CardProps> = ({\n variant = \"filled\",\n className,\n onPress,\n children,\n ...props\n}) => {\n const { handlePress, splashInfo } = useSplash(onPress);\n\n return (\n <GridListItem\n className={(renderProps) =>\n clsx(\n styles[\"card\"],\n styles[variant],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n onPress={handlePress}\n {...props}\n >\n {(renderProps) => {\n return (\n <>\n {splashInfo && <Splash {...splashInfo} />}\n {typeof children === \"function\"\n ? children(renderProps)\n : children}\n </>\n );\n }}\n </GridListItem>\n );\n};\n"],"mappings":";;;;;;;;;~~GCMa~~,KAA6B,EACtC,aAAU,UACV,cACA,YACA,aACA,~~GAAG~~,QACD;CACF,IAAM,EAAE,gBAAa,~~kBAAe~~,~~EAAU~~,CAAO;CAErD,OACI,~~kBAAC~~,GAAD;EACI,YAAY,~~MACR~~,~~EACI~~,~~EAAO~~,~~MACP~~,~~EAAO~~,IACP,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CAAW,~~IACrB~~,CACV;EAEJ,~~SAAS~~;EACT,~~GAAI~~;~~aAEFA~~,MAEM,~~kBAAA~~,GAAA,EAAA,UAAA,~~CACK~~,KAAc,~~kBAAC~~,GAAD,EAAQ,~~GAAI~~,EAAW,CAAA,GACrC,~~OAAO~~,KAAa,~~aACf~~,~~EAASA~~,CAAW,~~IACpB~~,CACV,EAAA,CAAA;CAGE,CAAA;AAEtB"}
1	+ {"version":3,"file":"Card","names":["renderProps","clsx","styles","_Fragment","Splash","clsx$1","card_module_default","Card","props","useSplash","onPress","GridListItem","\"card\"","variant","className","renderProps","handlePress","Fragment","splashInfo","children","renderProps_0"],"sources":["../../src/components/Card/Card/card.module.css","../../src/components/Card/Card/Card.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-card-background\n* --md-card-icon-color\n* --md-card-elevation\n* --md-card-outline\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .card {\n --_md-card-background: var(\n --md-card-background,\n var(--_md-card-background-default)\n );\n --_md-card-icon-color: var(\n --md-card-icon-color,\n var(--md-sys-color-primary)\n );\n\n --_md-card-elevation: var(\n --md-card-elevation,\n var(--_md-card-elevation-default, var(--md-sys-elevation-shadow-0))\n );\n\n --md-card-shape: var(--md-sys-shape-corner-radius-medium);\n --md-card-padding: var(--md-sys-layout-space-16);\n\n / state layer /\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 / variable to use /\n --_background-color: var(--_md-card-background);\n --_shadow: var(--_md-card-elevation);\n\n border-radius: var(--md-card-shape);\n background-color: var(--_background-color);\n color: var(--_color);\n\n position: relative;\n overflow: clip;\n\n box-shadow: var(--_shadow);\n\n transition: box-shadow 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-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n --_shadow: var(--md-sys-elevation-shadow-1);\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-dragging] {\n --_state-layer-opacity: var(--md-sys-state-dragged);\n --_shadow: var(--md-sys-elevation-shadow-3);\n }\n\n &[data-disabled] {\n --_background-color: rgb(\n from var(--md-sys-color-surface) r g b /\n var(--md-sys-state-disabled-content)\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 --_state-layer-color: var(--_background-color);\n }\n }\n\n / state layer /\n .card::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 .card[data-focus-visible] {\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 z-index: 1;\n }\n\n .elevated {\n --_md-card-elevation-default: var(--md-sys-elevation-shadow-1);\n --_md-card-background-default: var(\n --md-sys-color-surface-container-low\n );\n\n &[data-hovered] {\n --_shadow: var(--md-sys-elevation-shadow-2);\n }\n\n &[data-dragging] {\n --_shadow: var(--md-sys-elevation-shadow-4);\n }\n }\n\n .filled {\n --_md-card-background-default: var(\n --md-sys-color-surface-container-highest\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 }\n\n .outlined {\n --_md-card-outline: var(\n --md-card-outline,\n var(--md-sys-color-outline-variant)\n );\n\n --_md-card-background-default: var(--md-sys-color-surface);\n\n /* variables to use /\n --_outline-color: var(--_md-card-outline);\n --_outline-width: var(--md-sys-shape-border-width-thin);\n\n border: var(--_outline-width) solid var(--_outline-color);\n\n &[data-focus-visible] {\n --_outline-color: var(--md-sys-color-on-surface);\n }\n\n &[data-disabled] {\n --_outline-color: rgb(\n from var(--md-sys-color-outline) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n}\n","import clsx from \"clsx\";\nimport { GridListItem } from \"react-aria-components\";\nimport { Splash, useSplash } from \"@/components/Splash\";\nimport styles from \"./card.module.css\";\nimport type { CardProps } from \"./types\";\n\n/\n A card container component implementing Material Design 3 Card guidelines.\n \n Cards contain content and actions about a single subject. They present information\n * in a structured format and support three visual variants (`\"filled\"`, `\"elevated\"`, `\"outlined\"`),\n * interactive press states with touch ripple feedback via {@link Splash}, keyboard navigation,\n * and accessible focus management built on top of React Aria's `GridListItem`.\n \n @example\n * ```tsx\n * import { Card, CardIcon } from '@adgytec/web-ui-components';\n * import { Bell } from 'lucide-react';\n \n <Card variant=\"elevated\" onPress={() => console.log('Card clicked')}>\n * <CardIcon icon={Bell} />\n * <h3>Notifications</h3>\n * <p>Manage your alert preferences.</p>\n * </Card>\n * ```\n */\nexport const Card: React.FC<CardProps> = ({\n variant = \"filled\",\n className,\n onPress,\n children,\n ...props\n}) => {\n const { handlePress, splashInfo } = useSplash(onPress);\n\n return (\n <GridListItem\n className={(renderProps) =>\n clsx(\n styles[\"card\"],\n styles[variant],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n onPress={handlePress}\n {...props}\n >\n {(renderProps) => {\n return (\n <>\n {splashInfo && <Splash {...splashInfo} />}\n {typeof children === \"function\"\n ? children(renderProps)\n : children}\n </>\n );\n }}\n </GridListItem>\n );\n};\n"],"mappings":";;;;;;;;;GC0BaO,KAA6B,EACtC,aAAU,UACV,cACA,YACA,aACA,GAAGC,QACD;CACF,IAAM,EAAE,gBAAa,kBAAeC,EAAUC,CAAO;CAErD,OACI,kBAACC,GAAD;EACI,YAAY,MACRV,EACIC,EAAOU,MACPV,EAAOW,IACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;EAEJ,SAASE;EACT,GAAIR;EAEFR,WAAAA,MAEM,kBAAAG,GAAA,EAAA,UAAA,CACKe,KAAc,kBAACd,GAAD,EAAQ,GAAIc,EAAW,CAAA,GACrC,OAAOC,KAAa,aACfA,EAASnB,CAAW,IACpBmB,CACV,EAAA,CAAA;CAGE,CAAA;AAEtB"}

package/dist/chunks/CardIcon.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardIcon","names":["icon","CardIconSize"],"sources":["../../src/components/Card/CardIcon/cardIcon.module.css","../../src/components/Card/CardIcon/CardIcon.tsx"],"sourcesContent":["@layer adgytec.comps {\n .icon {\n color: var(--_md-card-icon-color);\n }\n}\n","import { clsx } from \"clsx\";\nimport { Icon } from \"@/components/Icon\";\nimport { CardIconSize } from \"../Card/types\";\nimport styles from \"./cardIcon.module.css\";\n\~~nexport~~ ~~const~~ CardIcon: ~~React.FC<\~~n Omit<React.ComponentPropsWithRef<typeof Icon>, \"size\" \| \"withText\">\n> = ({ icon, ...props }) => {\n return (\n <Icon\n icon={icon}\n size={CardIconSize}\n className={clsx(styles[\"icon\"])}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;~~4CCKa~~,~~KAET~~,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,CAAA,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,KAAmB,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,OAAlB,~~aAAA~~,~~KAAA~~,GAAkB,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,OAAA,OAAA,IAAA,2BAAA,~~KAKA~~,~~IAAA~~,~~EAAK~~,EAAM,IAAQ,GAAC,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA;CAAA,~~IAAA~~;CAEjC,~~OAFiC~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,KAHnC,IAAA,~~kBAAC~~,GAAD;EACU;~~EACAC~~,MAAAA;EACK,~~WAAA~~;EAAoB,~~GAC3B~~;CAAK,CAAA,GACX,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA,~~IALF~~;AAKE"}
1	+ {"version":3,"file":"CardIcon","names":["icon","CardIconSize","_c","styles","require_compiler_runtime","import_compiler_runtime","cardIcon_module_default","CardIcon","$","icon","props","t0","t1","clsx","t2","Icon"],"sources":["../../src/components/Card/CardIcon/cardIcon.module.css","../../src/components/Card/CardIcon/CardIcon.tsx"],"sourcesContent":["@layer adgytec.comps {\n .icon {\n color: var(--_md-card-icon-color);\n }\n}\n","import { clsx } from \"clsx\";\nimport { Icon } from \"@/components/Icon\";\nimport { CardIconSize } from \"../Card/types\";\nimport styles from \"./cardIcon.module.css\";\n\n/*\n Props for the {@link CardIcon} component.\n * Extends {@link Icon} props while omitting `size` and `withText`, which are pre-configured\n * specifically for cards.\n /\nexport interface CardIconProps\n extends Omit<\n React.ComponentPropsWithRef<typeof Icon>,\n \"size\" \| \"withText\"\n > {}\n\n/\n A styled icon component designed specifically for placement inside a {@link Card}.\n \n Automatically standardizes the icon size to 24px ({@link CardIconSize}) and applies\n * theme-aware icon coloring (`--_md-card-icon-color`).\n \n @example\n * ```tsx\n * import { Card, CardIcon } from '@adgytec/web-ui-components';\n * import { Sparkles } from 'lucide-react';\n \n <Card>\n * <CardIcon icon={Sparkles} />\n * <span>Featured Content</span>\n * </Card>\n * ```\n */\nexport const CardIcon: React.FC<CardIconProps> = ({ icon, ...props }) => {\n return (\n <Icon\n icon={icon}\n size={CardIconSize}\n className={clsx(styles[\"icon\"])}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;4CCiCaO,KAAoC,MAAA;CAAA,IAAAC,KAAA,GAAAN,EAAAA,EAAAA,CAAA,CAAA,GAAAO,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAAmB,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAAlB,UAAA,GAAAE,KAAAC,GAAkB,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAA,OAAA,IAAA,2BAAA,KAK7C,IAAAK,EAAKV,EAAM,IAAQ,GAAC,EAAA,KAAAS,KAAA,IAAAJ,EAAA;CAAA,IAAAM;CAEjC,OAFiCN,EAAA,OAAAC,KAAAD,EAAA,OAAAE,KAHnC,IAAA,kBAACK,GAAD;EACU;EACAd,MAAAA;EACK,WAAAW;EAAoB,GAC3BF;CAAK,CAAA,GACX,EAAA,KAAAD,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAI,KAAA,IAAAN,EAAA,IALFM;AAKE"}

package/dist/chunks/CenteredSlider.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CenteredSlider","names":[],"sources":["../../src/components/Input/Slider/CenteredSlider/centerdSlider.module.css","../../src/components/Input/Slider/CenteredSlider/CenteredSlider.tsx"],"sourcesContent":["@layer adgytec.overrides {\n .inactive-track {\n position: relative;\n\n &[data-orientation=\"horizontal\"] {\n --_inline-size: var(--_range-gap-half);\n --_block-size: var(--_md-slider-track-size);\n }\n\n &[data-orientation=\"vertical\"] {\n --_block-size: var(--_range-gap-half);\n --_inline-size: var(--_md-slider-track-size);\n }\n\n &:not([data-active-direction]):not([data-mid]) {\n &::before,\n &:not([data-disabled])::after {\n content: \"\";\n position: absolute;\n\n inline-size: var(--_inline-size);\n block-size: var(--_block-size);\n\n background-color: inherit;\n }\n\n &[data-track=\"start\"] {\n &[data-orientation=\"horizontal\"] {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n\n &::before {\n inset-inline-end: 0;\n translate: 100%;\n\n border-start-end-radius: var(\n --_md-slider-track-inner-shape\n );\n border-end-end-radius: var(\n --_md-slider-track-inner-shape\n );\n }\n\n &::after {\n inset-inline-end: 0;\n translate: 50%;\n }\n }\n\n &[data-orientation=\"vertical\"] {\n border-start-end-radius: 0;\n border-start-start-radius: 0;\n\n &::before {\n inset-block-start: 0;\n translate: 0 -100%;\n\n border-start-end-radius: var(\n --_md-slider-track-inner-shape\n );\n border-start-start-radius: var(\n --_md-slider-track-inner-shape\n );\n }\n\n &::after {\n inset-block-start: 0;\n translate: 0 -50%;\n }\n }\n }\n\n &[data-track=\"end\"] {\n &[data-orientation=\"horizontal\"] {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n\n &::before {\n inset-inline-start: 0;\n translate: -100%;\n\n border-start-start-radius: var(\n --_md-slider-track-inner-shape\n );\n border-end-start-radius: var(\n --_md-slider-track-inner-shape\n );\n }\n\n &::after {\n inset-inline-start: 0;\n translate: -50%;\n }\n }\n\n &[data-orientation=\"vertical\"] {\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n\n &::before {\n inset-block-end: 0;\n translate: 0 100%;\n\n border-end-end-radius: var(\n --_md-slider-track-inner-shape\n );\n border-end-start-radius: var(\n --_md-slider-track-inner-shape\n );\n }\n\n &::after {\n inset-block-end: 0;\n translate: 0 50%;\n }\n }\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Slider as AriaSlider, SliderTrack } from \"react-aria-components\";\nimport { Label } from \"../../Label\";\nimport {\n ActiveTrackStyles,\n InactiveTrackStyles,\n SliderColors,\n SliderSizeStyles,\n SliderStyles,\n TrackContainerStyles,\n TrackStyles,\n VisualTrackStyles,\n} from \"../core\";\nimport { SliderStops } from \"../SliderStops\";\nimport { SliderThumb } from \"../SliderThumb\";\nimport styles from \"./centerdSlider.module.css\";\nimport type { CenteredSliderProps } from \"./types\";\n\nexport const CenteredSlider = <T extends number>({\n label,\n thumbLabel,\n size = \"small\",\n minValue = 0,\n maxValue = 100,\n step = 1,\n defaultValue = ((minValue + maxValue) / 2) as T,\n showInBetweenSteps,\n maxStops,\n outputRenderer,\n className,\n ...props\n}: CenteredSliderProps<T>) => {\n return (\n <AriaSlider\n minValue={minValue}\n maxValue={maxValue}\n step={step}\n defaultValue={defaultValue}\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 const sizeKey =\n orientation === \"horizontal\" ? \"inlineSize\" : \"blockSize\";\n\n const center = 0.5;\n\n const mid = Math.abs(thumbValue - center) * 100;\n const start = Math.min(thumbValue, center) * 100;\n const end = Math.min(1 - thumbValue, center) * 100;\n\n const activeDirection =\n thumbValue < 0.5\n ? \"start\"\n : thumbValue > 0.5\n ? \"end\"\n : undefined;\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(VisualTrackStyles)}\n data-orientation={orientation}\n >\n <div\n className={clsx(\n InactiveTrackStyles,\n styles[\"inactive-track\"]\n )}\n data-active-direction={\n activeDirection === \"start\" \|\|\n undefined\n }\n data-track=\"start\"\n data-orientation={orientation}\n data-mid={\n thumbValue === center \|\| undefined\n }\n data-disabled={isDisabled \|\| undefined}\n style={{\n [sizeKey]: `${start}%`,\n }}\n />\n\n <div\n className={clsx(ActiveTrackStyles)}\n data-orientation={orientation}\n data-track=\"mid\"\n data-disabled={isDisabled \|\| undefined}\n style={{\n [sizeKey]: `${mid}%`,\n }}\n >\n <div data-direction={activeDirection} />\n </div>\n\n <div\n className={clsx(\n InactiveTrackStyles,\n styles[\"inactive-track\"]\n )}\n data-orientation={orientation}\n data-track=\"end\"\n data-active-direction={\n activeDirection === \"end\" \|\|\n undefined\n }\n data-mid={\n thumbValue === center \|\| undefined\n }\n data-disabled={isDisabled \|\| undefined}\n style={{\n [sizeKey]: `${end}%`,\n }}\n />\n </div>\n\n <SliderThumb\n size={size}\n orientation={orientation}\n aria-label={thumbLabel}\n outputRenderer={outputRenderer}\n />\n\n <SliderStops\n slider=\"centered\"\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":";;;;;;;;yDCkBa,KAAoC,EAC7C,UACA,eACA,UAAO,SACP,cAAW,GACX,cAAW,KACX,UAAO,GACP,mBAAiB,IAAW,KAAY,GACxC,uBACA,aACA,mBACA,cACA,GAAG,QAGC,kBAAC,GAAD;CACc;CACA;CACJ;CACQ;CACd,YAAY,MACR,EACI,GACA,GACA,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;YAEF,EAAE,gBAAa,UAAO,oBAAiB;EACrC,IAAM,IAAa,EAAM,gBAAgB,CAAC,GACpC,IACF,MAAgB,eAAe,eAAe,aAE5C,IAAS,IAET,IAAM,KAAK,IAAI,IAAa,CAAM,IAAI,KACtC,IAAQ,KAAK,IAAI,GAAY,CAAM,IAAI,KACvC,IAAM,KAAK,IAAI,IAAI,GAAY,CAAM,IAAI,KAEzC,IACF,IAAa,KACP,UACA,IAAa,KACX,QACA,KAAA;EAEZ,OACI,kBAAA,GAAA,EAAA,UAAA,CACK,KAAS,kBAAC,GAAD,EAAA,UAAQ,EAAa,CAAA,GAE/B,kBAAC,OAAD;GACI,WAAW,EAAK,CAAoB;GACpC,oBAAkB;aAElB,kBAAC,GAAD;IACI,WAAW,EACP,GACA,EAAiB,CAAI,CACzB;cAJJ;KAMI,kBAAC,OAAD;MACI,WAAW,EAAK,CAAiB;MACjC,oBAAkB;gBAFtB;OAII,kBAAC,OAAD;QACI,WAAW,EACP,GACA,EAAO,iBACX;QACA,yBACI,MAAoB,WACpB,KAAA;QAEJ,cAAW;QACX,oBAAkB;QAClB,YACI,MAAe,KAAU,KAAA;QAE7B,iBAAe,KAAc,KAAA;QAC7B,OAAO,GACF,IAAU,GAAG,EAAK,GACvB;OAAE,CAAA;OAGN,kBAAC,OAAD;QACI,WAAW,EAAK,CAAiB;QACjC,oBAAkB;QAClB,cAAW;QACX,iBAAe,KAAc,KAAA;QAC7B,OAAO,GACF,IAAU,GAAG,EAAG,GACrB;kBAEA,kBAAC,OAAD,EAAK,kBAAgB,EAAgB,CAAA;OACpC,CAAA;OAEL,kBAAC,OAAD;QACI,WAAW,EACP,GACA,EAAO,iBACX;QACA,oBAAkB;QAClB,cAAW;QACX,yBACI,MAAoB,SACpB,KAAA;QAEJ,YACI,MAAe,KAAU,KAAA;QAE7B,iBAAe,KAAc,KAAA;QAC7B,OAAO,GACF,IAAU,GAAG,EAAG,GACrB;OAAE,CAAA;MAEL;;KAEL,kBAAC,GAAD;MACU;MACO;MACb,cAAY;MACI;KAAe,CAAA;KAGnC,kBAAC,GAAD;MACI,QAAO;MACG;MACA;MACJ;MACO;MACO;MACV;KAAS,CAAA;IAEd;;EACZ,CAAA,CACT,EAAA,CAAA;CAER;AACQ,CAAA"}
1	+ {"version":3,"file":"CenteredSlider","names":["AriaSlider","clsx","_Fragment","Label","styles","SliderThumb","Label$1","SliderStyles","SliderColors","SliderSizeStyles","InactiveTrackStyles","TrackContainerStyles","VisualTrackStyles","ActiveTrackStyles","SliderStops","SliderThumb$1","clsx$1","centerdSlider_module_default","CenteredSlider","minValue","maxValue","props","Slider","className","renderProps","thumbValue","state","sizeKey","orientation","center","mid","start","end","activeDirection","Fragment","label","SliderTrack","TrackStyles","size","isDisabled","thumbLabel"],"sources":["../../src/components/Input/Slider/CenteredSlider/centerdSlider.module.css","../../src/components/Input/Slider/CenteredSlider/CenteredSlider.tsx"],"sourcesContent":["@layer adgytec.overrides {\n .inactive-track {\n position: relative;\n\n &[data-orientation=\"horizontal\"] {\n --_inline-size: var(--_range-gap-half);\n --_block-size: var(--_md-slider-track-size);\n }\n\n &[data-orientation=\"vertical\"] {\n --_block-size: var(--_range-gap-half);\n --_inline-size: var(--_md-slider-track-size);\n }\n\n &:not([data-active-direction]):not([data-mid]) {\n &::before,\n &:not([data-disabled])::after {\n content: \"\";\n position: absolute;\n\n inline-size: var(--_inline-size);\n block-size: var(--_block-size);\n\n background-color: inherit;\n }\n\n &[data-track=\"start\"] {\n &[data-orientation=\"horizontal\"] {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n\n &::before {\n inset-inline-end: 0;\n translate: 100%;\n\n border-start-end-radius: var(\n --_md-slider-track-inner-shape\n );\n border-end-end-radius: var(\n --_md-slider-track-inner-shape\n );\n }\n\n &::after {\n inset-inline-end: 0;\n translate: 50%;\n }\n }\n\n &[data-orientation=\"vertical\"] {\n border-start-end-radius: 0;\n border-start-start-radius: 0;\n\n &::before {\n inset-block-start: 0;\n translate: 0 -100%;\n\n border-start-end-radius: var(\n --_md-slider-track-inner-shape\n );\n border-start-start-radius: var(\n --_md-slider-track-inner-shape\n );\n }\n\n &::after {\n inset-block-start: 0;\n translate: 0 -50%;\n }\n }\n }\n\n &[data-track=\"end\"] {\n &[data-orientation=\"horizontal\"] {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n\n &::before {\n inset-inline-start: 0;\n translate: -100%;\n\n border-start-start-radius: var(\n --_md-slider-track-inner-shape\n );\n border-end-start-radius: var(\n --_md-slider-track-inner-shape\n );\n }\n\n &::after {\n inset-inline-start: 0;\n translate: -50%;\n }\n }\n\n &[data-orientation=\"vertical\"] {\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n\n &::before {\n inset-block-end: 0;\n translate: 0 100%;\n\n border-end-end-radius: var(\n --_md-slider-track-inner-shape\n );\n border-end-start-radius: var(\n --_md-slider-track-inner-shape\n );\n }\n\n &::after {\n inset-block-end: 0;\n translate: 0 50%;\n }\n }\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Slider as AriaSlider, SliderTrack } from \"react-aria-components\";\nimport { Label } from \"../../Label\";\nimport {\n ActiveTrackStyles,\n InactiveTrackStyles,\n SliderColors,\n SliderSizeStyles,\n SliderStyles,\n TrackContainerStyles,\n TrackStyles,\n VisualTrackStyles,\n} from \"../core\";\nimport { SliderStops } from \"../SliderStops\";\nimport { SliderThumb } from \"../SliderThumb\";\nimport styles from \"./centerdSlider.module.css\";\nimport type { CenteredSliderProps } from \"./types\";\n\n/*\n Material Design 3 centered slider component.\n \n Visualizes deviation from a central neutral point (the midpoint between `minValue` and `maxValue`).\n * The active track fills outward from the center towards the thumb in either direction,\n * making it ideal for balance, pan, exposure, or plus/minus adjustments.\n \n @example\n * ```tsx\n * import { CenteredSlider } from \"@adgytec/web-ui-components\";\n \n <CenteredSlider\n * label=\"Stereo Balance\"\n * minValue={-50}\n * maxValue={50}\n * defaultValue={0}\n * step={5}\n * showInBetweenSteps\n * thumbLabel=\"Balance\"\n * />\n * ```\n /\nexport const CenteredSlider = <T extends number>({\n label,\n thumbLabel,\n size = \"small\",\n minValue = 0,\n maxValue = 100,\n step = 1,\n defaultValue = ((minValue + maxValue) / 2) as T,\n showInBetweenSteps,\n maxStops,\n outputRenderer,\n className,\n ...props\n}: CenteredSliderProps<T>) => {\n return (\n <AriaSlider\n minValue={minValue}\n maxValue={maxValue}\n step={step}\n defaultValue={defaultValue}\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 const sizeKey =\n orientation === \"horizontal\" ? \"inlineSize\" : \"blockSize\";\n\n const center = 0.5;\n\n const mid = Math.abs(thumbValue - center) 100;\n const start = Math.min(thumbValue, center) * 100;\n const end = Math.min(1 - thumbValue, center) * 100;\n\n const activeDirection =\n thumbValue < 0.5\n ? \"start\"\n : thumbValue > 0.5\n ? \"end\"\n : undefined;\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(VisualTrackStyles)}\n data-orientation={orientation}\n >\n <div\n className={clsx(\n InactiveTrackStyles,\n styles[\"inactive-track\"]\n )}\n data-active-direction={\n activeDirection === \"start\" \|\|\n undefined\n }\n data-track=\"start\"\n data-orientation={orientation}\n data-mid={\n thumbValue === center \|\| undefined\n }\n data-disabled={isDisabled \|\| undefined}\n style={{\n [sizeKey]: `${start}%`,\n }}\n />\n\n <div\n className={clsx(ActiveTrackStyles)}\n data-orientation={orientation}\n data-track=\"mid\"\n data-disabled={isDisabled \|\| undefined}\n style={{\n [sizeKey]: `${mid}%`,\n }}\n >\n <div data-direction={activeDirection} />\n </div>\n\n <div\n className={clsx(\n InactiveTrackStyles,\n styles[\"inactive-track\"]\n )}\n data-orientation={orientation}\n data-track=\"end\"\n data-active-direction={\n activeDirection === \"end\" \|\|\n undefined\n }\n data-mid={\n thumbValue === center \|\| undefined\n }\n data-disabled={isDisabled \|\| undefined}\n style={{\n [sizeKey]: `${end}%`,\n }}\n />\n </div>\n\n <SliderThumb\n size={size}\n orientation={orientation}\n aria-label={thumbLabel}\n outputRenderer={outputRenderer}\n />\n\n <SliderStops\n slider=\"centered\"\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":";;;;;;;;yDCwCakB,KAAoC,EAC7C,UACA,eACA,UAAO,SACP,cAAW,GACX,cAAW,KACX,UAAO,GACP,mBAAiBC,IAAWC,KAAY,GACxC,uBACA,aACA,mBACA,cACA,GAAGC,QAGC,kBAACrB,GAAD;CACc;CACA;CACJ;CACQ;CACd,YAAY,MACRC,EACIM,GACAC,GACA,OAAOe,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAIF;CAEF,WAAA,EAAE,gBAAa,UAAO,oBAAiB;EACrC,IAAMI,IAAaC,EAAM,gBAAgB,CAAC,GACpCC,IACFC,MAAgB,eAAe,eAAe,aAE5CC,IAAS,IAETC,IAAM,KAAK,IAAIL,IAAaI,CAAM,IAAI,KACtCE,IAAQ,KAAK,IAAIN,GAAYI,CAAM,IAAI,KACvCG,IAAM,KAAK,IAAI,IAAIP,GAAYI,CAAM,IAAI,KAEzCI,IACFR,IAAa,KACP,UACAA,IAAa,KACX,QACA,KAAA;EAEZ,OACI,kBAAAvB,GAAA,EAAA,UAAA,CACKiC,KAAS,kBAAChC,GAAD,EAAA,UAAQgC,EAAa,CAAA,GAE/B,kBAAC,OAAD;GACI,WAAWlC,EAAKU,CAAoB;GACpC,oBAAkBiB;GAElB,UAAA,kBAACQ,GAAD;IACI,WAAWnC,EACPoC,GACA5B,EAAiB6B,CAAI,CACzB;IAJJ,UAAA;KAMI,kBAAC,OAAD;MACI,WAAWrC,EAAKW,CAAiB;MACjC,oBAAkBgB;MAFtB,UAAA;OAII,kBAAC,OAAD;QACI,WAAW3B,EACPS,GACAN,EAAO,iBACX;QACA,yBACI6B,MAAoB,WACpB,KAAA;QAEJ,cAAW;QACX,oBAAkBL;QAClB,YACIH,MAAeI,KAAU,KAAA;QAE7B,iBAAeU,KAAc,KAAA;QAC7B,OAAO,GACFZ,IAAU,GAAGI,EAAK,GACvB;OAAE,CAAA;OAGN,kBAAC,OAAD;QACI,WAAW9B,EAAKY,CAAiB;QACjC,oBAAkBe;QAClB,cAAW;QACX,iBAAeW,KAAc,KAAA;QAC7B,OAAO,GACFZ,IAAU,GAAGG,EAAG,GACrB;QAEA,UAAA,kBAAC,OAAD,EAAK,kBAAgBG,EAAgB,CAAA;OACpC,CAAA;OAEL,kBAAC,OAAD;QACI,WAAWhC,EACPS,GACAN,EAAO,iBACX;QACA,oBAAkBwB;QAClB,cAAW;QACX,yBACIK,MAAoB,SACpB,KAAA;QAEJ,YACIR,MAAeI,KAAU,KAAA;QAE7B,iBAAeU,KAAc,KAAA;QAC7B,OAAO,GACFZ,IAAU,GAAGK,EAAG,GACrB;OAAE,CAAA;MAEL;;KAEL,kBAAC3B,GAAD;MACU;MACO;MACb,cAAYmC;MACI;KAAe,CAAA;KAGnC,kBAAC1B,GAAD;MACI,QAAO;MACG;MACA;MACJ;MACO;MACO;MACV;KAAS,CAAA;IAEd;;EACZ,CAAA,CACT,EAAA,CAAA;CAER;AACQ,CAAA"}

package/dist/chunks/ComboBox.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox","names":["renderProps"],"sources":["../../src/components/Input/Select/ComboBox/comboBox.module.css","../../src/components/Input/Select/ComboBox/ComboBox.tsx"],"sourcesContent":["@layer adgytec.comps {\n .selected-value {\n color: var(--editor-color);\n\n padding-inline-start: var(--md-sys-layout-space-16);\n padding-inline-end: var(--md-sys-layout-space-12);\n\n &[data-placeholder] {\n color: var(--placeholder-color);\n display: none;\n }\n }\n\n .tag-list {\n display: flex;\n gap: var(--md-sys-layout-space-8);\n\n flex-wrap: wrap;\n }\n}\n","import clsx from \"clsx\";\nimport {\n ComboBox as AriaComboBox,\n ComboBoxValue,\n TagGroup,\n TagList,\n} from \"react-aria-components\";\nimport { Tag } from \"@/components/Tag\";\nimport { typography } from \"@/utils\";\nimport { Colors, InputGroupStyles, SupportingTextStyles } from \"../../core\";\nimport { Description } from \"../../Description\";\nimport { FieldError } from \"../../FieldError\";\nimport { Label } from \"../../Label\";\nimport styles from \"./comboBox.module.css\";\nimport { ComboboxContext } from \"./context\";\nimport type { ComboBoxProps } from \"./types\";\n\nexport const ComboBox = <\n T extends object,\n M extends \"single\" \| \"multiple\" = \"single\",\n>({\n label,\n description,\n errorMessage,\n showDescriptionOnInvalid = false,\n children,\n className,\n hideMultiSelectionValue = false,\n ...props\n}: ComboBoxProps<T, M>) => {\n return (\n <AriaComboBox\n className={(renderProps) =>\n clsx(\n Colors,\n InputGroupStyles,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n >\n {(renderProps) => {\n const { isInvalid } = renderProps;\n const showDescription =\n description &&\n (!isInvalid \|\| (isInvalid && showDescriptionOnInvalid));\n\n return (\n <ComboboxContext value={renderProps}>\n {label && <Label>{label}</Label>}\n\n {typeof children === \"function\"\n ? children(renderProps)\n : children}\n\n {props.selectionMode === \"multiple\" &&\n !hideMultiSelectionValue && (\n <ComboBoxValue<T>\n className={clsx(\n styles[\"selected-value\"],\n typography.bodyLarge\n )}\n >\n {({ state }) => {\n return (\n <TagGroup\n aria-label=\"Selected Items\"\n onRemove={(keys) => {\n if (\n Array.isArray(\n state.value\n )\n ) {\n state.setValue(\n state.value.filter(\n (k) =>\n !keys.has(k)\n )\n );\n }\n }}\n >\n <TagList\n items={state.selectedItems}\n className={clsx(\n styles[\"tag-list\"]\n )}\n >\n {(item) => (\n <Tag\n id={item.key}\n label={\n item.textValue\n }\n />\n )}\n </TagList>\n </TagGroup>\n );\n }}\n </ComboBoxValue>\n )}\n\n {showDescription && (\n <Description className={clsx(SupportingTextStyles)}>\n {description}\n </Description>\n )}\n\n <FieldError className={clsx(SupportingTextStyles)}>\n {errorMessage}\n </FieldError>\n </ComboboxContext>\n );\n }}\n </AriaComboBox>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;~~GCiBa~~,KAGX,EACE,UACA,gBACA,iBACA,8BAA2B,IAC3B,aACA,cACA,6BAA0B,IAC1B,~~GAAG~~,QAGC,~~kBAAC~~,GAAD;CACI,YAAY,~~MACR~~,~~EACI~~,~~GACA~~,GACA,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CAAW,~~IACrB~~,CACV;CAEJ,~~GAAI~~;~~YAEFA~~,MAAgB;EACd,IAAM,EAAE,iBAAcA,~~GAChB~~,~~IACF~~,MACC,~~CAAC~~,~~KAAc~~,~~KAAa~~;EAEjC,OACI,~~kBAAC~~,GAAD;GAAiB,~~OAAOA~~;~~aAAxB~~;~~IACK~~,KAAS,~~kBAAC~~,GAAD,EAAA,~~UAAQ~~,EAAa,CAAA;IAE9B,~~OAAO~~,KAAa,~~aACf~~,~~EAASA~~,CAAW,~~IACpB~~;~~IAEL~~,EAAM,kBAAkB,cACrB,~~CAAC~~,KACG,~~kBAAC~~,GAAD;KACI,~~WAAW~~,~~EACP~~,EAAO,~~mBACP~~,EAAW,SACf;~~gBAEE~~,EAAE,eAEI,~~kBAAC~~,GAAD;MACI,cAAW;MACX,WAAW,MAAS;OAChB,AACI,MAAM,~~QACF~~,EAAM,KACV,~~KAEA~~,EAAM,~~SACF~~,EAAM,MAAM,QACP,MACG,~~CAAC~~,EAAK,~~IAAI~~,CAAC,CACnB,CACJ;MAER;~~gBAEA~~,~~kBAAC~~,GAAD;OACI,~~OAAO~~,EAAM;OACb,~~WAAW~~,~~EACP~~,EAAO,WACX;~~kBAEE~~,MACE,~~kBAAC~~,GAAD;QACI,IAAI,EAAK;QACT,~~OACI~~,EAAK;OACR,CAAA;MAGJ,CAAA;KACH,CAAA;IAGP,CAAA;~~IAGtB~~,KACG,~~kBAAC~~,GAAD;KAAa,~~WAAW~~,~~EAAK~~,CAAoB;~~eAC5C~~;IACQ,CAAA;IAGjB,~~kBAAC~~,GAAD;KAAY,~~WAAW~~,~~EAAK~~,CAAoB;~~eAC3C~~;IACO,CAAA;GACC;;CAEzB;AACU,CAAA"}
1	+ {"version":3,"file":"ComboBox","names":["renderProps","ComboBox","AriaComboBox","clsx","Label","styles","Tag","FieldError","typography","FieldError$1","Label$1","InputGroupStyles","SupportingTextStyles","Colors","Tag$1","ComboboxContext","clsx$1","comboBox_module_default","ComboBox$1","props","ComboBox","className","renderProps","renderProps_0","showDescription","description","isInvalid","showDescriptionOnInvalid","label","children","hideMultiSelectionValue","ComboBoxValue","TagGroup","state","keys","k","TagList","item","Description","errorMessage"],"sources":["../../src/components/Input/Select/ComboBox/comboBox.module.css","../../src/components/Input/Select/ComboBox/ComboBox.tsx"],"sourcesContent":["@layer adgytec.comps {\n .selected-value {\n color: var(--editor-color);\n\n padding-inline-start: var(--md-sys-layout-space-16);\n padding-inline-end: var(--md-sys-layout-space-12);\n\n &[data-placeholder] {\n color: var(--placeholder-color);\n display: none;\n }\n }\n\n .tag-list {\n display: flex;\n gap: var(--md-sys-layout-space-8);\n\n flex-wrap: wrap;\n }\n}\n","import clsx from \"clsx\";\nimport {\n ComboBox as AriaComboBox,\n ComboBoxValue,\n TagGroup,\n TagList,\n} from \"react-aria-components\";\nimport { Tag } from \"@/components/Tag\";\nimport { typography } from \"@/utils\";\nimport { Colors, InputGroupStyles, SupportingTextStyles } from \"../../core\";\nimport { Description } from \"../../Description\";\nimport { FieldError } from \"../../FieldError\";\nimport { Label } from \"../../Label\";\nimport styles from \"./comboBox.module.css\";\nimport { ComboboxContext } from \"./context\";\nimport type { ComboBoxProps } from \"./types\";\n\n/*\n An autocomplete combobox component combining a text input field with a searchable options list popover.\n \n Implements Material Design 3 guidelines for auto-complete search inputs, supporting single or multi-selection,\n * removable selection tag chips, keyboard navigation, and custom filter matching.\n \n @example\n * ```tsx\n * import {\n * ComboBox,\n * ComboBoxTrigger,\n * ComboBoxPopover,\n * SelectList,\n * SelectItem\n * } from '@adgytec/web-ui-components';\n \n <ComboBox label=\"Favorite Framework\">\n * <ComboBoxTrigger placeholder=\"Type to search...\" />\n * <ComboBoxPopover>\n * <SelectList>\n * <SelectItem id=\"react\" label=\"React\" />\n * <SelectItem id=\"vue\" label=\"Vue\" />\n * <SelectItem id=\"svelte\" label=\"Svelte\" />\n * </SelectList>\n * </ComboBoxPopover>\n * </ComboBox>\n * ```\n */\nexport const ComboBox = <\n T extends object,\n M extends \"single\" \| \"multiple\" = \"single\",\n>({\n label,\n description,\n errorMessage,\n showDescriptionOnInvalid = false,\n children,\n className,\n hideMultiSelectionValue = false,\n ...props\n}: ComboBoxProps<T, M>) => {\n return (\n <AriaComboBox\n className={(renderProps) =>\n clsx(\n Colors,\n InputGroupStyles,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n >\n {(renderProps) => {\n const { isInvalid } = renderProps;\n const showDescription =\n description &&\n (!isInvalid \|\| (isInvalid && showDescriptionOnInvalid));\n\n return (\n <ComboboxContext value={renderProps}>\n {label && <Label>{label}</Label>}\n\n {typeof children === \"function\"\n ? children(renderProps)\n : children}\n\n {props.selectionMode === \"multiple\" &&\n !hideMultiSelectionValue && (\n <ComboBoxValue<T>\n className={clsx(\n styles[\"selected-value\"],\n typography.bodyLarge\n )}\n >\n {({ state }) => {\n return (\n <TagGroup\n aria-label=\"Selected Items\"\n onRemove={(keys) => {\n if (\n Array.isArray(\n state.value\n )\n ) {\n state.setValue(\n state.value.filter(\n (k) =>\n !keys.has(k)\n )\n );\n }\n }}\n >\n <TagList\n items={state.selectedItems}\n className={clsx(\n styles[\"tag-list\"]\n )}\n >\n {(item) => (\n <Tag\n id={item.key}\n label={\n item.textValue\n }\n />\n )}\n </TagList>\n </TagGroup>\n );\n }}\n </ComboBoxValue>\n )}\n\n {showDescription && (\n <Description className={clsx(SupportingTextStyles)}>\n {description}\n </Description>\n )}\n\n <FieldError className={clsx(SupportingTextStyles)}>\n {errorMessage}\n </FieldError>\n </ComboboxContext>\n );\n }}\n </AriaComboBox>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;GC6CaC,KAGX,EACE,UACA,gBACA,iBACA,8BAA2B,IAC3B,aACA,cACA,6BAA0B,IAC1B,GAAGkB,QAGC,kBAACjB,GAAD;CACI,YAAY,MACRC,EACIU,GACAF,GACA,OAAOU,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAIF;CAEFnB,WAAAA,MAAgB;EACd,IAAM,EAAE,iBAAcA,GAChBwB,IACFC,MACC,CAACC,KAAcA,KAAaC;EAEjC,OACI,kBAACZ,GAAD;GAAiB,OAAOf;GAAxB,UAAA;IACK4B,KAAS,kBAACxB,GAAD,EAAA,UAAQwB,EAAa,CAAA;IAE9B,OAAOC,KAAa,aACfA,EAAS7B,CAAW,IACpB6B;IAELV,EAAM,kBAAkB,cACrB,CAACW,KACG,kBAACC,GAAD;KACI,WAAW5B,EACPE,EAAO,mBACPG,EAAW,SACf;KAEE,WAAA,EAAE,eAEI,kBAACwB,GAAD;MACI,cAAW;MACX,WAAW,MAAS;OAChB,AACI,MAAM,QACFC,EAAM,KACV,KAEAA,EAAM,SACFA,EAAM,MAAM,QACP,MACG,CAACC,EAAK,IAAIC,CAAC,CACnB,CACJ;MAER;MAEA,UAAA,kBAACC,GAAD;OACI,OAAOH,EAAM;OACb,WAAW9B,EACPE,EAAO,WACX;OAEE,WAAA,MACE,kBAACC,GAAD;QACI,IAAI+B,EAAK;QACT,OACIA,EAAK;OACR,CAAA;MAGJ,CAAA;KACH,CAAA;IAGP,CAAA;IAGtBb,KACG,kBAACc,GAAD;KAAa,WAAWnC,EAAKS,CAAoB;KAC5C,UAAAa;IACQ,CAAA;IAGjB,kBAAClB,GAAD;KAAY,WAAWJ,EAAKS,CAAoB;KAC3C,UAAA2B;IACO,CAAA;GACC;;CAEzB;AACU,CAAA"}

package/dist/chunks/ComboBoxPopover.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxPopover","names":[],"sources":["../../src/components/Input/Select/ComboBoxPopover/comboBoxPopover.module.css","../../src/components/Input/Select/ComboBoxPopover/ComboBoxPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n inline-size: calc(var(--trigger-width) + calc(30 * var(--dp, 1px)));\n\n display: grid;\n grid-template-rows: 1fr;\n }\n}\n","import { clsx } from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./comboBoxPopover.module.css\";\n\~~nexport~~ ~~const~~ ComboBoxPopover: ~~React.FC<\~~n React.ComponentPropsWithRef<typeof Popover>\n> = ({\n offset = 25, // (58dp trigger height - 20dp text line-height) / 2 + 2dp outline + 4dp space\n crossOffset = -17, // 16dp padding + 1dp border\n className,\n ...props\n}) => {\n return (\n <Popover\n className={(renderProps) =>\n clsx(\n styles[\"popover\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n offset={offset}\n crossOffset={crossOffset}\n {...props}\n />\n );\n};\n"],"mappings":";;;~~yCCIa~~,~~KAER~~,~~EACD~~,YAAS,IACT,iBAAc,KACd,cACA,~~GAAG~~,QAGC,~~kBAAC~~,GAAD;CACI,YAAY,~~MACR~~,~~EACI~~,~~EAAO~~,SACP,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CAAW,~~IACrB~~,CACV;CAEI;CACK;CACb,~~GAAI~~;AAAM,CAAA"}
1	+ {"version":3,"file":"ComboBoxPopover","names":["styles","Popover","comboBoxPopover_module_default","ComboBoxPopover","props","clsx","\"popover\"","className","renderProps"],"sources":["../../src/components/Input/Select/ComboBoxPopover/comboBoxPopover.module.css","../../src/components/Input/Select/ComboBoxPopover/ComboBoxPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n inline-size: calc(var(--trigger-width) + calc(30 * var(--dp, 1px)));\n\n display: grid;\n grid-template-rows: 1fr;\n }\n}\n","import { clsx } from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./comboBoxPopover.module.css\";\n\n/*\n Props for the {@link ComboBoxPopover} component.\n * Extends {@link Popover} props.\n /\nexport interface ComboBoxPopoverProps\n extends React.ComponentPropsWithRef<typeof Popover> {}\n\n/\n Dropdown popover container sized and positioned specifically beneath a {@link ComboBoxTrigger}.\n */\nexport const ComboBoxPopover: React.FC<ComboBoxPopoverProps> = ({\n offset = 25, // (58dp trigger height - 20dp text line-height) / 2 + 2dp outline + 4dp space\n crossOffset = -17, // 16dp padding + 1dp border\n className,\n ...props\n}) => {\n return (\n <Popover\n className={(renderProps) =>\n clsx(\n styles[\"popover\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n offset={offset}\n crossOffset={crossOffset}\n {...props}\n />\n );\n};\n"],"mappings":";;;yCCcaG,KAAmD,EAC5D,YAAS,IACT,iBAAc,KACd,cACA,GAAGC,QAGC,kBAACH,GAAD;CACI,YAAY,MACRI,EACIL,EAAOM,SACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEI;CACK;CACb,GAAIH;AAAM,CAAA"}