@brijbyte/agentic-ui 0.0.1 → 0.0.2

package/dist/select/select.js

@@ -1,4 +1,5 @@
 import select_module_default from "./select.module.js";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
 //#region src/select/select.tsx
@@ -44,15 +45,23 @@ function SelectItem({ option }) {
 		})]
 	});
 }
-function Select$1({ placeholder = "Select…", options, groups, className, onValueChange, ...props }) {
+function Select$1({ placeholder = "Select…", options, groups, className, onValueChange, value, defaultValue, ...props }) {
+	const allOptions = useMemo(() => [...options ?? [], ...groups?.flatMap((g) => g.options) ?? []], [options, groups]);
 	return /* @__PURE__ */ jsxs(Select.Root, {
 		onValueChange,
+		value,
+		defaultValue,
 		...props,
 		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
 			className: `${select_module_default.trigger} ${className ?? ""}`,
 			children: [/* @__PURE__ */ jsx(Select.Value, {
 				className: select_module_default["trigger-value"],
-				placeholder
+				placeholder,
+				children: (currentValue) => {
+					if (!currentValue) return placeholder;
+					const match = allOptions.find((o) => o.value === currentValue);
+					return match ? match.label : currentValue;
+				}
 			}), /* @__PURE__ */ jsx("span", {
 				className: select_module_default["trigger-icon"],
 				children: /* @__PURE__ */ jsx(ChevronIcon, {})

package/dist/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["BaseSelect","styles","Select"],"sources":["../../src/select/select.tsx"],"sourcesContent":["import { Select as BaseSelect } from \"@base-ui/react/select\";\nimport styles from \"./select.module.css\";\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectGroup {\n  label?: string;\n  options: SelectOption[];\n}\n\nexport interface SelectProps {\n  value?: string;\n  defaultValue?: string;\n  /** `eventDetails` is the base-ui event details object. Value may be null when cleared. */\n  onValueChange?: (value: string | null, eventDetails: unknown) => void;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  placeholder?: string;\n  options?: SelectOption[];\n  groups?: SelectGroup[];\n  className?: string;\n  id?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2 6L4.5 8.5L10 3\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction SelectItem({ option }: { option: SelectOption }) {\n  return (\n    <BaseSelect.Item className={styles.item} value={option.value} disabled={option.disabled}>\n      <BaseSelect.ItemText>{option.label}</BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator className={styles[\"item-indicator\"]}>\n        <CheckIcon />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n\nexport function Select({ placeholder = \"Select…\", options, groups, className, onValueChange, ...props }: SelectProps) {\n  return (\n    <BaseSelect.Root onValueChange={onValueChange as never} {...props}>\n      <BaseSelect.Trigger className={`${styles.trigger} ${className ?? \"\"}`}>\n        <BaseSelect.Value className={styles[\"trigger-value\"]} placeholder={placeholder} />\n        <span className={styles[\"trigger-icon\"]}>\n          <ChevronIcon />\n        </span>\n      </BaseSelect.Trigger>\n      <BaseSelect.Portal>\n        <BaseSelect.Positioner className={styles.positioner} sideOffset={4}>\n          <BaseSelect.Popup className={styles.popup}>\n            <BaseSelect.List>\n              {options?.map((opt) => (\n                <SelectItem key={opt.value} option={opt} />\n              ))}\n              {groups?.map((group, i) => (\n                <BaseSelect.Group key={i}>\n                  {group.label && <BaseSelect.GroupLabel className={styles[\"group-label\"]}>{group.label}</BaseSelect.GroupLabel>}\n                  {group.options.map((opt) => (\n                    <SelectItem key={opt.value} option={opt} />\n                  ))}\n                  {i < (groups?.length ?? 0) - 1 && <BaseSelect.Separator className={styles.separator} />}\n                </BaseSelect.Group>\n              ))}\n            </BaseSelect.List>\n          </BaseSelect.Popup>\n        </BaseSelect.Positioner>\n      </BaseSelect.Portal>\n    </BaseSelect.Root>\n  );\n}\nexport { styles as SelectStyles };\n"],"mappings":";;;;AA6BA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAClH,CAAA;;AAIV,SAAS,YAAY;AACnB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAoB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAC/G,CAAA;;AAIV,SAAS,WAAW,EAAE,UAAoC;AACxD,QACE,qBAACA,OAAW,MAAZ;EAAiB,WAAWC,sBAAO;EAAM,OAAO,OAAO;EAAO,UAAU,OAAO;YAA/E,CACE,oBAACD,OAAW,UAAZ,EAAA,UAAsB,OAAO,OAA4B,CAAA,EACzD,oBAACA,OAAW,eAAZ;GAA0B,WAAWC,sBAAO;aAC1C,oBAAC,WAAD,EAAa,CAAA;GACY,CAAA,CACX;;;AAItB,SAAgBC,SAAO,EAAE,cAAc,WAAW,SAAS,QAAQ,WAAW,eAAe,GAAG,SAAsB;AACpH,QACE,qBAACF,OAAW,MAAZ;EAAgC;EAAwB,GAAI;YAA5D,CACE,qBAACA,OAAW,SAAZ;GAAoB,WAAW,GAAGC,sBAAO,QAAQ,GAAG,aAAa;aAAjE,CACE,oBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;IAA+B;IAAe,CAAA,EAClF,oBAAC,QAAD;IAAM,WAAWA,sBAAO;cACtB,oBAAC,aAAD,EAAe,CAAA;IACV,CAAA,CACY;MACrB,oBAACD,OAAW,QAAZ,EAAA,UACE,oBAACA,OAAW,YAAZ;GAAuB,WAAWC,sBAAO;GAAY,YAAY;aAC/D,oBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;cAClC,qBAACD,OAAW,MAAZ,EAAA,UAAA,CACG,SAAS,KAAK,QACb,oBAAC,YAAD,EAA4B,QAAQ,KAAO,EAA1B,IAAI,MAAsB,CAC3C,EACD,QAAQ,KAAK,OAAO,MACnB,qBAACA,OAAW,OAAZ,EAAA,UAAA;KACG,MAAM,SAAS,oBAACA,OAAW,YAAZ;MAAuB,WAAWC,sBAAO;gBAAiB,MAAM;MAA8B,CAAA;KAC7G,MAAM,QAAQ,KAAK,QAClB,oBAAC,YAAD,EAA4B,QAAQ,KAAO,EAA1B,IAAI,MAAsB,CAC3C;KACD,KAAK,QAAQ,UAAU,KAAK,KAAK,oBAACD,OAAW,WAAZ,EAAsB,WAAWC,sBAAO,WAAa,CAAA;KACtE,EAAA,EANI,EAMJ,CACnB,CACc,EAAA,CAAA;IACD,CAAA;GACG,CAAA,EACN,CAAA,CACJ"}
+{"version":3,"file":"select.js","names":["BaseSelect","styles","Select"],"sources":["../../src/select/select.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport styles from \"./select.module.css\";\n\nexport interface SelectOption {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SelectGroup {\n  label?: ReactNode;\n  options: SelectOption[];\n}\n\nexport interface SelectProps {\n  value?: string;\n  defaultValue?: string;\n  /** `eventDetails` is the base-ui event details object. Value may be null when cleared. */\n  onValueChange?: (value: string | null, eventDetails: unknown) => void;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  placeholder?: string;\n  options?: SelectOption[];\n  groups?: SelectGroup[];\n  className?: string;\n  id?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2 6L4.5 8.5L10 3\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction SelectItem({ option }: { option: SelectOption }) {\n  return (\n    <BaseSelect.Item className={styles.item} value={option.value} disabled={option.disabled}>\n      <BaseSelect.ItemText>{option.label}</BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator className={styles[\"item-indicator\"]}>\n        <CheckIcon />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n\nexport function Select({ placeholder = \"Select…\", options, groups, className, onValueChange, value, defaultValue, ...props }: SelectProps) {\n  const allOptions = useMemo(() => [...(options ?? []), ...(groups?.flatMap((g) => g.options) ?? [])], [options, groups]);\n\n  return (\n    <BaseSelect.Root onValueChange={onValueChange as never} value={value} defaultValue={defaultValue} {...props}>\n      <BaseSelect.Trigger className={`${styles.trigger} ${className ?? \"\"}`}>\n        <BaseSelect.Value className={styles[\"trigger-value\"]} placeholder={placeholder}>\n          {(currentValue: string | null) => {\n            if (!currentValue) return placeholder;\n            const match = allOptions.find((o) => o.value === currentValue);\n            return match ? match.label : currentValue;\n          }}\n        </BaseSelect.Value>\n        <span className={styles[\"trigger-icon\"]}>\n          <ChevronIcon />\n        </span>\n      </BaseSelect.Trigger>\n      <BaseSelect.Portal>\n        <BaseSelect.Positioner className={styles.positioner} sideOffset={4}>\n          <BaseSelect.Popup className={styles.popup}>\n            <BaseSelect.List>\n              {options?.map((opt) => (\n                <SelectItem key={opt.value} option={opt} />\n              ))}\n              {groups?.map((group, i) => (\n                <BaseSelect.Group key={i}>\n                  {group.label && <BaseSelect.GroupLabel className={styles[\"group-label\"]}>{group.label}</BaseSelect.GroupLabel>}\n                  {group.options.map((opt) => (\n                    <SelectItem key={opt.value} option={opt} />\n                  ))}\n                  {i < (groups?.length ?? 0) - 1 && <BaseSelect.Separator className={styles.separator} />}\n                </BaseSelect.Group>\n              ))}\n            </BaseSelect.List>\n          </BaseSelect.Popup>\n        </BaseSelect.Positioner>\n      </BaseSelect.Portal>\n    </BaseSelect.Root>\n  );\n}\nexport { styles as SelectStyles };\n"],"mappings":";;;;;AA8BA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAClH,CAAA;;AAIV,SAAS,YAAY;AACnB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAoB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAC/G,CAAA;;AAIV,SAAS,WAAW,EAAE,UAAoC;AACxD,QACE,qBAACA,OAAW,MAAZ;EAAiB,WAAWC,sBAAO;EAAM,OAAO,OAAO;EAAO,UAAU,OAAO;YAA/E,CACE,oBAACD,OAAW,UAAZ,EAAA,UAAsB,OAAO,OAA4B,CAAA,EACzD,oBAACA,OAAW,eAAZ;GAA0B,WAAWC,sBAAO;aAC1C,oBAAC,WAAD,EAAa,CAAA;GACY,CAAA,CACX;;;AAItB,SAAgBC,SAAO,EAAE,cAAc,WAAW,SAAS,QAAQ,WAAW,eAAe,OAAO,cAAc,GAAG,SAAsB;CACzI,MAAM,aAAa,cAAc,CAAC,GAAI,WAAW,EAAE,EAAG,GAAI,QAAQ,SAAS,MAAM,EAAE,QAAQ,IAAI,EAAE,CAAE,EAAE,CAAC,SAAS,OAAO,CAAC;AAEvH,QACE,qBAACF,OAAW,MAAZ;EAAgC;EAA+B;EAAqB;EAAc,GAAI;YAAtG,CACE,qBAACA,OAAW,SAAZ;GAAoB,WAAW,GAAGC,sBAAO,QAAQ,GAAG,aAAa;aAAjE,CACE,oBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;IAA+B;eAC/D,iBAAgC;AAChC,SAAI,CAAC,aAAc,QAAO;KAC1B,MAAM,QAAQ,WAAW,MAAM,MAAM,EAAE,UAAU,aAAa;AAC9D,YAAO,QAAQ,MAAM,QAAQ;;IAEd,CAAA,EACnB,oBAAC,QAAD;IAAM,WAAWA,sBAAO;cACtB,oBAAC,aAAD,EAAe,CAAA;IACV,CAAA,CACY;MACrB,oBAACD,OAAW,QAAZ,EAAA,UACE,oBAACA,OAAW,YAAZ;GAAuB,WAAWC,sBAAO;GAAY,YAAY;aAC/D,oBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;cAClC,qBAACD,OAAW,MAAZ,EAAA,UAAA,CACG,SAAS,KAAK,QACb,oBAAC,YAAD,EAA4B,QAAQ,KAAO,EAA1B,IAAI,MAAsB,CAC3C,EACD,QAAQ,KAAK,OAAO,MACnB,qBAACA,OAAW,OAAZ,EAAA,UAAA;KACG,MAAM,SAAS,oBAACA,OAAW,YAAZ;MAAuB,WAAWC,sBAAO;gBAAiB,MAAM;MAA8B,CAAA;KAC7G,MAAM,QAAQ,KAAK,QAClB,oBAAC,YAAD,EAA4B,QAAQ,KAAO,EAA1B,IAAI,MAAsB,CAC3C;KACD,KAAK,QAAQ,UAAU,KAAK,KAAK,oBAACD,OAAW,WAAZ,EAAsB,WAAWC,sBAAO,WAAa,CAAA;KACtE,EAAA,EANI,EAMJ,CACnB,CACc,EAAA,CAAA;IACD,CAAA;GACG,CAAA,EACN,CAAA,CACJ"}

package/dist/select/select.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.module.js","names":[],"sources":["../../src/select/select.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-2);\n    width: 100%;\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-primary);\n    background-color: var(--color-surface-1);\n    border: var(--border-width-base) solid var(--color-border-base);\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    outline: none;\n    transition:\n      border-color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    appearance: none;\n    -webkit-appearance: none;\n    height: 30px;\n    padding-inline: var(--space-2-5);\n    text-align: left;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .trigger:hover:not([data-disabled]) {\n    border-color: var(--color-border-strong);\n  }\n\n  .trigger:focus-visible {\n    border-color: var(--color-accent);\n    box-shadow: var(--shadow-focus);\n  }\n\n  .trigger[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n\n  .trigger-value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .trigger-icon {\n    flex-shrink: 0;\n    color: var(--color-text-tertiary);\n    transition: transform var(--duration-normal) var(--easing-standard);\n  }\n\n  .trigger[data-popup-open] .trigger-icon {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Popup / Listbox ───────────────────────────────── */\n  .positioner {\n    z-index: var(--z-dropdown);\n  }\n\n  .popup {\n    background-color: var(--color-bg-overlay);\n    border: var(--border-width-base) solid var(--color-border-base);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-popover);\n    padding: var(--space-1);\n    min-width: var(--available-width);\n    max-height: 280px;\n    overflow-y: auto;\n    outline: none;\n\n    transform-origin: var(--transform-origin);\n    transition:\n      opacity 150ms var(--easing-ease-out),\n      transform 150ms var(--easing-ease-out);\n  }\n\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.98);\n    transition:\n      opacity 75ms var(--easing-ease-in),\n      transform 75ms var(--easing-ease-in);\n  }\n\n  /* Backdrop blur for macOS feel */\n  @supports (backdrop-filter: blur(12px)) {\n    .popup {\n      backdrop-filter: blur(12px) saturate(1.5);\n      -webkit-backdrop-filter: blur(12px) saturate(1.5);\n    }\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    padding: var(--space-1-5) var(--space-2-5);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-primary);\n    border-radius: var(--radius-sm);\n    cursor: default;\n    outline: none;\n    transition: background-color var(--duration-fast) var(--easing-standard);\n    user-select: none;\n  }\n\n  .item:hover,\n  .item[data-highlighted] {\n    background-color: var(--color-accent);\n    color: var(--color-text-on-accent);\n  }\n\n  .item[data-selected] {\n    font-weight: var(--font-weight-medium);\n  }\n\n  .item[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n\n  .item-indicator {\n    margin-left: auto;\n    color: var(--color-accent);\n    display: flex;\n    align-items: center;\n  }\n\n  .item:hover .item-indicator,\n  .item[data-highlighted] .item-indicator {\n    color: var(--color-text-on-accent);\n  }\n\n  .group-label {\n    padding: var(--space-1) var(--space-2-5);\n    font-size: var(--font-size-xs);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-text-tertiary);\n    letter-spacing: var(--letter-spacing-wider);\n    text-transform: uppercase;\n  }\n\n  .separator {\n    height: var(--border-width-base);\n    background-color: var(--color-border-subtle);\n    margin: var(--space-1) 0;\n  }\n\n  /* List container — wraps items inside the popup */\n  .list {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n}\n"],"mappings":";AAoBA,IAAA,wBAAe;CAAC,eAAI;CAAA,QAAA;CAAA,kBAAA;CAAA,QAAA;CAAA,SAAA;CAAA,cAAA;CAAA,aAAA;CAAA,WAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA"}
+{"version":3,"file":"select.module.js","names":[],"sources":["../../src/select/select.module.css"],"sourcesContent":["@layer components {\n  .trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-2);\n    width: 100%;\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-primary);\n    background-color: var(--color-surface-1);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    outline: none;\n    transition:\n      border-color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    appearance: none;\n    -webkit-appearance: none;\n    height: 30px;\n    padding-inline: var(--space-2-5);\n    text-align: left;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .trigger:hover:not([data-disabled]) {\n    border-color: var(--color-line-strong);\n  }\n  .trigger:focus-visible {\n    border-color: var(--color-accent);\n    box-shadow: var(--shadow-focus);\n  }\n  .trigger[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n  .trigger-value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .trigger-icon {\n    flex-shrink: 0;\n    color: var(--color-tertiary);\n    transition: transform var(--duration-normal) var(--easing-standard);\n  }\n  .trigger[data-popup-open] .trigger-icon {\n    transform: rotate(180deg);\n  }\n  /* ─── Popup / Listbox ───────────────────────────────── */\n  .positioner {\n    z-index: var(--z-dropdown);\n  }\n  .popup {\n    background-color: var(--color-overlay);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-popover);\n    padding: var(--space-1);\n    min-width: var(--anchor-width);\n    max-width: var(--available-width);\n    width: fit-content;\n    max-height: 280px;\n    overflow-y: auto;\n    outline: none;\n    transform-origin: var(--transform-origin);\n    transition:\n      opacity 150ms var(--easing-ease-out),\n      transform 150ms var(--easing-ease-out);\n  }\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.98);\n    transition:\n      opacity 75ms var(--easing-ease-in),\n      transform 75ms var(--easing-ease-in);\n  }\n  /* Backdrop blur for macOS feel */\n  @supports (backdrop-filter: blur(12px)) {\n    .popup {\n      backdrop-filter: blur(12px) saturate(1.5);\n      -webkit-backdrop-filter: blur(12px) saturate(1.5);\n    }\n  }\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    padding: var(--space-1-5) var(--space-2-5);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-primary);\n    border-radius: var(--radius-sm);\n    cursor: default;\n    outline: none;\n    transition: background-color var(--duration-fast) var(--easing-standard);\n    user-select: none;\n  }\n  .item:hover,\n  .item[data-highlighted] {\n    background-color: var(--color-accent);\n    color: var(--color-on-accent);\n  }\n  .item[data-selected] {\n    font-weight: var(--font-weight-medium);\n  }\n  .item[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n  .item-indicator {\n    margin-left: auto;\n    color: var(--color-accent);\n    display: flex;\n    align-items: center;\n  }\n  .item:hover .item-indicator,\n  .item[data-highlighted] .item-indicator {\n    color: var(--color-on-accent);\n  }\n  .group-label {\n    padding: var(--space-1) var(--space-2-5);\n    font-size: var(--font-size-xs);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-tertiary);\n    letter-spacing: var(--letter-spacing-wider);\n    text-transform: uppercase;\n  }\n  .separator {\n    height: var(--border-width-base);\n    background-color: var(--color-line-subtle);\n    margin: var(--space-1) 0;\n  }\n  /* List container — wraps items inside the popup */\n  .list {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n}\n"],"mappings":";AAoBA,IAAA,wBAAY;CAAI,eAAA;CAAA,QAAA;CAAA,kBAAA;CAAA,QAAA;CAAA,SAAA;CAAA,cAAA;CAAA,aAAA;CAAA,WAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA"}

package/dist/separator/separator.css

@@ -1,8 +1,6 @@
-@layer theme, base;
-
 @layer components {
   .separator_027UfG {
-    background-color: var(--color-border-base);
+    background-color: var(--color-line);
     flex-shrink: 0;
   }
 
@@ -16,5 +14,3 @@
     align-self: stretch;
   }
 }
-
-@layer utilities;

package/dist/separator/separator.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.module.js","names":[],"sources":["../../src/separator/separator.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .separator {\n    background-color: var(--color-border-base);\n    flex-shrink: 0;\n  }\n\n  .separator[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: var(--border-width-base, 1px);\n  }\n\n  .separator[data-orientation=\"vertical\"] {\n    width: var(--border-width-base, 1px);\n    align-self: stretch;\n  }\n}\n"],"mappings":";AAEA,IAAA,2BAAO,EAAA,aAAW,oBAAA"}
+{"version":3,"file":"separator.module.js","names":[],"sources":["../../src/separator/separator.module.css"],"sourcesContent":["@layer components {\n  .separator {\n    background-color: var(--color-line);\n    flex-shrink: 0;\n  }\n  .separator[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: var(--border-width-base, 1px);\n  }\n  .separator[data-orientation=\"vertical\"] {\n    width: var(--border-width-base, 1px);\n    align-self: stretch;\n  }\n}\n"],"mappings":";AAEA,IAAA,2BAAe,EAAA,aAAa,oBAAW"}

