@civitai/blocks-react 0.22.0 → 0.23.0

package/README.md

@@ -300,6 +300,7 @@ import { useBlockContext } from '@civitai/blocks-react';
 import {
   Button, TextInput, Textarea, Card, Stack, Group,
   Alert, Loader, Badge, Modal,
+  Slider, NumberInput, Select, Collapse,
 } from '@civitai/blocks-react/ui';
 
 export function App() {
@@ -338,6 +339,10 @@ export function App() {
 | `Loader` | CSS-keyframe spinner; `size`, `color`; `role="status"`. |
 | `Badge` | `variant`, `size`, `color`. |
 | `Modal` | `opened` + `onClose`, `title`, `size`; `role="dialog"` + `aria-modal`, Escape- and overlay-click-to-close, focuses the panel on open and restores focus on close. |
+| `Slider` | controlled range (`value: number`, `onChange`, `min`/`max`/`step`, `showValue`). Native `input[type=range]` — keyboard-operable, implicit `role="slider"`; accent tracks `--ci-color-primary`. Same `label`/`description`/`error`/`required` wiring as `TextInput`. |
+| `NumberInput` | controlled numeric (`value: number \| null`, `onChange`, `min`/`max`/`step`). Rejects non-numeric (never emits `NaN`), clamps to `[min,max]` on blur, empty → `null`. Same label/description/error wiring. |
+| `Select` | controlled dropdown (`value: string`, `onChange`, `options: {value,label,disabled}[]` **or** `<option>` children, `placeholder`). Native `<select>`, `role="combobox"`. Same label/description/error wiring. |
+| `Collapse` | controlled disclosure (`open` + `onOpenChange`, `title`, `disabled`) for the "advanced params reveal". `aria-expanded` + `aria-controls`; content region `role="region"`, `hidden` when closed. |
 
 Each component forwards `className` + `style`, forwards a `ref` to its DOM
 node (where it wraps one), and carries a `data-civitai-ui="<name>"` hook. Need

package/dist/ui/Collapse.d.ts

@@ -0,0 +1,24 @@
+export interface CollapseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'title'> {
+    /** Whether the content is expanded (controlled). */
+    open: boolean;
+    /** Fires with the requested next open state when the trigger is activated. */
+    onOpenChange: (open: boolean) => void;
+    /** Trigger label (the "Advanced" toggle text). */
+    title: React.ReactNode;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Class on the wrapping element. */
+    className?: string;
+    /** Content revealed when `open`. */
+    children?: React.ReactNode;
+}
+/**
+ * Controlled disclosure — the "advanced params reveal" pattern. The `<button>`
+ * trigger (ref-forwarded) carries `aria-expanded` + `aria-controls` pointing at
+ * the content region (`role="region"` + `aria-labelledby` back to the trigger),
+ * so it is keyboard-operable and correctly announced. Collapsed content is
+ * `hidden`, so it leaves the a11y tree and the tab order. Controlled like the
+ * rest of the pack (`open` + `onOpenChange`). Auto-themed.
+ */
+export declare const Collapse: import("react").ForwardRefExoticComponent<CollapseProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Collapse.d.ts.map

package/dist/ui/Collapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.d.ts","sourceRoot":"","sources":["../../src/ui/Collapse.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACxE,oDAAoD;IACpD,IAAI,EAAE,OAAO,CAAC;IACd,8EAA8E;IAC9E,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,kDAAkD;IAClD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,6GA6CpB,CAAC"}

package/dist/ui/Collapse.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { useBlocksStyles } from './styles.js';
+/**
+ * Controlled disclosure — the "advanced params reveal" pattern. The `<button>`
+ * trigger (ref-forwarded) carries `aria-expanded` + `aria-controls` pointing at
+ * the content region (`role="region"` + `aria-labelledby` back to the trigger),
+ * so it is keyboard-operable and correctly announced. Collapsed content is
+ * `hidden`, so it leaves the a11y tree and the tab order. Controlled like the
+ * rest of the pack (`open` + `onOpenChange`). Auto-themed.
+ */
+export const Collapse = forwardRef(function Collapse({ open, onOpenChange, title, disabled = false, className, children, id, ...rest }, ref) {
+    useBlocksStyles();
+    const reactId = useId();
+    const rootId = id ?? `ci-collapse-${reactId}`;
+    const triggerId = `${rootId}-trigger`;
+    const regionId = `${rootId}-region`;
+    return (_jsxs("div", { ...rest, className: className, "data-civitai-ui": "collapse", "data-open": open ? 'true' : undefined, children: [_jsxs("button", { ref: ref, id: triggerId, type: "button", "data-civitai-ui-collapse-trigger": true, "aria-expanded": open, "aria-controls": regionId, disabled: disabled, onClick: () => onOpenChange(!open), children: [_jsx("span", { "data-civitai-ui-collapse-chevron": true, "aria-hidden": "true", children: open ? '▾' : '▸' }), _jsx("span", { children: title })] }), _jsx("div", { id: regionId, role: "region", "aria-labelledby": triggerId, "data-civitai-ui-collapse-region": true, hidden: !open, children: children })] }));
+});
+//# sourceMappingURL=Collapse.js.map

package/dist/ui/Collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../src/ui/Collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAkB9C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EACjF,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,MAAM,GAAG,EAAE,IAAI,eAAe,OAAO,EAAE,CAAC;IAC9C,MAAM,SAAS,GAAG,GAAG,MAAM,UAAU,CAAC;IACtC,MAAM,QAAQ,GAAG,GAAG,MAAM,SAAS,CAAC;IAEpC,OAAO,CACL,kBACM,IAAI,EACR,SAAS,EAAE,SAAS,qBACJ,UAAU,eACf,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAEpC,kBACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,SAAS,EACb,IAAI,EAAC,QAAQ,6DAEE,IAAI,mBACJ,QAAQ,EACvB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,aAElC,wEAAmD,MAAM,YACtD,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GACZ,EACP,yBAAO,KAAK,GAAQ,IACb,EACT,cACE,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAC,QAAQ,qBACI,SAAS,2CAE1B,MAAM,EAAE,CAAC,IAAI,YAEZ,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/ui/NumberInput.d.ts

@@ -0,0 +1,39 @@
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'type' | 'size' | 'min' | 'max' | 'step'> {
+    /** Current value (controlled). `null` renders an empty field. */
+    value: number | null;
+    /** Fires with the parsed number, or `null` when the field is cleared. */
+    onChange: (value: number | null) => void;
+    /** Lower bound. Enforced (clamped) on blur. */
+    min?: number;
+    /** Upper bound. Enforced (clamped) on blur. */
+    max?: number;
+    /** Step increment for the native spinner. Default `1`. */
+    step?: number;
+    /** Visible field label, rendered in a `<label>` linked to the input. */
+    label?: React.ReactNode;
+    /** Helper text under the label, linked via `aria-describedby`. */
+    description?: React.ReactNode;
+    /** Error message. Sets `aria-invalid`, announces (`role="alert"`), links it. */
+    error?: React.ReactNode;
+    /** Mark required: shows an asterisk and sets the native `required`. */
+    required?: boolean;
+    /** Class on the wrapping element. */
+    className?: string;
+    /** Class applied to the native `<input>`. */
+    inputClassName?: string;
+}
+/**
+ * Labeled numeric input (steps / cfg / quantity params). Wraps a native
+ * `input[type="number"]` (ref-forwarded).
+ *
+ * - Fully controlled by `value` (`number | null`; `null` === empty).
+ * - **Rejects non-numeric** input: a keystroke that does not parse to a finite
+ *   number is ignored (no `onChange`), so the model value never goes NaN.
+ * - **Clamps to `[min, max]` on blur** — free typing is allowed while focused
+ *   (so "12" survives a `min` of 10 mid-type), then the committed value is
+ *   corrected to the nearest bound.
+ *
+ * Same label/description/error a11y wiring as `<TextInput>`. Auto-themed.
+ */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=NumberInput.d.ts.map

package/dist/ui/NumberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/ui/NumberInput.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CACjF;IACD,iEAAiE;IACjE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,yEAAyE;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,gFAAgF;IAChF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AASD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+GAiGvB,CAAC"}

package/dist/ui/NumberInput.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { useBlocksStyles } from './styles.js';
+function clamp(n, min, max) {
+    let out = n;
+    if (min !== undefined && out < min)
+        out = min;
+    if (max !== undefined && out > max)
+        out = max;
+    return out;
+}
+/**
+ * Labeled numeric input (steps / cfg / quantity params). Wraps a native
+ * `input[type="number"]` (ref-forwarded).
+ *
+ * - Fully controlled by `value` (`number | null`; `null` === empty).
+ * - **Rejects non-numeric** input: a keystroke that does not parse to a finite
+ *   number is ignored (no `onChange`), so the model value never goes NaN.
+ * - **Clamps to `[min, max]` on blur** — free typing is allowed while focused
+ *   (so "12" survives a `min` of 10 mid-type), then the committed value is
+ *   corrected to the nearest bound.
+ *
+ * Same label/description/error a11y wiring as `<TextInput>`. Auto-themed.
+ */
+export const NumberInput = forwardRef(function NumberInput({ value, onChange, min, max, step = 1, label, description, error, required, className, inputClassName, id, style, onBlur, ...rest }, ref) {
+    useBlocksStyles();
+    const reactId = useId();
+    const inputId = id ?? `ci-number-${reactId}`;
+    const descId = `${inputId}-desc`;
+    const errId = `${inputId}-err`;
+    const hasError = error != null && error !== false;
+    const describedBy = [description != null ? descId : null, hasError ? errId : null]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return (_jsxs("div", { className: className, "data-civitai-ui": "number-input", "data-invalid": hasError ? 'true' : undefined, style: style, children: [label != null ? (_jsxs("label", { htmlFor: inputId, "data-civitai-ui-label": true, children: [label, required ? (_jsx("span", { "data-civitai-ui-required": true, "aria-hidden": "true", children: "*" })) : null] })) : null, description != null ? (_jsx("span", { id: descId, "data-civitai-ui-description": true, children: description })) : null, _jsx("input", { ref: ref, ...rest, id: inputId, type: "number", inputMode: "decimal", className: inputClassName, "data-civitai-ui-control": true, min: min, max: max, step: step, required: required, value: value ?? '', "aria-invalid": hasError || undefined, "aria-describedby": describedBy, "aria-required": required || undefined, onChange: (e) => {
+                    const raw = e.target.value;
+                    if (raw === '') {
+                        onChange(null);
+                        return;
+                    }
+                    const parsed = Number(raw);
+                    // Reject non-numeric — leave the model value untouched.
+                    if (!Number.isFinite(parsed))
+                        return;
+                    onChange(parsed);
+                }, onBlur: (e) => {
+                    if (value !== null) {
+                        const clamped = clamp(value, min, max);
+                        if (clamped !== value)
+                            onChange(clamped);
+                    }
+                    onBlur?.(e);
+                } }), hasError ? (_jsx("span", { id: errId, "data-civitai-ui-error": true, role: "alert", children: error })) : null] }));
+});
+//# sourceMappingURL=NumberInput.js.map

package/dist/ui/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/ui/NumberInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA+B9C,SAAS,KAAK,CAAC,CAAS,EAAE,GAAY,EAAE,GAAY;IAClD,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,GAAG,GAAG;QAAE,GAAG,GAAG,GAAG,CAAC;IAC9C,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,GAAG,GAAG;QAAE,GAAG,GAAG,GAAG,CAAC;IAC9C,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EACE,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,EACH,IAAI,GAAG,CAAC,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EACd,EAAE,EACF,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EACD,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,EAAE,IAAI,aAAa,OAAO,EAAE,CAAC;IAC7C,MAAM,MAAM,GAAG,GAAG,OAAO,OAAO,CAAC;IACjC,MAAM,KAAK,GAAG,GAAG,OAAO,MAAM,CAAC;IAC/B,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC;IAClD,MAAM,WAAW,GACf,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;SAC3D,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC;IAE5B,OAAO,CACL,eACE,SAAS,EAAE,SAAS,qBACJ,cAAc,kBAChB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,KAAK,EAAE,KAAK,aAEX,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CACf,iBAAO,OAAO,EAAE,OAAO,4CACpB,KAAK,EACL,QAAQ,CAAC,CAAC,CAAC,CACV,gEAA2C,MAAM,kBAE1C,CACR,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACrB,eAAM,EAAE,EAAE,MAAM,iDACb,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,EACR,gBACE,GAAG,EAAE,GAAG,KACJ,IAAI,EACR,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE,cAAc,mCAEzB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,IAAI,EAAE,kBACJ,QAAQ,IAAI,SAAS,sBACjB,WAAW,mBACd,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,MAAM,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;oBAC3B,IAAI,GAAG,KAAK,EAAE,EAAE,CAAC;wBACf,QAAQ,CAAC,IAAI,CAAC,CAAC;wBACf,OAAO;oBACT,CAAC;oBACD,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;oBAC3B,wDAAwD;oBACxD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;wBAAE,OAAO;oBACrC,QAAQ,CAAC,MAAM,CAAC,CAAC;gBACnB,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;oBACZ,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;wBACnB,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;wBACvC,IAAI,OAAO,KAAK,KAAK;4BAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;oBAC3C,CAAC;oBACD,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;gBACd,CAAC,GACD,EACD,QAAQ,CAAC,CAAC,CAAC,CACV,eAAM,EAAE,EAAE,KAAK,iCAAwB,IAAI,EAAC,OAAO,YAChD,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/ui/Select.d.ts

@@ -0,0 +1,42 @@
+/** One option for the declarative `options` prop. */
+export interface SelectOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange' | 'value' | 'defaultValue' | 'size'> {
+    /** Current value (controlled). */
+    value: string;
+    /** Fires with the selected option's value. */
+    onChange: (value: string) => void;
+    /** Declarative options. Alternative to `<option>` `children`. */
+    options?: SelectOption[];
+    /** `<option>` children — use instead of `options` for full control. */
+    children?: React.ReactNode;
+    /**
+     * Placeholder shown as a disabled, empty-valued leading option. Rendered
+     * only alongside `options`.
+     */
+    placeholder?: string;
+    /** Visible field label, rendered in a `<label>` linked to the select. */
+    label?: React.ReactNode;
+    /** Helper text under the label, linked via `aria-describedby`. */
+    description?: React.ReactNode;
+    /** Error message. Sets `aria-invalid`, announces (`role="alert"`), links it. */
+    error?: React.ReactNode;
+    /** Mark required: shows an asterisk and sets the native `required`. */
+    required?: boolean;
+    /** Class on the wrapping element. */
+    className?: string;
+    /** Class applied to the native `<select>`. */
+    selectClassName?: string;
+}
+/**
+ * Labeled dropdown (sampler / base-model / workflow-type). Wraps a native
+ * `<select>` (ref-forwarded) — keyboard-operable and announced as a combobox
+ * with its `<label>` for free. Supply choices via `options` or `<option>`
+ * `children`. Same label/description/error a11y wiring as `<TextInput>`.
+ * Auto-themed.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=Select.d.ts.map

package/dist/ui/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/ui/Select.tsx"],"names":[],"mappings":"AAIA,qDAAqD;AACrD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,CAC/C;IACD,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iEAAiE;IACjE,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,gFAAgF;IAChF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,2GAyFjB,CAAC"}

package/dist/ui/Select.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { useBlocksStyles } from './styles.js';
+/**
+ * Labeled dropdown (sampler / base-model / workflow-type). Wraps a native
+ * `<select>` (ref-forwarded) — keyboard-operable and announced as a combobox
+ * with its `<label>` for free. Supply choices via `options` or `<option>`
+ * `children`. Same label/description/error a11y wiring as `<TextInput>`.
+ * Auto-themed.
+ */
+export const Select = forwardRef(function Select({ value, onChange, options, children, placeholder, label, description, error, required, className, selectClassName, id, style, ...rest }, ref) {
+    useBlocksStyles();
+    const reactId = useId();
+    const selectId = id ?? `ci-select-${reactId}`;
+    const descId = `${selectId}-desc`;
+    const errId = `${selectId}-err`;
+    const hasError = error != null && error !== false;
+    const describedBy = [description != null ? descId : null, hasError ? errId : null]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return (_jsxs("div", { className: className, "data-civitai-ui": "select", "data-invalid": hasError ? 'true' : undefined, style: style, children: [label != null ? (_jsxs("label", { htmlFor: selectId, "data-civitai-ui-label": true, children: [label, required ? (_jsx("span", { "data-civitai-ui-required": true, "aria-hidden": "true", children: "*" })) : null] })) : null, description != null ? (_jsx("span", { id: descId, "data-civitai-ui-description": true, children: description })) : null, _jsx("select", { ref: ref, ...rest, id: selectId, className: selectClassName, "data-civitai-ui-control": true, required: required, value: value, "aria-invalid": hasError || undefined, "aria-describedby": describedBy, "aria-required": required || undefined, onChange: (e) => onChange(e.target.value), children: options ? (_jsxs(_Fragment, { children: [placeholder !== undefined ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((opt) => (_jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)))] })) : (children) }), hasError ? (_jsx("span", { id: errId, "data-civitai-ui-error": true, role: "alert", children: error })) : null] }));
+});
+//# sourceMappingURL=Select.js.map

