@mitcsutt/kiln-ui 0.1.0

package/dist/components/inputs/SegmentedField/SegmentedField.js

@@ -0,0 +1,24 @@
+import { SegmentedControl as e } from "../../actions/SegmentedControl/SegmentedControl.js";
+import { Field as t } from "../Field/Field.js";
+import { splitFieldLabelProps as n } from "../internal/fieldProps.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/inputs/SegmentedField/SegmentedField.tsx
+var a = r(function(r, a) {
+	let [o, { id: s, disabled: c, className: l, style: u, ...d }] = n(r);
+	return /* @__PURE__ */ i(t, {
+		...o,
+		htmlFor: s,
+		disabled: c,
+		className: l,
+		style: u,
+		children: /* @__PURE__ */ i(e, {
+			ref: a,
+			...d
+		})
+	});
+});
+//#endregion
+export { a as SegmentedField };
+
+//# sourceMappingURL=SegmentedField.js.map

package/dist/components/inputs/SegmentedField/SegmentedField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedField.js","names":["SegmentedField","forwardRef","fieldProps","controlProps","splitFieldLabelProps","props","Field","id","SegmentedControl"],"sources":["../../../../src/components/inputs/SegmentedField/SegmentedField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { SegmentedControl, type SegmentedControlProps } from '#components/actions/SegmentedControl'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\nexport interface SegmentedFieldProps\n  extends\n    FieldLabelProps,\n    Omit<SegmentedControlProps, 'children' | 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * A labelled `SegmentedControl` — one of 2–5 peers, always one selected. The control is\n * labelled by the Field's label and described by its help, warning and error.\n * `className`/`style` go to the Field; `ref`, `id`, `name` and the rest go to the control.\n *\n * <SegmentedField label=\"Billing period\" name=\"period\" options={periods} layout=\"horizontal\" />\n */\nexport const SegmentedField = forwardRef<HTMLDivElement, SegmentedFieldProps>(\n  function SegmentedField(props, ref) {\n    const [fieldProps, { id, disabled, className, style, ...controlProps }] =\n      splitFieldLabelProps(props)\n    return (\n      <Field {...fieldProps} htmlFor={id} disabled={disabled} className={className} style={style}>\n        <SegmentedControl ref={ref} {...controlProps} />\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;AAiBA,IAAaA,IAAiBC,EAC5B,SAAwB,GAAO,GAAK;CAClC,IAAM,CAACC,GAAY,EAAE,OAAI,aAAU,cAAW,UAAO,GAAGC,OACtDC,EAAqBC,CAAK;CAC5B,OACE,kBAACC,GAAD;EAAO,GAAIJ;EAAY,SAASK;EAAc;EAAqB;EAAkB;EACnF,UAAA,kBAACC,GAAD;GAAuB;GAAK,GAAIL;EAAe,CAAA;CAC1C,CAAA;AAEX,CACF"}

package/dist/components/inputs/SegmentedField/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedField } from './SegmentedField.js';
+export type { SegmentedFieldProps } from './SegmentedField.js';

package/dist/components/inputs/Select/Select.d.ts