package/dist/slider/index.d.ts

@@ -0,0 +1,3 @@
+import { Slider, SliderProps, styles } from "./slider.js";
+import { SliderControl, SliderControlProps, SliderIndicator, SliderIndicatorProps, SliderLabel, SliderLabelProps, SliderThumb, SliderThumbProps, SliderTrack, SliderTrackProps, SliderValue, SliderValueProps } from "./parts.js";
+export { Slider, SliderControl, type SliderControlProps, SliderIndicator, type SliderIndicatorProps, SliderLabel, type SliderLabelProps, type SliderProps, styles as SliderStyles, SliderThumb, type SliderThumbProps, SliderTrack, type SliderTrackProps, SliderValue, type SliderValueProps };

package/dist/slider/index.js

@@ -0,0 +1,4 @@
+import slider_module_default from "./slider.module.js";
+import { Slider } from "./slider.js";
+import { SliderControl, SliderIndicator, SliderLabel, SliderThumb, SliderTrack, SliderValue } from "./parts.js";
+export { Slider, SliderControl, SliderIndicator, SliderLabel, slider_module_default as SliderStyles, SliderThumb, SliderTrack, SliderValue };

package/dist/slider/parts.d.ts

@@ -0,0 +1,38 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+import { Slider } from "@base-ui/react/slider";
+
+//#region src/slider/parts.d.ts
+type BaseControlProps = ComponentPropsWithoutRef<typeof Slider.Control>;
+type BaseTrackProps = ComponentPropsWithoutRef<typeof Slider.Track>;
+type BaseIndicatorProps = ComponentPropsWithoutRef<typeof Slider.Indicator>;
+type BaseThumbProps = ComponentPropsWithoutRef<typeof Slider.Thumb>;
+type BaseLabelProps = ComponentPropsWithoutRef<typeof Slider.Label>;
+type BaseValueProps = ComponentPropsWithoutRef<typeof Slider.Value>;
+interface SliderControlProps extends Omit<BaseControlProps, "className"> {
+  className?: string;
+}
+interface SliderTrackProps extends Omit<BaseTrackProps, "className"> {
+  className?: string;
+}
+interface SliderIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
+  className?: string;
+}
+interface SliderThumbProps extends Omit<BaseThumbProps, "className"> {
+  className?: string;
+}
+interface SliderLabelProps extends Omit<BaseLabelProps, "className"> {
+  className?: string;
+}
+interface SliderValueProps extends Omit<BaseValueProps, "className"> {
+  className?: string;
+}
+declare const SliderControl: react.ForwardRefExoticComponent<SliderControlProps & react.RefAttributes<HTMLDivElement>>;
+declare const SliderTrack: react.ForwardRefExoticComponent<SliderTrackProps & react.RefAttributes<HTMLDivElement>>;
+declare const SliderIndicator: react.ForwardRefExoticComponent<SliderIndicatorProps & react.RefAttributes<HTMLDivElement>>;
+declare const SliderThumb: react.ForwardRefExoticComponent<SliderThumbProps & react.RefAttributes<HTMLDivElement>>;
+declare const SliderLabel: react.ForwardRefExoticComponent<SliderLabelProps & react.RefAttributes<HTMLDivElement>>;
+declare const SliderValue: react.ForwardRefExoticComponent<SliderValueProps & react.RefAttributes<HTMLOutputElement>>;
+//#endregion
+export { SliderControl, SliderControlProps, SliderIndicator, SliderIndicatorProps, SliderLabel, SliderLabelProps, SliderThumb, SliderThumbProps, SliderTrack, SliderTrackProps, SliderValue, SliderValueProps };
+//# sourceMappingURL=parts.d.ts.map