package/dist/ui/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/ui/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAyC9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EACE,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,WAAW,EACX,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,eAAe,EACf,EAAE,EACF,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,QAAQ,GAAG,EAAE,IAAI,aAAa,OAAO,EAAE,CAAC;IAC9C,MAAM,MAAM,GAAG,GAAG,QAAQ,OAAO,CAAC;IAClC,MAAM,KAAK,GAAG,GAAG,QAAQ,MAAM,CAAC;IAChC,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC;IAClD,MAAM,WAAW,GACf,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;SAC3D,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC;IAE5B,OAAO,CACL,eACE,SAAS,EAAE,SAAS,qBACJ,QAAQ,kBACV,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,KAAK,EAAE,KAAK,aAEX,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CACf,iBAAO,OAAO,EAAE,QAAQ,4CACrB,KAAK,EACL,QAAQ,CAAC,CAAC,CAAC,CACV,gEAA2C,MAAM,kBAE1C,CACR,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACrB,eAAM,EAAE,EAAE,MAAM,iDACb,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,EACR,iBACE,GAAG,EAAE,GAAG,KACJ,IAAI,EACR,EAAE,EAAE,QAAQ,EACZ,SAAS,EAAE,eAAe,mCAE1B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,kBACE,QAAQ,IAAI,SAAS,sBACjB,WAAW,mBACd,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,YAExC,OAAO,CAAC,CAAC,CAAC,CACT,8BACG,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,kBACtB,WAAW,GACL,CACV,CAAC,CAAC,CAAC,IAAI,EACP,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAAwB,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,YAC7D,GAAG,CAAC,KAAK,IADC,GAAG,CAAC,KAAK,CAEb,CACV,CAAC,IACD,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACM,EACR,QAAQ,CAAC,CAAC,CAAC,CACV,eAAM,EAAE,EAAE,KAAK,iCAAwB,IAAI,EAAC,OAAO,YAChD,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/ui/Slider.d.ts

