@mich8060/unified-design-system 0.1.10

package/src/ui/Toast/Toast.ai.md

@@ -0,0 +1,47 @@
+# Toast
+
+Notification toast for transient feedback messages.
+
+## When to Use
+- Success confirmations ("Item saved successfully")
+- Error messages ("Failed to delete item")
+- Warning alerts and informational notices
+- Any brief, auto-dismissing notification
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `message` | `string` | — | — | Toast message text |
+| `type` | `string` | `"info"` | `"success"`, `"error"`, `"warning"`, `"info"` | Toast variant |
+| `duration` | `number` | `5000` | ms | Auto-dismiss duration (0 = persistent) |
+| `onClose` | `function` | — | — | Close callback |
+| `position` | `string` | `"top-right"` | `"top-right"`, `"top-left"`, `"bottom-right"`, `"bottom-left"`, `"top-center"`, `"bottom-center"` | Screen position |
+| `action` | `object` | — | `{ label, onClick }` | Optional action button |
+
+## Usage Pattern
+
+### With toast manager
+```jsx
+import { useToast } from "@mich8060/chg-design-system";
+
+function MyComponent() {
+  const { showToast } = useToast();
+
+  const handleSave = async () => {
+    try {
+      await saveData();
+      showToast({ message: "Saved successfully!", type: "success" });
+    } catch (err) {
+      showToast({ message: "Save failed", type: "error", duration: 0 });
+    }
+  };
+}
+```
+
+### Direct usage
+```jsx
+{showSuccess && (
+  <Toast message="Item created" type="success" onClose={() => setShowSuccess(false)} />
+)}
+```

