@ds-mo/ui 0.1.0

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Breadcrumb } from './Breadcrumb';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'Classic/Breadcrumb',
+  component: Breadcrumb,
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Playground: Story = {
+  args: {
+    items: [
+      { label: 'Home', onClick: () => {} },
+      { label: 'Products', onClick: () => {} },
+      { label: 'Widget Pro' },
+    ],
+  },
+};
+
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb
+      items={[
+        { label: 'Home', onClick: () => {} },
+        { label: 'Settings', onClick: () => {} },
+        { label: 'General' },
+      ]}
+    />
+  ),
+};
+
+export const Deep: Story = {
+  render: () => (
+    <Breadcrumb
+      items={[
+        { label: 'Home', onClick: () => {} },
+        { label: 'Products', onClick: () => {} },
+        { label: 'Inventory', onClick: () => {} },
+        { label: 'Item #482', onClick: () => {} },
+        { label: 'Maintenance' },
+      ]}
+    />
+  ),
+};
+
+export const WithLinks: Story = {
+  render: () => (
+    <Breadcrumb
+      items={[
+        { label: 'Home', href: '#' },
+        { label: 'Products', href: '#' },
+        { label: 'Widget Pro' },
+      ]}
+    />
+  ),
+};
+
+export const CustomSeparator: Story = {
+  render: () => (
+    <Breadcrumb
+      separator=">"
+      items={[
+        { label: 'Dashboard', onClick: () => {} },
+        { label: 'Reports', onClick: () => {} },
+        { label: 'Q4 Summary' },
+      ]}
+    />
+  ),
+};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import { Text } from '@/components/Text';
+import styles from './Breadcrumb.module.css';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface BreadcrumbProps {
+  /** Ordered list of breadcrumb items. Last item is treated as current page. */
+  items: BreadcrumbItem[];
+  /** Custom separator. Defaults to '/'. */
+  separator?: React.ReactNode;
+  className?: string;
+}
+
+export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(
+  ({ items, separator = '/', className }, ref) => (
+    <nav ref={ref} aria-label="Breadcrumb" className={cn(styles.breadcrumb, className)}>
+      <ol className={styles.list}>
+        {items.map((item, i) => {
+          const isLast = i === items.length - 1;
+          return (
+            <li key={i} className={styles.item}>
+              {isLast ? (
+                <Text variant="text-body-medium-emphasis" as="span" color="primary" aria-current="page">
+                  {item.label}
+                </Text>
+              ) : (
+                <>
+                  {item.href ? (
+                    <a
+                      href={item.href}
+                      className={styles.link}
+                      onClick={e => { if (item.onClick) { e.preventDefault(); item.onClick(); } }}
+                    >
+                      <Text variant="text-body-medium" as="span" color="inherit">
+                        {item.label}
+                      </Text>
+                    </a>
+                  ) : (
+                    <button
+                      type="button"
+                      className={styles.link}
+                      onClick={item.onClick}
+                    >
+                      <Text variant="text-body-medium" as="span" color="inherit">
+                        {item.label}
+                      </Text>
+                    </button>
+                  )}
+                  <span className={styles.separator} aria-hidden="true">
+                    {separator}
+                  </span>
+                </>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  )
+);
+
+Breadcrumb.displayName = 'Breadcrumb';

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';

package/src/components/Button/Button.module.css

@@ -0,0 +1,343 @@
+/* ==========================================================================
+   Button — unified primary/secondary
+   Hover/pressed via color-mix() on background-color. No pseudo-element overlays.
+   ========================================================================== */
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--dimension-radius-050);
+  cursor: pointer;
+  position: relative;
+  transition: transform var(--effect-motion-short-2);
+  height: var(--dimension-size-400);
+  font-family: inherit;
+  color: var(--color-foreground-primary);
+  background: transparent;
+  box-sizing: border-box;
+  text-decoration: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  /* Interaction — ghost defaults (semi-transparent overlay) */
+  --_hover-bg: var(--color-interaction-hover);
+  --_pressed-bg: var(--color-interaction-pressed);
+  --_border: var(--color-border-tertiary);
+}
+
+.button:focus-visible {
+  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
+  outline-offset: var(--dimension-space-025);
+}
+
+.button:hover:not(.inactive) {
+  background-color: var(--_hover-bg);
+}
+
+.button:active:not(.inactive) {
+  background-color: var(--_pressed-bg);
+  transform: scale(var(--dimension-scale-subtle));
+}
+
+/* ==========================================================================
+   Background context — parent surface awareness
+   Adjusts hover tokens and secondary fg for colored parent surfaces.
+   1-class specificity; overridden by filled variant rules (2+ classes).
+   ========================================================================== */
+
+.onMedium {
+  --_hover-bg: var(--color-interaction-on-medium-background-hover);
+  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);
+  --_border: var(--color-border-on-medium-background-tertiary);
+}
+
+.onBold {
+  --_hover-bg: var(--color-interaction-on-bold-background-hover);
+  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);
+  --_border: var(--color-border-on-bold-background-tertiary);
+}
+
+.onStrong {
+  --_hover-bg: var(--color-interaction-on-strong-background-hover);
+  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);
+  --_border: var(--color-border-on-strong-background-tertiary);
+}
+
+.onAlwaysDark {
+  --_hover-bg: var(--color-always-dark-interaction-hover);
+  --_pressed-bg: var(--color-always-dark-interaction-pressed);
+  --_border: var(--color-always-dark-border-tertiary);
+}
+
+/* ==========================================================================
+   Variant: Primary
+   Bold background, on-bold content. Elevation controls shadow.
+   ========================================================================== */
+
+.primary {
+  color: var(--color-foreground-on-bold-background-primary);
+}
+
+/* Primary intent: none — inverted surface (black in light mode, white in dark mode) */
+.primary.intentNone {
+  background-color: var(--color-inverted-background);
+  color: var(--color-inverted-foreground-primary);
+  --_hover-bg: color-mix(in oklch, var(--color-inverted-background) 90%, var(--color-inverted-foreground-primary));
+  --_pressed-bg: color-mix(in oklch, var(--color-inverted-background) 85%, var(--color-inverted-foreground-primary));
+  --_border: var(--color-inverted-border-tertiary);
+}
+
+/* Filled primary — background from --_bg, bold-contrast hover via color-mix.
+   2-class specificity beats background context (1-class). */
+.primary:not(.intentNone) {
+  background-color: var(--_bg);
+  --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));
+  --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-on-bold-background-primary));
+}
+
+/* ── Primary bold contrast (default) ────────────────────────────────── */
+
+.primary.intentBrand    { --_bg: var(--color-background-bold-brand);    color: var(--color-foreground-faint-brand); }
+.primary.intentNeutral  { --_bg: var(--color-background-bold-neutral);  color: var(--color-foreground-faint-neutral); }
+.primary.intentPositive { --_bg: var(--color-background-bold-positive); color: var(--color-foreground-faint-positive); }
+.primary.intentNegative { --_bg: var(--color-background-bold-negative); color: var(--color-foreground-faint-negative); }
+.primary.intentWarning  { --_bg: var(--color-background-bold-warning);  color: var(--color-foreground-faint-warning); }
+.primary.intentCaution  { --_bg: var(--color-background-bold-caution);  color: var(--color-foreground-faint-caution); }
+.primary.intentAi       { --_bg: var(--color-background-bold-ai);       color: var(--color-foreground-faint-ai); }
+
+/* ── Primary medium contrast ────────────────────────────────────────── */
+
+.primary.contrastMedium {
+  --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));
+  --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-primary));
+}
+.primary.contrastMedium.intentBrand    { --_bg: var(--color-background-medium-brand);    color: var(--color-foreground-strong-brand); }
+.primary.contrastMedium.intentNeutral  { --_bg: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral); }
+.primary.contrastMedium.intentPositive { --_bg: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }
+.primary.contrastMedium.intentNegative { --_bg: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }
+.primary.contrastMedium.intentWarning  { --_bg: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning); }
+.primary.contrastMedium.intentCaution  { --_bg: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution); }
+.primary.contrastMedium.intentAi       { --_bg: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai); }
+
+/* ── Primary strong contrast ────────────────────────────────────────── */
+
+.primary.contrastStrong {
+  --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-on-bold-background-primary));
+  --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));
+}
+.primary.contrastStrong.intentBrand    { --_bg: var(--color-background-strong-brand);    color: var(--color-foreground-medium-brand); }
+.primary.contrastStrong.intentNeutral  { --_bg: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral); }
+.primary.contrastStrong.intentPositive { --_bg: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }
+.primary.contrastStrong.intentNegative { --_bg: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }
+.primary.contrastStrong.intentWarning  { --_bg: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning); }
+.primary.contrastStrong.intentCaution  { --_bg: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution); }
+.primary.contrastStrong.intentAi       { --_bg: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai); }
+
+/* ── Primary faint contrast ─────────────────────────────────────────── */
+
+.primary.contrastFaint {
+  --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-primary));
+  --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));
+}
+.primary.contrastFaint.intentBrand    { --_bg: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand); }
+.primary.contrastFaint.intentNeutral  { --_bg: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral); }
+.primary.contrastFaint.intentPositive { --_bg: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }
+.primary.contrastFaint.intentNegative { --_bg: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }
+.primary.contrastFaint.intentWarning  { --_bg: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning); }
+.primary.contrastFaint.intentCaution  { --_bg: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution); }
+.primary.contrastFaint.intentAi       { --_bg: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai); }
+
+/* ==========================================================================
+   Variant: Secondary
+   Base is ghost (transparent, no border, no shadow).
+   Elevation classes add the chrome — flat=border, elevated=bg+shadow, floating=bg+floating.
+   ========================================================================== */
+
+.secondary {
+  background-color: transparent;
+  color: var(--color-foreground-secondary);
+}
+
+/* Secondary intent — bold fg color */
+.secondary.intentBrand    { color: var(--color-foreground-bold-brand); }
+.secondary.intentNeutral  { color: var(--color-foreground-bold-neutral); }
+.secondary.intentPositive { color: var(--color-foreground-bold-positive); }
+.secondary.intentNegative { color: var(--color-foreground-bold-negative); }
+.secondary.intentWarning  { color: var(--color-foreground-bold-warning); }
+.secondary.intentCaution  { color: var(--color-foreground-bold-caution); }
+.secondary.intentAi       { color: var(--color-foreground-bold-ai); }
+
+/* ── Secondary fg on medium surface ─────────────────────────────────── */
+
+.secondary.onMedium { color: var(--color-foreground-primary); }
+.secondary.onMedium.intentBrand    { color: var(--color-foreground-strong-brand); }
+.secondary.onMedium.intentNeutral  { color: var(--color-foreground-strong-neutral); }
+.secondary.onMedium.intentPositive { color: var(--color-foreground-strong-positive); }
+.secondary.onMedium.intentNegative { color: var(--color-foreground-strong-negative); }
+.secondary.onMedium.intentWarning  { color: var(--color-foreground-strong-warning); }
+.secondary.onMedium.intentCaution  { color: var(--color-foreground-strong-caution); }
+.secondary.onMedium.intentAi       { color: var(--color-foreground-strong-ai); }
+
+/* ── Secondary fg on bold surface ──────────────────────────────────── */
+
+.secondary.onBold { color: var(--color-foreground-on-bold-background-secondary); }
+.secondary.onBold.intentBrand    { color: var(--color-foreground-faint-brand); }
+.secondary.onBold.intentNeutral  { color: var(--color-foreground-faint-neutral); }
+.secondary.onBold.intentPositive { color: var(--color-foreground-faint-positive); }
+.secondary.onBold.intentNegative { color: var(--color-foreground-faint-negative); }
+.secondary.onBold.intentWarning  { color: var(--color-foreground-faint-warning); }
+.secondary.onBold.intentCaution  { color: var(--color-foreground-faint-caution); }
+.secondary.onBold.intentAi       { color: var(--color-foreground-faint-ai); }
+
+/* ── Secondary fg on always-dark surface ──────────────────────────── */
+
+.secondary.onAlwaysDark { color: var(--color-always-dark-foreground-secondary); }
+.secondary.onAlwaysDark.intentBrand    { color: var(--color-always-dark-foreground-brand); }
+.secondary.onAlwaysDark.intentNeutral  { color: var(--color-always-dark-foreground-neutral); }
+.secondary.onAlwaysDark.intentPositive { color: var(--color-always-dark-foreground-positive); }
+.secondary.onAlwaysDark.intentNegative { color: var(--color-always-dark-foreground-negative); }
+.secondary.onAlwaysDark.intentWarning  { color: var(--color-always-dark-foreground-warning); }
+.secondary.onAlwaysDark.intentCaution  { color: var(--color-always-dark-foreground-caution); }
+.secondary.onAlwaysDark.intentAi       { color: var(--color-always-dark-foreground-ai); }
+
+/* ── Secondary fg on strong surface ─────────────────────────────────── */
+
+.secondary.onStrong { color: var(--color-foreground-on-bold-background-secondary); }
+.secondary.onStrong.intentBrand    { color: var(--color-foreground-faint-brand); }
+.secondary.onStrong.intentNeutral  { color: var(--color-foreground-faint-neutral); }
+.secondary.onStrong.intentPositive { color: var(--color-foreground-faint-positive); }
+.secondary.onStrong.intentNegative { color: var(--color-foreground-faint-negative); }
+.secondary.onStrong.intentWarning  { color: var(--color-foreground-faint-warning); }
+.secondary.onStrong.intentCaution  { color: var(--color-foreground-faint-caution); }
+.secondary.onStrong.intentAi       { color: var(--color-foreground-faint-ai); }
+
+/* ==========================================================================
+   Elevation
+   ========================================================================== */
+
+/* ── Secondary chrome ───────────────────────────────────────────────── */
+
+/* elevationNone = ghost base — no extra CSS needed */
+
+.secondary.elevationFlat {
+  box-shadow: inset 0 0 0 1px var(--_border);
+}
+
+.secondary.elevationElevated {
+  background-color: var(--color-background-primary);
+  box-shadow: var(--effect-elevation-elevated-sm);
+  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));
+  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));
+}
+
+.secondary.elevationFloating {
+  background-color: var(--color-background-primary);
+  box-shadow: var(--effect-elevation-elevated-floating);
+  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));
+  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));
+}
+
+/* ── Primary shadow + border control ───────────────────────────────── */
+
+/* elevated */
+.primary.elevationElevated { box-shadow: var(--effect-elevation-elevated-sm); }
+
+/* none = no shadow, no border (flat colored button — default for primary) */
+.primary.elevationNone { box-shadow: none; }
+
+/* flat = inset ring against the page background (not the button fill) */
+.primary.elevationFlat { box-shadow: inset 0 0 0 1px var(--_border); }
+
+/* intentNone flat: inverted fill + default border ring (bg/fg inherited from .primary.intentNone) */
+.primary.intentNone.elevationFlat {
+  --_border: var(--color-border-tertiary);
+}
+
+/* intentNone on strong/always-dark: flip to surface bg/fg — inverted (black) would be invisible */
+.primary.intentNone.onStrong,
+.primary.intentNone.onAlwaysDark {
+  background-color: var(--color-background-primary);
+  color: var(--color-foreground-primary);
+  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));
+  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));
+  --_border: var(--color-border-tertiary);
+}
+
+/* floating = FAB-strength shadow for both variants */
+.primary.elevationFloating   { box-shadow: var(--effect-elevation-elevated-floating) !important; }
+
+/* ==========================================================================
+   Layout: icon-only, label-only, icon+label, dropdown
+   ========================================================================== */
+
+.iconOnly { padding: 0; width: var(--dimension-size-400); min-width: var(--dimension-size-400); }
+.labelOnly { padding: 0 var(--dimension-space-100); }
+.iconAndLabel { padding: 0 var(--dimension-space-100) 0 var(--dimension-space-075); gap: var(--dimension-space-025); }
+.dropdown { gap: var(--dimension-space-050); }
+
+/* ==========================================================================
+   Sizes
+   ========================================================================== */
+
+.sizeSM { height: var(--dimension-size-300); }
+.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }
+.sizeSM.labelOnly   { padding: 0 var(--dimension-space-075); }
+.sizeSM.iconAndLabel { padding: 0 var(--dimension-space-075) 0 var(--dimension-space-050); gap: 1px; }
+
+.sizeXS { height: var(--dimension-size-200); }
+.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }
+.sizeXS.labelOnly, .sizeXS.iconAndLabel { padding: 0 var(--dimension-space-025); gap: 0; }
+
+.sizeLG { height: var(--dimension-size-500); }
+.sizeLG.iconOnly { width: var(--dimension-size-500); min-width: var(--dimension-size-500); }
+.sizeLG.labelOnly   { padding: 0 var(--dimension-space-150); }
+.sizeLG.iconAndLabel { padding: 0 var(--dimension-space-150) 0 var(--dimension-space-100); gap: var(--dimension-space-075); }
+
+/* ==========================================================================
+   Rounded (pill shape)
+   ========================================================================== */
+
+.rounded { border-radius: var(--dimension-radius-half); }
+.rounded.labelOnly   { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }
+.rounded.iconAndLabel { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }
+.rounded.sizeSM.labelOnly   { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }
+.rounded.sizeSM.iconAndLabel { padding-left: calc(var(--dimension-space-050) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }
+.rounded.sizeLG.labelOnly   { padding-left: calc(var(--dimension-space-150) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }
+.rounded.sizeLG.iconAndLabel { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }
+.rounded.iconOnly { width: var(--dimension-size-400); min-width: var(--dimension-size-400); padding: 0; }
+.rounded.sizeLG.iconOnly { width: var(--dimension-size-500); min-width: var(--dimension-size-500); }
+.rounded.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }
+.rounded.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }
+
+/* ==========================================================================
+   Disabled
+   ========================================================================== */
+
+.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
+
+/* ==========================================================================
+   Badge
+   ========================================================================== */
+
+.badge {
+  position: absolute;
+  top: var(--dimension-space-025);
+  right: var(--dimension-space-025);
+  font-size: var(--typography-fontsize-xs);
+  font-weight: var(--typography-weight-semibold);
+  line-height: var(--typography-lineheight-xs);
+  color: var(--color-foreground-secondary);
+  pointer-events: none;
+  z-index: 10;
+}
+
+/* ==========================================================================
+   Full width
+   ========================================================================== */
+
+.fullWidth {
+  display: flex;
+  width: 100%;
+}