@@ -0,0 +1,37 @@
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'type' | 'size' | 'min' | 'max' | 'step'> {
+    /** Current value (controlled). */
+    value: number;
+    /** Fires with the new numeric value on every input (drag / keyboard). */
+    onChange: (value: number) => void;
+    /** Minimum value. Default `0`. */
+    min?: number;
+    /** Maximum value. Default `100`. */
+    max?: number;
+    /** Step increment. Default `1`. */
+    step?: number;
+    /** Visible field label, rendered in a `<label>` linked to the input. */
+    label?: React.ReactNode;
+    /** Helper text under the label, linked via `aria-describedby`. */
+    description?: React.ReactNode;
+    /** Error message. Sets `aria-invalid`, announces (`role="alert"`), links it. */
+    error?: React.ReactNode;
+    /** Mark required: shows an asterisk and sets the native `required`. */
+    required?: boolean;
+    /** Show the current value at the end of the label row. Default `false`. */
+    showValue?: boolean;
+    /** Class on the wrapping element. */
+    className?: string;
+    /** Class applied to the native range `<input>`. */
+    inputClassName?: string;
+}
+/**
+ * Labeled range slider — the primitive the Custom Generators app most needed
+ * (LoRA weights). Wraps a native `input[type="range"]` (ref-forwarded), so it
+ * is keyboard-operable (arrows / Home / End / PageUp / PageDown) and exposes an
+ * implicit `role="slider"` with `aria-valuemin`/`max`/`now` for free. The label,
+ * description and error are wired via `htmlFor` / `id` / `aria-describedby` /
+ * `aria-invalid`. Auto-themed via `useBlocksStyles()`; the accent tracks
+ * `--ci-color-primary`.
+ */
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/ui/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/ui/Slider.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CACjF;IACD,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,gFAAgF;IAChF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,0GAkFjB,CAAC"}

