@omni-design/components 0.11.0 → 0.12.0

package/dist/types/docs/componentsSurfaces.d.ts

@@ -0,0 +1,339 @@
+export namespace ICON_DOC {
+    let name: string;
+    let summary: string;
+    let insteadUse: {
+        when: string;
+        use: string;
+    }[];
+    let props: ({
+        name: string;
+        type: string;
+        default: string;
+        values: string[];
+        note: string;
+    } | {
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+        values?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        values?: undefined;
+        note?: undefined;
+    })[];
+    let states: {
+        state: string;
+        setBy: string;
+        note: string;
+    }[];
+    let theming: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    let themingNotes: string[];
+    let tokens: {
+        name: string;
+        sets: string;
+        variesWith: string;
+        figma: string;
+    }[];
+    let composition: string[];
+    let accessibility: string[];
+    let gotchas: string[];
+}
+export namespace FAB_DOC {
+    let name_1: string;
+    export { name_1 as name };
+    let summary_1: string;
+    export { summary_1 as summary };
+    let insteadUse_1: {
+        when: string;
+        use: string;
+    }[];
+    export { insteadUse_1 as insteadUse };
+    let props_1: ({
+        name: string;
+        type: string;
+        default: string;
+        note?: undefined;
+        values?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+        values?: undefined;
+    } | {
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note?: undefined;
+    })[];
+    export { props_1 as props };
+    let states_1: ({
+        state: string;
+        setBy: string;
+        note: string;
+    } | {
+        state: string;
+        setBy: string;
+        note?: undefined;
+    })[];
+    export { states_1 as states };
+    let theming_1: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    export { theming_1 as theming };
+    let themingNotes_1: string[];
+    export { themingNotes_1 as themingNotes };
+    let tokens_1: {
+        name: string;
+        sets: string;
+        variesWith: string;
+        figma: string;
+    }[];
+    export { tokens_1 as tokens };
+    let composition_1: string[];
+    export { composition_1 as composition };
+    let accessibility_1: string[];
+    export { accessibility_1 as accessibility };
+    let gotchas_1: string[];
+    export { gotchas_1 as gotchas };
+}
+export namespace SNACKBAR_DOC {
+    let name_2: string;
+    export { name_2 as name };
+    let summary_2: string;
+    export { summary_2 as summary };
+    let insteadUse_2: {
+        when: string;
+        use: string;
+    }[];
+    export { insteadUse_2 as insteadUse };
+    let props_2: ({
+        name: string;
+        type: string;
+        default: string;
+        values?: undefined;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+        values?: undefined;
+    })[];
+    export { props_2 as props };
+    let states_2: ({
+        state: string;
+        setBy: string;
+        note?: undefined;
+    } | {
+        state: string;
+        setBy: string;
+        note: string;
+    })[];
+    export { states_2 as states };
+    let theming_2: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    export { theming_2 as theming };
+    let tokens_2: {
+        name: any;
+        sets: any;
+        variesWith: string;
+        figma: string;
+    }[];
+    export { tokens_2 as tokens };
+    let composition_2: string[];
+    export { composition_2 as composition };
+    let accessibility_2: string[];
+    export { accessibility_2 as accessibility };
+    let gotchas_2: string[];
+    export { gotchas_2 as gotchas };
+}
+export namespace ACCORDION_DOC {
+    let name_3: string;
+    export { name_3 as name };
+    let summary_3: string;
+    export { summary_3 as summary };
+    let insteadUse_3: {
+        when: string;
+        use: string;
+    }[];
+    export { insteadUse_3 as insteadUse };
+    let props_3: ({
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        values?: undefined;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+        values?: undefined;
+    })[];
+    export { props_3 as props };
+    let states_3: ({
+        state: string;
+        setBy: string;
+        note?: undefined;
+    } | {
+        state: string;
+        setBy: string;
+        note: string;
+    })[];
+    export { states_3 as states };
+    let theming_3: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    export { theming_3 as theming };
+    let themingNotes_2: string[];
+    export { themingNotes_2 as themingNotes };
+    let tokens_3: {
+        name: any;
+        sets: any;
+        variesWith: string;
+        figma: string;
+    }[];
+    export { tokens_3 as tokens };
+    let composition_3: string[];
+    export { composition_3 as composition };
+    let accessibility_3: string[];
+    export { accessibility_3 as accessibility };
+    let gotchas_3: string[];
+    export { gotchas_3 as gotchas };
+}
+export const SURFACE_DOCS: ({
+    name: string;
+    summary: string;
+    insteadUse: {
+        when: string;
+        use: string;
+    }[];
+    props: ({
+        name: string;
+        type: string;
+        default: string;
+        values: string[];
+        note: string;
+    } | {
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+        values?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        values?: undefined;
+        note?: undefined;
+    })[];
+    states: {
+        state: string;
+        setBy: string;
+        note: string;
+    }[];
+    theming: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    themingNotes: string[];
+    tokens: {
+        name: string;
+        sets: string;
+        variesWith: string;
+        figma: string;
+    }[];
+    composition: string[];
+    accessibility: string[];
+    gotchas: string[];
+} | {
+    name: string;
+    summary: string;
+    insteadUse: {
+        when: string;
+        use: string;
+    }[];
+    props: ({
+        name: string;
+        type: string;
+        default: string;
+        values?: undefined;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+        values?: undefined;
+    })[];
+    states: ({
+        state: string;
+        setBy: string;
+        note?: undefined;
+    } | {
+        state: string;
+        setBy: string;
+        note: string;
+    })[];
+    theming: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    tokens: {
+        name: any;
+        sets: any;
+        variesWith: string;
+        figma: string;
+    }[];
+    composition: string[];
+    accessibility: string[];
+    gotchas: string[];
+})[];