@@ -0,0 +1,66 @@
+import { type ButtonHTMLAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { Select as RadixSelect } from 'radix-ui';
+import type { Size } from '../../../utils/tokens.js';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectGroup {
+    label: string;
+    options: SelectOption[];
+}
+export type SelectRootProps = ComponentPropsWithoutRef<typeof RadixSelect.Root>;
+/** State owner. Radix naming: `value` / `defaultValue` / `onValueChange`, `open` / `onOpenChange`. */
+declare function SelectRoot(props: SelectRootProps): import("react").JSX.Element;
+export interface SelectTriggerProps extends Omit<ComponentPropsWithoutRef<typeof RadixSelect.Trigger>, 'asChild'> {
+    size?: Size;
+    invalid?: boolean;
+    /** Focusable but not editable: sets `aria-readonly`. Gate `onValueChange` at the `Root`. */
+    readOnly?: boolean;
+    /** Shown while no value is chosen. */
+    placeholder?: ReactNode;
+}
+export interface SelectContentProps extends Omit<ComponentPropsWithoutRef<typeof RadixSelect.Content>, 'asChild'> {
+    /**
+     * Where to portal the list. Defaults to the trigger's nearest `[data-theme]` scope, so a
+     * select inside a `<ThemeScope>` opens in that theme; falls back to `document.body`.
+     */
+    container?: HTMLElement | null;
+}
+export type SelectItemProps = Omit<ComponentPropsWithoutRef<typeof RadixSelect.Item>, 'asChild'>;
+export type SelectGroupProps = Omit<ComponentPropsWithoutRef<typeof RadixSelect.Group>, 'asChild'>;
+export type SelectLabelProps = Omit<ComponentPropsWithoutRef<typeof RadixSelect.Label>, 'asChild'>;
+export type SelectSeparatorProps = Omit<ComponentPropsWithoutRef<typeof RadixSelect.Separator>, 'asChild'>;
+export interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'dir' | 'placeholder'> {
+    /** Flat list of options. */
+    options?: SelectOption[];
+    /** Or headed groups (rendered after `options` if both are given). */
+    groups?: SelectGroup[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: ReactNode;
+    size?: Size;
+    /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */
+    invalid?: boolean;
+    /** Focusable but not editable: sets `aria-readonly` and ignores value changes. */
+    readOnly?: boolean;
+    /** Submitted with a native `<form>` under this name. */
+    name?: string;
+    required?: boolean;
+    autoComplete?: string;
+}
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>> & {
+    Root: typeof SelectRoot;
+    Trigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/inputs/Select/Select.js

@@ -0,0 +1,165 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CheckIcon as t, ChevronDownIcon as n, ChevronUpIcon as r } from "../../../icons/icons.js";
+import { useMergedRefs as i } from "../internal/refs.js";
+import { markFieldAware as a, useResolvedField as o } from "../internal/FieldContext.js";
+import s from "../internal/control.module.js";
+import c from "./Select.module.js";
+import { createContext as l, forwardRef as u, useContext as d, useMemo as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Select as g } from "radix-ui";
+//#region src/components/inputs/Select/Select.tsx
+var _ = l(null);
+function v(e) {
+	let [t, n] = p(null), r = f(() => ({
+		node: t,
+		setNode: n
+	}), [t]);
+	return /* @__PURE__ */ m(_.Provider, {
+		value: r,
+		children: /* @__PURE__ */ m(g.Root, { ...e })
+	});
+}
+var y = a(u(function({ size: t = "md", invalid: r, readOnly: a, placeholder: l, id: u, disabled: f, className: p, children: v, "aria-describedby": y, "aria-invalid": b, ...x }, S) {
+	let C = d(_), w = i(S, C?.setNode), T = o({
+		id: u,
+		describedBy: y,
+		invalid: r,
+		ariaInvalid: b,
+		disabled: f,
+		readOnly: a
+	});
+	return /* @__PURE__ */ h(g.Trigger, {
+		ref: w,
+		id: T.id,
+		className: e(s.box, c.trigger, p),
+		"data-size": t,
+		"data-invalid": T.invalid || void 0,
+		"data-disabled": T.disabled || void 0,
+		"data-readonly": T.readOnly || void 0,
+		disabled: T.disabled || void 0,
+		"aria-readonly": T.readOnly || void 0,
+		"aria-describedby": T.describedBy,
+		"aria-invalid": T.invalid || void 0,
+		"aria-required": T.required || void 0,
+		"aria-busy": T.busy || void 0,
+		...x,
+		children: [/* @__PURE__ */ m("span", {
+			className: c.value,
+			children: v ?? /* @__PURE__ */ m(g.Value, { placeholder: l })
+		}), /* @__PURE__ */ m(g.Icon, {
+			className: c.chevron,
+			children: /* @__PURE__ */ m(n, {})
+		})]
+	});
+}));
+function b(e) {
+	let t = e?.closest("[data-theme]");
+	return t && t !== e?.ownerDocument.documentElement ? t : void 0;
+}
+var x = u(function({ container: t, position: i = "popper", sideOffset: a = 6, collisionPadding: o = 8, className: s, children: l, ...u }, f) {
+	let p = d(_);
+	return /* @__PURE__ */ m(g.Portal, {
+		container: t ?? b(p?.node ?? null),
+		children: /* @__PURE__ */ h(g.Content, {
+			ref: f,
+			position: i,
+			sideOffset: i === "popper" ? a : void 0,
+			collisionPadding: o,
+			className: e(c.content, s),
+			...u,
+			children: [
+				/* @__PURE__ */ m(g.ScrollUpButton, {
+					className: c.scroll,
+					children: /* @__PURE__ */ m(r, {})
+				}),
+				/* @__PURE__ */ m(g.Viewport, {
+					className: c.viewport,
+					children: l
+				}),
+				/* @__PURE__ */ m(g.ScrollDownButton, {
+					className: c.scroll,
+					children: /* @__PURE__ */ m(n, {})
+				})
+			]
+		})
+	});
+}), S = u(function({ className: n, children: r, ...i }, a) {
+	return /* @__PURE__ */ h(g.Item, {
+		ref: a,
+		className: e(c.item, n),
+		...i,
+		children: [/* @__PURE__ */ m(g.ItemText, { children: r }), /* @__PURE__ */ m(g.ItemIndicator, {
+			className: c.indicator,
+			children: /* @__PURE__ */ m(t, {})
+		})]
+	});
+}), C = u(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ m(g.Group, {
+		ref: r,
+		className: e(c.group, t),
+		...n
+	});
+}), w = u(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ m(g.Label, {
+		ref: r,
+		className: e(c.label, t),
+		...n
+	});
+}), T = u(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ m(g.Separator, {
+		ref: r,
+		className: e(c.separator, t),
+		...n
+	});
+}), E = u(function({ options: e, groups: t, value: n, defaultValue: r, onValueChange: i, open: a, defaultOpen: s, onOpenChange: c, placeholder: l, size: u, invalid: d, readOnly: f, name: p, required: g, disabled: _, autoComplete: b, form: E, ...D }, O) {
+	let k = o({
+		disabled: _,
+		required: g,
+		readOnly: f
+	});
+	return /* @__PURE__ */ h(v, {
+		value: n,
+		defaultValue: r,
+		onValueChange: k.readOnly ? void 0 : i,
+		open: a,
+		defaultOpen: s,
+		onOpenChange: c,
+		name: p,
+		required: g,
+		disabled: k.disabled,
+		autoComplete: b,
+		form: E,
+		children: [/* @__PURE__ */ m(y, {
+			ref: O,
+			size: u,
+			invalid: d,
+			readOnly: k.readOnly,
+			placeholder: l,
+			...D
+		}), /* @__PURE__ */ h(x, { children: [e?.map((e) => /* @__PURE__ */ m(S, {
+			value: e.value,
+			disabled: e.disabled,
+			children: e.label
+		}, e.value)), t?.map((t, n) => /* @__PURE__ */ h(C, { children: [
+			n > 0 || e && e.length > 0 ? /* @__PURE__ */ m(T, {}) : null,
+			/* @__PURE__ */ m(w, { children: t.label }),
+			t.options.map((e) => /* @__PURE__ */ m(S, {
+				value: e.value,
+				disabled: e.disabled,
+				children: e.label
+			}, e.value))
+		] }, t.label))] })]
+	});
+}), D = a(Object.assign(E, {
+	Root: v,
+	Trigger: y,
+	Content: x,
+	Item: S,
+	Group: C,
+	Label: w,
+	Separator: T
+}));
+//#endregion
+export { D as Select };
+
+//# sourceMappingURL=Select.js.map

