aporia 0.1.0 → 0.2.1

package/README.md

@@ -10,8 +10,11 @@ npm install aporia
 
 ## Usage
 
+The usual setup is a **Panel** with one or more **Category** blocks, each containing rows (`SliderRow`, `ColorRow`, etc.). The package default export is `Panel`, so you can import it as the default or by name.
+
 ```tsx
-import { SliderRow, ColorRow, ToggleRow, GradientRow, ThemeProvider } from 'aporia'
+import { useState } from 'react'
+import Panel, { Category, SliderRow, ColorRow, ToggleRow, GradientRow, ThemeProvider } from 'aporia'
 import 'aporia/styles.css'
 
 function App() {
@@ -21,35 +24,40 @@ function App() {
 
   return (
     <ThemeProvider>
-      <SliderRow
-        label="Intensity"
-        value={intensity}
-        min={0}
-        max={100}
-        step={1}
-        onChange={setIntensity}
-      />
-      <ColorRow
-        label="Accent"
-        value={color}
-        onChange={setColor}
-      />
-      <ToggleRow
-        label="Enabled"
-        checked={enabled}
-        onChange={setEnabled}
-      />
-      <GradientRow
-        label="Background"
-        onChange={(gradient) => console.log(gradient)}
-      />
+      <Panel>
+        <Category title="Basics">
+          <SliderRow
+            label="Intensity"
+            value={intensity}
+            min={0}
+            max={100}
+            step={1}
+            onChange={setIntensity}
+          />
+          <ColorRow label="Accent" value={color} onChange={setColor} />
+          <ToggleRow label="Enabled" checked={enabled} onChange={setEnabled} />
+        </Category>
+        <Category title="Background">
+          <GradientRow label="Gradient" onChange={(gradient) => console.log(gradient)} />
+        </Category>
+      </Panel>
     </ThemeProvider>
   )
 }
 ```
 
+You can also compose rows without `Panel` / `Category` if you only need individual controls.
+
 ## Components
 
+### Panel
+
+Rounded shell for a configurator: drop in `Category` sections and row components as children.
+
+### Category
+
+Collapsible section with a title and optional disable-all behavior for its children.
+
 ### SliderRow
 
 A polished slider with spring animations, keyboard support, and inline editing.

package/dist/ThemeProvider.d.ts

@@ -1,9 +1,7 @@
 import { ReactNode } from 'react';