package/dist/types/docs/docsLink.d.ts

@@ -0,0 +1,32 @@
+/** A component name as it appears in a URL. */
+export function docsSlug(component: any): any;
+/**
+ * Where one component's docs live for one design system.
+ *
+ * A path per component rather than an anchor on a single long page: an anchor
+ * depends on the page rendering headings a browser can jump to, and the
+ * existing /api/tokens/:uuid/md route serves its content into a <pre>, which
+ * has none. A path cannot half-work.
+ */
+export function componentDocsUrl(designSystemId: any, component: any, origin?: string): string;
+/** The index of every component, for the same design system. */
+export function componentDocsIndexUrl(designSystemId: any, origin?: string): string;
+/**
+ * The public URL of one component's reference page.
+ *
+ * Per DESIGN SYSTEM, not per component library: every user imports their own
+ * copy of the .fig and gets their own uuid, so a link baked into the template
+ * would send all of them to whoever built it.
+ *
+ * That splits the two Figma fields:
+ *
+ *   description          generic. Identical for every user, so it can live in
+ *                        the template and be written once.
+ *   documentationLinks   per user. The plugin writes it at import time, when it
+ *                        knows the design system id and nothing else does.
+ *
+ * Any path resolves on the host — `public/_redirects` is `/* /index.html 200`,
+ * a catch-all that hands every URL to the router — so this needs no server
+ * configuration and no anchor.
+ */
+export const DOCS_ORIGIN: "https://omni-design.netlify.app";

package/dist/types/docs/examples.d.ts

@@ -0,0 +1,37 @@
+export function hasExample(component: any): boolean;
+/** Does this component have a sample for this prop? */
+export function hasPropExample(component: any, prop: any): boolean;
+export namespace EXAMPLES {
+    function Button(): JSX.Element;
+    function ButtonGroup(): JSX.Element;
+    function Chip(): JSX.Element;
+    function Badge(): JSX.Element;
+    function Alert(): JSX.Element;
+    function Card(): JSX.Element;
+    function Avatar(): JSX.Element;
+    function Icon(): JSX.Element;
+    function Link(): JSX.Element;
+    function Divider(): JSX.Element;
+    function Checkbox(): JSX.Element;
+    function Radio(): JSX.Element;
+    function Input(): JSX.Element;
+    function SwitchInput(): JSX.Element;
+    function Slider(): JSX.Element;
+    function Rating(): JSX.Element;
+    function Breadcrumbs(): JSX.Element;
+    function Pagination(): JSX.Element;
+    function Accordion(): JSX.Element;
+    function Tabs(): JSX.Element;
+}
+export namespace PROP_EXAMPLES {
+    let Button_1: {
+        variant: () => JSX.Element;
+        size: () => JSX.Element;
+        disabled: () => JSX.Element;
+        'startDecorator / endDecorator': () => JSX.Element;
+        iconOnly: () => JSX.Element;
+        elevated: () => JSX.Element;
+        fullWidth: () => JSX.Element;
+    };
+    export { Button_1 as Button };
+}

