@mich8060/unified-design-system 0.1.10

package/src/ui/Card/index.js

@@ -0,0 +1 @@
+export { default } from "./Card";

package/src/ui/Checkbox/Checkbox.ai.md

@@ -0,0 +1,50 @@
+# Checkbox
+
+Binary toggle input with label and indeterminate state support.
+
+## When to Use
+- Form fields for boolean selections (terms acceptance, preferences)
+- Multi-select lists with "select all" (indeterminate state)
+- Filter controls
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `checked` | `boolean` | `false` | Whether checked |
+| `onChange` | `function` | — | Callback `(checked: boolean) => void` |
+| `label` | `string` | — | Label text |
+| `id` | `string` | auto-generated | Unique identifier |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `indeterminate` | `boolean` | `false` | Indeterminate/partial state (for "select all") |
+| `className` | `string` | `""` | Additional CSS classes |
+
+## Examples
+
+### Basic
+```jsx
+<Checkbox label="I agree to the terms" checked={agreed} onChange={setAgreed} />
+```
+
+### Select all pattern
+```jsx
+<Checkbox
+  label="Select All"
+  checked={allSelected}
+  indeterminate={someSelected && !allSelected}
+  onChange={handleSelectAll}
+/>
+{items.map(item => (
+  <Checkbox key={item.id} label={item.name} checked={item.selected} onChange={() => toggleItem(item.id)} />
+))}
+```
+
+### In a form
+```jsx
+<Field label="Preferences">
+  <Flex direction="column" gap="8">
+    <Checkbox label="Email notifications" checked={emailNotifs} onChange={setEmailNotifs} />
+    <Checkbox label="SMS notifications" checked={smsNotifs} onChange={setSmsNotifs} />
+  </Flex>
+</Field>
+```

package/src/ui/Checkbox/Checkbox.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+import "./Checkbox.scss";
+
+/**
+ * Checkbox component for form inputs
+ * @param {boolean} checked - Whether the checkbox is checked
+ * @param {function} onChange - Callback function when checkbox state changes
+ * @param {string} id - Unique identifier for the checkbox input
+ * @param {string} label - Label text for the checkbox
+ * @param {boolean} disabled - Whether the checkbox is disabled
+ * @param {boolean} indeterminate - Whether the checkbox is in indeterminate state
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the checkbox
+ */
+export default function Checkbox({
+  checked = false,
+  onChange,
+  id,
+  label,
+  disabled = false,
+  indeterminate = false,
+  className = "",
+  ...props
+}) {
+  const checkboxId =
+    id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+
+  const handleChange = (event) => {
+    if (!disabled && onChange) {
+      onChange(event.target.checked);
+    }
+  };
+
+  // Only show indeterminate state when some (but not all) items are selected
+  const showIndeterminate = indeterminate && !checked;
+
+  return (
+    <label
+      className={`checkbox ${disabled ? "checkbox--disabled" : ""} ${showIndeterminate ? "checkbox--indeterminate" : ""} ${className}`}
+      htmlFor={checkboxId}
+    >
+      <input
+        type="checkbox"
+        id={checkboxId}
+        className="checkbox__input"
+        checked={checked}
+        onChange={handleChange}
+        disabled={disabled}
+        ref={(input) => {
+          if (input) {
+            input.indeterminate = indeterminate;
+          }
+        }}
+        {...props}
+      />
+      <span className="checkbox__box">
+        {checked && (
+          <Icon
+            name="Check"
+            size={16}
+            appearance="bold"
+            className="checkbox__icon"
+          />
+        )}
+        {indeterminate && !checked && (
+          <span className="checkbox__indeterminate" />
+        )}
+      </span>
+      {label && <span className="checkbox__label">{label}</span>}
+    </label>
+  );
+}

package/src/ui/Checkbox/Checkbox.scss