-export type Theme = 'dark' | 'light';
+export type Theme = 'dark';
 type ThemeContextValue = {
     theme: Theme;
-    setTheme: (t: Theme) => void;
-    toggleTheme: () => void;
 };
 export declare function ThemeProvider({ children }: {
     children: ReactNode;

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;AAIpC,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAA;CACxB,CAAA;AAcD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAkClE;AAED,wBAAgB,QAAQ,sBAMvB"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAEd,MAAM,MAAM,KAAK,GAAG,MAAM,CAAA;AAE1B,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,KAAK,CAAA;CACb,CAAA;AAID,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAYlE;AAED,wBAAgB,QAAQ,sBAMvB"}

package/dist/components/Category.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export type CategoryProps = {
+    title: ReactNode;
+    children: ReactNode;
+    /** When true, rows inside respect disabled styling and ignore interaction. */
+    disabled?: boolean;
+    /**
+     * When set, renders a 4×4 toggle dot (e.g. bind to UI that enables/disables the block).
+     * Called with the next disabled state when the dot is activated.
+     */
+    onDisabledChange?: (nextDisabled: boolean) => void;
+    /** Controlled collapse; use with `onCollapsedChange`. */
+    collapsed?: boolean;
+    /** Collapse state change (controlled or uncontrolled). */
+    onCollapsedChange?: (nextCollapsed: boolean) => void;
+    /** Initial collapsed state when uncontrolled. */
+    defaultCollapsed?: boolean;
+    className?: string;
+};
+export declare function Category({ title, children, disabled, onDisabledChange, collapsed: collapsedProp, onCollapsedChange, defaultCollapsed, className, }: CategoryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Category.d.ts.map

package/dist/components/Category.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../src/components/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,gBAAgB,CAAA;AAEvB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,gBAAgB,EAChB,SAAS,EAAE,aAAa,EACxB,iBAAiB,EACjB,gBAAwB,EACxB,SAAS,GACV,EAAE,aAAa,2CAmFf"}

package/dist/components/ColorPicker.d.ts

@@ -0,0 +1,6 @@
+export type ColorPickerProps = {
+    value: string;
+    onChange: (hex: string) => void;
+};
+export declare function ColorPicker({ value, onChange }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/components/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/components/ColorPicker.tsx"],"names":[],"mappings":"AAwBA,OAAO,mBAAmB,CAAA;AAE1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC,CAAA;AAoGD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAwehE"}

package/dist/components/ColorRow.d.ts

@@ -2,6 +2,7 @@ export type ColorRowProps = {
     label?: string;
     value: string;
     onChange: (hex: string) => void;
+    disabled?: boolean;
 };
-export declare function ColorRow({ label, value, onChange }: ColorRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorRow({ label, value, onChange, disabled: disabledProp }: ColorRowProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ColorRow.d.ts.map

package/dist/components/ColorRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorRow.d.ts","sourceRoot":"","sources":["../../src/components/ColorRow.tsx"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,CAAA;AAsBvB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAkI3E"}
+{"version":3,"file":"ColorRow.d.ts","sourceRoot":"","sources":["../../src/components/ColorRow.tsx"],"names":[],"mappings":"AAMA,OAAO,gBAAgB,CAAA;AAevB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,aAAa,2CA4DnG"}

package/dist/components/GradientPicker.d.ts

@@ -15,5 +15,5 @@ export declare function stopsToGradient(stops: GradientStop[], angle?: number):
 export declare function parseGradient(gradient: string): GradientStop[];
 /** Default 6 colors for gradient picker (dark to light, top to bottom) */
 export declare const DEFAULT_GRADIENT_STOPS: GradientStop[];
-export declare function GradientPicker({ stops, onChange }: GradientPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function GradientPicker({ stops, onChange, angle }: GradientPickerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=GradientPicker.d.ts.map

package/dist/components/GradientPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GradientPicker.d.ts","sourceRoot":"","sources":["../../src/components/GradientPicker.tsx"],"names":[],"mappings":"AASA,OAAO,sBAAsB,CAAA;AAE7B,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,wEAAwE;IACxE,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,+BAA+B;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IACzC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAoFD,qEAAqE;AACrE,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,SAAK,GAAG,MAAM,CAWzE;AAED,gDAAgD;AAChD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,EAAE,CAmB9D;AAED,0EAA0E;AAC1E,eAAO,MAAM,sBAAsB,EAAE,YAAY,EAOhD,CAAA;AA6HD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAyFtE"}
+{"version":3,"file":"GradientPicker.d.ts","sourceRoot":"","sources":["../../src/components/GradientPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,sBAAsB,CAAA;AAE7B,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,wEAAwE;IACxE,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,+BAA+B;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IACzC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAmDD,qEAAqE;AACrE,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,SAAK,GAAG,MAAM,CAWzE;AAED,gDAAgD;AAChD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,EAAE,CAmB9D;AAED,0EAA0E;AAC1E,eAAO,MAAM,sBAAsB,EAAE,YAAY,EAOhD,CAAA;AA+ED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAU,EAAE,EAAE,mBAAmB,2CAiHlF"}

package/dist/components/GradientRow.d.ts

@@ -7,6 +7,7 @@ export type GradientRowProps = {
     onChange?: (gradient: string) => void;
     /** Gradient angle in degrees, default 90 */
     angle?: number;
+    disabled?: boolean;
 };
-export declare function GradientRow({ label, initialStops, onChange, angle }: GradientRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function GradientRow({ label, initialStops, onChange, angle, disabled: disabledProp, }: GradientRowProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=GradientRow.d.ts.map

package/dist/components/GradientRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GradientRow.d.ts","sourceRoot":"","sources":["../../src/components/GradientRow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2D,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC7G,OAAO,mBAAmB,CAAA;AAE1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iEAAiE;IACjE,YAAY,CAAC,EAAE,YAAY,EAAE,CAAA;IAC7B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAkB,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAU,EAAE,EAAE,gBAAgB,2CA0CvG"}
+{"version":3,"file":"GradientRow.d.ts","sourceRoot":"","sources":["../../src/components/GradientRow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2D,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE7G,OAAO,mBAAmB,CAAA;AAE1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iEAAiE;IACjE,YAAY,CAAC,EAAE,YAAY,EAAE,CAAA;IAC7B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,KAAU,EACV,QAAQ,EAAE,YAAY,GACvB,EAAE,gBAAgB,2CA8ClB"}

package/dist/components/Panel.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type PanelProps = HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+};
+/**
+ * Default shell for configurator blocks: black surface, 24px radius, 16px padding,
+ * column flex anchored to the start (top).
+ */
+export declare function Panel({ children, className, ...rest }: PanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/components/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/components/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,2CASjE"}

package/dist/components/SliderRow.d.ts

@@ -6,6 +6,8 @@ export type SliderRowProps = {
     step: number;
     onChange: (value: number) => void;
     fmt?: (value: number) => string;
+    /** When true, or when inside a disabled `Category`, the row is non-interactive. */
+    disabled?: boolean;
 };
-export declare function SliderRow({ label, value, min, max, step, onChange, fmt, }: SliderRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function SliderRow({ label, value, min, max, step, onChange, fmt, disabled: disabledProp, }: SliderRowProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SliderRow.d.ts.map

package/dist/components/SliderRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRow.d.ts","sourceRoot":"","sources":["../../src/components/SliderRow.tsx"],"names":[],"mappings":"AAKA,OAAO,iBAAiB,CAAA;AAuDxB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CAChC,CAAA;AAmDD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,GAAG,GACJ,EAAE,cAAc,2CA6fhB"}
+{"version":3,"file":"SliderRow.d.ts","sourceRoot":"","sources":["../../src/components/SliderRow.tsx"],"names":[],"mappings":"AAQA,OAAO,iBAAiB,CAAA;AAuDxB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC/B,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAgDD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,GAAG,EACH,QAAQ,EAAE,YAAY,GACvB,EAAE,cAAc,2CA8bhB"}

package/dist/components/SwatchPopover.d.ts

@@ -1,3 +1,4 @@
+import { Popover } from '@base-ui/react';
 import { PopoverTrigger } from '@base-ui/react/popover';
 import { ReactNode } from 'react';
 export type SwatchPopoverRenderTrigger = PopoverTrigger.Props['render'];
@@ -5,12 +6,17 @@ type SwatchPopoverProps = {
     title?: string;
     renderTrigger: NonNullable<SwatchPopoverRenderTrigger>;
     children: ReactNode;
+    modal?: boolean;
+    side?: Popover.Positioner.Props['side'];
+    align?: Popover.Positioner.Props['align'];
+    sideOffset?: Popover.Positioner.Props['sideOffset'];
+    zIndex?: number;
 };
 /**
  * Base UI Popover anchored to a swatch: opens below, aligned to the inline end (bottom-trailing in LTR).
  * `modal={true}` is required for the internal backdrop (blocks clicks/scroll on the rest of the page).
  * `modal="trap-focus"` does not mount that layer, so controls underneath stayed clickable.
  */
-export declare function SwatchPopover({ title, renderTrigger, children }: SwatchPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwatchPopover({ title, renderTrigger, children, modal, side, align, sideOffset, zIndex, }: SwatchPopoverProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SwatchPopover.d.ts.map

package/dist/components/SwatchPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwatchPopover.d.ts","sourceRoot":"","sources":["../../src/components/SwatchPopover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,qBAAqB,CAAA;AAE5B,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;AAEvE,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAA;IACtD,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CA2BnF"}
+{"version":3,"file":"SwatchPopover.d.ts","sourceRoot":"","sources":["../../src/components/SwatchPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,qBAAqB,CAAA;AAE5B,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;AAEvE,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAA;IACtD,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,CAAA;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAa,EACb,QAAQ,EACR,KAAY,EACZ,IAAe,EACf,KAAa,EACb,UAAc,EACd,MAAM,GACP,EAAE,kBAAkB,2CA2BpB"}

package/dist/components/ToggleRow.d.ts

@@ -2,6 +2,7 @@ export type ToggleRowProps = {
     label: string;
     checked: boolean;
     onChange: (next: boolean) => void;
+    disabled?: boolean;
 };
-export declare function ToggleRow({ label, checked, onChange }: ToggleRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleRow({ label, checked, onChange, disabled: disabledProp }: ToggleRowProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ToggleRow.d.ts.map

package/dist/components/ToggleRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleRow.d.ts","sourceRoot":"","sources":["../../src/components/ToggleRow.tsx"],"names":[],"mappings":"AACA,OAAO,iBAAiB,CAAA;AAExB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAiCrE"}
+{"version":3,"file":"ToggleRow.d.ts","sourceRoot":"","sources":["../../src/components/ToggleRow.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAA;AAExB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,cAAc,2CAwC7F"}

package/dist/components/ValueInput.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+export type ValueInputProps = {
+    /** The display value (shown when not editing) */
+    value: string;
+    /** Optional prefix that appears before the value (e.g., "#" for hex) */
+    prefix?: ReactNode;
+    /** Optional suffix that appears after the value (e.g., "%" for percentages) */
+    suffix?: ReactNode;
+    /** Called when editing is committed */
+    onCommit: (value: string) => void;
+    /** Optional validation/sanitization function for input changes */
+    sanitize?: (input: string) => string;
+    /** Optional validation function that determines if value can be committed */
+    validate?: (value: string) => boolean;
+    /** Maximum length for the input */
+    maxLength?: number;
+    /** Input mode for mobile keyboards */
+    inputMode?: 'text' | 'numeric' | 'decimal';
+    /** Text alignment */
+    align?: 'left' | 'right';
+    /** Aria label for the input */
+    ariaLabel?: string;
+    /** Whether the parent is in an "active" state (hovered/dragging) */
+    isActive?: boolean;
+    /** Optional class name for the container */
+    className?: string;
+    /** Whether to auto-size the input width to content */
+    autoWidth?: boolean;
+    /** Ref to the value text element for external measurements */
+    valueTextRef?: React.RefObject<HTMLSpanElement | null>;
+    /** Handle paste events (return the processed value or null to use default) */
+    onPaste?: (pasted: string) => string | null;
+    /** Custom renderer for the display value (useful for animations like TextMorph) */
+    renderValue?: (value: string) => ReactNode;
+    /** Ref to the input element when editing */
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+    /** Callback when editing state changes */
+    onEditingChange?: (editing: boolean) => void;
+    /** Non-interactive display-only value */
+    disabled?: boolean;
+    /** External control of editing state */
+    editing?: boolean;
+    /** External control of draft value */
+    draft?: string;
+    /** External control of draft value changes */
+    onDraftChange?: (draft: string) => void;
+    /**
+     * Optional ArrowUp/ArrowDown nudge step while editing (Figma-like).
+     * If omitted, arrow keys behave normally.
+     */
+    arrowStep?: number;
+    /** Optional clamp bounds for arrow nudging only. */
+    arrowMin?: number;
+    /** Optional clamp bounds for arrow nudging only. */
+    arrowMax?: number;
+};
+/**
+ * Unified value input component with consistent hover/edit states.
+ *
+ * Behavior:
+ * - Default: muted text, transparent underline
+ * - Hover: full opacity text, underline visible
+ * - Editing: no underline, white bg/black text selection
+ */
+export declare function ValueInput({ value, prefix, suffix, onCommit, sanitize, validate, maxLength, inputMode, align, ariaLabel, isActive, className, autoWidth, valueTextRef, onPaste, renderValue, inputRef: externalInputRef, onEditingChange, editing: externalEditing, draft: externalDraft, onDraftChange, arrowStep, arrowMin, arrowMax, disabled, }: ValueInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ValueInput.d.ts.map

package/dist/components/ValueInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueInput.d.ts","sourceRoot":"","sources":["../../src/components/ValueInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,kBAAkB,CAAA;AAEzB,MAAM,MAAM,eAAe,GAAG;IAC5B,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,uCAAuC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACpC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IACrC,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;IAC1C,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,CAAA;IACtD,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAA;IAC3C,mFAAmF;IACnF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IAC1C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IACnD,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,QAAmB,EACnB,QAAqB,EACrB,SAAS,EACT,SAAkB,EAClB,KAAc,EACd,SAAS,EACT,QAAgB,EAChB,SAAS,EACT,SAAiB,EACjB,YAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EAAE,gBAAgB,EAC1B,eAAe,EACf,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,aAAa,EACpB,aAAa,EACb,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAgB,GACjB,EAAE,eAAe,2CAkMjB"}

package/dist/components/categoryDisabledContext.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare function CategoryDisabledProvider({ value, children, }: {
+    value: boolean;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** `true` when wrapped in `Category` with `disabled`. */
+export declare function useCategoryDisabled(): boolean;
+//# sourceMappingURL=categoryDisabledContext.d.ts.map

package/dist/components/categoryDisabledContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"categoryDisabledContext.d.ts","sourceRoot":"","sources":["../../src/components/categoryDisabledContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjE,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,SAAS,CAAA;CACpB,2CAMA;AAED,yDAAyD;AACzD,wBAAgB,mBAAmB,YAElC"}

package/dist/index.d.ts

@@ -1,7 +1,14 @@
+export { Panel, Panel as default } from './components/Panel';
+export type { PanelProps } from './components/Panel';
+export { Category } from './components/Category';
+export type { CategoryProps } from './components/Category';
+export { useCategoryDisabled } from './components/categoryDisabledContext';
 export { SliderRow } from './components/SliderRow';
 export type { SliderRowProps } from './components/SliderRow';
 export { ColorRow } from './components/ColorRow';
 export type { ColorRowProps } from './components/ColorRow';
+export { ColorPicker } from './components/ColorPicker';
+export type { ColorPickerProps } from './components/ColorPicker';
 export { ToggleRow } from './components/ToggleRow';
 export type { ToggleRowProps } from './components/ToggleRow';
 export { GradientRow } from './components/GradientRow';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpH,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAA;AAG5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACzD,YAAY,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAE5C,OAAO,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAA;AAG1G,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AAE1E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpH,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAA;AAG5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACzD,YAAY,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAE5C,OAAO,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAA;AAG1G,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA"}