package/dist/ui/Slider.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { useBlocksStyles } from './styles.js';
+/**
+ * Labeled range slider — the primitive the Custom Generators app most needed
+ * (LoRA weights). Wraps a native `input[type="range"]` (ref-forwarded), so it
+ * is keyboard-operable (arrows / Home / End / PageUp / PageDown) and exposes an
+ * implicit `role="slider"` with `aria-valuemin`/`max`/`now` for free. The label,
+ * description and error are wired via `htmlFor` / `id` / `aria-describedby` /
+ * `aria-invalid`. Auto-themed via `useBlocksStyles()`; the accent tracks
+ * `--ci-color-primary`.
+ */
+export const Slider = forwardRef(function Slider({ value, onChange, min = 0, max = 100, step = 1, label, description, error, required, showValue = false, className, inputClassName, id, style, ...rest }, ref) {
+    useBlocksStyles();
+    const reactId = useId();
+    const inputId = id ?? `ci-slider-${reactId}`;
+    const descId = `${inputId}-desc`;
+    const errId = `${inputId}-err`;
+    const hasError = error != null && error !== false;
+    const describedBy = [description != null ? descId : null, hasError ? errId : null]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return (_jsxs("div", { className: className, "data-civitai-ui": "slider", "data-invalid": hasError ? 'true' : undefined, style: style, children: [label != null || showValue ? (_jsxs("label", { htmlFor: inputId, "data-civitai-ui-label": true, children: [_jsxs("span", { children: [label, required ? (_jsx("span", { "data-civitai-ui-required": true, "aria-hidden": "true", children: "*" })) : null] }), showValue ? (_jsx("span", { "data-civitai-ui-slider-value": true, children: value })) : null] })) : null, description != null ? (_jsx("span", { id: descId, "data-civitai-ui-description": true, children: description })) : null, _jsx("input", { ref: ref, ...rest, id: inputId, type: "range", className: inputClassName, "data-civitai-ui-range": true, min: min, max: max, step: step, value: value, required: required, "aria-invalid": hasError || undefined, "aria-describedby": describedBy, "aria-required": required || undefined, onChange: (e) => onChange(Number(e.target.value)) }), hasError ? (_jsx("span", { id: errId, "data-civitai-ui-error": true, role: "alert", children: error })) : null] }));
+});
+//# sourceMappingURL=Slider.js.map

package/dist/ui/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../src/ui/Slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAiC9C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAgC,SAAS,MAAM,CAC7E,EACE,KAAK,EACL,QAAQ,EACR,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,IAAI,GAAG,CAAC,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,cAAc,EACd,EAAE,EACF,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,EAAE,IAAI,aAAa,OAAO,EAAE,CAAC;IAC7C,MAAM,MAAM,GAAG,GAAG,OAAO,OAAO,CAAC;IACjC,MAAM,KAAK,GAAG,GAAG,OAAO,MAAM,CAAC;IAC/B,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC;IAClD,MAAM,WAAW,GACf,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;SAC3D,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC;IAE5B,OAAO,CACL,eACE,SAAS,EAAE,SAAS,qBACJ,QAAQ,kBACV,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,KAAK,EAAE,KAAK,aAEX,KAAK,IAAI,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,CAC5B,iBAAO,OAAO,EAAE,OAAO,4CACrB,2BACG,KAAK,EACL,QAAQ,CAAC,CAAC,CAAC,CACV,gEAA2C,MAAM,kBAE1C,CACR,CAAC,CAAC,CAAC,IAAI,IACH,EACN,SAAS,CAAC,CAAC,CAAC,CACX,+DAAoC,KAAK,GAAQ,CAClD,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACrB,eAAM,EAAE,EAAE,MAAM,iDACb,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,EACR,gBACE,GAAG,EAAE,GAAG,KACJ,IAAI,EACR,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,cAAc,iCAEzB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,kBACJ,QAAQ,IAAI,SAAS,sBACjB,WAAW,mBACd,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GACjD,EACD,QAAQ,CAAC,CAAC,CAAC,CACV,eAAM,EAAE,EAAE,KAAK,iCAAwB,IAAI,EAAC,OAAO,YAChD,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/ui/index.d.ts

@@ -7,7 +7,8 @@
  *    controls; its contract is intentionally unstyled).
  * 2. The W6 component pack — a small, Civitai-looking, self-styled component
  *    set (Button, TextInput, Textarea, Card, Stack, Group, Alert, Loader,
- *    Badge, Modal). Zero setup: rendering any of them runs `useBlocksStyles()`
+ *    Badge, Modal, plus the form primitives Slider, NumberInput, Select,
+ *    Collapse). Zero setup: rendering any of them runs `useBlocksStyles()`
  *    which injects the pack's CSS into the block document's `<head>` once.
  *    Theme via your block's `data-theme` root (gotcha #60).
  *
@@ -37,4 +38,12 @@ export { Badge } from './Badge.js';
 export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge.js';
 export { Modal } from './Modal.js';
 export type { ModalProps, ModalSize } from './Modal.js';