@@ -0,0 +1,115 @@
+@use "../../styles/typography" as *;
+
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--uds-gap-8);
+  cursor: pointer;
+  user-select: none;
+
+  // ── Modifier: disabled ──────────────────────────────
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    .checkbox__label {
+      cursor: not-allowed;
+      color: var(--uds-text-secondary);
+    }
+  }
+
+  // ── Modifier: indeterminate ─────────────────────────
+  &--indeterminate {
+    .checkbox__box {
+      background-color: var(--uds-surface-brand-tertiary);
+      border-color: var(--uds-border-brand-tertiary);
+    }
+
+    .checkbox__input:not(:disabled) + .checkbox__box:hover {
+      background-color: var(--uds-surface-brand-secondary);
+      border-color: var(--uds-border-brand-secondary);
+    }
+  }
+
+  // ── Element: hidden input ───────────────────────────
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+
+    &:focus-visible + .checkbox__box {
+      outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+      outline-offset: var(--uds-focus-ring-offset);
+    }
+
+    &:checked + .checkbox__box {
+      background-color: var(--uds-surface-brand-tertiary);
+      border-color: var(--uds-border-brand-tertiary);
+      color: var(--uds-text-inverse);
+    }
+
+    &:not(:checked):not(:disabled) + .checkbox__box:hover {
+      border-color: var(--uds-border-brand-primary);
+      background-color: var(--uds-surface-tertiary);
+    }
+
+    &:disabled + .checkbox__box {
+      background-color: var(--uds-surface-tertiary);
+      border-color: var(--uds-border-primary);
+      cursor: not-allowed;
+    }
+
+    &:disabled + .checkbox__box + .checkbox__label {
+      color: var(--uds-text-secondary);
+    }
+  }
+
+  // ── Element: visual box ─────────────────────────────
+  &__box {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-radius: var(--uds-radius-4);
+    background-color: var(--uds-surface-tertiary);
+    transition:
+      background-color var(--uds-animation-duration-200) var(--uds-animation-ease-standard),
+      border-color var(--uds-animation-duration-200) var(--uds-animation-ease-standard),
+      box-shadow var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+    flex-shrink: 0;
+  }
+
+  // ── Element: check icon ─────────────────────────────
+  &__icon {
+    color: var(--uds-text-inverse);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+  }
+
+  // ── Element: indeterminate dash ─────────────────────
+  &__indeterminate {
+    width: 10px;
+    height: 2px;
+    background-color: var(--uds-color-white);
+    border-radius: 1px;
+  }
+
+  // ── Element: label ──────────────────────────────────
+  &__label {
+    @include uds-body-14-medium;
+    color: var(--uds-text-primary);
+    line-height: 20px;
+    cursor: pointer;
+  }
+}

package/src/ui/Checkbox/Checkbox.spec.ts

