@oneli8/react 1.0.0-beta.5 → 1.0.0-beta.6

package/README.md

@@ -19,11 +19,15 @@ export function Actions() {
 
 | Tier | Components |
 |---|---|
-| Atom | `Icon`, `SelectionIndicator` |
-| Molecule | `Button`, `IconButton`, `ChoiceItem`, `SelectionOption` |
-| Organism | `RadioGroup`, `CheckboxGroup` |
+| Atom | `Icon`, `SelectionIndicator`, `NavigationBadge` |
+| Molecule | `Button`, `IconButton`, `Link`, `TextField`, `FormMessage`, `Select`, `ChoiceItem`, `SelectionOption`, `ChoiceChip`, `Token` |
+| Organism | `Tabs`, `TabBar`, `SegmentedControl`, `RadioGroup`, `CheckboxGroup`, `SelectionPopup`, `Combobox`, `MultiSelectField`, `ChoicePicker` |
 | Material | Gem, an attribute adapter rather than a tier |
 
+Twenty one components, matching `@oneli8/core` one for one. Both packages are
+checked against each other on every build, so the two cannot answer differently
+about a role, a name, a relationship or a state.
+
 ## The system travels with the package
 
 If you need a component OneLi8 does not ship, build it from these foundations

package/ai-context.json

@@ -1,7 +1,7 @@
 {
   "$comment": "GENERATED by packages/sync/src/build-package-context.mjs — do not edit.",
   "system": "OneLi8",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "meaning": "OneLi8 means One Light.",
   "foundations": {
     "package": "@oneli8/tokens",
@@ -42,6 +42,14 @@
       ],
       "constraint": "Composes no other component. Native elements only."
     },
+    {
+      "tier": "atom",
+      "module": "atoms/NavigationBadge.js",
+      "exports": [
+        "NavigationBadge"
+      ],
+      "constraint": "Composes no other component. Native elements only."
+    },
     {
       "tier": "atom",
       "module": "atoms/SelectionIndicator.js",
@@ -58,6 +66,14 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/ChoiceChip.js",
+      "exports": [
+        "ChoiceChip"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "molecule",
       "module": "molecules/ChoiceItem.js",
@@ -66,6 +82,14 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/FormMessage.js",
+      "exports": [
+        "FormMessage"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "molecule",
       "module": "molecules/IconButton.js",
@@ -74,6 +98,23 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/Link.js",
+      "exports": [
+        "Link"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
+    {
+      "tier": "molecule",
+      "module": "molecules/Select.js",
+      "exports": [
+        "OL8_SELECT_NATIVE_POLICIES",
+        "Select"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "molecule",
       "module": "molecules/SelectionOption.js",
@@ -82,6 +123,24 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/TextField.js",
+      "exports": [
+        "TextField",
+        "countGraphemes",
+        "clipToGraphemes"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
+    {
+      "tier": "molecule",
+      "module": "molecules/Token.js",
+      "exports": [
+        "Token"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "organism",
       "module": "organisms/ChoiceGroup.js",
@@ -90,6 +149,62 @@
         "CheckboxGroup"
       ],
       "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/ChoicePicker.js",
+      "exports": [
+        "ChoicePicker"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/Combobox.js",
+      "exports": [
+        "Combobox"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/MultiSelectField.js",
+      "exports": [
+        "MultiSelectField"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/SegmentedControl.js",
+      "exports": [
+        "SegmentedControl"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/SelectionPopup.js",
+      "exports": [
+        "SelectionPopup"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/TabBar.js",
+      "exports": [
+        "TabBar"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/Tabs.js",
+      "exports": [
+        "Tabs"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
     }
   ],
   "buildingWhatIsNotHere": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneli8/react",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "description": "OneLi8 Design System for React. Components, design tokens, the Gem material, and the design language they follow.",
   "keywords": [
     "react",
@@ -52,7 +52,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@oneli8/tokens": "1.0.0-beta.5"
+    "@oneli8/tokens": "1.0.0-beta.6"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/atoms/NavigationBadge.js

@@ -0,0 +1,19 @@
+import { createElement, forwardRef } from 'react';
+
+/**
+ * ATOM. Figma 989:484: "Content comes from item.badge; geometry and colors are
+ * semantic token controlled." One atom serves all three navigation organisms.
+ *
+ * The count sits beside a label that already names the destination, so it is
+ * not announced twice. A product that needs it announced spells it into the
+ * item's own accessible name.
+ */
+export const NavigationBadge = forwardRef(function NavigationBadge({ children, className = '', ...rest }, ref) {
+  if (children === undefined || children === null || children === '') {
+    throw new Error('[ol8] a navigation badge with nothing to say should not be rendered at all.');
+  }
+  return createElement('span', {
+    ...rest, ref, 'aria-hidden': 'true',
+    className: `ol8-nav-badge${className ? ` ${className}` : ''}`,
+  }, children);
+});

package/src/foundations/geometry.js

@@ -28,7 +28,78 @@ export const OL8_SELECTION_STATES = {
 
 export const OL8_CHOICE_KINDS = OL8_SELECTION_KINDS;
 export const OL8_CHOICE_SIZES = OL8_BUTTON_SIZES;
+export const OL8_LINK_FORMS = ['inline', 'standalone', 'navigation'];
+export const OL8_LINK_SIZES = ['small', 'standard', 'large'];
+export const OL8_LINK_MOTIONS = ['system', 'none'];
+
+export const OL8_TEXT_FIELD_SIZES = OL8_BUTTON_SIZES;
+export const OL8_TEXT_FIELD_APPEARANCES = ['outline', 'filled'];
+export const OL8_TEXT_FIELD_MATERIALS = OL8_MATERIALS;
+/** The four tones a message can carry. Pending is not one of them. */
+export const OL8_MESSAGE_TONES = ['critical', 'caution', 'positive', 'informative'];
+/** "Pending is a validation process status, not a fifth message tone." */
+export const OL8_VALIDATION_STATUSES = ['idle', 'pending', 'resolved'];
+/** Soft lets a person overshoot and then correct. Hard is for real technical limits. */
+export const OL8_CHARACTER_LIMIT_BEHAVIORS = ['soft', 'hard'];
+
+/** Form Message itself draws all five, because Figma 177:13 enumerates five. */
+export const OL8_FORM_MESSAGE_TONES = [...OL8_MESSAGE_TONES, 'pending'];
+/** Figma pairs one status icon with each tone (Form Message 177:13). */
+export const OL8_FORM_MESSAGE_ICONS = {
+  critical: 'critical',
+  caution: 'caution',
+  positive: 'positive',
+  informative: 'informative',
+  pending: 'loading',
+};
+
+export const OL8_NAVIGATION_SIZES = OL8_BUTTON_SIZES;
+export const OL8_TABS_HIERARCHIES = ['primary', 'secondary', 'tertiary'];
+export const OL8_TABS_ORIENTATIONS = ['horizontal', 'vertical'];
+export const OL8_TABS_ACTIVATIONS = ['automatic', 'manual'];
+/** "Declare exactly one behavior." */
+export const OL8_SEGMENT_BEHAVIORS = ['single', 'multi', 'momentary'];
+/** "Presentation never changes behavior." */
+export const OL8_SEGMENT_PRESENTATIONS = [
+  'inset-fill', 'line-indicator', 'outlined-selection', 'soft-pill', 'icon-only', 'stacked-label',
+];
+export const OL8_TAB_BAR_PRESENTATIONS = ['bottom', 'inline', 'sidebar', 'spatial-rail'];
+
+export const OL8_CHIP_SIZES = OL8_BUTTON_SIZES;
+export const OL8_TOKEN_SIZES = OL8_CHIP_SIZES;
+/** Figma draws the last three; `auto` resolves to one of them in code. */
+export const OL8_TOKEN_MARKS = ['auto', 'none', 'check', 'remove'];
+
+/** The contract's resolution, stated once so both packages agree. */
+export function resolveTokenMark(mark, { removable = true, selected = false } = {}) {
+  if (mark !== 'auto') return mark;
+  if (removable) return 'remove';
+  return selected ? 'check' : 'none';
+}
+
 export const OL8_OPTION_SIZES = ['standard', 'large'];
+export const OL8_POPUP_WIDTHS = ['content', 'anchor', 'wide'];
+export const OL8_POPUP_SIZES = OL8_OPTION_SIZES;
+export const OL8_MULTI_SELECT_SIZES = OL8_BUTTON_SIZES;
+export const OL8_MULTI_SELECT_APPEARANCES = ['outline', 'filled'];
+export const OL8_MULTI_SELECT_MATERIALS = OL8_MATERIALS;
+/** Constrained resolves from a known set; suggestive may also author values. */
+export const OL8_VALUE_POLICIES = ['constrained', 'suggestive'];
+
+export const OL8_COMBOBOX_SIZES = OL8_BUTTON_SIZES;
+export const OL8_COMBOBOX_APPEARANCES = ['outline', 'filled'];
+export const OL8_COMBOBOX_MATERIALS = OL8_MATERIALS;
+export const OL8_AUTOCOMPLETE_MODES = ['none', 'list-manual', 'list-automatic'];
+export const OL8_FILTER_SOURCES = ['local', 'remote', 'external'];
+
+export const OL8_PICKER_SIZES = OL8_BUTTON_SIZES;
+export const OL8_PICKER_MATERIALS = OL8_MATERIALS;
+export const OL8_COMMIT_BEHAVIORS = ['immediate', 'apply'];
+export const OL8_PICKER_PRESENTATIONS = ['inline', 'popup'];
+/** One treatment across an instance; peers never mix Check and None. */
+export const OL8_PICKER_MARKS = ['check', 'none'];
+
+export const OL8_POPUP_STATUSES = ['none', 'loading', 'empty', 'error'];
 export const OL8_AGGREGATE = ['none', 'some', 'all'];
 
 /** Compact and Standard take the 18px icon; Comfortable and Large take 24px. */

package/src/index.d.ts

@@ -15,6 +15,46 @@ export type Ol8Selection =
   | 'unchecked' | 'checked' | 'mixed'
   | 'unselected' | 'selected'
   | 'off' | 'on';
+export type Ol8LinkForm = 'inline' | 'standalone' | 'navigation';
+export type Ol8LinkSize = 'small' | 'standard' | 'large';
+export type Ol8LinkMotion = 'system' | 'none';
+export declare const OL8_LINK_FORMS: readonly Ol8LinkForm[];
+export declare const OL8_LINK_SIZES: readonly Ol8LinkSize[];
+export declare const OL8_LINK_MOTIONS: readonly Ol8LinkMotion[];
+
+export type Ol8TextFieldSize = 'compact' | 'standard' | 'comfortable' | 'large';
+export type Ol8TextFieldAppearance = 'outline' | 'filled';
+/** Pending is a validation process status, not a fifth message tone. */
+export type Ol8MessageTone = 'critical' | 'caution' | 'positive' | 'informative';
+export type Ol8ValidationStatus = 'idle' | 'pending' | 'resolved';
+export type Ol8CharacterLimitBehavior = 'soft' | 'hard';
+/** Form Message itself draws all five, because Figma 177:13 enumerates five. */
+export type Ol8FormMessageTone = Ol8MessageTone | 'pending';
+export declare const OL8_TEXT_FIELD_SIZES: readonly Ol8TextFieldSize[];
+export declare const OL8_TEXT_FIELD_APPEARANCES: readonly Ol8TextFieldAppearance[];
+export declare const OL8_TEXT_FIELD_MATERIALS: readonly Ol8Material[];
+export declare const OL8_MESSAGE_TONES: readonly Ol8MessageTone[];
+export declare const OL8_VALIDATION_STATUSES: readonly Ol8ValidationStatus[];
+export declare const OL8_CHARACTER_LIMIT_BEHAVIORS: readonly Ol8CharacterLimitBehavior[];
+export declare const OL8_FORM_MESSAGE_TONES: readonly Ol8FormMessageTone[];
+export declare const OL8_FORM_MESSAGE_ICONS: Readonly<Record<Ol8FormMessageTone, string>>;
+
+export type Ol8NavigationSize = 'compact' | 'standard' | 'comfortable' | 'large';
+export type Ol8TabsHierarchy = 'primary' | 'secondary' | 'tertiary';
+export type Ol8TabsOrientation = 'horizontal' | 'vertical';
+export type Ol8TabsActivation = 'automatic' | 'manual';
+export type Ol8SegmentBehavior = 'single' | 'multi' | 'momentary';
+export type Ol8SegmentPresentation =
+  | 'inset-fill' | 'line-indicator' | 'outlined-selection'
+  | 'soft-pill' | 'icon-only' | 'stacked-label';
+export type Ol8TabBarPresentation = 'bottom' | 'inline' | 'sidebar' | 'spatial-rail';
+export declare const OL8_TABS_HIERARCHIES: readonly Ol8TabsHierarchy[];
+export declare const OL8_TABS_ORIENTATIONS: readonly Ol8TabsOrientation[];
+export declare const OL8_TABS_ACTIVATIONS: readonly Ol8TabsActivation[];
+export declare const OL8_SEGMENT_BEHAVIORS: readonly Ol8SegmentBehavior[];
+export declare const OL8_SEGMENT_PRESENTATIONS: readonly Ol8SegmentPresentation[];
+export declare const OL8_TAB_BAR_PRESENTATIONS: readonly Ol8TabBarPresentation[];
+
 export type Ol8OptionSize = 'standard' | 'large';
 export type Ol8Aggregate = 'none' | 'some' | 'all';
 
@@ -113,6 +153,62 @@ export interface ChoiceItemProps extends Omit<ComponentPropsWithoutRef<'input'>,
 }
 export declare const ChoiceItem: ForwardRefExoticComponent<ChoiceItemProps & RefAttributes<HTMLInputElement>>;
 
+/** MOLECULE. States are CSS, never props. Icons are intentionally parked. */
+export interface LinkProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'> {
+  children?: ReactNode;
+  href: string;
+  form?: Ol8LinkForm;
+  size?: Ol8LinkSize;
+  /** Navigation only. `true` emits aria-current="page"; a string names the kind. */
+  current?: boolean | string;
+  motion?: Ol8LinkMotion;
+}
+export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+
+/** MOLECULE. Tone maps to semantic message tone; Pending is the validating state. */
+export interface FormMessageProps extends ComponentPropsWithoutRef<'div'> {
+  children?: ReactNode;
+  tone?: Ol8FormMessageTone;
+  /** Figma's Show Icon. */
+  icon?: boolean;
+}
+export declare const FormMessage: ForwardRefExoticComponent<FormMessageProps & RefAttributes<HTMLDivElement>>;
+
+/** MOLECULE. Conditions are CSS and native state, never props. Gem changes material only. */
+export interface TextFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'prefix'> {
+  /** Required and visible. A placeholder is never the label. */
+  label: string;
+  /** Default Comfortable, the cross platform size. */
+  size?: Ol8TextFieldSize;
+  appearance?: Ol8TextFieldAppearance;
+  material?: Ol8Material;
+  /** False keeps the label as the accessible name without showing it, which needs a documented exception. */
+  showLabel?: boolean;
+  /** Correction is required. Never set without also exposing a Critical message. */
+  invalid?: boolean;
+  leadingIcon?: string;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  trailingAction?: { icon: string; label: string; onClick?: () => void; pressed?: boolean };
+  instruction?: ReactNode;
+  message?: ReactNode;
+  messageTone?: Ol8MessageTone;
+  messageIcon?: boolean;
+  /** Pending shows the loader; it never freezes typing. */
+  validationStatus?: Ol8ValidationStatus;
+  /** Counted in graphemes, so an emoji counts as one. */
+  characterLimit?: number;
+  /** Soft lets a person overshoot and then correct. Hard is for real technical limits. */
+  characterLimitBehavior?: Ol8CharacterLimitBehavior;
+}
+export declare const TextField: ForwardRefExoticComponent<TextFieldProps & RefAttributes<HTMLInputElement>>;
+
+/** Counts what a reader would call characters. */
+export declare function countGraphemes(value: unknown): number;
+
+/** Keeps the first `limit` graphemes, so a cluster is never cut in half. */
+export declare function clipToGraphemes(value: unknown, limit: number): string;
+
 /** MOLECULE. Never focusable; a listbox moves a virtual cursor instead. */
 export interface SelectionOptionProps extends Omit<ComponentPropsWithoutRef<'li'>, 'children'> {
   children?: ReactNode;
@@ -165,3 +261,121 @@ export interface CheckboxGroupProps extends Ol8GroupShell {
   onChange?: (state: Record<string, boolean>) => void;
 }
 export declare function CheckboxGroup(props: CheckboxGroupProps): ReactElement;
+
+/** ATOM. One badge serves all three navigation organisms. */
+export interface NavigationBadgeProps extends ComponentPropsWithoutRef<'span'> {
+  children: ReactNode;
+}
+export declare const NavigationBadge: ForwardRefExoticComponent<NavigationBadgeProps & RefAttributes<HTMLSpanElement>>;
+
+export interface Ol8TabItem {
+  /** Required: exactly one panel is paired with it. */
+  id: string;
+  label?: string;
+  icon?: string;
+  badge?: string | number;
+  disabled?: boolean;
+  /** Required when the item shows an icon and no label. */
+  ariaLabel?: string;
+}
+
+/** ORGANISM. Emits tablist, tab and tabpanel, and keeps one enabled tab stop. */
+export interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+  /** Required. A region nobody can name is a region nobody can reach. */
+  label: string;
+  items: Ol8TabItem[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (id: string) => void;
+  hierarchy?: Ol8TabsHierarchy;
+  size?: Ol8NavigationSize;
+  material?: Ol8Material;
+  orientation?: Ol8TabsOrientation;
+  activation?: Ol8TabsActivation;
+  /** Supply it and Tabs renders the owned panel for each item. */
+  renderPanel?: (item: Ol8TabItem) => ReactNode;
+}
+export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
+
+export interface Ol8SegmentItem {
+  id: string;
+  label?: string;
+  icon?: string;
+  badge?: string | number;
+  disabled?: boolean;
+  /** Required when the item shows an icon and no label. */
+  ariaLabel?: string;
+}
+
+/** ORGANISM. Behaviour is declared, never inferred; presentation never changes it. */
+export interface SegmentedControlProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
+  /** Required accessible name. */
+  label: string;
+  /** Exactly one: single is a radio group, multi is toggle buttons, momentary stores nothing. */
+  behavior: Ol8SegmentBehavior;
+  items: Ol8SegmentItem[];
+  /** One value for single, an array for multi, nothing for momentary. */
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  presentation?: Ol8SegmentPresentation;
+  size?: Ol8NavigationSize;
+  material?: Ol8Material;
+}
+export declare const SegmentedControl: ForwardRefExoticComponent<SegmentedControlProps & RefAttributes<HTMLDivElement>>;
+
+export interface Ol8Destination {
+  /** Required. A tab bar navigates, so it uses real links. */
+  href: string;
+  label?: string;
+  icon?: string;
+  badge?: string | number;
+  /** Required when the destination shows an icon and no label. */
+  ariaLabel?: string;
+}
+
+/** ORGANISM. Native destination links, one current destination, no disabled pseudo destinations. */
+export interface TabBarProps extends ComponentPropsWithoutRef<'nav'> {
+  /** Required navigation name, so a person can tell one landmark from another. */
+  label: string;
+  items: Ol8Destination[];
+  /** The href of the destination a person is on. */
+  current?: string;
+  /** Routes an ordinary left click while the link stays a real link. */
+  onNavigate?: (href: string, event: MouseEvent) => void;
+  presentation?: Ol8TabBarPresentation;
+  size?: Ol8NavigationSize;
+  material?: Ol8Material;
+}
+export declare const TabBar: ForwardRefExoticComponent<TabBarProps & RefAttributes<HTMLElement>>;
+
+export type Ol8SelectNativePolicy = 'preferred' | 'required' | 'custom-allowed';
+export declare const OL8_SELECT_NATIVE_POLICIES: readonly Ol8SelectNativePolicy[];
+
+export interface Ol8SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  group?: string;
+}
+
+/** MOLECULE. Native first: a real select, wearing the Text Field geometry Figma reuses. */
+export interface SelectProps extends Omit<ComponentPropsWithoutRef<'select'>, 'size'> {
+  /** Required and visible. A placeholder is never the label. */
+  label: string;
+  options: Ol8SelectOption[];
+  size?: Ol8TextFieldSize;
+  appearance?: Ol8TextFieldAppearance;
+  material?: Ol8Material;
+  showLabel?: boolean;
+  invalid?: boolean;
+  /** Only when an unselected value is valid, or required validation needs a prompt. */
+  placeholderOption?: string;
+  leadingIcon?: string;
+  instruction?: ReactNode;
+  message?: ReactNode;
+  messageTone?: Ol8MessageTone;
+  /** 'custom-allowed' is refused: use Combobox, which implements the full contract. */
+  native?: Ol8SelectNativePolicy;
+}
+export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>;

package/src/index.js

@@ -2,8 +2,22 @@ export { Icon } from './atoms/Icon.js';
 export { SelectionIndicator } from './atoms/SelectionIndicator.js';
 export { Button } from './molecules/Button.js';
 export { IconButton } from './molecules/IconButton.js';
+export { Link } from './molecules/Link.js';
 export { ChoiceItem } from './molecules/ChoiceItem.js';
 export { SelectionOption } from './molecules/SelectionOption.js';
+export { FormMessage } from './molecules/FormMessage.js';
+export { TextField, countGraphemes, clipToGraphemes } from './molecules/TextField.js';
+export { Select, OL8_SELECT_NATIVE_POLICIES } from './molecules/Select.js';
+export { ChoiceChip } from './molecules/ChoiceChip.js';
+export { Token } from './molecules/Token.js';
 export { RadioGroup, CheckboxGroup } from './organisms/ChoiceGroup.js';
+export { SelectionPopup } from './organisms/SelectionPopup.js';
+export { MultiSelectField } from './organisms/MultiSelectField.js';
+export { ChoicePicker } from './organisms/ChoicePicker.js';
+export { Combobox } from './organisms/Combobox.js';
+export { NavigationBadge } from './atoms/NavigationBadge.js';
+export { Tabs } from './organisms/Tabs.js';
+export { SegmentedControl } from './organisms/SegmentedControl.js';
+export { TabBar } from './organisms/TabBar.js';
 export * from './foundations/geometry.js';
 export { OL8_ICONS, OL8_ICON_VIEWBOX } from './foundations/icons.generated.js';

package/src/molecules/ChoiceChip.js

@@ -0,0 +1,101 @@
+import { createElement, useId } from 'react';
+import { IconGlyph } from '../atoms/Icon.js';
+import { OL8_CHIP_SIZES } from '../foundations/geometry.js';
+
+/**
+ * MOLECULE. The Soft Hexagon, built the way Figma builds it: a fixed 12 unit
+ * terminal, a rail that grows with the label, and a mirrored terminal. Only the
+ * rail grows, so peer chips of any length keep one shoulder depth and angle.
+ *
+ * The terminal paths and the shape are private, as they are in Figma, where the
+ * terminals are named "Private Geometry" and the contract says they are "not
+ * published cap atoms, layer variants, or independently swappable components".
+ * Token imports them from this module; the package index does not export them.
+ *
+ * One viewBox serves all four heights: read from Figma, every terminal path at
+ * 30, 36 and 42 shares identical X values and Y values that are the same
+ * fractions of the height, so stretching Y alone is exact.
+ */
+const TERMINAL_FILL =
+  'M12 0 L8.96202541 0 C7.44303812 0 6.43037944 0.83333333 5.92405035 2.5 ' +
+  'L0.45569618 12.5 C-0.15189877 13.75 -0.15189877 16.25 0.45569618 17.5 ' +
+  'L5.92405035 27.5 C6.43037944 29.16666667 7.44303812 30 8.96202541 30 L12 30 Z';
+const TERMINAL_EDGE =
+  'M12 0 L8.96202541 0 C7.44303812 0 6.43037944 0.83333333 5.92405035 2.5 ' +
+  'L0.45569618 12.5 C-0.15189877 13.75 -0.15189877 16.25 0.45569618 17.5 ' +
+  'L5.92405035 27.5 C6.43037944 29.16666667 7.44303812 30 8.96202541 30 L12 30';
+
+function Terminal({ uid, side }) {
+  const clip = `${uid}-clip-${side}`;
+  return createElement('svg', {
+    className: `ol8-chip__terminal ol8-chip__terminal--${side}`,
+    viewBox: '0 0 12 30', preserveAspectRatio: 'none',
+    'aria-hidden': 'true', focusable: 'false',
+  }, [
+    createElement('clipPath', { key: 'c', id: clip }, createElement('path', { d: TERMINAL_FILL })),
+    createElement('path', { key: 'fo', className: 'ol8-chip__focus-outer', d: TERMINAL_EDGE }),
+    createElement('path', { key: 'fi', className: 'ol8-chip__focus-inner', d: TERMINAL_EDGE }),
+    createElement('path', { key: 'f', className: 'ol8-chip__fill', d: TERMINAL_FILL }),
+    createElement('path', { key: 'e', className: 'ol8-chip__edge', d: TERMINAL_EDGE, clipPath: `url(#${clip})` }),
+  ]);
+}
+
+/**
+ * The silhouette and its rail. Figma's "Choice Chip / Geometry Owner".
+ * The mark follows the label, which is the anatomy the contract writes down as
+ * "Label + optional Remove mark", and one position serves Check and Remove
+ * alike so peer marks never end up on opposite sides.
+ */
+export function ChipShape({ uid, label, mark = null }) {
+  return [
+    createElement(Terminal, { key: 'l', uid, side: 'leading' }),
+    createElement('span', { key: 'r', className: 'ol8-chip__rail' }, [
+      createElement('span', { key: 'label', className: 'ol8-chip__label' }, label),
+      mark,
+    ]),
+    createElement(Terminal, { key: 't', uid, side: 'trailing' }),
+  ];
+}
+
+/**
+ * A Choice Chip is a real checkbox. The contract is explicit that every picker
+ * option is "a real Checkbox rendered with the approved quiet Choice Chip
+ * appearance", with native checked state among the redundant cues, so selection
+ * never rests on colour alone.
+ */
+export function ChoiceChip({
+  children, size = 'standard', selected, defaultSelected, showMark = false,
+  disabled = false, name, value, id, className = '', onChange, ...rest
+}) {
+  if (!OL8_CHIP_SIZES.includes(size)) throw new Error(`[ol8] unknown chip size "${size}"`);
+  if (!children) throw new Error('[ol8] Choice Chip requires a label');
+  const auto = useId();
+  const uid = id ?? `ol8-chip-${auto}`;
+  const isOn = selected ?? defaultSelected ?? false;
+
+  return createElement('label', {
+    className: `ol8-chip${className ? ` ${className}` : ''}`,
+    htmlFor: uid,
+    'data-ol8-size': size,
+    'data-ol8-selection': isOn ? 'selected' : 'inactive',
+    'data-ol8-availability': disabled ? 'disabled' : 'enabled',
+  }, [
+    createElement('input', {
+      key: 'input', ...rest,
+      type: 'checkbox', className: 'ol8-chip__input', id: uid, name, value, disabled, onChange,
+      // A controlled chip with nothing listening is a display of state, not a
+      // control. Saying so is what React asks for, and it is the truth: the
+      // chip cannot change anything until someone handles the change.
+      ...(selected !== undefined
+        ? { checked: selected, ...(onChange ? {} : { readOnly: true }) }
+        : defaultSelected !== undefined ? { defaultChecked: defaultSelected } : {}),
+    }),
+    createElement(ChipShape, {
+      key: 'shape', uid, label: children,
+      mark: showMark
+        ? createElement('span', { key: 'mark', className: 'ol8-chip__mark', 'aria-hidden': 'true' },
+            createElement(IconGlyph, { name: 'check' }))
+        : null,
+    }),
+  ]);
+}