@cwellt_software/cwellt-reactjs-lib 1.5.3 → 1.6.0

package/dist/src/storybook/componentMappings.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Example component-assignment remaps for the Storybook "Component Mapping" toolbar - a dev/QA tool
+ * to eyeball what icons, solid/outline buttons and table headers/row-selected states would look like
+ * if they were assigned to a different semantic family, before locking the assignment in Figma.
+ *
+ * These override the LAYER-3 tokens in cw-theme.css (the "# Component assignments" section) - the
+ * layer components actually consume (CwIcon, CwButton, CwTable). Unlike the "Palette" toolbar (which
+ * overrides layer-1 primitives and cascades upward through every layer), this tool stays scoped to
+ * layer 3, so it previews a re-mapping of which family a component reads without touching what any
+ * family's colors are.
+ *
+ * Values here point at real existing tokens (layer 1, 2 or 3), never invented ones - per project
+ * convention, library stories stay domain-neutral (no real client names, no real client colors).
+ *
+ * Consumption flip in progress: cw-button.css and the generic button rule already read the layer-3
+ * names (--cw-button-solid-*, --cw-icon-content/-hover), so those mappings are live. The table pair
+ * goes live when CwTable flips. Each mapping still sets the matching OLD bridge token too, for the
+ * components that have not flipped yet (date-text icon, picker accent, table and accordion icon
+ * overrides); the duals go when the last of them moves.
+ */
+export type ComponentMappingOverrides = Record<string, string>;
+export interface NamedComponentMapping {
+    label: string;
+    overrides: ComponentMappingOverrides;
+}
+/** Keyed by the Storybook toolbar item id. "Default" is cw-theme.css as shipped - no overrides. */
+export declare const STORYBOOK_COMPONENT_MAPPINGS: Record<string, NamedComponentMapping>;
+export declare const DEFAULT_COMPONENT_MAPPING_KEY = "Default";
+//# sourceMappingURL=componentMappings.d.ts.map

package/dist/src/storybook/componentMappings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentMappings.d.ts","sourceRoot":"","sources":["../../../src/storybook/componentMappings.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE/D,MAAM,WAAW,qBAAqB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,yBAAyB,CAAC;CACrC;AAkDD,mGAAmG;AACnG,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAI9E,CAAC;AAEF,eAAO,MAAM,6BAA6B,YAAY,CAAC"}

package/dist/src/storybook/cssVarOverrideStore.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared bookkeeping behind useCssVarOverride. Several instances run at once on a docs page
+ * (autodocs renders every story of the component, each with its own decorator), all writing the same
+ * root variables. The original inline value of a variable is therefore captured once, by the first
+ * holder that touches it, and restored once, by the last holder that lets go of it. An instance that
+ * captured "what was there" after a sibling had already applied the palette would otherwise restore
+ * that sibling's palette on cleanup, and switching back to Default would keep showing it.
+ */
+/** The slice of CSSStyleDeclaration the store needs; a plain object works in tests. */
+export interface StyleTarget {
+    getPropertyValue(name: string): string;
+    getPropertyPriority(name: string): string;
+    setProperty(name: string, value: string, priority?: string): void;
+    removeProperty(name: string): void;
+}
+export declare function createCssVarOverrideStore(): {
+    apply: (style: StyleTarget, overrides: Record<string, string>) => () => void;
+};
+/** The one store every decorator instance on the page shares. */
+export declare const cssVarOverrideStore: {
+    apply: (style: StyleTarget, overrides: Record<string, string>) => () => void;
+};
+//# sourceMappingURL=cssVarOverrideStore.d.ts.map

package/dist/src/storybook/cssVarOverrideStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssVarOverrideStore.d.ts","sourceRoot":"","sources":["../../../src/storybook/cssVarOverrideStore.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,uFAAuF;AACvF,MAAM,WAAW,WAAW;IAC3B,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACvC,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1C,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClE,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACnC;AAQD,wBAAgB,yBAAyB;mBAIlB,WAAW,aAAa,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAG,MAAM,IAAI;EA+BjF;AAED,iEAAiE;AACjE,eAAO,MAAM,mBAAmB;mBAlCT,WAAW,aAAa,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAG,MAAM,IAAI;CAkCpB,CAAC"}