package/dist/slider/parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/slider/parts.tsx"],"mappings":";;;;;KAuBK,gBAAA,GAAmB,wBAAA,QAAgC,MAAA,CAAW,OAAA;AAAA,KAC9D,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,KAC5D,kBAAA,GAAqB,wBAAA,QAAgC,MAAA,CAAW,SAAA;AAAA,KAChE,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,KAC5D,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,KAC5D,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,UAEhD,kBAAA,SAA2B,IAAA,CAAK,gBAAA;EAC/C,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,UAEe,oBAAA,SAA6B,IAAA,CAAK,kBAAA;EACjD,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,cAGW,aAAA,EAAa,KAAA,CAAA,yBAAA,CAAA,kBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOb,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOX,eAAA,EAAe,KAAA,CAAA,yBAAA,CAAA,oBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOf,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOX,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOX,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}

package/dist/slider/parts.js

@@ -0,0 +1,69 @@
+import slider_module_default from "./slider.module.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slider } from "@base-ui/react/slider";
+//#region src/slider/parts.tsx
+/**
+* Styled primitives for Slider.
+*
+* @example
+* ```tsx
+* import { Slider as BaseSlider } from '@base-ui/react/slider';
+* import { SliderControl, SliderTrack, SliderIndicator, SliderThumb } from '@brijbyte/agentic-ui/slider';
+*
+* <BaseSlider.Root defaultValue={50}>
+*   <SliderControl>
+*     <SliderTrack>
+*       <SliderIndicator />
+*       <SliderThumb aria-label="Volume" />
+*     </SliderTrack>
+*   </SliderControl>
+* </BaseSlider.Root>
+* ```
+*/
+const SliderControl = forwardRef(function SliderControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Control, {
+		ref,
+		className: `${slider_module_default.control} ${className ?? ""}`,
+		...props
+	});
+});
+const SliderTrack = forwardRef(function SliderTrack({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Track, {
+		ref,
+		className: `${slider_module_default.track} ${className ?? ""}`,
+		...props
+	});
+});
+const SliderIndicator = forwardRef(function SliderIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Indicator, {
+		ref,
+		className: `${slider_module_default.indicator} ${className ?? ""}`,
+		...props
+	});
+});
+const SliderThumb = forwardRef(function SliderThumb({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Thumb, {
+		ref,
+		className: `${slider_module_default.thumb} ${className ?? ""}`,
+		...props
+	});
+});
+const SliderLabel = forwardRef(function SliderLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Label, {
+		ref,
+		className: `${slider_module_default.label} ${className ?? ""}`,
+		...props
+	});
+});
+const SliderValue = forwardRef(function SliderValue({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Value, {
+		ref,
+		className: `${slider_module_default.value} ${className ?? ""}`,
+		...props
+	});
+});
+//#endregion
+export { SliderControl, SliderIndicator, SliderLabel, SliderThumb, SliderTrack, SliderValue };
+
+//# sourceMappingURL=parts.js.map