+export { Slider } from './Slider.js';
+export type { SliderProps } from './Slider.js';
+export { NumberInput } from './NumberInput.js';
+export type { NumberInputProps } from './NumberInput.js';
+export { Select } from './Select.js';
+export type { SelectProps, SelectOption } from './Select.js';
+export { Collapse } from './Collapse.js';
+export type { CollapseProps } from './Collapse.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpF,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpF,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC"}

package/dist/ui/index.js

@@ -7,7 +7,8 @@
  *    controls; its contract is intentionally unstyled).
  * 2. The W6 component pack — a small, Civitai-looking, self-styled component
  *    set (Button, TextInput, Textarea, Card, Stack, Group, Alert, Loader,
- *    Badge, Modal). Zero setup: rendering any of them runs `useBlocksStyles()`
+ *    Badge, Modal, plus the form primitives Slider, NumberInput, Select,
+ *    Collapse). Zero setup: rendering any of them runs `useBlocksStyles()`
  *    which injects the pack's CSS into the block document's `<head>` once.
  *    Theme via your block's `data-theme` root (gotcha #60).
  *
@@ -29,4 +30,8 @@ export { Alert } from './Alert.js';
 export { Loader } from './Loader.js';
 export { Badge } from './Badge.js';
 export { Modal } from './Modal.js';
+export { Slider } from './Slider.js';
+export { NumberInput } from './NumberInput.js';
+export { Select } from './Select.js';
+export { Collapse } from './Collapse.js';
 //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,oEAAoE;AACpE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGpF,gCAAgC;AAChC,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAErB,uBAAuB;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGjC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,oEAAoE;AACpE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGpF,gCAAgC;AAChC,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAErB,uBAAuB;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGjC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/dist/ui/styles.d.ts

@@ -1,5 +1,5 @@
 /** The full stylesheet shipped by the pack. Exported for SSR/manual use. */