package/dist/src/storybook/groupLayoutStoryArgs.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Flat story controls for the group components (CwRadioGroup, CwCheckboxGroup): the two nested
+ * layout axes of CwGroupLayoutProps (`groupLayout` = label vs options block, `itemLayout` = flow
+ * of the options), plus the label and feedback objects they share. Same idea as layoutStoryArgs
+ * and inputStoryArgs: one control per meaningful field, the real object props stay in the docs
+ * table without a control, and the snippet shows the real props. Reuse from a group story:
+ *
+ *   args: { ...groupStoryDefaults, options: [...] },
+ *   argTypes: { ...groupStoryArgTypesFor({ group: {...}, item: {...} }), ...hiddenGroupPropControls },
+ *   render: (args) => <CwSomethingGroup {...toGroupProps(args)} />,
+ *   parameters: groupStorySource("CwSomethingGroup"),
+ */
+import type { ArgTypes } from "@storybook/react-vite";
+import type { CwInputFeedback } from "../common/interfaces/CwFormTypes";
+import type { CwGroupLayoutProps, CwLayoutProps } from "../common/interfaces/CwLayoutProps";
+import type { CwLabelProps } from "../components/display/text/label/CwLabel";
+declare const DEFAULT = "default";
+type Direction = NonNullable<CwLayoutProps["direction"]>;
+type Align = NonNullable<CwLayoutProps["align"]>;
+type Gap = NonNullable<CwLayoutProps["gap"]>;
+declare const FEEDBACK_TYPES: readonly ["none", "danger", "warning", "success", "info", "neutral"];
+export interface GroupStoryArgs {
+    groupDirection: typeof DEFAULT | Direction;
+    groupAlign: typeof DEFAULT | Align;
+    groupGap: typeof DEFAULT | Gap;
+    itemDirection: typeof DEFAULT | Direction;
+    itemGap: typeof DEFAULT | Gap;
+    labelText: string;
+    feedbackType: (typeof FEEDBACK_TYPES)[number];
+    feedbackMessage: string;
+}
+export declare const groupStoryDefaults: GroupStoryArgs;
+/** The values each axis really styles; a field left out gets no control. */
+export interface SupportedGroupLayout {
+    group?: {
+        direction?: readonly Direction[];
+        align?: readonly Align[];
+        gap?: readonly Gap[];
+    };
+    item?: {
+        direction?: readonly Direction[];
+        gap?: readonly Gap[];
+    };
+}
+export declare function groupStoryArgTypesFor(supported: SupportedGroupLayout): ArgTypes<GroupStoryArgs>;
+/** The real object props keep their row in the docs table but get no control of their own. */
+export declare const hiddenGroupPropControls: {
+    groupLayout: {
+        control: false;
+    };
+    itemLayout: {
+        control: false;
+    };
+    labelProps: {
+        control: false;
+    };
+    feedback: {
+        control: false;
+    };
+};
+export interface GroupObjectProps extends CwGroupLayoutProps {
+    labelProps: CwLabelProps | undefined;
+    feedback: CwInputFeedback | undefined;
+}
+/** Translates the flat story args into the component's object props and drops the flat keys. */
+export declare function toGroupProps<T extends Partial<GroupStoryArgs>>(args: T): Omit<T, keyof GroupStoryArgs> & GroupObjectProps;
+export declare function groupStorySource(componentName: string, componentDefaults?: Record<string, unknown>): {
+    docs: {
+        source: {
+            transform: (_code: string, storyContext: {
+                args: Record<string, unknown>;
+            }) => string;
+        };
+    };
+};
+export {};
+//# sourceMappingURL=groupLayoutStoryArgs.d.ts.map

