@mich8060/unified-design-system 0.1.10

package/src/ui/Pagination/Pagination.stories.jsx

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

package/src/ui/Pagination/Pagination.stories.tsx

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

package/src/ui/Pagination/Pagination.test.tsx

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

package/src/ui/Pagination/Pagination.tsx

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

package/src/ui/Pagination/Pagination.types.ts

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

package/src/ui/Pagination/index.js

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

package/src/ui/PillToggle/PillToggle.ai.md

@@ -0,0 +1,44 @@
+# PillToggle
+
+Segmented control with pill-shaped toggle buttons for switching between views or modes.
+
+## When to Use
+- View mode switching (Grid vs. List, Map vs. Satellite)
+- Small option groups (2–4 options) as an alternative to tabs
+- Compact controls for toolbars
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `array` | `[]` | Options: `[{ value, label, icon? }]` |
+| `value` | `string` | — | Currently selected value |
+| `onChange` | `function` | — | Callback `(value: string) => void` |
+| `size` | `string` | `"default"` | `"small"`, `"default"` |
+| `className` | `string` | `""` | Additional CSS classes |
+
+## Examples
+
+```jsx
+<PillToggle
+  options={[
+    { value: "grid", label: "Grid", icon: "GridFour" },
+    { value: "list", label: "List", icon: "List" },
+  ]}
+  value={viewMode}
+  onChange={setViewMode}
+/>
+```
+
+### Text-only
+```jsx
+<PillToggle
+  options={[
+    { value: "day", label: "Day" },
+    { value: "week", label: "Week" },
+    { value: "month", label: "Month" },
+  ]}
+  value={calendarView}
+  onChange={setCalendarView}
+/>
+```

package/src/ui/PillToggle/PillToggle.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import "./PillToggle.scss";
+
+const BASE_CLASS = "uds-pill-toggle";
+
+/**
+ * PillToggle component for switching between selected and unselected states
+ * @param {string} label - The text content of the toggle
+ * @param {boolean} selected - Whether the toggle is selected
+ * @param {function} onChange - Callback function when toggle state changes
+ * @param {string} id - Unique identifier for the toggle input
+ * @param {boolean} disabled - Whether the toggle is disabled
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the toggle
+ */
+export default function PillToggle({
+  label = "Label States",
+  selected = false,
+  onChange,
+  id,
+  disabled = false,
+  className = "",
+  ...props
+}) {
+  const toggleId =
+    id || `pill-toggle-${Math.random().toString(36).substr(2, 9)}`;
+
+  const handleChange = (event) => {
+    if (!disabled && onChange) {
+      onChange(event.target.checked);
+    }
+  };
+
+  const classNames = [
+    BASE_CLASS,
+    selected && `${BASE_CLASS}--selected`,
+    disabled && `${BASE_CLASS}--disabled`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <label className={classNames} htmlFor={toggleId} {...props}>
+      <input
+        type="checkbox"
+        id={toggleId}
+        className={`${BASE_CLASS}__input`}
+        checked={selected}
+        onChange={handleChange}
+        disabled={disabled}
+      />
+      <span className={`${BASE_CLASS}__label`}>{label}</span>
+    </label>
+  );
+}

package/src/ui/PillToggle/PillToggle.scss