-export declare const BLOCKS_UI_STYLES = "\n:root {\n  --ci-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ci-radius: 8px;\n  --ci-color-text: #1a1a1a;\n  --ci-color-text-dimmed: #6b7280;\n  --ci-color-surface: #ffffff;\n  --ci-color-surface-2: #f4f4f5;\n  --ci-color-border: #e0e0e3;\n  --ci-color-primary: #228be6;\n  --ci-color-primary-hover: #1c7ed6;\n  --ci-color-primary-fg: #ffffff;\n  --ci-color-error: #e03131;\n  --ci-color-success: #2f9e44;\n  --ci-color-warning: #f08c00;\n  --ci-color-info: #1971c2;\n}\n\n[data-theme='light'] {\n  --ci-color-text: #1a1a1a;\n  --ci-color-text-dimmed: #6b7280;\n  --ci-color-surface: #ffffff;\n  --ci-color-surface-2: #f4f4f5;\n  --ci-color-border: #e0e0e3;\n}\n\n[data-theme='dark'] {\n  --ci-color-text: #e6e6e6;\n  --ci-color-text-dimmed: #909296;\n  --ci-color-surface: #1a1b1e;\n  --ci-color-surface-2: #25262b;\n  --ci-color-border: #2c2e33;\n  --ci-color-primary: #228be6;\n  --ci-color-primary-hover: #339af0;\n  --ci-color-primary-fg: #ffffff;\n  --ci-color-error: #ff6b6b;\n  --ci-color-success: #51cf66;\n  --ci-color-warning: #ffa94d;\n  --ci-color-info: #4dabf7;\n}\n\n\n[data-civitai-ui] {\n  box-sizing: border-box;\n  font-family: var(--ci-font);\n}\n[data-civitai-ui] *,\n[data-civitai-ui] *::before,\n[data-civitai-ui] *::after {\n  box-sizing: border-box;\n}\n\n/* ----- Button ----- */\n[data-civitai-ui='button'] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  border: 1px solid transparent;\n  border-radius: var(--ci-radius);\n  font-family: var(--ci-font);\n  font-weight: 600;\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n}\n[data-civitai-ui='button'][data-size='sm'] { height: 30px; padding: 0 14px; font-size: 13px; }\n[data-civitai-ui='button'][data-size='md'] { height: 36px; padding: 0 18px; font-size: 14px; }\n[data-civitai-ui='button'][data-size='lg'] { height: 44px; padding: 0 22px; font-size: 16px; }\n[data-civitai-ui='button'][data-full-width='true'] { width: 100%; }\n[data-civitai-ui='button'][data-variant='filled'] {\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='button'][data-variant='filled']:hover:not(:disabled) {\n  background: var(--ci-color-primary-hover);\n  border-color: var(--ci-color-primary-hover);\n}\n[data-civitai-ui='button'][data-variant='light'] {\n  background: color-mix(in srgb, var(--ci-color-primary) 12%, transparent);\n  color: var(--ci-color-primary);\n  border-color: transparent;\n}\n[data-civitai-ui='button'][data-variant='light']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 22%, transparent);\n}\n[data-civitai-ui='button'][data-variant='outline'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='button'][data-variant='outline']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);\n}\n[data-civitai-ui='button'][data-variant='subtle'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: transparent;\n}\n[data-civitai-ui='button'][data-variant='subtle']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);\n}\n[data-civitai-ui='button']:disabled,\n[data-civitai-ui='button'][aria-busy='true'] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui='button'] [data-civitai-ui-section] {\n  display: inline-flex;\n  align-items: center;\n}\n\n/* ----- TextInput / Textarea ----- */\n[data-civitai-ui='text-input'],\n[data-civitai-ui='textarea'] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n[data-civitai-ui-label] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ci-color-text);\n}\n[data-civitai-ui-required] {\n  color: var(--ci-color-error);\n  margin-left: 2px;\n}\n[data-civitai-ui-description] {\n  font-size: 12px;\n  color: var(--ci-color-text-dimmed);\n}\n[data-civitai-ui-error] {\n  font-size: 12px;\n  color: var(--ci-color-error);\n}\n[data-civitai-ui-control] {\n  width: 100%;\n  font-family: var(--ci-font);\n  font-size: 14px;\n  color: var(--ci-color-text);\n  background: var(--ci-color-surface);\n  border: 1px solid var(--ci-color-border);\n  border-radius: var(--ci-radius);\n  padding: 8px 12px;\n  transition: border-color 120ms ease;\n}\n[data-civitai-ui-control]:focus {\n  outline: none;\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui-control][aria-invalid='true'] {\n  border-color: var(--ci-color-error);\n}\n[data-civitai-ui-control]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\ntextarea[data-civitai-ui-control] {\n  resize: vertical;\n  line-height: 1.5;\n}\n\n/* ----- Card ----- */\n[data-civitai-ui='card'] {\n  background: var(--ci-color-surface);\n  border-radius: var(--ci-radius);\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='card'][data-with-border='true'] {\n  border: 1px solid var(--ci-color-border);\n}\n[data-civitai-ui='card'][data-padding='sm'] { padding: 10px; }\n[data-civitai-ui='card'][data-padding='md'] { padding: 16px; }\n[data-civitai-ui='card'][data-padding='lg'] { padding: 24px; }\n\n/* ----- Stack / Group ----- */\n[data-civitai-ui='stack'] {\n  display: flex;\n  flex-direction: column;\n}\n[data-civitai-ui='group'] {\n  display: flex;\n  flex-direction: row;\n}\n\n/* ----- Alert ----- */\n[data-civitai-ui='alert'] {\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n  padding: 12px 14px;\n  border-radius: var(--ci-radius);\n  border: 1px solid transparent;\n  font-size: 14px;\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='alert'][data-color='info'] {\n  background: color-mix(in srgb, var(--ci-color-info) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-info) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='success'] {\n  background: color-mix(in srgb, var(--ci-color-success) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-success) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='warning'] {\n  background: color-mix(in srgb, var(--ci-color-warning) 14%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-warning) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='error'] {\n  background: color-mix(in srgb, var(--ci-color-error) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-error) 35%, transparent);\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-body] {\n  flex: 1;\n  min-width: 0;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-title] {\n  font-weight: 600;\n  margin-bottom: 2px;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-close] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  font-size: 16px;\n  line-height: 1;\n  padding: 0;\n  opacity: 0.7;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-close]:hover {\n  opacity: 1;\n}\n\n/* ----- Loader ----- */\n[data-civitai-ui='loader'] {\n  display: inline-block;\n  border-radius: 50%;\n  border-style: solid;\n  border-color: color-mix(in srgb, currentColor 25%, transparent);\n  border-top-color: currentColor;\n  color: var(--ci-color-primary);\n  animation: civitai-ui-spin 0.7s linear infinite;\n}\n[data-civitai-ui='loader'][data-size='sm'] { width: 16px; height: 16px; border-width: 2px; }\n[data-civitai-ui='loader'][data-size='md'] { width: 22px; height: 22px; border-width: 3px; }\n[data-civitai-ui='loader'][data-size='lg'] { width: 32px; height: 32px; border-width: 4px; }\n@keyframes civitai-ui-spin {\n  to { transform: rotate(360deg); }\n}\n[data-civitai-ui='button'] [data-civitai-ui='loader'] {\n  color: currentColor;\n}\n\n/* ----- Badge ----- */\n[data-civitai-ui='badge'] {\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 999px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n[data-civitai-ui='badge'][data-size='sm'] { height: 18px; padding: 0 8px; font-size: 10px; }\n[data-civitai-ui='badge'][data-size='md'] { height: 22px; padding: 0 10px; font-size: 11px; }\n[data-civitai-ui='badge'][data-size='lg'] { height: 26px; padding: 0 12px; font-size: 13px; }\n[data-civitai-ui='badge'][data-variant='filled'] {\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='badge'][data-variant='light'] {\n  background: color-mix(in srgb, var(--ci-color-primary) 14%, transparent);\n  color: var(--ci-color-primary);\n}\n[data-civitai-ui='badge'][data-variant='outline'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: var(--ci-color-primary);\n}\n\n/* ----- Modal ----- */\n[data-civitai-ui='modal-overlay'] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 32px 16px;\n  overflow-y: auto;\n  z-index: 1000;\n}\n[data-civitai-ui='modal'] {\n  background: var(--ci-color-surface);\n  color: var(--ci-color-text);\n  border: 1px solid var(--ci-color-border);\n  border-radius: var(--ci-radius);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);\n  width: 100%;\n  max-width: 440px;\n  outline: none;\n}\n[data-civitai-ui='modal'][data-size='sm'] { max-width: 340px; }\n[data-civitai-ui='modal'][data-size='md'] { max-width: 440px; }\n[data-civitai-ui='modal'][data-size='lg'] { max-width: 620px; }\n[data-civitai-ui='modal'] [data-civitai-ui-modal-header] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 18px;\n  border-bottom: 1px solid var(--ci-color-border);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-title] {\n  font-size: 16px;\n  font-weight: 700;\n  margin: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--ci-color-text-dimmed);\n  font-size: 20px;\n  line-height: 1;\n  padding: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close]:hover {\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-body] {\n  padding: 18px;\n}\n";
+export declare const BLOCKS_UI_STYLES = "\n:root {\n  --ci-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ci-radius: 8px;\n  --ci-color-text: #1a1a1a;\n  --ci-color-text-dimmed: #6b7280;\n  --ci-color-surface: #ffffff;\n  --ci-color-surface-2: #f4f4f5;\n  --ci-color-border: #e0e0e3;\n  --ci-color-primary: #228be6;\n  --ci-color-primary-hover: #1c7ed6;\n  --ci-color-primary-fg: #ffffff;\n  --ci-color-error: #e03131;\n  --ci-color-success: #2f9e44;\n  --ci-color-warning: #f08c00;\n  --ci-color-info: #1971c2;\n}\n\n[data-theme='light'] {\n  --ci-color-text: #1a1a1a;\n  --ci-color-text-dimmed: #6b7280;\n  --ci-color-surface: #ffffff;\n  --ci-color-surface-2: #f4f4f5;\n  --ci-color-border: #e0e0e3;\n}\n\n[data-theme='dark'] {\n  --ci-color-text: #e6e6e6;\n  --ci-color-text-dimmed: #909296;\n  --ci-color-surface: #1a1b1e;\n  --ci-color-surface-2: #25262b;\n  --ci-color-border: #2c2e33;\n  --ci-color-primary: #228be6;\n  --ci-color-primary-hover: #339af0;\n  --ci-color-primary-fg: #ffffff;\n  --ci-color-error: #ff6b6b;\n  --ci-color-success: #51cf66;\n  --ci-color-warning: #ffa94d;\n  --ci-color-info: #4dabf7;\n}\n\n\n[data-civitai-ui] {\n  box-sizing: border-box;\n  font-family: var(--ci-font);\n}\n[data-civitai-ui] *,\n[data-civitai-ui] *::before,\n[data-civitai-ui] *::after {\n  box-sizing: border-box;\n}\n\n/* ----- Button ----- */\n[data-civitai-ui='button'] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  border: 1px solid transparent;\n  border-radius: var(--ci-radius);\n  font-family: var(--ci-font);\n  font-weight: 600;\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n}\n[data-civitai-ui='button'][data-size='sm'] { height: 30px; padding: 0 14px; font-size: 13px; }\n[data-civitai-ui='button'][data-size='md'] { height: 36px; padding: 0 18px; font-size: 14px; }\n[data-civitai-ui='button'][data-size='lg'] { height: 44px; padding: 0 22px; font-size: 16px; }\n[data-civitai-ui='button'][data-full-width='true'] { width: 100%; }\n[data-civitai-ui='button'][data-variant='filled'] {\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='button'][data-variant='filled']:hover:not(:disabled) {\n  background: var(--ci-color-primary-hover);\n  border-color: var(--ci-color-primary-hover);\n}\n[data-civitai-ui='button'][data-variant='light'] {\n  background: color-mix(in srgb, var(--ci-color-primary) 12%, transparent);\n  color: var(--ci-color-primary);\n  border-color: transparent;\n}\n[data-civitai-ui='button'][data-variant='light']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 22%, transparent);\n}\n[data-civitai-ui='button'][data-variant='outline'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='button'][data-variant='outline']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);\n}\n[data-civitai-ui='button'][data-variant='subtle'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: transparent;\n}\n[data-civitai-ui='button'][data-variant='subtle']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);\n}\n[data-civitai-ui='button']:disabled,\n[data-civitai-ui='button'][aria-busy='true'] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui='button'] [data-civitai-ui-section] {\n  display: inline-flex;\n  align-items: center;\n}\n\n/* ----- TextInput / Textarea / NumberInput / Select / Slider ----- */\n[data-civitai-ui='text-input'],\n[data-civitai-ui='textarea'],\n[data-civitai-ui='number-input'],\n[data-civitai-ui='select'],\n[data-civitai-ui='slider'] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n[data-civitai-ui-label] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ci-color-text);\n}\n[data-civitai-ui-required] {\n  color: var(--ci-color-error);\n  margin-left: 2px;\n}\n[data-civitai-ui-description] {\n  font-size: 12px;\n  color: var(--ci-color-text-dimmed);\n}\n[data-civitai-ui-error] {\n  font-size: 12px;\n  color: var(--ci-color-error);\n}\n[data-civitai-ui-control] {\n  width: 100%;\n  font-family: var(--ci-font);\n  font-size: 14px;\n  color: var(--ci-color-text);\n  background: var(--ci-color-surface);\n  border: 1px solid var(--ci-color-border);\n  border-radius: var(--ci-radius);\n  padding: 8px 12px;\n  transition: border-color 120ms ease;\n}\n[data-civitai-ui-control]:focus {\n  outline: none;\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui-control][aria-invalid='true'] {\n  border-color: var(--ci-color-error);\n}\n[data-civitai-ui-control]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\ntextarea[data-civitai-ui-control] {\n  resize: vertical;\n  line-height: 1.5;\n}\n\n/* ----- Card ----- */\n[data-civitai-ui='card'] {\n  background: var(--ci-color-surface);\n  border-radius: var(--ci-radius);\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='card'][data-with-border='true'] {\n  border: 1px solid var(--ci-color-border);\n}\n[data-civitai-ui='card'][data-padding='sm'] { padding: 10px; }\n[data-civitai-ui='card'][data-padding='md'] { padding: 16px; }\n[data-civitai-ui='card'][data-padding='lg'] { padding: 24px; }\n\n/* ----- Stack / Group ----- */\n[data-civitai-ui='stack'] {\n  display: flex;\n  flex-direction: column;\n}\n[data-civitai-ui='group'] {\n  display: flex;\n  flex-direction: row;\n}\n\n/* ----- Alert ----- */\n[data-civitai-ui='alert'] {\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n  padding: 12px 14px;\n  border-radius: var(--ci-radius);\n  border: 1px solid transparent;\n  font-size: 14px;\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='alert'][data-color='info'] {\n  background: color-mix(in srgb, var(--ci-color-info) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-info) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='success'] {\n  background: color-mix(in srgb, var(--ci-color-success) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-success) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='warning'] {\n  background: color-mix(in srgb, var(--ci-color-warning) 14%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-warning) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='error'] {\n  background: color-mix(in srgb, var(--ci-color-error) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-error) 35%, transparent);\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-body] {\n  flex: 1;\n  min-width: 0;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-title] {\n  font-weight: 600;\n  margin-bottom: 2px;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-close] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  font-size: 16px;\n  line-height: 1;\n  padding: 0;\n  opacity: 0.7;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-close]:hover {\n  opacity: 1;\n}\n\n/* ----- Loader ----- */\n[data-civitai-ui='loader'] {\n  display: inline-block;\n  border-radius: 50%;\n  border-style: solid;\n  border-color: color-mix(in srgb, currentColor 25%, transparent);\n  border-top-color: currentColor;\n  color: var(--ci-color-primary);\n  animation: civitai-ui-spin 0.7s linear infinite;\n}\n[data-civitai-ui='loader'][data-size='sm'] { width: 16px; height: 16px; border-width: 2px; }\n[data-civitai-ui='loader'][data-size='md'] { width: 22px; height: 22px; border-width: 3px; }\n[data-civitai-ui='loader'][data-size='lg'] { width: 32px; height: 32px; border-width: 4px; }\n@keyframes civitai-ui-spin {\n  to { transform: rotate(360deg); }\n}\n[data-civitai-ui='button'] [data-civitai-ui='loader'] {\n  color: currentColor;\n}\n\n/* ----- Badge ----- */\n[data-civitai-ui='badge'] {\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 999px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n[data-civitai-ui='badge'][data-size='sm'] { height: 18px; padding: 0 8px; font-size: 10px; }\n[data-civitai-ui='badge'][data-size='md'] { height: 22px; padding: 0 10px; font-size: 11px; }\n[data-civitai-ui='badge'][data-size='lg'] { height: 26px; padding: 0 12px; font-size: 13px; }\n[data-civitai-ui='badge'][data-variant='filled'] {\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='badge'][data-variant='light'] {\n  background: color-mix(in srgb, var(--ci-color-primary) 14%, transparent);\n  color: var(--ci-color-primary);\n}\n[data-civitai-ui='badge'][data-variant='outline'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: var(--ci-color-primary);\n}\n\n/* ----- Modal ----- */\n[data-civitai-ui='modal-overlay'] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 32px 16px;\n  overflow-y: auto;\n  z-index: 1000;\n}\n[data-civitai-ui='modal'] {\n  background: var(--ci-color-surface);\n  color: var(--ci-color-text);\n  border: 1px solid var(--ci-color-border);\n  border-radius: var(--ci-radius);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);\n  width: 100%;\n  max-width: 440px;\n  outline: none;\n}\n[data-civitai-ui='modal'][data-size='sm'] { max-width: 340px; }\n[data-civitai-ui='modal'][data-size='md'] { max-width: 440px; }\n[data-civitai-ui='modal'][data-size='lg'] { max-width: 620px; }\n[data-civitai-ui='modal'] [data-civitai-ui-modal-header] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 18px;\n  border-bottom: 1px solid var(--ci-color-border);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-title] {\n  font-size: 16px;\n  font-weight: 700;\n  margin: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--ci-color-text-dimmed);\n  font-size: 20px;\n  line-height: 1;\n  padding: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close]:hover {\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-body] {\n  padding: 18px;\n}\n\n/* ----- Slider ----- */\n[data-civitai-ui='slider'] [data-civitai-ui-label] {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 8px;\n}\n[data-civitai-ui-slider-value] {\n  font-weight: 500;\n  color: var(--ci-color-text-dimmed);\n  font-variant-numeric: tabular-nums;\n}\n[data-civitai-ui-range] {\n  width: 100%;\n  margin: 0;\n  accent-color: var(--ci-color-primary);\n  cursor: pointer;\n}\n[data-civitai-ui-range]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui-range]:focus-visible {\n  outline: 2px solid var(--ci-color-primary);\n  outline-offset: 2px;\n}\n\n/* ----- Collapse ----- */\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 6px 0;\n  background: transparent;\n  border: none;\n  font-family: var(--ci-font);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ci-color-text);\n  text-align: left;\n  cursor: pointer;\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-chevron] {\n  display: inline-block;\n  width: 1em;\n  color: var(--ci-color-text-dimmed);\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-region] {\n  padding-top: 4px;\n}\n";
 /**
  * Inject the pack's stylesheet into a document's `<head>` exactly once.
  * Idempotent: subsequent calls (including from other components) detect the

package/dist/ui/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AA4XA,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,uzUAAgC,CAAC;AAE9D;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAgBvD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAItC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAubA,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,+wXAAgC,CAAC;AAE9D;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAgBvD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAItC"}

package/dist/ui/styles.js

@@ -146,9 +146,12 @@ const COMPONENT_CSS = `
   align-items: center;
 }
 
-/* ----- TextInput / Textarea ----- */
+/* ----- TextInput / Textarea / NumberInput / Select / Slider ----- */
 [data-civitai-ui='text-input'],