@@ -0,0 +1,12 @@
+export const CHECKBOX_DEFAULTS = {
+  className: "",
+} as const;
+
+export const CHECKBOX_STORY_SPEC = {
+  defaults: {
+    className: CHECKBOX_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Checkbox/Checkbox.stories.jsx

@@ -0,0 +1,14 @@
+import Checkbox from "./Checkbox";
+
+export default {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,14 @@
+import Checkbox from "./Checkbox.jsx";
+
+export default {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Checkbox/Checkbox.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Checkbox/Checkbox.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyCheckbox from "./Checkbox.jsx";
+
+const Checkbox = LegacyCheckbox as ComponentType<any>;
+
+export default Checkbox;

package/src/ui/Checkbox/Checkbox.types.ts

@@ -0,0 +1,3 @@
+export interface CheckboxProps {
+  className?: string;
+}

package/src/ui/Checkbox/index.js

@@ -0,0 +1 @@
+export { default } from "./Checkbox";

package/src/ui/Chip/Chip.ai.md

@@ -0,0 +1,43 @@
+# Chip
+
+Interactive label component for filters, selections, or tags with optional icon and badge.
+
+## When to Use
+- Filter chips (active/inactive filters)
+- Selection chips in multi-select contexts
+- Compact labels with optional icons and counts
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `label` | `string` | — | — | Chip text |
+| `appearance` | `string` | `"outline"` | `"outline"`, `"primary"` | Visual style |
+| `shape` | `string` | `"pill"` | `"pill"`, `"rounded"` | Shape variant |
+| `iconPlacement` | `string` | `"none"` | `"none"`, `"left"`, `"right"`, `"both"` | Icon position |
+| `icon` | `string` | — | Phosphor icon name | Icon to display |
+| `badge` | `number\|string` | — | — | Badge count |
+| `badgeVariant` | `string` | `"red"` | Badge color variant | Badge color |
+| `onClick` | `function` | — | — | Makes chip interactive (renders as button) |
+| `disabled` | `boolean` | `false` | — | Disabled state |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Examples
+
+### Filter chips
+```jsx
+<Flex gap="8">
+  <Chip label="All" appearance="primary" onClick={() => setFilter("all")} />
+  <Chip label="Active" onClick={() => setFilter("active")} />
+  <Chip label="Archived" onClick={() => setFilter("archived")} />
+</Flex>
+```
+
+### With icon and badge
+```jsx
+<Chip label="Messages" icon="ChatCircle" iconPlacement="left" badge={5} />
+```
+
+## Note
+- Renders as `<button>` when `onClick` is provided, `<span>` otherwise
+- Uses `Badge` component internally for the badge count

package/src/ui/Chip/Chip.jsx

@@ -0,0 +1,102 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+import Badge from "../Badge/Badge";
+import "./Chip.scss";
+
+const BASE_CLASS = "uds-chip";
+
+const appearanceClassMap = {
+  outline: "outline",
+  primary: "primary",
+};
+
+const shapeClassMap = {
+  pill: "pill",
+  rounded: "rounded",
+};
+
+const iconPlacementClassMap = {
+  both: "icon-both",
+  left: "icon-left",
+  right: "icon-right",
+  none: "icon-none",
+};
+
+/**
+ * Chip component for displaying labels, tags, or filters
+ * @param {string} label - The text content of the chip
+ * @param {string} appearance - Visual style variant: 'outline' or 'primary'
+ * @param {string} shape - Shape variant: 'pill' (fully rounded) or 'rounded' (slightly rounded)
+ * @param {string} iconPlacement - Icon placement: 'both', 'left', 'right', or 'none'
+ * @param {string} icon - Icon name to display (when iconPlacement is not 'none')
+ * @param {number|string} badge - Badge count to display
+ * @param {string} badgeVariant - Badge color variant (default: 'red')
+ * @param {string} className - Additional CSS classes
+ * @param {function} onClick - Click handler function
+ * @param {boolean} disabled - Whether the chip is disabled
+ * @param {object} props - Additional props to pass to the chip element
+ */
+export default function Chip({
+  label,
+  appearance = "outline",
+  shape = "pill",
+  iconPlacement = "none",
+  icon,
+  badge,
+  badgeVariant = "red",
+  className = "",
+  onClick,
+  disabled = false,
+  ...props
+}) {
+  const classNames = [
+    BASE_CLASS,
+    appearanceClassMap[appearance] &&
+      `${BASE_CLASS}--${appearanceClassMap[appearance]}`,
+    shapeClassMap[shape] && `${BASE_CLASS}--${shapeClassMap[shape]}`,
+    iconPlacementClassMap[iconPlacement] &&
+      `${BASE_CLASS}--${iconPlacementClassMap[iconPlacement]}`,
+    disabled && `${BASE_CLASS}--disabled`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const hasLeftIcon = iconPlacement === "both" || iconPlacement === "left";
+  const hasRightIcon = iconPlacement === "both" || iconPlacement === "right";
+  const Element = onClick ? "button" : "span";
+
+  return (
+    <Element
+      className={classNames}
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      {...props}
+    >
+      {hasLeftIcon && icon && (
+        <Icon
+          name={icon}
+          size={16}
+          appearance="regular"
+          className={`${BASE_CLASS}__icon ${BASE_CLASS}__icon--left`}
+        />
+      )}
+      {label && <span className={`${BASE_CLASS}__label`}>{label}</span>}
+      {hasRightIcon && icon && (
+        <Icon
+          name={icon}
+          size={16}
+          appearance="regular"
+          className={`${BASE_CLASS}__icon ${BASE_CLASS}__icon--right`}
+        />
+      )}
+      {badge && (
+        <Badge
+          count={badge}
+          variant={badgeVariant}
+          className={`${BASE_CLASS}__badge`}
+        />
+      )}
+    </Element>
+  );
+}

package/src/ui/Chip/Chip.scss

@@ -0,0 +1,118 @@
+@use "../../styles/typography" as *;
+
+.uds-chip {
+  @include uds-body-14-medium;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--uds-gap-8);
+  padding-inline: var(--uds-spacing-12);
+  padding-block: var(--uds-spacing-6);
+  border: var(--uds-border-width-1) solid;
+  background-color: var(--uds-surface-primary);
+  color: var(--uds-text-primary);
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+  box-sizing: border-box;
+  white-space: nowrap;
+  width: fit-content;
+  min-width: fit-content;
+  max-width: fit-content;
+  height: fit-content;
+
+  // When used as button, remove default button styles but inherit chip styles
+  &:is(button) {
+    font: inherit;
+    background: none;
+    border: var(--uds-border-width-1) solid;
+  }
+
+  // Shape variants
+  &--pill {
+    border-radius: 999px; // Fully rounded pill shape
+  }
+
+  &--rounded {
+    border-radius: var(--uds-radius-4); // Slightly rounded rectangular
+  }
+
+  // Appearance variants
+  &--outline {
+    background-color: var(--uds-surface-primary);
+    border-color: var(--uds-border-primary);
+    color: var(--uds-text-primary);
+
+    &:hover:not(.uds-chip--disabled) {
+      border-color: var(--uds-border-secondary);
+      background-color: var(--uds-surface-secondary);
+    }
+
+    &:active:not(.uds-chip--disabled) {
+      border-color: var(--uds-border-tertiary);
+      background-color: var(--uds-surface-tertiary);
+    }
+  }
+
+  &--primary {
+    background-color: var(--uds-surface-brand-primary);
+    border-color: var(--uds-border-brand-tertiary);
+    color: var(--uds-text-primary);
+
+    &:hover:not(.uds-chip--disabled) {
+      background-color: var(--uds-surface-brand-primary);
+      border-color: var(--uds-border-brand-primary);
+      color: var(--uds-text-brand-primary);
+    }
+
+    &:active:not(.uds-chip--disabled) {
+      background-color: var(--uds-surface-brand-tertiary);
+      border-color: var(--uds-border-brand-primary);
+    }
+  }
+
+  // Icon placement
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    line-height: 0;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    &--left {
+      order: -1;
+    }
+
+    &--right {
+      order: 1;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+  &__badge {
+    margin-left: var(--uds-gap-4);
+    flex-shrink: 0;
+  }
+
+  // Disabled state
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  // Focus state
+  &:focus-visible {
+    outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+    outline-offset: var(--uds-focus-ring-offset);
+  }
+}

package/src/ui/Chip/Chip.spec.ts

@@ -0,0 +1,12 @@
+export const CHIP_DEFAULTS = {
+  className: "",
+} as const;
+
+export const CHIP_STORY_SPEC = {
+  defaults: {
+    className: CHIP_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Chip/Chip.stories.jsx

@@ -0,0 +1,14 @@
+import Chip from "./Chip";
+
+export default {
+  title: "Components/Chip",
+  component: Chip,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Chip/Chip.stories.tsx

@@ -0,0 +1,14 @@
+import Chip from "./Chip.jsx";
+
+export default {
+  title: "Components/Chip",
+  component: Chip,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Chip/Chip.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Chip/Chip.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyChip from "./Chip.jsx";
+
+const Chip = LegacyChip as ComponentType<any>;
+
+export default Chip;

package/src/ui/Chip/Chip.types.ts

@@ -0,0 +1,3 @@
+export interface ChipProps {
+  className?: string;
+}

package/src/ui/Chip/index.js

@@ -0,0 +1 @@
+export { default } from "./Chip";

package/src/ui/Datepicker/Datepicker.ai.md

@@ -0,0 +1,45 @@
+# Datepicker
+
+Calendar-based date selection input.
+
+## When to Use
+- Date fields in forms (birthdate, deadline, event date)
+- Date range selection for filters or reports
+- Any input that requires a date value
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Date\|string` | — | Selected date |
+| `onChange` | `function` | — | Callback `(date: Date) => void` |
+| `placeholder` | `string` | `"Select date"` | Placeholder text |
+| `minDate` | `Date\|string` | — | Earliest selectable date |
+| `maxDate` | `Date\|string` | — | Latest selectable date |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `state` | `string` | `"default"` | `"default"`, `"error"`, `"disabled"` |
+| `format` | `string` | `"MM/DD/YYYY"` | Display format |
+| `className` | `string` | `""` | Additional CSS classes |
+
+## Examples
+
+```jsx
+<Datepicker value={date} onChange={setDate} placeholder="Choose a date" />
+```
+
+### With min/max constraints
+```jsx
+<Datepicker
+  value={startDate}
+  onChange={setStartDate}
+  minDate={new Date()}
+  maxDate={new Date(2025, 11, 31)}
+/>
+```
+
+### In a form
+```jsx
+<Field label="Start Date" required>
+  <Datepicker value={startDate} onChange={setStartDate} />
+</Field>
+```