package/dist/types/docs/foundations.d.ts

@@ -0,0 +1,28 @@
+export function renderFoundations(): string;
+/**
+ * The facts that are not about any one component.
+ *
+ * Same test as the component docs: every line has to change what an agent
+ * writes. That kept five sections and cut the raw tone ramp — an agent uses
+ * semantic names, and Color-1..Color-12 across nine palettes is generator
+ * internals, volume without decisions.
+ *
+ * The first section exists because the system does the opposite of what every
+ * other one does, and an agent will assume otherwise without being told.
+ */
+export const FOUNDATIONS: ({
+    title: string;
+    lede: string;
+    body: string[];
+    table: {
+        head: string[];
+        rows: string[][];
+    };
+    trap: string;
+} | {
+    title: string;
+    lede: string;
+    body: string[];
+    trap: string;
+    table?: undefined;
+})[];

package/dist/types/docs/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./componentDoc";
+export * from "./components";
+export * from "./foundations";
+export * from "./docsLink";
+export { EXAMPLES, hasExample } from "./examples";

package/docs/components.md

@@ -33,7 +33,7 @@ special chromeless variant for low-emphasis actions.
 ### Import
 
 ```jsx
-import { Button } from '@dyno/components';
+import { Button } from '@omni-design/components';
 ```
 
 ### Props
@@ -108,7 +108,7 @@ spaced and connected (border-collapsing) layouts.
 ### Import
 
 ```jsx
-import { ButtonGroup, Button } from '@dyno/components';
+import { ButtonGroup, Button } from '@omni-design/components';
 ```
 
 ### Props
@@ -176,7 +176,7 @@ import {
   CheckboxGroup,
   CheckboxWithDescription,
   IndeterminateCheckbox,
-} from '@dyno/components';
+} from '@omni-design/components';
 ```
 
 ### Checkbox Props
@@ -300,7 +300,7 @@ label positions, three sizes, and validation states.
 ### Import
 
 ```jsx
-import { Input } from '@dyno/components';
+import { Input } from '@omni-design/components';
 ```
 
 ### Props
@@ -395,84 +395,100 @@ variable resolves correctly.
 
 ## Chip
 
-Non-interactive tags and interactive action chips. Solid and outline styles for
-both. Excludes Plain and Ghost variants (fail WCAG 1.4.11).
+A small surface you can toggle — a filter, a choice, a tag on an input. If it
+only labels something and cannot be clicked, use **Tag** instead.
 
 ### Import
 
 ```jsx
-import { Chip } from '@dyno/components';
+import { Chip } from '@omni-design/components';
 ```
 
+### Colour and selection are different axes
+
+This is the part worth reading. **There is no solid/outline shape axis**, and
+there is no `color` prop.
+
+- **Colour** comes from `variant`, which sets `data-theme` on the chip.
+- **Selection** is a SURFACE LEVEL, not a different fill:
+
+  | | `data-surface` |
+  | --- | --- |
+  | unselected | `Surface-Brightest` |
+  | selected | `Surface-Dimmest` |
+
+Both levels paint `var(--Background)` with a `var(--Border)` edge, so one
+`data-theme` drives both states and `--Text`, `--Hover` and `--Pressed` come
+along paired. Change the theme and both states move together.
+
+`variant="default"` sets no `data-theme` at all and INHERITS, so a chip inside a
+themed region takes that region's colour.
+
+`-outline` and `-light` still render and warn once in development. Do not write
+new ones: `-outline` was the unselected chip under another name, which let the
+component express four combinations against the design's two.
+
 ### Props
 
-| Prop | Type | Default | Options |
+| Prop | Type | Default | Notes |
 |---|---|---|---|
-| `label` | string | — | — |
-| `color` | string | `'primary'` | Same as Button |
-| `variant` | string | `'solid'` | `solid` `outline` |
-| `size` | string | `'medium'` | `small` `medium` `large` |
+| `variant` | string | `'primary'` | The COLOUR: `default` + the 8 palettes |
+| `label` | node | — | Also accepts `children` |
+| `selected` | boolean | `false` | Switches the surface level, not the fill |
+| `selectionMode` | string | — | `radio` or `checkbox` — adds the ARIA role |
 | `clickable` | boolean | `false` | — |
-| `deletable` | boolean | `false` | — |
-| `onDelete` | function | — | Called when delete icon clicked |
-| `onClick` | function | — | Required when `clickable={true}` |
-| `icon` | node | — | Leading icon |
-| `selected` | boolean | `false` | Visual selected state for clickable chips |
+| `onClick` | function | — | Implies `clickable` |
+| `onDelete` | function | — | Adds the dismiss affordance |
+| `startDecorator` / `endDecorator` | node | — | Icon or avatar |
 | `disabled` | boolean | `false` | — |
 
-### CSS variables consumed
-
-**Non-clickable solid:** `--Tags-{Color}-BG`, `--Tags-{Color}-Text`
-
-**Non-clickable outline:** `--Tags-{Color}-BG` (border), `--Text`
+**There is no `size` prop.** Chip has ONE size, 24px, matching the Figma set,
+which carries no size axis. Component sizing in this system comes from the
+`Component-Size` modes rather than a per-component ladder. A `size` passed
+anyway is ignored and warns once.
 
-**Clickable solid:** `--Buttons-{Color}-Button`, `--Buttons-{Color}-Text`,
-`--Buttons-{Color}-Hover`, `--Buttons-{Color}-Active`
+### Tokens consumed
 
-**Clickable outline:** `--Buttons-{Color}-Border`, `--Text`,
-`--Buttons-{Color}-Outline-Hover`, `--Buttons-{Color}-Outline-Active`
+All of them resolve from the chip's own `data-theme` + `data-surface` zone:
+`--Background` (the body), `--Text` (the label), `--Border` (the outline), plus
+`--Hover` and `--Pressed`.
 
 ### Examples
 
 ```jsx