package/dist/src/storybook/groupLayoutStoryArgs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groupLayoutStoryArgs.d.ts","sourceRoot":"","sources":["../../../src/storybook/groupLayoutStoryArgs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAC5F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAG7E,QAAA,MAAM,OAAO,YAAY,CAAC;AAC1B,KAAK,SAAS,GAAG,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;AACzD,KAAK,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;AACjD,KAAK,GAAG,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAC7C,QAAA,MAAM,cAAc,sEAAuE,CAAC;AAE5F,MAAM,WAAW,cAAc;IAC9B,cAAc,EAAE,OAAO,OAAO,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,OAAO,OAAO,GAAG,KAAK,CAAC;IACnC,QAAQ,EAAE,OAAO,OAAO,GAAG,GAAG,CAAC;IAC/B,aAAa,EAAE,OAAO,OAAO,GAAG,SAAS,CAAC;IAC1C,OAAO,EAAE,OAAO,OAAO,GAAG,GAAG,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;IAC9C,eAAe,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,EAAE,cAShC,CAAC;AAOF,4EAA4E;AAC5E,MAAM,WAAW,oBAAoB;IACpC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;QAAC,KAAK,CAAC,EAAE,SAAS,KAAK,EAAE,CAAC;QAAC,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,CAAA;KAAE,CAAC;IAC7F,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;QAAC,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,CAAA;KAAE,CAAC;CAClE;AAED,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,oBAAoB,GAAG,QAAQ,CAAC,cAAc,CAAC,CAiB/F;AAED,8FAA8F;AAC9F,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAKhB,CAAC;AAErB,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC3D,UAAU,EAAE,YAAY,GAAG,SAAS,CAAC;IACrC,QAAQ,EAAE,eAAe,GAAG,SAAS,CAAC;CACtC;AAOD,gGAAgG;AAChG,wBAAgB,YAAY,CAAC,CAAC,SAAS,OAAO,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,GAAG,gBAAgB,CAYzH;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;EAEtG"}

package/dist/src/storybook/inputStoryArgs.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Flat, self-explanatory story controls for the object props every input shares
+ * (alignProps, labelProps, feedback, buttonProps), and the translation back to the real props.
+ *
+ * Storybook's object editor shows keys but neither the valid values nor what they do, so the stories
+ * expose one control per meaningful field instead and hide the raw object props from the controls
+ * (they stay in the docs table with their real type). Reuse from any input story:
+ *
+ *   args: { ...inputStoryDefaults, placeholder: "..." },
+ *   argTypes: { ...inputStoryArgTypes, ...hiddenObjectPropControls },
+ *   render: (args) => <CwSomething {...toInputProps(args)} />
+ */
+import type { ArgTypes } from "@storybook/react-vite";
+import type { CwInputFeedback } from "../common/interfaces/CwFormTypes";
+import type { CwButtonProps } from "../components/control/action/button/CwButton";
+import type { CwLabelProps } from "../components/display/text/label/CwLabel";
+import type { CwAlignProps } from "../components/layout/align/CwAlign";
+export declare const LABEL_WIDTHS: readonly ["6rem", "7rem", "8rem", "9rem", "10rem", "12rem", "15rem"];
+declare const FEEDBACK_TYPES: readonly ["none", "danger", "warning", "success", "info", "neutral"];
+declare const ALIGN_ITEMS: readonly ["stretch", "center", "flex-start", "flex-end"];
+export interface InputStoryArgs {
+    direction: "row" | "column";
+    alignItems: (typeof ALIGN_ITEMS)[number];
+    labelText: string;
+    labelWidth: (typeof LABEL_WIDTHS)[number];
+    feedbackType: (typeof FEEDBACK_TYPES)[number];
+    feedbackMessage: string;
+    button: "none" | "text" | "icon";
+    buttonVariant: "solid" | "outline" | "ghost";
+    buttonColor: "primary" | "danger" | "neutral";
+}
+export declare const inputStoryDefaults: InputStoryArgs;
+export declare const inputStoryArgTypes: ArgTypes<InputStoryArgs>;
+/** The real object props keep their row in the docs table but get no control of their own. */
+export declare const hiddenObjectPropControls: {
+    alignProps: {
+        control: false;
+    };
+    labelProps: {
+        control: false;
+    };
+    feedback: {
+        control: false;
+    };
+    buttonProps: {
+        control: false;
+    };
+};
+export interface InputObjectProps {
+    alignProps: CwAlignProps | undefined;
+    labelProps: CwLabelProps | undefined;
+    feedback: CwInputFeedback | undefined;
+    buttonProps: CwButtonProps | undefined;
+}
+/** Docs "Show code" / Code panel: the real props, minus the component defaults (see storySource). */
+export declare function inputStorySource(componentName: string, componentDefaults?: Record<string, unknown>): {
+    docs: {
+        source: {
+            transform: (_code: string, storyContext: {
+                args: Record<string, unknown>;
+            }) => string;
+        };
+    };
+};
+/** Translates the flat story args into the component's object props and drops the flat keys. */
+export declare function toInputProps<T extends Partial<InputStoryArgs>>(args: T): Omit<T, keyof InputStoryArgs> & InputObjectProps;
+export {};
+//# sourceMappingURL=inputStoryArgs.d.ts.map