package/src/ui/Toast/Toast.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+import "./Toast.scss";
+
+const BASE_CLASS = "uds-toast";
+
+const variantClassMap = {
+  success: "success",
+  error: "error",
+  warning: "warning",
+  info: "info",
+};
+
+const iconMap = {
+  success: "CheckCircle",
+  error: "XCircle",
+  warning: "Warning",
+  info: "Info",
+};
+
+/**
+ * Toast component for displaying notification messages
+ * @param {string} message - The message text to display
+ * @param {string} variant - Toast variant: 'success', 'error', 'warning', 'info' (default: 'info')
+ * @param {string} title - Optional title text
+ * @param {boolean} showIcon - Whether to show an icon (default: true)
+ * @param {boolean} showClose - Whether to show a close button (default: true)
+ * @param {function} onClose - Callback function when toast is closed
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the toast element
+ */
+export default function Toast({
+  message,
+  variant = "info",
+  title,
+  showIcon = true,
+  showClose = true,
+  onClose,
+  className = "",
+  ...props
+}) {
+  const classNames = [
+    BASE_CLASS,
+    variantClassMap[variant] && `${BASE_CLASS}--${variantClassMap[variant]}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const iconName = iconMap[variant] || "Info";
+
+  return (
+    <div className={classNames} role="alert" {...props}>
+      {showIcon && (
+        <div className={`${BASE_CLASS}__icon`}>
+          <Icon name={iconName} size={20} appearance="fill" />
+        </div>
+      )}
+      <div className={`${BASE_CLASS}__content`}>
+        {title && <div className={`${BASE_CLASS}__title`}>{title}</div>}
+        {message && <div className={`${BASE_CLASS}__message`}>{message}</div>}
+      </div>
+      {showClose && onClose && (
+        <button
+          type="button"
+          className={`${BASE_CLASS}__close`}
+          onClick={onClose}
+          aria-label="Close toast"
+        >
+          <Icon name="X" size={16} appearance="regular" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/ui/Toast/Toast.scss

@@ -0,0 +1,132 @@
+@use "../../styles/typography" as *;
+
+.uds-toast {
+  @include uds-body-14;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--uds-gap-12);
+  padding: var(--uds-spacing-16);
+  border-radius: var(--uds-radius-8);
+  box-shadow: var(--uds-shadow-light-200);
+  background: var(--uds-surface-primary);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  min-width: 320px;
+  max-width: 420px;
+  position: relative;
+  z-index: var(--uds-elevation-toast);
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-top: 2px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--uds-gap-4);
+    min-width: 0;
+  }
+
+  &__title {
+    @include uds-body-14-semibold;
+    color: var(--uds-text-primary);
+    margin: 0;
+  }
+
+  &__message {
+    @include uds-body-14;
+    color: var(--uds-text-secondary);
+    margin: 0;
+  }
+
+  &__close {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: var(--uds-spacing-4);
+    margin: -4px -4px -4px 0;
+    border-radius: var(--uds-radius-4);
+    color: var(--uds-text-secondary);
+    transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+    flex-shrink: 0;
+
+    &:hover {
+      background: var(--uds-surface-secondary);
+      color: var(--uds-text-primary);
+    }
+
+    &:focus-visible {
+      outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+      outline-offset: var(--uds-focus-ring-offset);
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  // Variant styles
+  &--success {
+    border-color: var(--uds-border-success, #10b981);
+    background: var(--uds-surface-success-light, #ecfdf5);
+
+    .uds-toast__icon {
+      color: var(--uds-text-success, #059669);
+    }
+
+    .uds-toast__title {
+      color: var(--uds-text-success, #059669);
+    }
+  }
+
+  &--error {
+    border-color: var(--uds-border-error, #ef4444);
+    background: var(--uds-surface-error-light, #fef2f2);
+
+    .uds-toast__icon {
+      color: var(--uds-text-error, #dc2626);
+    }
+
+    .uds-toast__title {
+      color: var(--uds-text-error, #dc2626);
+    }
+  }
+
+  &--warning {
+    border-color: var(--uds-border-warning, #f59e0b);
+    background: var(--uds-surface-warning-light, #fffbeb);
+
+    .uds-toast__icon {
+      color: var(--uds-text-warning, #d97706);
+    }
+
+    .uds-toast__title {
+      color: var(--uds-text-warning, #d97706);
+    }
+  }
+
+  &--info {
+    border-color: var(--uds-border-info, #3b82f6);
+    background: var(--uds-surface-info-light, #eff6ff);
+
+    .uds-toast__icon {
+      color: var(--uds-text-info, #2563eb);
+    }
+
+    .uds-toast__title {
+      color: var(--uds-text-info, #2563eb);
+    }
+  }
+}

package/src/ui/Toast/Toast.spec.ts

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

package/src/ui/Toast/Toast.stories.jsx

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

package/src/ui/Toast/Toast.stories.tsx

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

package/src/ui/Toast/Toast.test.tsx

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

package/src/ui/Toast/Toast.tsx

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

package/src/ui/Toast/Toast.types.ts

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

package/src/ui/Toast/index.js

@@ -0,0 +1,2 @@
+export { default as Toast } from "./Toast";
+export { default } from "./Toast";

package/src/ui/Toggle/Toggle.ai.md

@@ -0,0 +1,37 @@
+# Toggle
+
+On/off switch component with label and size variants.
+
+## When to Use
+- Boolean settings (enable/disable features)
+- Preference toggles (dark mode, notifications)
+- Any on/off control
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `checked` | `boolean` | `false` | — | Whether on |
+| `onChange` | `function` | — | `(checked: boolean) => void` | Toggle callback |
+| `label` | `string` | — | — | Label text |
+| `id` | `string` | auto | — | Unique ID |
+| `disabled` | `boolean` | `false` | — | Disabled state |
+| `size` | `string` | `"default"` | `"small"`, `"default"` | Toggle size |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Examples
+
+```jsx
+<Toggle label="Dark Mode" checked={darkMode} onChange={setDarkMode} />
+<Toggle label="Notifications" checked={notifs} onChange={setNotifs} size="small" />
+<Toggle label="Disabled" disabled />
+```
+
+### In a settings form
+```jsx
+<Flex direction="column" gap="16">
+  <Toggle label="Email notifications" checked={email} onChange={setEmail} />
+  <Toggle label="Push notifications" checked={push} onChange={setPush} />
+  <Toggle label="SMS alerts" checked={sms} onChange={setSms} />
+</Flex>
+```

package/src/ui/Toggle/Toggle.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import "./Toggle.scss";
+
+const BASE_CLASS = "uds-toggle";
+
+const sizeClassMap = {
+  large: "large",
+  small: "small",
+};
+
+/**
+ * Toggle component for switching between states
+ * @param {boolean} checked - Whether the toggle is checked (on/off)
+ * @param {string} state - Toggle state: 'off', 'on', or 'indeterminate' (default: 'off')
+ * @param {string} size - Toggle size: 'large' or 'small' (default: 'large')
+ * @param {boolean} bordered - Whether to show border (default: false)
+ * @param {function} onChange - Callback function when toggle state changes
+ * @param {boolean} disabled - Whether the toggle is disabled
+ * @param {string} id - Unique identifier for the toggle input
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the toggle
+ */
+export default function Toggle({
+  checked,
+  state,
+  size = "large",
+  bordered = false,
+  onChange,
+  disabled = false,
+  id,
+  className = "",
+  ...props
+}) {
+  // Determine state from checked prop if state is not provided
+  const toggleState = state || (checked ? "on" : "off");
+
+  const classNames = [
+    BASE_CLASS,
+    sizeClassMap[size] && `${BASE_CLASS}--${sizeClassMap[size]}`,
+    bordered && `${BASE_CLASS}--bordered`,
+    toggleState === "indeterminate" && `${BASE_CLASS}--indeterminate`,
+    disabled && `${BASE_CLASS}--disabled`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const handleChange = (event) => {
+    if (!disabled && onChange) {
+      onChange(event.target.checked);
+    }
+  };
+
+  return (
+    <label className={classNames} htmlFor={id} {...props}>
+      <input
+        type="checkbox"
+        id={id}
+        className={`${BASE_CLASS}__input`}
+        checked={checked || toggleState === "on"}
+        onChange={handleChange}
+        disabled={disabled}
+      />
+      <span className={`${BASE_CLASS}__slider`}>
+        {toggleState === "indeterminate" ? (
+          <span className={`${BASE_CLASS}__dash`} />
+        ) : (
+          <span className={`${BASE_CLASS}__thumb`} />
+        )}
+      </span>
+    </label>
+  );
+}

package/src/ui/Toggle/Toggle.scss

@@ -0,0 +1,139 @@
+@use "../../styles/typography" as *;
+
+.uds-toggle {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+
+  // Large size (default)
+  width: 48px;
+  height: 28px;
+
+  &--small {
+    width: 36px;
+    height: 20px;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &__input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+
+    &:focus-visible + .uds-toggle__slider {
+      outline: var(--uds-focus-ring-width) solid var(--uds-focus-ring-border);
+      outline-offset: var(--uds-focus-ring-offset);
+    }
+
+    &:disabled + .uds-toggle__slider {
+      cursor: not-allowed;
+    }
+  }
+
+  &__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--uds-color-neutrals-400);
+    border-radius: 14px;
+    transition: background-color var(--uds-animation-duration-200)
+      var(--uds-animation-ease-standard);
+    border: none;
+
+    &:hover:not(.uds-toggle--disabled) {
+      background-color:  var(--uds-color-neutrals-400);
+    }
+  }
+
+  &--bordered &__slider {
+    border: var(--uds-border-width-1) solid
+      var(--uds-border-brand-primary, #3b82f6);
+  }
+
+  &__thumb {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    left: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: var(--uds-surface-primary, #ffffff);
+    border-radius: 50%;
+    transition:
+      transform var(--uds-animation-duration-200) var(--uds-animation-ease-standard),
+      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-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.1));
+    border: none;
+  }
+
+  &--bordered &__thumb {
+    border: var(--uds-border-width-1) solid
+      var(--uds-border-brand-primary, #3b82f6);
+  }
+
+  &__dash {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 12px;
+    height: 2px;
+    background-color: var(--uds-surface-primary, #ffffff);
+    border-radius: 1px;
+    border: none;
+  }
+
+  &--bordered &__dash {
+    border: var(--uds-border-width-1) solid
+      var(--uds-border-brand-primary, #3b82f6);
+  }
+
+  // Small size adjustments
+  &--small &__thumb {
+    height: 14px;
+    width: 14px;
+    left: 3px;
+  }
+
+  &--small &__dash {
+    width: 8px;
+    height: 1.5px;
+  }
+
+  // Off state (default)
+  &__input:not(:checked) + &__slider {
+    background-color:  var(--uds-color-neutrals-400);
+  }
+
+  &--bordered &__input:not(:checked) + &__slider {
+    background-color: var(--uds-surface-primary, #ffffff);
+  }
+
+  // On state
+  &__input:checked + &__slider {
+    background-color: var(--uds-surface-brand-tertiary);
+
+    .uds-toggle__thumb {
+      transform: translateY(-50%) translateX(20px);
+    }
+  }
+
+  &--small &__input:checked + &__slider .uds-toggle__thumb {
+    transform: translateY(-50%) translateX(16px);
+  }
+
+  // Indeterminate state
+  &--indeterminate &__slider {
+    background-color: var(--uds-surface-brand-primary, #3b82f6);
+  }
+}

package/src/ui/Toggle/Toggle.spec.ts

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

package/src/ui/Toggle/Toggle.stories.jsx

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

package/src/ui/Toggle/Toggle.stories.tsx

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

package/src/ui/Toggle/Toggle.test.tsx

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

package/src/ui/Toggle/Toggle.tsx

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

package/src/ui/Toggle/Toggle.types.ts

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

package/src/ui/Toggle/index.js

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

package/src/ui/Tooltip/Tooltip.ai.md

@@ -0,0 +1,33 @@
+# Tooltip
+
+Hover/focus tooltip for additional context on any element.
+
+## When to Use
+- Providing extra information on icon-only buttons
+- Explaining truncated text or status indicators
+- Adding context without cluttering the UI
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `content` | `string\|ReactNode` | — | — | Tooltip content |
+| `position` | `string` | `"top"` | `"top"`, `"bottom"`, `"left"`, `"right"` | Tooltip position |
+| `children` | `ReactNode` | — | — | Element to attach tooltip to |
+| `delay` | `number` | `200` | ms | Hover delay before showing |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Examples
+
+```jsx
+<Tooltip content="Delete this item">
+  <Button layout="icon-only" icon="Trash" appearance="ghost" />
+</Tooltip>
+```
+
+### With rich content
+```jsx
+<Tooltip content={<span>Created on <strong>Jan 15, 2024</strong></span>} position="bottom">
+  <span>2 weeks ago</span>
+</Tooltip>
+```

package/src/ui/Tooltip/Tooltip.figma.tsx

@@ -0,0 +1,24 @@
+import Tooltip from './Tooltip';
+import { code } from '@figma/code-connect';
+
+export default code.connect(
+    Tooltip,
+    'https://www.figma.com/design/LkIyThUA0oVNsDEAyOF7ER/Design-System--Components',
+    {
+        props: {
+            content: code.string('A message which appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface.'),
+            placement: code.enum('placement', {
+                top: 'top',
+                bottom: 'bottom',
+                left: 'left',
+                right: 'right',
+            }),
+            disabled: code.boolean('disabled'),
+        },
+        example: ({ content, placement, disabled }) => (
+            <Tooltip content={content} placement={placement} disabled={disabled}>
+                <button>Hover me</button>
+            </Tooltip>
+        ),
+    }
+);