-// Non-clickable tag — status indicator
-<Chip label="Active" color="success" />
-<Chip label="Pending" color="warning" variant="outline" />
-<Chip label="Archived" color="neutral" />
+// Colour comes from variant
+<Chip variant="success">Active</Chip>
+<Chip variant="warning">Pending</Chip>
+
+// Inherits the surrounding theme
+<Chip variant="default">Neutral</Chip>
 
-// Clickable — filter chip
+// Selectable — selection changes the SURFACE, not the colour
 <Chip
-  label="Design"
-  color="primary"
-  clickable
+  variant="primary"
+  selectionMode="checkbox"
   selected={selected}
   onClick={() => setSelected(!selected)}
-/>
-
-// Deletable
-<Chip
-  label="React"
-  color="info"
-  deletable
-  onDelete={() => removeTag('react')}
-/>
-
-// With icon
-<Chip label="Verified" color="success" icon={<CheckIcon />} />
+>
+  Design
+</Chip>
 
-// Sizes
-<Chip label="Small" size="small" color="primary" />
-<Chip label="Large" size="large" color="secondary" />
+// Dismissible, with a leading icon
+<Chip variant="info" startDecorator={<TagIcon />} onDelete={() => remove('react')}>
+  React
+</Chip>
 ```
 
 ### Accessibility notes
 
-- Non-clickable chips have `role="status"` by default.
-- Clickable chips use `role="button"` and are keyboard operable (Enter / Space).
-- Delete button within a chip has `aria-label="Remove {label}"`.
+- A dismissible chip's X is labelled with what it removes, not "close".
+- A selectable chip announces its own selected state — do not add `aria-pressed`.
+- The 24x24 minimum touch target (WCAG 2.5.8) is carried by a pseudo-element,
+  so the chip stays 24px tall without the target shrinking.
 
 ---
 
+
 ## Stack
 
 Flexible layout primitive for arranging children in a row or column with
@@ -494,7 +510,7 @@ import {
   InsetStack,
   ScrollStack,
   WrapStack,
-} from '@dyno/components';
+} from '@omni-design/components';
 ```
 
 ### Stack Props
@@ -576,7 +592,7 @@ as Button.
 ### Import
 
 ```jsx
-import { Tabs, TabPanel } from '@dyno/components';
+import { Tabs, TabPanel } from '@omni-design/components';
 ```
 
 ### Tabs Props
@@ -686,7 +702,7 @@ all child components automatically inherit the correct color context.
 ### Import
 
 ```jsx
-import { Card } from '@dyno/components';
+import { Card } from '@omni-design/components';
 ```
 
 ### Props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omni-design/components",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "DynoDesign adaptive component library — token-driven React components with customizable CSS theming",
   "author": "Lise Noble",
   "license": "Apache-2.0",