package/dist/src/storybook/inputStoryArgs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputStoryArgs.d.ts","sourceRoot":"","sources":["../../../src/storybook/inputStoryArgs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAClF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAGvE,eAAO,MAAM,YAAY,sEAAuE,CAAC;AACjG,QAAA,MAAM,cAAc,sEAAuE,CAAC;AAC5F,QAAA,MAAM,WAAW,0DAA2D,CAAC;AAE7E,MAAM,WAAW,cAAc;IAC9B,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,UAAU,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C,YAAY,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;IAC9C,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,aAAa,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7C,WAAW,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC9C;AAED,eAAO,MAAM,kBAAkB,EAAE,cAUhC,CAAC;AAOF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,cAAc,CAUvD,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;CAKjB,CAAC;AAErB,MAAM,WAAW,gBAAgB;IAChC,UAAU,EAAE,YAAY,GAAG,SAAS,CAAC;IACrC,UAAU,EAAE,YAAY,GAAG,SAAS,CAAC;IACrC,QAAQ,EAAE,eAAe,GAAG,SAAS,CAAC;IACtC,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACvC;AAED,qGAAqG;AACrG,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;EAEtG;AAED,gGAAgG;AAChG,wBAAgB,YAAY,CAAC,CAAC,SAAS,OAAO,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,GAAG,gBAAgB,CAwBzH"}

package/dist/src/storybook/layoutStoryArgs.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Flat story controls for the `layout` prop (CwLayoutProps) shared by CwNote, CwCard, CwRadioGroup,
+ * CwCheckboxGroup, CwKeyValueList..., and the translation back to the object. "default" means the
+ * field is not set, so the component keeps its own behaviour. Reuse from any story:
+ *
+ *   args: { ...layoutStoryDefaults, ... },
+ *   argTypes: { ...layoutStoryArgTypes, ...hiddenLayoutPropControls },
+ *   render: (args) => <CwSomething {...toLayoutProps(args)} />,
+ *   parameters: layoutStorySource("CwSomething"),
+ */
+import type { ArgTypes } from "@storybook/react-vite";
+import type { CwLayoutProps } from "../common/interfaces/CwLayoutProps";
+declare const DEFAULT = "default";
+declare const DIRECTIONS: readonly ["default", "row", "column"];
+declare const ALIGNS: readonly ["default", "start", "center", "end", "stretch"];
+declare const JUSTIFIES: readonly ["default", "start", "center", "end", "between", "around"];
+declare const GAPS: readonly ["default", "none", "small", "medium", "large"];
+export interface LayoutStoryArgs {
+    layoutDirection: (typeof DIRECTIONS)[number];
+    layoutAlign: (typeof ALIGNS)[number];
+    layoutJustify: (typeof JUSTIFIES)[number];
+    layoutGap: (typeof GAPS)[number];
+}
+export declare const layoutStoryDefaults: LayoutStoryArgs;
+/** The values a component actually styles, per layout field. A field left out gets no control (not supported yet). */
+export interface SupportedLayout {
+    direction?: readonly Exclude<(typeof DIRECTIONS)[number], typeof DEFAULT>[];
+    align?: readonly Exclude<(typeof ALIGNS)[number], typeof DEFAULT>[];
+    justify?: readonly Exclude<(typeof JUSTIFIES)[number], typeof DEFAULT>[];
+    gap?: readonly Exclude<(typeof GAPS)[number], typeof DEFAULT>[];
+}
+/**
+ * Controls for the layout fields the component styles. CwLayoutProps declares more than most
+ * components implement (CwNote has no `justify`, no `align: stretch`), and a radio that does
+ * nothing is worse than no radio: pass what the component's css handles.
+ */
+export declare function layoutStoryArgTypesFor(supported: SupportedLayout): ArgTypes<LayoutStoryArgs>;
+/** Every field with every value, for a component that implements CwLayoutProps in full. */
+export declare const layoutStoryArgTypes: ArgTypes<LayoutStoryArgs>;
+/** The real `layout` prop keeps its row in the docs table but gets no control of its own. */
+export declare const hiddenLayoutPropControls: {
+    layout: {
+        control: false;
+    };
+};
+/** Translates the flat story args into `layout` (undefined when every field is left at default) and drops the flat keys. */
+export declare function toLayoutProps<T extends Partial<LayoutStoryArgs>>(args: T): Omit<T, keyof LayoutStoryArgs> & {
+    layout: CwLayoutProps | undefined;
+};
+export declare function layoutStorySource(componentName: string, componentDefaults?: Record<string, unknown>): {
+    docs: {
+        source: {
+            transform: (_code: string, storyContext: {
+                args: Record<string, unknown>;
+            }) => string;
+        };
+    };
+};
+export {};
+//# sourceMappingURL=layoutStoryArgs.d.ts.map