package/dist/components/inputs/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["RadixSelect","control","styles","Select","control_module_default","Select_module_default","TriggerNodeContext","createContext","SelectRoot","node","setNode","useState","scope","useMemo","Select","props","SelectTrigger","markFieldAware","forwardRef","invalidProp","readOnlyProp","idProp","disabledProp","describedByProp","ariaInvalid","rest","triggerNode","useContext","composedRef","useMergedRefs","ref","field","useResolvedField","cx","className","size","children","ChevronDownIcon","themeScopeOf","SelectContent","container","position","sideOffset","ChevronUpIcon","SelectItem","CheckIcon","SelectGroupPart","SelectLabel","SelectSeparator","SelectBase","onValueChange","options","option","groups","index","group","Select$1"],"sources":["../../../../src/components/inputs/Select/Select.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  useMemo,\n  useState,\n  type ButtonHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react'\nimport { Select as RadixSelect } from 'radix-ui'\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '#icons'\nimport { cx } from '#utils/cx'\nimport type { Size } from '#utils/tokens'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { useMergedRefs } from '#components/inputs/internal/refs'\nimport control from '#components/inputs/internal/control.module.css'\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\n/* ─── Compound parts (the escape hatch) ───────────────────────────────────── */\n\n// The trigger's element, so the popover can portal into the same theme scope.\nconst TriggerNodeContext = createContext<{\n  node: HTMLElement | null\n  setNode: (node: HTMLElement | null) => void\n} | null>(null)\n\nexport type SelectRootProps = ComponentPropsWithoutRef<typeof RadixSelect.Root>\n\n/** State owner. Radix naming: `value` / `defaultValue` / `onValueChange`, `open` / `onOpenChange`. */\nfunction SelectRoot(props: SelectRootProps) {\n  const [node, setNode] = useState<HTMLElement | null>(null)\n  const scope = useMemo(() => ({ node, setNode }), [node])\n  return (\n    <TriggerNodeContext.Provider value={scope}>\n      <RadixSelect.Root {...props} />\n    </TriggerNodeContext.Provider>\n  )\n}\n\nexport interface SelectTriggerProps extends Omit<\n  ComponentPropsWithoutRef<typeof RadixSelect.Trigger>,\n  'asChild'\n> {\n  size?: Size\n  invalid?: boolean\n  /** Focusable but not editable: sets `aria-readonly`. Gate `onValueChange` at the `Root`. */\n  readOnly?: boolean\n  /** Shown while no value is chosen. */\n  placeholder?: ReactNode\n}\n\n/** The field-styled button. Picks up id / describedby / invalid from a surrounding `<Field>`. */\nconst SelectTrigger = markFieldAware(\n  forwardRef<HTMLButtonElement, SelectTriggerProps>(function SelectTrigger(\n    {\n      size = 'md',\n      invalid: invalidProp,\n      readOnly: readOnlyProp,\n      placeholder,\n      id: idProp,\n      disabled: disabledProp,\n      className,\n      children,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      ...rest\n    },\n    ref,\n  ) {\n    const triggerNode = useContext(TriggerNodeContext)\n    const composedRef = useMergedRefs(ref, triggerNode?.setNode)\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n    })\n    return (\n      <RadixSelect.Trigger\n        ref={composedRef}\n        id={field.id}\n        className={cx(control.box, styles.trigger, className)}\n        data-size={size}\n        data-invalid={field.invalid || undefined}\n        data-disabled={field.disabled || undefined}\n        data-readonly={field.readOnly || undefined}\n        disabled={field.disabled || undefined}\n        aria-readonly={field.readOnly || undefined}\n        aria-describedby={field.describedBy}\n        aria-invalid={field.invalid || undefined}\n        aria-required={field.required || undefined}\n        aria-busy={field.busy || undefined}\n        {...rest}\n      >\n        <span className={styles.value}>\n          {children ?? <RadixSelect.Value placeholder={placeholder} />}\n        </span>\n        <RadixSelect.Icon className={styles.chevron}>\n          <ChevronDownIcon />\n        </RadixSelect.Icon>\n      </RadixSelect.Trigger>\n    )\n  }),\n)\n\nexport interface SelectContentProps extends Omit<\n  ComponentPropsWithoutRef<typeof RadixSelect.Content>,\n  'asChild'\n> {\n  /**\n   * Where to portal the list. Defaults to the trigger's nearest `[data-theme]` scope, so a\n   * select inside a `<ThemeScope>` opens in that theme; falls back to `document.body`.\n   */\n  container?: HTMLElement | null\n}\n\nfunction themeScopeOf(node: HTMLElement | null): HTMLElement | undefined {\n  const scope = node?.closest<HTMLElement>('[data-theme]')\n  return scope && scope !== node?.ownerDocument.documentElement ? scope : undefined\n}\n\n/** The floating list. Anchored under the trigger, at least as wide as it. */\nconst SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(function SelectContent(\n  {\n    container,\n    position = 'popper',\n    sideOffset = 6,\n    collisionPadding = 8,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const triggerNode = useContext(TriggerNodeContext)\n  return (\n    <RadixSelect.Portal container={container ?? themeScopeOf(triggerNode?.node ?? null)}>\n      <RadixSelect.Content\n        ref={ref}\n        position={position}\n        sideOffset={position === 'popper' ? sideOffset : undefined}\n        collisionPadding={collisionPadding}\n        className={cx(styles.content, className)}\n        {...rest}\n      >\n        <RadixSelect.ScrollUpButton className={styles.scroll}>\n          <ChevronUpIcon />\n        </RadixSelect.ScrollUpButton>\n        <RadixSelect.Viewport className={styles.viewport}>{children}</RadixSelect.Viewport>\n        <RadixSelect.ScrollDownButton className={styles.scroll}>\n          <ChevronDownIcon />\n        </RadixSelect.ScrollDownButton>\n      </RadixSelect.Content>\n    </RadixSelect.Portal>\n  )\n})\n\nexport type SelectItemProps = Omit<ComponentPropsWithoutRef<typeof RadixSelect.Item>, 'asChild'>\n\n/** One option. The chosen one carries a check. */\nconst SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(function SelectItem(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <RadixSelect.Item ref={ref} className={cx(styles.item, className)} {...rest}>\n      <RadixSelect.ItemText>{children}</RadixSelect.ItemText>\n      <RadixSelect.ItemIndicator className={styles.indicator}>\n        <CheckIcon />\n      </RadixSelect.ItemIndicator>\n    </RadixSelect.Item>\n  )\n})\n\nexport type SelectGroupProps = Omit<ComponentPropsWithoutRef<typeof RadixSelect.Group>, 'asChild'>\n\nconst SelectGroupPart = forwardRef<HTMLDivElement, SelectGroupProps>(function SelectGroup(\n  { className, ...rest },\n  ref,\n) {\n  return <RadixSelect.Group ref={ref} className={cx(styles.group, className)} {...rest} />\n})\n\nexport type SelectLabelProps = Omit<ComponentPropsWithoutRef<typeof RadixSelect.Label>, 'asChild'>\n\n/** A group heading inside the list. */\nconst SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(function SelectLabel(\n  { className, ...rest },\n  ref,\n) {\n  return <RadixSelect.Label ref={ref} className={cx(styles.label, className)} {...rest} />\n})\n\nexport type SelectSeparatorProps = Omit<\n  ComponentPropsWithoutRef<typeof RadixSelect.Separator>,\n  'asChild'\n>\n\nconst SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(function SelectSeparator(\n  { className, ...rest },\n  ref,\n) {\n  return <RadixSelect.Separator ref={ref} className={cx(styles.separator, className)} {...rest} />\n})\n\n/* ─── Simple API ──────────────────────────────────────────────────────────── */\n\nexport interface SelectProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'value' | 'defaultValue' | 'onChange' | 'dir' | 'placeholder'\n> {\n  /** Flat list of options. */\n  options?: SelectOption[]\n  /** Or headed groups (rendered after `options` if both are given). */\n  groups?: SelectGroup[]\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  placeholder?: ReactNode\n  size?: Size\n  /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */\n  invalid?: boolean\n  /** Focusable but not editable: sets `aria-readonly` and ignores value changes. */\n  readOnly?: boolean\n  /** Submitted with a native `<form>` under this name. */\n  name?: string\n  required?: boolean\n  autoComplete?: string\n}\n\n/**\n * A single-choice dropdown. Pass `options` (or `groups`) for the common case; compose\n * `Select.Root` / `Trigger` / `Content` / `Item` / `Group` / `Label` for anything custom.\n * The ref and native button props go to the trigger.\n *\n * <Select options={categories} placeholder=\"Choose a category\" onValueChange={setCategory} />\n */\nconst SelectBase = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  {\n    options,\n    groups,\n    value,\n    defaultValue,\n    onValueChange,\n    open,\n    defaultOpen,\n    onOpenChange,\n    placeholder,\n    size,\n    invalid,\n    readOnly,\n    name,\n    required,\n    disabled,\n    autoComplete,\n    form,\n    ...rest\n  },\n  ref,\n) {\n  const field = useResolvedField({ disabled, required, readOnly })\n  return (\n    <SelectRoot\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={field.readOnly ? undefined : onValueChange}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      name={name}\n      required={required}\n      disabled={field.disabled}\n      autoComplete={autoComplete}\n      form={form}\n    >\n      <SelectTrigger\n        ref={ref}\n        size={size}\n        invalid={invalid}\n        readOnly={field.readOnly}\n        placeholder={placeholder}\n        {...rest}\n      />\n      <SelectContent>\n        {options?.map((option) => (\n          <SelectItem key={option.value} value={option.value} disabled={option.disabled}>\n            {option.label}\n          </SelectItem>\n        ))}\n        {groups?.map((group, index) => (\n          <SelectGroupPart key={group.label}>\n            {index > 0 || (options && options.length > 0) ? <SelectSeparator /> : null}\n            <SelectLabel>{group.label}</SelectLabel>\n            {group.options.map((option) => (\n              <SelectItem key={option.value} value={option.value} disabled={option.disabled}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectGroupPart>\n        ))}\n      </SelectContent>\n    </SelectRoot>\n  )\n})\n\nexport const Select = markFieldAware(\n  Object.assign(SelectBase, {\n    Root: SelectRoot,\n    Trigger: SelectTrigger,\n    Content: SelectContent,\n    Item: SelectItem,\n    Group: SelectGroupPart,\n    Label: SelectLabel,\n    Separator: SelectSeparator,\n  }),\n)\n"],"mappings":"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"}