package/dist/slider/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseSlider","styles"],"sources":["../../src/slider/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Slider.\n *\n * @example\n * ```tsx\n * import { Slider as BaseSlider } from '@base-ui/react/slider';\n * import { SliderControl, SliderTrack, SliderIndicator, SliderThumb } from '@brijbyte/agentic-ui/slider';\n *\n * <BaseSlider.Root defaultValue={50}>\n *   <SliderControl>\n *     <SliderTrack>\n *       <SliderIndicator />\n *       <SliderThumb aria-label=\"Volume\" />\n *     </SliderTrack>\n *   </SliderControl>\n * </BaseSlider.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Slider as BaseSlider } from \"@base-ui/react/slider\";\nimport styles from \"./slider.module.css\";\n\ntype BaseControlProps = ComponentPropsWithoutRef<typeof BaseSlider.Control>;\ntype BaseTrackProps = ComponentPropsWithoutRef<typeof BaseSlider.Track>;\ntype BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseSlider.Indicator>;\ntype BaseThumbProps = ComponentPropsWithoutRef<typeof BaseSlider.Thumb>;\ntype BaseLabelProps = ComponentPropsWithoutRef<typeof BaseSlider.Label>;\ntype BaseValueProps = ComponentPropsWithoutRef<typeof BaseSlider.Value>;\n\nexport interface SliderControlProps extends Omit<BaseControlProps, \"className\"> {\n  className?: string;\n}\nexport interface SliderTrackProps extends Omit<BaseTrackProps, \"className\"> {\n  className?: string;\n}\nexport interface SliderIndicatorProps extends Omit<BaseIndicatorProps, \"className\"> {\n  className?: string;\n}\nexport interface SliderThumbProps extends Omit<BaseThumbProps, \"className\"> {\n  className?: string;\n}\nexport interface SliderLabelProps extends Omit<BaseLabelProps, \"className\"> {\n  className?: string;\n}\nexport interface SliderValueProps extends Omit<BaseValueProps, \"className\"> {\n  className?: string;\n}\n\nexport const SliderControl = forwardRef<ComponentRef<typeof BaseSlider.Control>, SliderControlProps>(function SliderControl(\n  { className, ...props },\n  ref,\n) {\n  return <BaseSlider.Control ref={ref} className={`${styles.control} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const SliderTrack = forwardRef<ComponentRef<typeof BaseSlider.Track>, SliderTrackProps>(function SliderTrack(\n  { className, ...props },\n  ref,\n) {\n  return <BaseSlider.Track ref={ref} className={`${styles.track} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const SliderIndicator = forwardRef<ComponentRef<typeof BaseSlider.Indicator>, SliderIndicatorProps>(function SliderIndicator(\n  { className, ...props },\n  ref,\n) {\n  return <BaseSlider.Indicator ref={ref} className={`${styles.indicator} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const SliderThumb = forwardRef<ComponentRef<typeof BaseSlider.Thumb>, SliderThumbProps>(function SliderThumb(\n  { className, ...props },\n  ref,\n) {\n  return <BaseSlider.Thumb ref={ref} className={`${styles.thumb} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const SliderLabel = forwardRef<ComponentRef<typeof BaseSlider.Label>, SliderLabelProps>(function SliderLabel(\n  { className, ...props },\n  ref,\n) {\n  return <BaseSlider.Label ref={ref} className={`${styles.label} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const SliderValue = forwardRef<ComponentRef<typeof BaseSlider.Value>, SliderValueProps>(function SliderValue(\n  { className, ...props },\n  ref,\n) {\n  return <BaseSlider.Value ref={ref} className={`${styles.value} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,gBAAgB,WAAwE,SAAS,cAC5G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,OAAW,SAAZ;EAAyB;EAAK,WAAW,GAAGC,sBAAO,QAAQ,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACrG;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG;AAEF,MAAa,kBAAkB,WAA4E,SAAS,gBAClH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,WAAZ;EAA2B;EAAK,WAAW,GAAGC,sBAAO,UAAU,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACzG;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG"}

package/dist/slider/slider.css

@@ -0,0 +1,97 @@
+@layer components {
+  .root_Lvfi-a {
+    gap: var(--space-2);
+    flex-direction: column;
+    width: 100%;
+    display: flex;
+  }
+
+  .header_Lvfi-a {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-2);
+    display: flex;
+  }
+
+  .label_Lvfi-a {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-secondary);
+    letter-spacing: var(--letter-spacing-wide);
+    text-transform: uppercase;
+    user-select: none;
+  }
+
+  .value_Lvfi-a {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-tertiary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .control_Lvfi-a {
+    width: 100%;
+    padding-block: var(--space-2);
+    touch-action: none;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    display: flex;
+  }
+
+  .control_Lvfi-a[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
+  }
+
+  .track_Lvfi-a {
+    border-radius: var(--radius-full);
+    background-color: var(--color-surface-3);
+    border: var(--border-width-base) solid var(--color-line-subtle);
+    user-select: none;
+    width: 100%;
+    height: 4px;
+    position: relative;
+  }
+
+  .indicator_Lvfi-a {
+    border-radius: var(--radius-full);
+    background-color: var(--color-accent);
+    user-select: none;
+    transition: background-color var(--duration-fast) var(--easing-standard);
+  }
+
+  .root_Lvfi-a[data-disabled] .indicator_Lvfi-a {
+    background-color: var(--color-tertiary);
+  }
+
+  .thumb_Lvfi-a {
+    border-radius: var(--radius-full);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    width: 16px;
+    height: 16px;
+    box-shadow: var(--shadow-sm);
+    user-select: none;
+    transition: transform var(--duration-fast) var(--easing-spring),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard);
+  }
+
+  .thumb_Lvfi-a[data-dragging] {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-md);
+    transform: scale(1.2);
+  }
+
+  .thumb_Lvfi-a:has(:focus-visible) {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-focus);
+  }
+
+  .thumb_Lvfi-a[data-disabled] {
+    cursor: not-allowed;
+    background-color: var(--color-surface-3);
+  }
+}

package/dist/slider/slider.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./slider.module.css";
+
+//#region src/slider/slider.d.ts
+interface SliderProps {
+  value?: number | number[];
+  defaultValue?: number | number[];
+  onValueChange?: (value: number | number[], eventDetails: unknown) => void;
+  onValueCommitted?: (value: number | number[], eventDetails: unknown) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  largeStep?: number;
+  disabled?: boolean;
+  name?: string;
+  orientation?: "horizontal" | "vertical";
+  format?: Intl.NumberFormatOptions;
+  /** Visible label rendered above the track. */
+  label?: ReactNode;
+  /** Show the current value next to the label. */
+  showValue?: boolean;
+  /** Aria-label for single-thumb sliders without a visible label. */
+  "aria-label"?: string;
+  className?: string;
+}
+declare function Slider({
+  label,
+  showValue,
+  className,
+  onValueChange,
+  onValueCommitted,
+  "aria-label": ariaLabel,
+  ...props
+}: SliderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Slider, SliderProps, styles };
+//# sourceMappingURL=slider.d.ts.map

package/dist/slider/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","names":[],"sources":["../../src/slider/slider.tsx"],"mappings":";;;;;UAIiB,WAAA;EACf,KAAA;EACA,YAAA;EACA,aAAA,IAAiB,KAAA,qBAA0B,YAAA;EAC3C,gBAAA,IAAoB,KAAA,qBAA0B,YAAA;EAC9C,GAAA;EACA,GAAA;EACA,IAAA;EACA,SAAA;EACA,QAAA;EACA,IAAA;EACA,WAAA;EACA,MAAA,GAAS,IAAA,CAAK,mBAAA;EARM;EAUpB,KAAA,GAAQ,SAAA;EATR;EAWA,SAAA;EATA;EAWA,YAAA;EACA,SAAA;AAAA;AAAA,iBAGc,MAAA,CAAA;EACd,KAAA;EACA,SAAA;EACA,SAAA;EACA,aAAA;EACA,gBAAA;EAAA,cACc,SAAA;EAAA,GACX;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/slider/slider.js

@@ -0,0 +1,41 @@
+import slider_module_default from "./slider.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slider } from "@base-ui/react/slider";
+//#region src/slider/slider.tsx
+function Slider$1({ label, showValue = false, className, onValueChange, onValueCommitted, "aria-label": ariaLabel, ...props }) {
+	const isRange = Array.isArray(props.defaultValue ?? props.value);
+	return /* @__PURE__ */ jsxs(Slider.Root, {
+		className: `${slider_module_default.root} ${className ?? ""}`,
+		onValueChange,
+		onValueCommitted,
+		...props,
+		children: [(label || showValue) && /* @__PURE__ */ jsxs("div", {
+			className: slider_module_default.header,
+			children: [label && /* @__PURE__ */ jsx(Slider.Label, {
+				className: slider_module_default.label,
+				children: label
+			}), showValue && /* @__PURE__ */ jsx(Slider.Value, { className: slider_module_default.value })]
+		}), /* @__PURE__ */ jsx(Slider.Control, {
+			className: slider_module_default.control,
+			children: /* @__PURE__ */ jsxs(Slider.Track, {
+				className: slider_module_default.track,
+				children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: slider_module_default.indicator }), isRange ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Slider.Thumb, {
+					index: 0,
+					className: slider_module_default.thumb,
+					"aria-label": "Minimum value"
+				}), /* @__PURE__ */ jsx(Slider.Thumb, {
+					index: 1,
+					className: slider_module_default.thumb,
+					"aria-label": "Maximum value"
+				})] }) : /* @__PURE__ */ jsx(Slider.Thumb, {
+					className: slider_module_default.thumb,
+					"aria-label": ariaLabel
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { Slider$1 as Slider };
+
+//# sourceMappingURL=slider.js.map

package/dist/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":["Slider","BaseSlider","styles"],"sources":["../../src/slider/slider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Slider as BaseSlider } from \"@base-ui/react/slider\";\nimport styles from \"./slider.module.css\";\n\nexport interface SliderProps {\n  value?: number | number[];\n  defaultValue?: number | number[];\n  onValueChange?: (value: number | number[], eventDetails: unknown) => void;\n  onValueCommitted?: (value: number | number[], eventDetails: unknown) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  largeStep?: number;\n  disabled?: boolean;\n  name?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  format?: Intl.NumberFormatOptions;\n  /** Visible label rendered above the track. */\n  label?: ReactNode;\n  /** Show the current value next to the label. */\n  showValue?: boolean;\n  /** Aria-label for single-thumb sliders without a visible label. */\n  \"aria-label\"?: string;\n  className?: string;\n}\n\nexport function Slider({\n  label,\n  showValue = false,\n  className,\n  onValueChange,\n  onValueCommitted,\n  \"aria-label\": ariaLabel,\n  ...props\n}: SliderProps) {\n  const isRange = Array.isArray(props.defaultValue ?? props.value);\n\n  return (\n    <BaseSlider.Root\n      className={`${styles.root} ${className ?? \"\"}`}\n      onValueChange={onValueChange as never}\n      onValueCommitted={onValueCommitted as never}\n      {...props}\n    >\n      {(label || showValue) && (\n        <div className={styles.header}>\n          {label && <BaseSlider.Label className={styles.label}>{label}</BaseSlider.Label>}\n          {showValue && <BaseSlider.Value className={styles.value} />}\n        </div>\n      )}\n      <BaseSlider.Control className={styles.control}>\n        <BaseSlider.Track className={styles.track}>\n          <BaseSlider.Indicator className={styles.indicator} />\n          {isRange ? (\n            <>\n              <BaseSlider.Thumb index={0} className={styles.thumb} aria-label=\"Minimum value\" />\n              <BaseSlider.Thumb index={1} className={styles.thumb} aria-label=\"Maximum value\" />\n            </>\n          ) : (\n            <BaseSlider.Thumb className={styles.thumb} aria-label={ariaLabel} />\n          )}\n        </BaseSlider.Track>\n      </BaseSlider.Control>\n    </BaseSlider.Root>\n  );\n}\n\nexport { styles as SliderStyles };\n"],"mappings":";;;;AA0BA,SAAgBA,SAAO,EACrB,OACA,YAAY,OACZ,WACA,eACA,kBACA,cAAc,WACd,GAAG,SACW;CACd,MAAM,UAAU,MAAM,QAAQ,MAAM,gBAAgB,MAAM,MAAM;AAEhE,QACE,qBAACC,OAAW,MAAZ;EACE,WAAW,GAAGC,sBAAO,KAAK,GAAG,aAAa;EAC3B;EACG;EAClB,GAAI;YAJN,EAMI,SAAS,cACT,qBAAC,OAAD;GAAK,WAAWA,sBAAO;aAAvB,CACG,SAAS,oBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;cAAQ;IAAyB,CAAA,EAC9E,aAAa,oBAACD,OAAW,OAAZ,EAAkB,WAAWC,sBAAO,OAAS,CAAA,CACvD;MAER,oBAACD,OAAW,SAAZ;GAAoB,WAAWC,sBAAO;aACpC,qBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;cAApC,CACE,oBAACD,OAAW,WAAZ,EAAsB,WAAWC,sBAAO,WAAa,CAAA,EACpD,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAACD,OAAW,OAAZ;KAAkB,OAAO;KAAG,WAAWC,sBAAO;KAAO,cAAW;KAAkB,CAAA,EAClF,oBAACD,OAAW,OAAZ;KAAkB,OAAO;KAAG,WAAWC,sBAAO;KAAO,cAAW;KAAkB,CAAA,CACjF,EAAA,CAAA,GAEH,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;KAAO,cAAY;KAAa,CAAA,CAErD;;GACA,CAAA,CACL"}

package/dist/slider/slider.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

package/dist/slider/slider.module.js

@@ -0,0 +1,15 @@
+//#region src/slider/slider.module.css
+var slider_module_default = {
+	"control": "control_Lvfi-a",
+	"header": "header_Lvfi-a",
+	"indicator": "indicator_Lvfi-a",
+	"label": "label_Lvfi-a",
+	"root": "root_Lvfi-a",
+	"thumb": "thumb_Lvfi-a",
+	"track": "track_Lvfi-a",
+	"value": "value_Lvfi-a"
+};
+//#endregion
+export { slider_module_default as default };
+
+//# sourceMappingURL=slider.module.js.map

package/dist/slider/slider.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.module.js","names":[],"sources":["../../src/slider/slider.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-2);\n    width: 100%;\n  }\n\n  /* ─── Label + Value row ──────────────────────────────────────── */\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-2);\n  }\n\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-secondary);\n    letter-spacing: var(--letter-spacing-wide);\n    text-transform: uppercase;\n    user-select: none;\n  }\n\n  .value {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-tertiary);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* ─── Control (hit area) ─────────────────────────────────────── */\n\n  .control {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    padding-block: var(--space-2);\n    touch-action: none;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .control[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n\n  /* ─── Track ──────────────────────────────────────────────────── */\n\n  .track {\n    position: relative;\n    width: 100%;\n    height: 4px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-line-subtle);\n    user-select: none;\n  }\n\n  /* ─── Indicator (filled portion) ────────────────────────────── */\n\n  .indicator {\n    border-radius: var(--radius-full);\n    background-color: var(--color-accent);\n    user-select: none;\n    transition: background-color var(--duration-fast) var(--easing-standard);\n  }\n\n  .root[data-disabled] .indicator {\n    background-color: var(--color-tertiary);\n  }\n\n  /* ─── Thumb ──────────────────────────────────────────────────── */\n\n  .thumb {\n    width: 16px;\n    height: 16px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-elevated);\n    border: var(--border-width-base) solid var(--color-line);\n    box-shadow: var(--shadow-sm);\n    user-select: none;\n    transition:\n      transform var(--duration-fast) var(--easing-spring),\n      box-shadow var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard);\n  }\n\n  /* Grow on drag — gives tactile feedback */\n  .thumb[data-dragging] {\n    transform: scale(1.2);\n    border-color: var(--color-accent);\n    box-shadow: var(--shadow-md);\n  }\n\n  /* Focus ring via the nested <input> */\n  .thumb:has(:focus-visible) {\n    border-color: var(--color-accent);\n    box-shadow: var(--shadow-focus);\n  }\n\n  .thumb[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--color-surface-3);\n  }\n}\n"],"mappings":""}

package/dist/styles/reset.css

@@ -19,8 +19,8 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-md);
     line-height: var(--line-height-normal);
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-base);
+    color: var(--color-primary);
+    background-color: var(--color-canvas);
   }
 
   img, picture, video, canvas, svg {
@@ -45,12 +45,12 @@
     font-weight: var(--font-weight-semibold);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
   }
 
   * {
     scrollbar-width: thin;
-    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
+    scrollbar-color: var(--color-thumb) var(--color-track);
   }
 
   ::-webkit-scrollbar {
@@ -59,11 +59,11 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background: var(--color-scrollbar-thumb);
+    background: var(--color-thumb);
     border-radius: var(--radius-full);
   }
 
   ::-webkit-scrollbar-track {
-    background: var(--color-scrollbar-track);
+    background: var(--color-track);
   }
 }