package/dist/src/storybook/layoutStoryArgs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutStoryArgs.d.ts","sourceRoot":"","sources":["../../../src/storybook/layoutStoryArgs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGxE,QAAA,MAAM,OAAO,YAAY,CAAC;AAC1B,QAAA,MAAM,UAAU,uCAAsC,CAAC;AACvD,QAAA,MAAM,MAAM,2DAA0D,CAAC;AACvE,QAAA,MAAM,SAAS,qEAAoE,CAAC;AACpF,QAAA,MAAM,IAAI,0DAAyD,CAAC;AAEpE,MAAM,WAAW,eAAe;IAC/B,eAAe,EAAE,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7C,WAAW,EAAE,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;IACrC,aAAa,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C,SAAS,EAAE,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,eAAO,MAAM,mBAAmB,EAAE,eAKjC,CAAC;AAIF,sHAAsH;AACtH,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,SAAS,OAAO,CAAC,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,OAAO,CAAC,EAAE,CAAC;IAC5E,KAAK,CAAC,EAAE,SAAS,OAAO,CAAC,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,OAAO,CAAC,EAAE,CAAC;IACpE,OAAO,CAAC,EAAE,SAAS,OAAO,CAAC,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,OAAO,CAAC,EAAE,CAAC;IACzE,GAAG,CAAC,EAAE,SAAS,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,OAAO,CAAC,EAAE,CAAC;CAChE;AASD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC,CAW5F;AAED,2FAA2F;AAC3F,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,eAAe,CAAuC,CAAC;AAElG,6FAA6F;AAC7F,eAAO,MAAM,wBAAwB;;;;CAEjB,CAAC;AAErB,4HAA4H;AAC5H,wBAAgB,aAAa,CAAC,CAAC,SAAS,OAAO,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,GAAG;IAAE,MAAM,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,CAYjJ;AAED,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;EAEvG"}

package/dist/src/storybook/needsRefactor.d.ts

@@ -0,0 +1,15 @@
+import type { Decorator } from "@storybook/react-vite";
+/**
+ * For a component that still ships but should not be picked for new code. The decorator paints a
+ * solid warning note above every story (canvas and docs); the docs description leads with the same
+ * line, the component's own summary follows.
+ */
+export declare const withNeedsRefactorNote: Decorator;
+export declare function needsRefactorDocs(summary: string): {
+    docs: {
+        description: {
+            component: string;
+        };
+    };
+};
+//# sourceMappingURL=needsRefactor.d.ts.map

package/dist/src/storybook/needsRefactor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"needsRefactor.d.ts","sourceRoot":"","sources":["../../../src/storybook/needsRefactor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAKvD;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,SAKnC,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM;;;;;;EAQhD"}