-[data-civitai-ui='textarea'] {
+[data-civitai-ui='textarea'],
+[data-civitai-ui='number-input'],
+[data-civitai-ui='select'],
+[data-civitai-ui='slider'] {
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -372,6 +375,62 @@ textarea[data-civitai-ui-control] {
 [data-civitai-ui='modal'] [data-civitai-ui-modal-body] {
   padding: 18px;
 }
+
+/* ----- Slider ----- */
+[data-civitai-ui='slider'] [data-civitai-ui-label] {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 8px;
+}
+[data-civitai-ui-slider-value] {
+  font-weight: 500;
+  color: var(--ci-color-text-dimmed);
+  font-variant-numeric: tabular-nums;
+}
+[data-civitai-ui-range] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--ci-color-primary);
+  cursor: pointer;
+}
+[data-civitai-ui-range]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+[data-civitai-ui-range]:focus-visible {
+  outline: 2px solid var(--ci-color-primary);
+  outline-offset: 2px;
+}
+
+/* ----- Collapse ----- */
+[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 0;
+  background: transparent;
+  border: none;
+  font-family: var(--ci-font);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ci-color-text);
+  text-align: left;
+  cursor: pointer;
+}
+[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+[data-civitai-ui='collapse'] [data-civitai-ui-collapse-chevron] {
+  display: inline-block;
+  width: 1em;
+  color: var(--ci-color-text-dimmed);
+}
+[data-civitai-ui='collapse'] [data-civitai-ui-collapse-region] {
+  padding-top: 4px;
+}
 `;
 /** The full stylesheet shipped by the pack. Exported for SSR/manual use. */
 export const BLOCKS_UI_STYLES = `${TOKENS}\n${COMPONENT_CSS}`;

package/dist/ui/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;;;;;;;;;;;;;;GAgBG;AAEH,6EAA6E;AAC7E,MAAM,YAAY,GAAG,wBAAwB,CAAC;AAE9C;;;;;GAKG;AACH,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCd,CAAC;AAEF;;;;GAIG;AACH,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8SrB,CAAC;AAEF,4EAA4E;AAC5E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,MAAM,KAAK,aAAa,EAAE,CAAC;AAE9D;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAAC,GAAc;IAC/C,MAAM,MAAM,GACV,GAAG,IAAI,CAAC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAClE,IAAI,CAAC,MAAM;QAAE,OAAO;IACpB,yCAAyC;IACzC,IAAI,MAAM,CAAC,aAAa,CAAC,SAAS,YAAY,GAAG,CAAC;QAAE,OAAO;IAC3D,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC5C,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACzC,KAAK,CAAC,WAAW,GAAG,gBAAgB,CAAC;IACrC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;SAAM,CAAC;QACN,oEAAoE;QACpE,MAAM,CAAC,eAAe,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,EAAE,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;;;;;;;;;;;;;;GAgBG;AAEH,6EAA6E;AAC7E,MAAM,YAAY,GAAG,wBAAwB,CAAC;AAE9C;;;;;GAKG;AACH,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCd,CAAC;AAEF;;;;GAIG;AACH,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyWrB,CAAC;AAEF,4EAA4E;AAC5E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,MAAM,KAAK,aAAa,EAAE,CAAC;AAE9D;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAAC,GAAc;IAC/C,MAAM,MAAM,GACV,GAAG,IAAI,CAAC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAClE,IAAI,CAAC,MAAM;QAAE,OAAO;IACpB,yCAAyC;IACzC,IAAI,MAAM,CAAC,aAAa,CAAC,SAAS,YAAY,GAAG,CAAC;QAAE,OAAO;IAC3D,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC5C,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACzC,KAAK,CAAC,WAAW,GAAG,gBAAgB,CAAC;IACrC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;SAAM,CAAC;QACN,oEAAoE;QACpE,MAAM,CAAC,eAAe,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,EAAE,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civitai/blocks-react",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "React hooks and iframe transport for Civitai Apps. Pairs with @civitai/app-sdk/blocks.",
   "license": "MIT",
   "type": "module",