@@ -0,0 +1,84 @@
+@use "../../styles/typography" as *;
+
+.uds-pill-toggle {
+  @include uds-body-16-medium;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--uds-spacing-16);
+  padding-block: var(--uds-spacing-8);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  background-color: var(--uds-surface-primary);
+  color: var(--uds-text-primary);
+  border-radius: 999px; // Fully rounded pill shape
+  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;
+  height: fit-content;
+  min-height: 40px;
+
+  &__input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+
+    &:focus-visible + .uds-pill-toggle__label {
+      outline: var(--uds-focus-ring-width) solid var(--uds-focus-ring-border);
+      outline-offset: var(--uds-focus-ring-offset);
+      border-radius: 4px;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    white-space: nowrap;
+    text-align: center;
+    line-height: var(--uds-line-height-24);
+  }
+
+  // Unselected state (default) - hover and active
+  &:hover:not(.uds-pill-toggle--disabled):not(.uds-pill-toggle--selected) {
+    border-color: var(--uds-border-secondary);
+    background-color: var(--uds-surface-secondary);
+  }
+
+  &:active:not(.uds-pill-toggle--disabled):not(.uds-pill-toggle--selected) {
+    border-color: var(--uds-border-tertiary);
+    background-color: var(--uds-surface-tertiary);
+  }
+
+  // Selected state
+  &--selected {
+    background-color: var(--uds-surface-brand-primary);
+    border-color: var(--uds-border-brand-primary);
+    color: var(--uds-text-inverse, white);
+
+    &:hover:not(.uds-pill-toggle--disabled) {
+      background-color: var(--uds-surface-brand-secondary);
+      border-color: var(--uds-border-brand-primary);
+    }
+
+    &:active:not(.uds-pill-toggle--disabled) {
+      background-color: var(--uds-surface-brand-tertiary);
+      border-color: var(--uds-border-brand-primary);
+    }
+  }
+
+  // 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/PillToggle/PillToggle.spec.ts

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

package/src/ui/PillToggle/PillToggle.stories.jsx

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

package/src/ui/PillToggle/PillToggle.stories.tsx

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

package/src/ui/PillToggle/PillToggle.test.tsx

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

package/src/ui/PillToggle/PillToggle.tsx

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

package/src/ui/PillToggle/PillToggle.types.ts

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

package/src/ui/PillToggle/index.js

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

package/src/ui/Playground/Playground.ai.md

@@ -0,0 +1,96 @@
+# Playground
+
+Interactive component explorer with live canvas, inspector panel, and code generation.
+
+## When to Use
+- Building demo/documentation pages for components
+- Interactive "try it out" experiences for component props
+- Generating code snippets for component configurations
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `component` | `React.Component` | — | The component to render in the canvas |
+| `propDefinitions` | `object` | `{}` | Prop definitions for inspector controls (see below) |
+| `title` | `string` | `"Playground"` | Playground title |
+| `initialProps` | `object` | `{}` | Initial prop values |
+| `renderComponent` | `function` | — | Custom render function `(props) => ReactNode` |
+
+### propDefinitions Format
+
+Each key maps to a control definition:
+
+```jsx
+{
+  propName: {
+    type: "select" | "text" | "boolean" | "number" | "icon",
+    label: "Display Label",
+    default: defaultValue,
+    options: [{ value: "val", label: "Label" }],  // for select
+    min: 0, max: 100, step: 1,                    // for number
+    placeholder: "Enter text..."                    // for text
+  }
+}
+```
+
+## Examples
+
+### Button playground
+```jsx
+<Playground
+  component={Button}
+  propDefinitions={{
+    label: { type: "text", label: "Label", default: "Click Me" },
+    appearance: {
+      type: "select",
+      label: "Appearance",
+      default: "primary",
+      options: [
+        { value: "primary", label: "Primary" },
+        { value: "soft", label: "Soft" },
+        { value: "outline", label: "Outline" },
+        { value: "ghost", label: "Ghost" },
+      ],
+    },
+    size: {
+      type: "select",
+      label: "Size",
+      default: "default",
+      options: [
+        { value: "large", label: "Large" },
+        { value: "default", label: "Default" },
+        { value: "small", label: "Small" },
+      ],
+    },
+    icon: { type: "icon", label: "Icon", default: "" },
+    disabled: { type: "boolean", label: "Disabled", default: false },
+  }}
+/>
+```
+
+### With custom render function
+```jsx
+<Playground
+  component={Card}
+  propDefinitions={cardProps}
+  renderComponent={(props) => (
+    <div style={{ width: 300 }}>
+      <Card {...props}>
+        <p>Custom card content</p>
+      </Card>
+    </div>
+  )}
+/>
+```
+
+## Features
+- **Canvas**: Live component preview with current props
+- **Inspector**: Property controls with select, text, number, boolean, and icon types
+- **Code panel**: Auto-generated import + usage code with syntax highlighting
+- **Copy button**: One-click code copy to clipboard
+- Icon props auto-detect and show icon picker from Phosphor icon library
+
+## Note
+- Not typically used in production apps — this is for documentation/demo pages
+- The `component.name` is used for code generation (ensure components have display names)