package/dist/src/storybook/palettes.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Example palettes for the Storybook "Palette" toolbar - a dev/QA tool to eyeball contrast and the
+ * dark-mode preview against non-default brand colors before deciding on real per-client values.
+ *
+ * These override the PRIMITIVE tokens (--cw-color-{family}-{step} in cw-palette.css), the layer a
+ * customer's brand colors actually replace. The old --cw-color-* tokens in cw-colors.css are bridge
+ * aliases that read the primitives via var() (e.g. --cw-color-primary: var(--cw-color-primary-main)),
+ * and the theme/component tokens in cw-theme.css route through those old tokens in turn - so
+ * overriding the primitives cascades upward through all three layers from one place.
+ *
+ * The neutral scale's translucent primitives (--cw-color-neutral-090-25/-15) are color-mix()
+ * derivatives of --cw-color-neutral-090, so overriding -090 alone already cascades into them -
+ * no separate override entries needed for the translucent variants.
+ *
+ * Values here are invented placeholders, not real client colors - per project convention, library
+ * stories stay domain-neutral (no real client names, no real client colors).
+ */
+export type PaletteOverrides = Record<string, string>;
+/** Layer-3 component-assignment tokens a palette re-points, by token name. */
+export type ComponentOverrides = Record<string, string>;
+export interface NamedPalette {
+    label: string;
+    overrides: PaletteOverrides;
+    /**
+     * Layer-3 component-assignment overrides bundled with this palette - applied automatically whenever
+     * the palette is selected, on top of `overrides`, so a client's brand doesn't just recolor the
+     * primitives but also carries its own icon/button re-assignment. Which family a component reads is
+     * each palette's decision; there is no generic mapping.
+     */
+    componentOverrides?: ComponentOverrides;
+}
+/** Keyed by the Storybook toolbar item id. "Default" is the library's own palette - no overrides. */
+export declare const STORYBOOK_PALETTES: Record<string, NamedPalette>;
+export declare const DEFAULT_PALETTE_KEY = "Default";
+//# sourceMappingURL=palettes.d.ts.map

package/dist/src/storybook/palettes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palettes.d.ts","sourceRoot":"","sources":["../../../src/storybook/palettes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEtD,8EAA8E;AAC9E,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAExD,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,gBAAgB,CAAC;IAC5B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACxC;AA6LD,qGAAqG;AACrG,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAK3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,YAAY,CAAC"}

package/dist/src/storybook/pickerStoryArgs.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Flat story controls shared by the date and time pickers: label and layout (they take labelProps
+ * and alignProps but no button), plus the translation back to the real props. Feedback is only on
+ * the single-date pickers, so each story decides whether to expose it.
+ */
+import type { ArgTypes } from "@storybook/react-vite";
+import type { CwInputFeedback } from "../common/interfaces/CwFormTypes";
+import type { CwLabelProps } from "../components/display/text/label/CwLabel";
+import type { CwAlignProps } from "../components/layout/align/CwAlign";
+import { LABEL_WIDTHS } from "./inputStoryArgs";
+declare const FEEDBACK_TYPES: readonly ["none", "danger", "warning", "success", "info", "neutral"];
+export interface PickerStoryArgs {
+    direction: "row" | "column";
+    labelText: string;
+    labelWidth: (typeof LABEL_WIDTHS)[number];
+    feedbackType: (typeof FEEDBACK_TYPES)[number];
+    feedbackMessage: string;
+}
+export declare const pickerStoryDefaults: PickerStoryArgs;
+export declare const pickerStoryArgTypes: ArgTypes<PickerStoryArgs>;
+/** For pickers without a `feedback` prop. */
+export declare const hiddenFeedbackControls: {
+    feedbackType: {
+        table: {
+            disable: true;
+        };
+        control: false;
+    };
+    feedbackMessage: {
+        table: {
+            disable: true;
+        };
+        control: false;
+    };
+};
+export declare const hiddenPickerPropControls: {
+    alignProps: {
+        control: false;
+    };
+    labelProps: {
+        control: false;
+    };
+    feedback: {
+        control: false;
+    };
+};
+export interface PickerObjectProps {
+    alignProps: CwAlignProps | undefined;
+    labelProps: CwLabelProps | undefined;
+    feedback: CwInputFeedback | undefined;
+}
+export declare function toPickerProps<T extends Partial<PickerStoryArgs>>(args: T): Omit<T, keyof PickerStoryArgs> & PickerObjectProps;
+export declare function pickerStorySource(componentName: string, componentDefaults?: Record<string, unknown>): {
+    docs: {
+        source: {
+            transform: (_code: string, storyContext: {
+                args: Record<string, unknown>;
+            }) => string;
+        };
+    };
+};
+export {};
+//# sourceMappingURL=pickerStoryArgs.d.ts.map

