@mich8060/unified-design-system 0.1.10

package/src/ui/Divider/Divider.jsx

@@ -0,0 +1,89 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+import "./Divider.scss";
+
+const BASE_CLASS = "uds-divider";
+
+const alignmentClassMap = {
+  left: "left",
+  center: "center",
+  right: "right",
+};
+
+const variantClassMap = {
+  line: "line",
+  solid: "solid",
+};
+
+/**
+ * Divider component for separating content sections
+ * @param {string} variant - Variant style: 'line' (default) or 'solid' (8px solid box)
+ * @param {string} label - Optional text label to display on the divider (only for 'line' variant)
+ * @param {string} icon - Optional icon name to display on the divider (only for 'line' variant)
+ * @param {string} alignment - Alignment of label/icon: 'left', 'center', or 'right' (only for 'line' variant)
+ * @param {boolean} labelWithIcon - Whether to show icon within the label text (e.g., "+ Divider Label") (only for 'line' variant)
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the divider element
+ */
+export default function Divider({
+  variant = "line",
+  label,
+  icon,
+  alignment = "center",
+  labelWithIcon = false,
+  className = "",
+  ...props
+}) {
+  const classNames = [
+    BASE_CLASS,
+    variantClassMap[variant] && `${BASE_CLASS}--${variantClassMap[variant]}`,
+    variant === "line" &&
+      alignmentClassMap[alignment] &&
+      `${BASE_CLASS}--${alignmentClassMap[alignment]}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const hasLabel = !!label;
+  const hasIcon = !!icon;
+  const hasContent = hasLabel || hasIcon;
+  const isSolidVariant = variant === "solid";
+
+  return (
+    <div
+      className={classNames}
+      role="separator"
+      aria-orientation="horizontal"
+      {...props}
+    >
+      {!isSolidVariant && hasContent && (
+        <div className={`${BASE_CLASS}__content ${hasIcon && !hasLabel ? `${BASE_CLASS}__content--icon-only` : ''} ${hasLabel ? `${BASE_CLASS}__content--with-label` : ''}`}>
+          {hasIcon && !hasLabel && (
+            <span className={`${BASE_CLASS}__icon`}>
+              <Icon name={icon} size={16} appearance="regular" />
+            </span>
+          )}
+          {hasLabel && (
+            <span className={`${BASE_CLASS}__label`}>
+              {labelWithIcon && hasIcon && (
+                <Icon
+                  name={icon}
+                  size={16}
+                  appearance="regular"
+                  className={`${BASE_CLASS}__label-icon`}
+                />
+              )}
+              {label}
+            </span>
+          )}
+          {hasIcon && hasLabel && !labelWithIcon && (
+            <span className={`${BASE_CLASS}__icon`}>
+              <Icon name={icon} size={16} appearance="regular" />
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/Divider/Divider.scss

@@ -0,0 +1,116 @@
+@use "../../styles/typography" as *;
+
+.uds-divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: var(--uds-gap-16) 0;
+
+  // Solid variant - 8px tall box that goes edge to edge
+  &--solid {
+    align-items: stretch;
+    height: 8px;
+    margin: var(--uds-spacing-24) 0;
+    background-color: var(--uds-color-neutrals-100);
+    border-top:solid var(--uds-border-width-1) var(--uds-border-secondary);
+    border-bottom:solid var(--uds-border-width-1) var(--uds-border-secondary);
+    width: 100%;
+    margin-left: calc(50% - 50vw);
+    max-width: 100vw;
+    overflow: hidden;
+    width: 100vw;
+  }
+
+  // Line variant (default) - horizontal line with optional content
+  &--line,
+  &:not(&--solid) {
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 50%;
+      height: var(--uds-border-width-1);
+      background-color: var(--uds-border-primary);
+      z-index: 0;
+    }
+  }
+
+  // Alignment variants
+  &--left {
+    .uds-divider__content {
+    }
+  }
+
+  &--center {
+    display: flex;
+    align-items: center;
+
+    .uds-divider__content {
+        margin: 0 auto;
+    }
+  }
+
+  &--right {
+    .uds-divider__content {
+        margin-left: auto;
+    }
+  }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--uds-gap-8);
+    background-color: var(--uds-surface-primary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    padding-inline: var(--uds-spacing-12);
+    padding-block: var(--uds-spacing-4);
+
+    // Icon-only variant
+    &--icon-only {
+      border-radius: var(--uds-radius-9999);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width:28px;
+      padding:0;
+      height:28px;
+    }
+
+    // Label variant (with or without icon)
+    &--with-label {
+      border-radius: var(--uds-radius-9999);
+    }
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--uds-text-primary);
+    flex: 0;
+    width: 20px;
+    height: 28px;
+  }
+
+  &__label {
+    @include uds-body-14-medium;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--uds-gap-6);
+    color: var(--uds-text-primary);
+    background-color: var(--uds-surface-primary);
+    padding-inline: var(--uds-spacing-8);
+    padding-block: var(--uds-spacing-4);
+    border-radius: var(--uds-radius-4);
+    white-space: nowrap;
+  }
+
+  &__label-icon {
+    flex-shrink: 0;
+    color: var(--uds-text-primary);
+  }
+}

package/src/ui/Divider/Divider.spec.ts

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

package/src/ui/Divider/Divider.stories.jsx

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

package/src/ui/Divider/Divider.stories.tsx

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

package/src/ui/Divider/Divider.test.tsx

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

package/src/ui/Divider/Divider.tsx

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

package/src/ui/Divider/Divider.types.ts

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

package/src/ui/Divider/index.js

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

package/src/ui/DotStatus/DotStatus.ai.md

@@ -0,0 +1,36 @@
+# DotStatus
+
+Simple colored dot indicator for status display.
+
+## When to Use
+- Minimal status indicators (online/offline, severity levels)
+- Color-coded dots next to labels
+- Compact status in table cells or lists
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `color` | `string` | `"gray"` | `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"purple"`, `"gray"` | Dot color |
+| `size` | `string` | `"default"` | `"small"`, `"default"`, `"large"` | Dot size |
+| `pulse` | `boolean` | `false` | — | Animate with pulse effect |
+| `label` | `string` | — | — | Accessible label (sr-only) |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Examples
+
+```jsx
+<DotStatus color="green" />
+<DotStatus color="red" pulse />
+<DotStatus color="yellow" label="Warning" />
+```
+
+### In a table
+```jsx
+render: (value) => (
+  <Flex gap="8" alignItems="center">
+    <DotStatus color={value === "Active" ? "green" : "gray"} />
+    <span>{value}</span>
+  </Flex>
+)
+```

package/src/ui/DotStatus/DotStatus.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import "./DotStatus.scss";
+
+const BASE_CLASS = "uds-dot-status";
+
+const variantClassMap = {
+  "light-gray": "light-gray",
+  red: "red",
+  orange: "orange",
+  yellow: "yellow",
+  "light-green": "light-green",
+  green: "green",
+  blue: "blue",
+  "dark-blue": "dark-blue",
+  teal: "teal",
+  purple: "purple",
+  pink: "pink",
+  magenta: "magenta",
+  "dark-red": "dark-red",
+  "dark-gray": "dark-gray",
+};
+
+const sizeClassMap = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+};
+
+/**
+ * Dot Status component for displaying status indicators
+ * @param {string} variant - Color variant
+ * @param {string} size - Size variant: 'small', 'medium', or 'large'
+ * @param {boolean} outline - Whether to show an outline/border around the dot
+ * @param {string} className - Additional CSS classes
+ * @param {string} 'aria-label' - Accessible label for screen readers
+ * @param {object} props - Additional props to pass to the dot element
+ */
+export default function DotStatus({
+  variant = "blue",
+  size = "medium",
+  outline = false,
+  className = "",
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const classNames = [
+    BASE_CLASS,
+    variantClassMap[variant] && `${BASE_CLASS}--${variantClassMap[variant]}`,
+    sizeClassMap[size] && `${BASE_CLASS}--${sizeClassMap[size]}`,
+    outline && `${BASE_CLASS}--outline`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <span
+      className={classNames}
+      role="status"
+      aria-label={ariaLabel || `${variant} status`}
+      {...props}
+    />
+  );
+}

package/src/ui/DotStatus/DotStatus.scss

@@ -0,0 +1,87 @@
+@use "../../styles/typography" as *;
+
+.uds-dot-status {
+  display: inline-block;
+  border-radius: 50%;
+  flex-shrink: 0;
+  vertical-align: middle;
+
+  // Size variants
+  &--small {
+    width: 8px;
+    height: 8px;
+  }
+
+  &--medium {
+    width: 12px;
+    height: 12px;
+  }
+
+  &--large {
+    width: 16px;
+    height: 16px;
+  }
+
+  // Variant colors
+  &--light-gray {
+    background-color: #f3f4f6; // Very light gray
+  }
+
+  &--red {
+    background-color: #ef4444; // Bright red
+  }
+
+  &--orange {
+    background-color: #f97316; // Bright orange
+  }
+
+  &--yellow {
+    background-color: #eab308; // Bright yellow
+  }
+
+  &--light-green {
+    background-color: #84cc16; // Light green (lime)
+  }
+
+  &--green {
+    background-color: #22c55e; // Darker green
+  }
+
+  &--blue {
+    background-color: #3b82f6; // Medium blue
+  }
+
+  &--dark-blue {
+    background-color: #2563eb; // Dark blue
+  }
+
+  &--teal {
+    background-color: #14b8a6; // Teal/Cyan
+  }
+
+  &--purple {
+    background-color: #a855f7; // Medium purple
+  }
+
+  &--pink {
+    background-color: #ec4899; // Bright pink
+  }
+
+  &--magenta {
+    background-color: #d946ef; // Darker pink/magenta
+  }
+
+  &--dark-red {
+    background-color: #dc2626; // Dark red/maroon
+  }
+
+  &--dark-gray {
+    background-color: #1f2937; // Dark gray (almost black)
+  }
+
+  // Outline variant
+  &--outline {
+    border: var(--uds-border-width-1) solid var(--uds-border-inverse); // Light gray border/ring
+    // Background colors remain the same as defined above
+  }
+}

package/src/ui/DotStatus/DotStatus.spec.ts

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

package/src/ui/DotStatus/DotStatus.stories.jsx

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

package/src/ui/DotStatus/DotStatus.stories.tsx

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

package/src/ui/DotStatus/DotStatus.test.tsx

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

package/src/ui/DotStatus/DotStatus.tsx

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

package/src/ui/DotStatus/DotStatus.types.ts

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

package/src/ui/DotStatus/index.js

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

package/src/ui/Dropdown/Dropdown.ai.md

@@ -0,0 +1,118 @@
+# Dropdown
+
+Custom select/dropdown input built on top of `ActionMenu`. Provides keyboard navigation, click-outside-to-close, and accessible markup out of the box.
+
+## Architecture
+
+Dropdown composes `ActionMenu` internally:
+- The select-style trigger button (value display + caret) is passed as ActionMenu's `trigger`
+- Options are mapped to ActionMenu `items` with `active` set on the selected item
+- ActionMenu handles the popup, click-outside, keyboard nav, and focus management
+- Dropdown only owns: option normalization, selected value tracking, trigger styling, label, size/state variants
+
+This means ActionMenu and Dropdown share a single popup engine, but each is fully encapsulated and independently usable.
+
+## When to Use
+- Selecting a single value from a list of options
+- Replacing native `<select>` with a styled, accessible alternative
+- Form fields that need consistent design system styling
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `options` | `array` | `[]` | `[{ value, label }]` or `["string"]` | Options list |
+| `value` | `string\|number` | — | — | Currently selected value |
+| `onChange` | `function` | — | `(value) => void` | Selection change callback |
+| `placeholder` | `string` | `"Select an option"` | — | Placeholder when nothing selected |
+| `size` | `string` | `"default"` | `"compact"`, `"default"` | Size variant |
+| `state` | `string` | `"default"` | `"default"`, `"focused"`, `"error"`, `"disabled"` | Visual state |
+| `disabled` | `boolean` | `false` | — | Disabled state (overrides `state`) |
+| `id` | `string` | auto-generated | — | Unique identifier |
+| `label` | `string` | — | — | Label text above the dropdown |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Examples
+
+### Basic dropdown
+```jsx
+const [value, setValue] = useState("");
+
+<Dropdown
+  options={["Option A", "Option B", "Option C"]}
+  value={value}
+  onChange={setValue}
+  placeholder="Choose one..."
+/>
+```
+
+### With label and object options
+```jsx
+<Dropdown
+  label="Country"
+  options={[
+    { value: "us", label: "United States" },
+    { value: "uk", label: "United Kingdom" },
+    { value: "ca", label: "Canada" },
+  ]}
+  value={country}
+  onChange={setCountry}
+/>
+```
+
+### Inside a Field (with validation)
+```jsx
+<Field label="Department" required helperMessage="Select your department">
+  <Dropdown
+    options={departments}
+    value={dept}
+    onChange={setDept}
+    state={errors.dept ? "error" : "default"}
+  />
+</Field>
+```
+
+### Compact size
+```jsx
+<Dropdown
+  options={options}
+  value={value}
+  onChange={setValue}
+  size="compact"
+  placeholder="Compact dropdown"
+/>
+```
+
+### Disabled state
+```jsx
+<Dropdown
+  label="Locked Selection"
+  options={options}
+  value="locked-value"
+  disabled
+/>
+```
+
+## Keyboard Navigation
+
+- **Enter/Space**: Open dropdown
+- **Arrow Up/Down**: Navigate options
+- **Escape**: Close dropdown
+- **Click outside**: Close dropdown
+
+## Composition
+
+- Wrap with `<Field>` for labels, required markers, and helper text
+- Use inside forms alongside `Input`, `Textarea`, `Checkbox`
+- Use `state="error"` with `Field` `helperMessage` for validation feedback
+
+## Do's and Don'ts
+
+✅ **Do**: Always provide a meaningful `placeholder`
+✅ **Do**: Use `{ value, label }` objects for options when values differ from display text
+✅ **Do**: Wrap with `<Field>` for form contexts
+✅ **Do**: Use `state="error"` for validation errors
+
+❌ **Don't**: Use for more than ~20 options — consider a searchable autocomplete instead
+❌ **Don't**: Forget to manage `value` and `onChange` — this is a controlled component
+❌ **Don't**: Set both `disabled` prop and `state="disabled"` — just use `disabled`