package/dist/components/inputs/Select/Select.module.js

@@ -0,0 +1,19 @@
+//#region src/components/inputs/Select/Select.module.css
+var e = "kiln-Select__trigger", t = "kiln-Select__value", n = "kiln-Select__chevron", r = "kiln-Select__content", i = "kiln-Select__viewport", a = "kiln-Select__group", o = "kiln-Select__label", s = "kiln-Select__separator", c = "kiln-Select__item", l = "kiln-Select__indicator", u = "kiln-Select__scroll", d = {
+	trigger: e,
+	value: t,
+	chevron: n,
+	content: r,
+	"select-in": "kiln-Select__select-in",
+	viewport: i,
+	group: a,
+	label: o,
+	separator: s,
+	item: c,
+	indicator: l,
+	scroll: u
+};
+//#endregion
+export { n as chevron, r as content, d as default, a as group, l as indicator, c as item, o as label, u as scroll, s as separator, e as trigger, t as value, i as viewport };
+
+//# sourceMappingURL=Select.module.js.map

package/dist/components/inputs/Select/Select.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.js","names":["trigger","value","chevron","content","viewport","group","label","separator","item","indicator","scroll","Select_module_default"],"sources":["../../../../src/components/inputs/Select/Select.module.css"],"sourcesContent":["/*\n * Trigger box, states and focus come from inputs/internal/control.module.css.\n *\n * Component tokens (themes may set any of these on [data-theme]):\n *   --select-content-border    default var(--color-line-strong)\n *   --select-item-highlight    default var(--color-surface-sunken) — keyboard/hover row\n *   --select-item-check        default var(--color-accent-text)\n */\n\n/* ── Trigger ── */\n.trigger {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  inline-size: 100%;\n  padding-inline: var(--_px) calc(var(--_px) * 0.75);\n  text-align: start;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.trigger[data-disabled] {\n  cursor: not-allowed;\n}\n\n.value {\n  flex: 1;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.trigger[data-placeholder] .value {\n  color: var(--color-ink-subtle);\n}\n\n.chevron {\n  display: inline-flex;\n  flex: none;\n  color: var(--color-ink-muted);\n  font-size: 1.15em;\n  transition: rotate var(--dur-2) var(--ease-spring);\n}\n.trigger[data-state='open'] .chevron {\n  rotate: 180deg;\n}\n\n/* ── Floating list ── */\n.content {\n  --_pad: var(--space-1);\n  --_radius: var(--radius-surface);\n\n  z-index: var(--z-popover);\n  box-sizing: border-box;\n  min-inline-size: var(--radix-select-trigger-width);\n  max-inline-size: min(28rem, calc(100vw - 2 * var(--space-4)));\n  max-block-size: min(22rem, var(--radix-select-content-available-height));\n  overflow: hidden;\n  padding: var(--_pad);\n  border: var(--border-width) solid var(--select-content-border, var(--color-line-strong));\n  border-radius: var(--_radius);\n  background-color: var(--color-surface-raised);\n  color: var(--color-ink);\n  box-shadow: var(--shadow-float);\n  font-family: var(--font-text);\n  font-size: var(--text-md);\n  line-height: var(--leading-snug);\n  transform-origin: var(--radix-select-content-transform-origin);\n}\n.content[data-state='open'] {\n  animation: select-in var(--dur-2) var(--ease-spring);\n}\n\n@keyframes select-in {\n  from {\n    opacity: 0;\n    scale: 0.97;\n    translate: 0 calc(var(--space-1) * -1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .content[data-state='open'] {\n    animation: none;\n  }\n}\n\n.viewport {\n  scroll-padding-block: var(--_pad);\n}\n\n.group {\n  display: block;\n}\n\n.label {\n  padding: var(--space-2) var(--space-3) var(--space-1);\n  color: var(--color-ink-subtle);\n  font-size: var(--text-xs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n}\n\n.separator {\n  block-size: var(--border-width);\n  margin: var(--_pad) calc(var(--_pad) * -1);\n  background-color: var(--color-line);\n}\n\n/* Nested radius: the row sits inside the list's padding, so it's that much smaller. */\n.item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-block-size: var(--control-sm);\n  padding-block: var(--space-1);\n  padding-inline: var(--space-3) var(--space-2);\n  border-radius: max(2px, calc(var(--_radius) - var(--_pad)));\n  outline: none;\n  cursor: default;\n  user-select: none;\n}\n.item > :first-child {\n  flex: 1;\n}\n.item[data-highlighted] {\n  background-color: var(--select-item-highlight, var(--color-surface-sunken));\n}\n.item[data-state='checked'] {\n  font-weight: var(--label-weight);\n}\n.item[data-disabled] {\n  color: var(--color-ink-subtle);\n  opacity: 0.6;\n}\n\n.indicator {\n  display: inline-flex;\n  flex: none;\n  color: var(--select-item-check, var(--color-accent-text));\n  font-size: 1.1em;\n}\n\n.scroll {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  block-size: var(--control-sm);\n  color: var(--color-ink-muted);\n  cursor: default;\n}\n"],"mappings":""}

package/dist/components/inputs/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select.js';
+export type { SelectProps, SelectOption, SelectGroup, SelectRootProps, SelectTriggerProps, SelectContentProps, SelectItemProps, SelectGroupProps, SelectLabelProps, SelectSeparatorProps, } from './Select.js';

package/dist/components/inputs/SelectField/SelectField.d.ts

@@ -0,0 +1,13 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type SelectProps } from '../Select/index.js';
+export type { SelectOption, SelectGroup } from '../Select/index.js';
+export interface SelectFieldProps extends FieldLabelProps, Omit<SelectProps, 'invalid'> {
+}
+/**
+ * Label + Select + description + error. Select props (`options`, `value`,
+ * `onValueChange`, `placeholder`…) and the ref go to the trigger; `className`/`style` go
+ * to the field wrapper.
+ *
+ * <SelectField label="Category" options={categories} placeholder="Choose one" required />
+ */
+export declare const SelectField: import("react").ForwardRefExoticComponent<SelectFieldProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/inputs/SelectField/SelectField.js

@@ -0,0 +1,26 @@
+import { Field as e } from "../Field/Field.js";
+import { Select as t } from "../Select/Select.js";
+import { splitFieldLabelProps as n } from "../internal/fieldProps.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/inputs/SelectField/SelectField.tsx
+var a = r(function(r, a) {
+	let [o, s] = n(r), { id: c, disabled: l, className: u, style: d, ...f } = s;
+	return /* @__PURE__ */ i(e, {
+		...o,
+		htmlFor: c,
+		disabled: l,
+		className: u,
+		style: d,
+		children: /* @__PURE__ */ i(t, {
+			ref: a,
+			id: c,
+			disabled: l,
+			...f
+		})
+	});
+});
+//#endregion
+export { a as SelectField };
+
+//# sourceMappingURL=SelectField.js.map

package/dist/components/inputs/SelectField/SelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.js","names":["SelectField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","selectRest","Field","id","Select"],"sources":["../../../../src/components/inputs/SelectField/SelectField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { Select, type SelectProps } from '#components/inputs/Select'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\nexport type { SelectOption, SelectGroup } from '#components/inputs/Select'\n\nexport interface SelectFieldProps extends FieldLabelProps, Omit<SelectProps, 'invalid'> {}\n\n/**\n * Label + Select + description + error. Select props (`options`, `value`,\n * `onValueChange`, `placeholder`…) and the ref go to the trigger; `className`/`style` go\n * to the field wrapper.\n *\n * <SelectField label=\"Category\" options={categories} placeholder=\"Choose one\" required />\n */\nexport const SelectField = forwardRef<HTMLButtonElement, SelectFieldProps>(\n  function SelectField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const { id, disabled, className, style, ...selectRest } = rest\n    return (\n      <Field {...fieldProps} htmlFor={id} disabled={disabled} className={className} style={style}>\n        <Select ref={ref} id={id} disabled={disabled} {...selectRest} />\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;AAgBA,IAAaA,IAAcC,EACzB,SAAqB,GAAO,GAAK;CAC/B,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EAAE,OAAI,aAAU,cAAW,UAAO,GAAGC,MAAeH;CAC1D,OACE,kBAACI,GAAD;EAAO,GAAIL;EAAY,SAASM;EAAc;EAAqB;EAAkB;EACnF,UAAA,kBAACC,GAAD;GAAa;GAAS;GAAc;GAAU,GAAIH;EAAa,CAAA;CAC1D,CAAA;AAEX,CACF"}

package/dist/components/inputs/SelectField/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectField } from './SelectField.js';
+export type { SelectFieldProps, SelectOption, SelectGroup } from './SelectField.js';

package/dist/components/inputs/Slider/Slider.d.ts

@@ -0,0 +1,40 @@
+import { type HTMLAttributes } from 'react';
+import { type SliderMark, type SliderSize } from './SliderBase.js';
+export type { SliderMark, SliderSize } from './SliderBase.js';
+export interface SliderProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onChange' | 'defaultValue' | 'dir'> {
+    /** Controlled value. */
+    value?: number;
+    /** Initial value when uncontrolled. Defaults to `min`. */
+    defaultValue?: number;
+    /** Every change while dragging or stepping. */
+    onValueChange?: (value: number) => void;
+    /** Once, when the user lets go (or after each key press). */
+    onValueCommit?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Labelled stops under the track. A thumb on a mark reads the mark's label. */
+    marks?: readonly SliderMark[];
+    /** Shows the formatted value beside the track, in tabular figures. */
+    showValue?: boolean;
+    /** Formats the shown value and the thumb's `aria-valuetext` ("£2,500"). */
+    formatOptions?: Intl.NumberFormatOptions;
+    locale?: string;
+    /** Emits a hidden input with the value, for native form submission. */
+    name?: string;
+    disabled?: boolean;
+    /** Focusable but not editable: sets `aria-readonly` and ignores changes. */
+    readOnly?: boolean;
+    /** Critical edge on the thumb + `aria-invalid`. Inside a `<Field error>` this is set for you. */
+    invalid?: boolean;
+    size?: SliderSize;
+}
+/**
+ * One number from a continuous range (Radix Slider). Arrow keys step, Page Up/Down step
+ * by ten, Home/End jump to the ends. Label it with a `<Field>` (see `SliderField`) or
+ * `aria-label`. The ref and `id` go to the thumb — the focusable `role="slider"`;
+ * `className`/`style` and other props go to the wrapper. `onBlur` fires when focus leaves.
+ *
+ * <Slider aria-label="Discount rate" defaultValue={20} step={5} showValue formatOptions={{ style: 'unit', unit: 'percent' }} />
+ */
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/inputs/Slider/Slider.js

@@ -0,0 +1,51 @@
+import { useControllableValue as e, useFocusLeave as t } from "../CheckboxGroup/choice.js";
+import { markFieldAware as n, useResolvedField as r } from "../internal/FieldContext.js";
+import { SliderBase as i } from "./SliderBase.js";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/inputs/Slider/Slider.tsx
+var c = n(a(function({ value: n, defaultValue: a, onValueChange: c, onValueCommit: l, min: u = 0, max: d = 100, step: f = 1, marks: p, showValue: m = !1, formatOptions: h, locale: g, name: _, disabled: v, readOnly: y, invalid: b, size: x = "md", id: S, onBlur: C, "aria-label": w, "aria-labelledby": T, "aria-describedby": E, "aria-invalid": D, ...O }, k) {
+	let A = o(), j = r({
+		id: S,
+		describedBy: E,
+		invalid: b,
+		ariaInvalid: D,
+		disabled: v,
+		readOnly: y
+	}), [M, N] = e(n, a ?? u, c, j.readOnly), P = t(C);
+	return /* @__PURE__ */ s(i, {
+		...O,
+		onBlur: P,
+		values: [M],
+		onValuesChange: (e) => {
+			N(e[0] ?? u);
+		},
+		onValuesCommit: (e) => l?.(e[0] ?? u),
+		min: u,
+		max: d,
+		step: f,
+		marks: p,
+		showValue: m,
+		formatOptions: h,
+		locale: g,
+		name: _,
+		disabled: j.disabled,
+		readOnly: j.readOnly,
+		invalid: j.invalid,
+		size: x,
+		thumbs: [{
+			id: j.id ?? `${A}thumb`,
+			ref: k,
+			"aria-label": w,
+			"aria-labelledby": T ?? (w ? void 0 : j.labelId),
+			"aria-describedby": j.describedBy,
+			"aria-invalid": j.invalid || void 0,
+			"aria-readonly": j.readOnly || void 0,
+			"aria-busy": j.busy || void 0
+		}]
+	});
+}));
+//#endregion
+export { c as Slider };
+
+//# sourceMappingURL=Slider.js.map

package/dist/components/inputs/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["Slider","markFieldAware","forwardRef","disabledProp","readOnlyProp","invalidProp","idProp","ariaLabel","labelledByProp","describedByProp","ariaInvalid","rest","autoId","useId","field","useResolvedField","current","setCurrent","useControllableValue","value","defaultValue","min","onValueChange","handleBlur","useFocusLeave","onBlur","SliderBase","next","onValueCommit"],"sources":["../../../../src/components/inputs/Slider/Slider.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes } from 'react'\nimport { useControllableValue, useFocusLeave } from '#components/inputs/CheckboxGroup/choice'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { SliderBase, type SliderMark, type SliderSize } from './SliderBase'\n\nexport type { SliderMark, SliderSize } from './SliderBase'\n\nexport interface SliderProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'onChange' | 'defaultValue' | 'dir'\n> {\n  /** Controlled value. */\n  value?: number\n  /** Initial value when uncontrolled. Defaults to `min`. */\n  defaultValue?: number\n  /** Every change while dragging or stepping. */\n  onValueChange?: (value: number) => void\n  /** Once, when the user lets go (or after each key press). */\n  onValueCommit?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  /** Labelled stops under the track. A thumb on a mark reads the mark's label. */\n  marks?: readonly SliderMark[]\n  /** Shows the formatted value beside the track, in tabular figures. */\n  showValue?: boolean\n  /** Formats the shown value and the thumb's `aria-valuetext` (\"£2,500\"). */\n  formatOptions?: Intl.NumberFormatOptions\n  locale?: string\n  /** Emits a hidden input with the value, for native form submission. */\n  name?: string\n  disabled?: boolean\n  /** Focusable but not editable: sets `aria-readonly` and ignores changes. */\n  readOnly?: boolean\n  /** Critical edge on the thumb + `aria-invalid`. Inside a `<Field error>` this is set for you. */\n  invalid?: boolean\n  size?: SliderSize\n}\n\n/**\n * One number from a continuous range (Radix Slider). Arrow keys step, Page Up/Down step\n * by ten, Home/End jump to the ends. Label it with a `<Field>` (see `SliderField`) or\n * `aria-label`. The ref and `id` go to the thumb — the focusable `role=\"slider\"`;\n * `className`/`style` and other props go to the wrapper. `onBlur` fires when focus leaves.\n *\n * <Slider aria-label=\"Discount rate\" defaultValue={20} step={5} showValue formatOptions={{ style: 'unit', unit: 'percent' }} />\n */\nexport const Slider = markFieldAware(\n  forwardRef<HTMLSpanElement, SliderProps>(function Slider(\n    {\n      value,\n      defaultValue,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      marks,\n      showValue = false,\n      formatOptions,\n      locale,\n      name,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      invalid: invalidProp,\n      size = 'md',\n      id: idProp,\n      onBlur,\n      'aria-label': ariaLabel,\n      'aria-labelledby': labelledByProp,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      ...rest\n    },\n    ref,\n  ) {\n    const autoId = useId()\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n    })\n    const [current, setCurrent] = useControllableValue(\n      value,\n      defaultValue ?? min,\n      onValueChange,\n      field.readOnly,\n    )\n    const handleBlur = useFocusLeave(onBlur)\n\n    return (\n      <SliderBase\n        {...rest}\n        onBlur={handleBlur}\n        values={[current]}\n        onValuesChange={(next) => {\n          setCurrent(next[0] ?? min)\n        }}\n        onValuesCommit={(next) => onValueCommit?.(next[0] ?? min)}\n        min={min}\n        max={max}\n        step={step}\n        marks={marks}\n        showValue={showValue}\n        formatOptions={formatOptions}\n        locale={locale}\n        name={name}\n        disabled={field.disabled}\n        readOnly={field.readOnly}\n        invalid={field.invalid}\n        size={size}\n        thumbs={[\n          {\n            id: field.id ?? `${autoId}thumb`,\n            ref,\n            'aria-label': ariaLabel,\n            'aria-labelledby': labelledByProp ?? (ariaLabel ? undefined : field.labelId),\n            'aria-describedby': field.describedBy,\n            'aria-invalid': field.invalid || undefined,\n            'aria-readonly': field.readOnly || undefined,\n            'aria-busy': field.busy || undefined,\n          },\n        ]}\n      />\n    )\n  }),\n)\n"],"mappings":";;;;;;AA+CA,IAAaA,IAASC,EACpBC,EAAyC,SACvC,EACE,UACA,iBACA,kBACA,kBACA,SAAM,GACN,SAAM,KACN,UAAO,GACP,UACA,eAAY,IACZ,kBACA,WACA,SACA,UAAUC,GACV,UAAUC,GACV,SAASC,GACT,UAAO,MACP,IAAIC,GACJ,WACA,cAAcC,GACd,mBAAmBC,GACnB,oBAAoBC,GACpB,gBAAgBC,GAChB,GAAGC,KAEL,GACA;CACA,IAAMC,IAASC,EAAM,GACfC,IAAQC,EAAiB;EAC7B,IAAIT;EACJ,aAAaG;EACb,SAASJ;EACT;EACA,UAAUF;EACV,UAAUC;CACZ,CAAC,GACK,CAACY,GAASC,KAAcC,EAC5BC,GACAC,KAAgBC,GAChBC,GACAR,EAAM,QACR,GACMS,IAAaC,EAAcC,CAAM;CAEvC,OACE,kBAACC,GAAD;EACE,GAAIf;EACJ,QAAQY;EACR,QAAQ,CAACP,CAAO;EAChB,iBAAiB,MAAS;GACxB,EAAWW,EAAK,MAAMN,CAAG;EAC3B;EACA,iBAAiB,MAASO,IAAgBD,EAAK,MAAMN,CAAG;EACnD;EACA;EACC;EACC;EACI;EACI;EACP;EACF;EACN,UAAUP,EAAM;EAChB,UAAUA,EAAM;EAChB,SAASA,EAAM;EACT;EACN,QAAQ,CACN;GACE,IAAIA,EAAM,MAAM,GAAGF,EAAO;GAC1B;GACA,cAAcL;GACd,mBAAmBC,MAAmBD,IAAY,KAAA,IAAYO,EAAM;GACpE,oBAAoBA,EAAM;GAC1B,gBAAgBA,EAAM,WAAW,KAAA;GACjC,iBAAiBA,EAAM,YAAY,KAAA;GACnC,aAAaA,EAAM,QAAQ,KAAA;EAC7B,CACF;CACD,CAAA;AAEL,CAAC,CACH"}

package/dist/components/inputs/Slider/Slider.module.js

@@ -0,0 +1,15 @@
+//#region src/components/inputs/Slider/Slider.module.css
+var e = "kiln-Slider__slider", t = "kiln-Slider__control", n = "kiln-Slider__track", r = "kiln-Slider__range", i = "kiln-Slider__thumb", a = "kiln-Slider__output", o = "kiln-Slider__marks", s = "kiln-Slider__mark", c = {
+	slider: e,
+	control: t,
+	track: n,
+	range: r,
+	thumb: i,
+	output: a,
+	marks: o,
+	mark: s
+};
+//#endregion
+export { t as control, c as default, s as mark, o as marks, a as output, r as range, e as slider, i as thumb, n as track };
+
+//# sourceMappingURL=Slider.module.js.map

package/dist/components/inputs/Slider/Slider.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.module.js","names":["slider","control","track","range","thumb","output","marks","mark","Slider_module_default"],"sources":["../../../../src/components/inputs/Slider/Slider.module.css"],"sourcesContent":["/*\n * Slider and RangeSlider (both render SliderBase, so they share this module).\n *\n *   ━━━━━━━━━━●━━━━━━━━━━━━━   £2,500      ← output (showValue), tabular figures\n *   £500         £2,500     £5,000         ← marks, centred under where the thumb would sit\n *\n * Component tokens:\n *   --slider-track        default var(--color-surface-sunken)\n *   --slider-track-line   default var(--color-line-control) — the track's edge\n *   --slider-range        default var(--color-accent) — the filled part\n *   --slider-thumb-bg     default var(--color-surface)\n *   --slider-thumb-line   default var(--color-accent)\n *   --slider-thumb-shadow default var(--shadow-active)\n *\n * Mark geometry: Radix keeps the thumb inside the track, so a thumb at p% has its centre at\n * p% + thumb × (0.5 − p/100). Marks use the same formula (--_p is written per mark).\n */\n.slider {\n  --_thumb: calc(var(--control-sm) * 0.625);\n  --_track: calc(var(--space-1) * 1.5);\n\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  align-items: center;\n  column-gap: var(--space-4);\n  row-gap: var(--space-1);\n  min-inline-size: 0;\n}\n.slider[data-size='sm'] {\n  --_thumb: calc(var(--control-sm) * 0.5);\n  --_track: var(--space-1);\n}\n.slider[data-show-value] {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  align-items: center;\n  block-size: max(var(--_thumb), var(--control-sm));\n  touch-action: none;\n  user-select: none;\n  cursor: pointer;\n}\n.slider[data-disabled] .control {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n.slider[data-readonly] .control {\n  cursor: default;\n}\n\n.track {\n  position: relative;\n  flex-grow: 1;\n  overflow: hidden;\n  block-size: var(--_track);\n  border-radius: var(--_track);\n  background-color: var(--slider-track, var(--color-surface-sunken));\n  box-shadow: inset 0 0 0 1px var(--slider-track-line, var(--color-line-control));\n}\n.slider[data-invalid] .track {\n  box-shadow: inset 0 0 0 1px var(--tone-critical);\n}\n\n.range {\n  position: absolute;\n  block-size: 100%;\n  background-color: var(--slider-range, var(--color-accent));\n}\n\n.thumb {\n  box-sizing: border-box;\n  display: block;\n  inline-size: var(--_thumb);\n  block-size: var(--_thumb);\n  border: calc(var(--border-width) * 2) solid var(--slider-thumb-line, var(--color-accent));\n  border-radius: 50%;\n  background-color: var(--slider-thumb-bg, var(--color-surface));\n  box-shadow: var(--slider-thumb-shadow, var(--shadow-active));\n  transition:\n    border-color var(--dur-1) var(--ease-out),\n    scale var(--dur-1) var(--ease-spring);\n}\n.slider[data-invalid] .thumb {\n  border-color: var(--tone-critical);\n}\n@media (hover: hover) {\n  .slider:not([data-disabled], [data-readonly]) .thumb:hover {\n    scale: 1.1;\n  }\n}\n.thumb:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.output {\n  min-inline-size: 4ch;\n  color: var(--color-ink);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: var(--text-sm);\n  text-align: end;\n  white-space: nowrap;\n}\n\n.marks {\n  position: relative;\n  grid-column: 1;\n  block-size: 1lh;\n  color: var(--color-ink-muted);\n  font-size: var(--text-xs);\n  line-height: var(--leading-snug);\n}\n\n.mark {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: calc(var(--_p) * 1% + var(--_thumb) * (0.5 - var(--_p) / 100));\n  translate: -50% 0;\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n  white-space: nowrap;\n}\n[dir='rtl'] .mark {\n  translate: 50% 0;\n}\n.mark[data-edge='start'] {\n  inset-inline-start: 0;\n  translate: none;\n}\n.mark[data-edge='end'] {\n  inset-inline-start: auto;\n  inset-inline-end: 0;\n  translate: none;\n}\n"],"mappings":""}

package/dist/components/inputs/Slider/SliderBase.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type Ref } from 'react';
+export interface SliderMark {
+    value: number;
+    /** Shown under the track; also used as the thumb's `aria-valuetext` when it lands on it. */
+    label: string;
+}
+export type SliderSize = 'sm' | 'md';
+export interface SliderThumbConfig {
+    id: string;
+    ref?: Ref<HTMLSpanElement>;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: true;
+    'aria-readonly'?: true;
+    'aria-busy'?: true;
+}
+export interface SliderBaseProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onChange' | 'defaultValue' | 'dir'> {
+    values: readonly number[];
+    onValuesChange: (values: number[]) => void;
+    onValuesCommit: (values: number[]) => void;
+    min: number;
+    max: number;
+    step: number;
+    minStepsBetweenThumbs?: number;
+    marks?: readonly SliderMark[];
+    showValue: boolean;
+    formatOptions?: Intl.NumberFormatOptions;
+    locale?: string;
+    name?: string;
+    disabled: boolean;
+    readOnly: boolean;
+    invalid: boolean;
+    size: SliderSize;
+    thumbs: readonly SliderThumbConfig[];
+}
+export declare const SliderBase: import("react").ForwardRefExoticComponent<SliderBaseProps & import("react").RefAttributes<HTMLSpanElement>>;