package/dist/src/storybook/pickerStoryArgs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pickerStoryArgs.d.ts","sourceRoot":"","sources":["../../../src/storybook/pickerStoryArgs.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,QAAA,MAAM,cAAc,sEAAuE,CAAC;AAE5F,MAAM,WAAW,eAAe;IAC/B,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C,YAAY,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;IAC9C,eAAe,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,EAAE,eAMjC,CAAC;AAMF,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,eAAe,CAMzD,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;CAGf,CAAC;AAErB,eAAO,MAAM,wBAAwB;;;;;;;;;;CAIjB,CAAC;AAErB,MAAM,WAAW,iBAAiB;IACjC,UAAU,EAAE,YAAY,GAAG,SAAS,CAAC;IACrC,UAAU,EAAE,YAAY,GAAG,SAAS,CAAC;IACrC,QAAQ,EAAE,eAAe,GAAG,SAAS,CAAC;CACtC;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,OAAO,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,GAAG,iBAAiB,CAQ7H;AAED,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;EAEvG"}

package/dist/src/storybook/sampleImages.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Generated placeholder pictures for stories that need an image and must not ship an asset:
+ * a tinted rectangle with a label, as an SVG data URL.
+ */
+export declare function sampleImage(label: string, fill: string, width?: number, height?: number): string;
+export declare const SAMPLE_IMAGES: {
+    src: string;
+    alt: string;
+    filename: string;
+}[];
+//# sourceMappingURL=sampleImages.d.ts.map

package/dist/src/storybook/sampleImages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sampleImages.d.ts","sourceRoot":"","sources":["../../../src/storybook/sampleImages.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,SAAM,EAAE,MAAM,SAAM,GAAG,MAAM,CAO1F;AAED,eAAO,MAAM,aAAa;;;;GAKzB,CAAC"}

package/dist/src/storybook/sampleRows.d.ts

@@ -0,0 +1,12 @@
+/** Domain-neutral rows for the table stories. */
+export interface ProjectRow {
+    key: string;
+    name: string;
+    owner: string;
+    stage: string;
+    budget: number;
+    updated: string;
+}
+export declare const PROJECT_ROWS: ProjectRow[];
+export declare const formatBudget: (budget: number) => string;
+//# sourceMappingURL=sampleRows.d.ts.map

package/dist/src/storybook/sampleRows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sampleRows.d.ts","sourceRoot":"","sources":["../../../src/storybook/sampleRows.ts"],"names":[],"mappings":"AAAA,iDAAiD;AACjD,MAAM,WAAW,UAAU;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,YAAY,EAAE,UAAU,EAapC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,WAA4C,CAAC"}

package/dist/src/storybook/storySource.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Docs "Show code" / Code panel for stories whose flat controls are translated into real props.
+ * The snippet is what a consumer would write: real props, strings quoted, objects in braces,
+ * nothing that is undefined, a function, a React element, or equal to the component's default.
+ */
+/** Serializes props as consumer JSX. */
+export declare function propsToJsx(componentName: string, props: Record<string, unknown>): string;
+/**
+ * Storybook `parameters` for a story: `mapArgs` turns the story args into the component props
+ * (the same function the story's `render` uses), `componentDefaults` lists prop values the
+ * component already assumes, so they are left out of the snippet.
+ */
+export declare function storySource<A = Record<string, unknown>>(componentName: string, mapArgs: (args: A) => object, componentDefaults?: Record<string, unknown>): {
+    docs: {
+        source: {
+            transform: (_code: string, storyContext: {
+                args: Record<string, unknown>;
+            }) => string;
+        };
+    };
+};
+//# sourceMappingURL=storySource.d.ts.map

package/dist/src/storybook/storySource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storySource.d.ts","sourceRoot":"","sources":["../../../src/storybook/storySource.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wCAAwC;AACxC,wBAAgB,UAAU,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAUxF;AAMD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtD,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,EAC5B,iBAAiB,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;+BAKzB,MAAM,gBAAgB;gBAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;aAAE;;;EAW7E"}

package/dist/src/storybook/useCssVarOverride.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Applies a set of CSS custom-property overrides directly on `document.documentElement`, not on a
+ * wrapper element - a story like ColorPalette.stories.tsx reads `getComputedStyle(document.documentElement)`
+ * itself rather than its own ancestor chain, so a wrapper override would never reach it. Reverts
+ * cleanly when `overrides` changes or the caller unmounts, so no story is ever left with stale
+ * overrides from a previously selected value.
+ *
+ * The bookkeeping (who holds which variable, what to restore) lives in cssVarOverrideStore and is
+ * shared by every instance on the page: see that file for the docs-page case it exists for.
+ *
+ * Uses `useLayoutEffect`, not `useEffect`: a story that resolves a token via `getComputedStyle` in its
+ * own passive effect (ColorPalette.stories.tsx) would otherwise read the DOM before this ancestor's
+ * effect applied the new overrides - React runs all layout effects to completion before any passive
+ * effect starts, so this ordering guarantee only holds with `useLayoutEffect` here.
+ */
+export declare function useCssVarOverride(overrides: Record<string, string>): void;
+//# sourceMappingURL=useCssVarOverride.d.ts.map

package/dist/src/storybook/useCssVarOverride.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCssVarOverride.d.ts","sourceRoot":"","sources":["../../../src/storybook/useCssVarOverride.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAEzE"}

package/dist/test/storybook/cssVarOverrideStore.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cssVarOverrideStore.test.d.ts.map

package/dist/test/storybook/cssVarOverrideStore.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssVarOverrideStore.test.d.ts","sourceRoot":"","sources":["../../../test/storybook/cssVarOverrideStore.test.ts"],"names":[],"mappings":""}

package/dist/test/storybook/groupLayoutStoryArgs.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=groupLayoutStoryArgs.test.d.ts.map

package/dist/test/storybook/groupLayoutStoryArgs.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groupLayoutStoryArgs.test.d.ts","sourceRoot":"","sources":["../../../test/storybook/groupLayoutStoryArgs.test.ts"],"names":[],"mappings":""}

package/dist/test/storybook/inputStoryArgs.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=inputStoryArgs.test.d.ts.map

package/dist/test/storybook/inputStoryArgs.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputStoryArgs.test.d.ts","sourceRoot":"","sources":["../../../test/storybook/inputStoryArgs.test.ts"],"names":[],"mappings":""}

package/dist/test/storybook/layoutStoryArgs.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layoutStoryArgs.test.d.ts.map

package/dist/test/storybook/layoutStoryArgs.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutStoryArgs.test.d.ts","sourceRoot":"","sources":["../../../test/storybook/layoutStoryArgs.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cwellt_software/cwellt-reactjs-lib",
-	"version": "1.5.3",
+	"version": "1.6.0",
 	"type": "module",
 	"files": [
 		"dist"
@@ -19,13 +19,17 @@
 	},
 	"scripts": {
 		"dev": "vite",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
 		"start": "rollup -c --watch",
 		"test": "vitest run",
 		"lint": "eslint **/*.{ts,tsx} --fix",
-		"build": "npm run lint && npm test && rollup -c",
-		"release": "rollup -c",
+		"build": "npm run lint && npm test && rollup -c && npm run tokens:check",
+		"release": "rollup -c && npm run tokens:check",
 		"link": "npm link",
 		"build:quick": "rollup -c",
+		"tokens:check": "node scripts/token-parity.mjs --check",
+		"tokens:baseline": "node scripts/token-parity.mjs --write-baseline",
 		"publish:npm": "npm install && npm run build && npm pack --dry-run && npm publish --access public"
 	},
 	"peerDependencies": {
@@ -34,6 +38,8 @@
 	},
 	"devDependencies": {
 		"@rollup/plugin-typescript": "12.3.0",
+		"@storybook/addon-docs": "10.6.0",
+		"@storybook/react-vite": "10.6.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/react": "^16.1.0",
 		"@types/eslint__js": "^8.42.3",
@@ -47,6 +53,7 @@
 		"@vitejs/plugin-react": "^5.0.4",
 		"cssnano": "^7.1.4",
 		"csstype": "^3.2.3",
+		"culori": "^4.0.2",
 		"eslint": "^9.14.0",
 		"eslint-plugin-react": "^7.37.2",
 		"globals": "^15.12.0",
@@ -56,6 +63,7 @@
 		"postcss-url": "^10.1.3",
 		"rollup": "^4.26.0",
 		"rollup-plugin-dts": "^6.2.3",
+		"storybook": "10.6.0",
 		"stylelint": "^16.10.0",
 		"stylelint-config-standard": "^36.0.1",
 		"temporal-polyfill": "^0.3.2",