@mich8060/unified-design-system 0.1.10

package/src/ui/ActionMenu/ActionMenu.stories.tsx

@@ -0,0 +1,124 @@
+import ActionMenu from "./ActionMenu";
+import Button from "../Button/Button";
+
+const DEFAULT_ITEMS = [
+  { label: "Edit", icon: "PencilSimple", onClick: () => {} },
+  { label: "Duplicate", icon: "Copy", onClick: () => {} },
+  { divider: true },
+  { label: "Delete", icon: "Trash", destructive: true, onClick: () => {} },
+];
+
+const NESTED_ITEMS = [
+  {
+    label: "Share",
+    icon: "ShareNetwork",
+    items: [
+      { label: "Copy Link", icon: "Link", onClick: () => {} },
+      { label: "Email", icon: "EnvelopeSimple", onClick: () => {} },
+    ],
+  },
+  {
+    label: "Notifications",
+    icon: "Bell",
+    type: "toggle",
+    checked: true,
+    onChange: () => {},
+  },
+  { divider: true },
+  { label: "Archive", icon: "Archive", onClick: () => {} },
+];
+
+export default {
+  title: "Components/ActionMenu",
+  component: ActionMenu,
+  tags: ["autodocs"],
+  args: {
+    trigger: <Button appearance="ghost" layout="icon-only" icon="DotsThree" />,
+    items: DEFAULT_ITEMS,
+    placement: "bottom-end",
+    fullWidth: false,
+    disabled: false,
+    className: "",
+    menuClassName: "",
+  },
+  argTypes: {
+    trigger: {
+      control: false,
+      description:
+        "Element that opens the menu. Use a Button for the best keyboard and visual behavior.",
+      table: {
+        type: { summary: "ReactNode" },
+      },
+    },
+    items: {
+      control: "object",
+      description:
+        "Array of menu items. Each item can include label, icon, onClick, shortcut, active, destructive, disabled, divider, nested items, or toggle fields (type, checked, onChange).",
+      table: {
+        type: {
+          summary:
+            "Array<{ label?: string; icon?: string; onClick?: fn; shortcut?: string; active?: boolean; destructive?: boolean; disabled?: boolean; divider?: boolean; items?: MenuItem[]; type?: 'toggle'; checked?: boolean; onChange?: (checked: boolean) => void; }>",
+        },
+      },
+    },
+    placement: {
+      control: "select",
+      options: [
+        "bottom-start",
+        "bottom-end",
+        "top-start",
+        "top-end",
+        "right-start",
+        "right-end",
+        "left-start",
+        "left-end",
+      ],
+      description: "Position of the menu relative to the trigger.",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "When true, menu width matches the trigger width.",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disables opening and interaction for the whole menu.",
+    },
+    onOpenChange: {
+      action: "open changed",
+      description: "Called when open state changes: (isOpen: boolean) => void.",
+    },
+    className: {
+      control: "text",
+      description: "Extra class names applied to the root wrapper.",
+    },
+    menuClassName: {
+      control: "text",
+      description: "Extra class names applied to the floating menu panel.",
+    },
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "ActionMenu is a contextual dropdown for grouped actions. Start with a Button trigger and pass an `items` array with menu rows, optional dividers, nested submenus, or toggle rows.",
+      },
+    },
+  },
+};
+
+export const Default = {};
+
+export const WithNestedItems = {
+  args: {
+    items: NESTED_ITEMS,
+  },
+};
+
+export const FullWidth = {
+  args: {
+    fullWidth: true,
+    placement: "bottom-start",
+    trigger: <Button appearance="soft">Choose action</Button>,
+  },
+};

package/src/ui/ActionMenu/ActionMenu.test.tsx

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

package/src/ui/ActionMenu/ActionMenu.tsx

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

package/src/ui/ActionMenu/ActionMenu.types.ts

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

package/src/ui/ActionMenu/index.js

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

package/src/ui/Avatar/Avatar.ai.md

@@ -0,0 +1,54 @@
+# Avatar
+
+User photo or initials display with optional online status indicator.
+
+## When to Use
+- User profile pictures in navigation, lists, comments, or cards
+- Contact lists, team member displays, or assigned user indicators
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `src` | `string` | — | Image URL | User photo URL |
+| `initials` | `string` | — | e.g., `"JD"`, `"AB"` | Initials to display when no photo |
+| `name` | `string` | — | — | Full name (auto-generates initials if `initials` not provided) |
+| `status` | `boolean` | `false` | — | Show green online status dot |
+| `size` | `string` | `"default"` | `"small"`, `"default"`, `"large"` | Avatar size |
+| `alt` | `string` | `""` | — | Alt text for image |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Examples
+
+### With photo
+```jsx
+<Avatar src="/photos/user.jpg" alt="John Doe" status />
+```
+
+### With initials
+```jsx
+<Avatar initials="JD" />
+<Avatar name="Jane Smith" /> {/* Auto-generates "JS" */}
+```
+
+### Size variants
+```jsx
+<Avatar initials="SM" size="small" />
+<Avatar initials="MD" />
+<Avatar initials="LG" size="large" />
+```
+
+### In a user list
+```jsx
+<Flex gap="8" alignItems="center">
+  <Avatar src={user.photo} size="small" status={user.online} />
+  <span>{user.name}</span>
+  <Tag label={user.role} color="blue" />
+</Flex>
+```
+
+## Composition
+- Inside `Table` custom render functions for user columns
+- In `UDS.Sidebar` for user account section
+- Combined with `Status` or `Badge` for richer user indicators
+- Inside `Card` for profile cards

package/src/ui/Avatar/Avatar.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import "./Avatar.scss";
+
+/**
+ * Avatar component for displaying user photos or initials
+ * @param {string} src - Image source URL for user photo
+ * @param {string} initials - Initials to display (e.g., "EB", "JD")
+ * @param {boolean} status - Whether to show the status indicator (green dot)
+ * @param {string} size - Size of the avatar: 'small', 'default', 'large' (default: 'default')
+ * @param {string} className - Additional CSS classes
+ * @param {string} alt - Alt text for the image
+ * @param {object} props - Additional props to pass to the avatar container
+ */
+export default function Avatar({
+  src,
+  initials,
+  status = false,
+  size = "default",
+  className = "",
+  alt = "",
+  ...props
+}) {
+  // Generate initials from name if provided but no initials
+  const getInitials = () => {
+    if (initials) return initials;
+    if (props.name) {
+      const names = props.name.trim().split(/\s+/);
+      if (names.length >= 2) {
+        return (names[0][0] + names[names.length - 1][0]).toUpperCase();
+      }
+      return names[0][0].toUpperCase();
+    }
+    return "?";
+  };
+
+  const sizeClass = size !== "default" ? `avatar--${size}` : "";
+  const classes = ["avatar", sizeClass, className].filter(Boolean).join(" ");
+
+  return (
+    <div className={classes} {...props}>
+      {src ? (
+        <img src={src} alt={alt || "User avatar"} className="avatar__image" />
+      ) : (
+        <span className="avatar__initials">{getInitials()}</span>
+      )}
+      {status && <span className="avatar__status" aria-label="Online status" />}
+    </div>
+  );
+}

package/src/ui/Avatar/Avatar.scss

@@ -0,0 +1,87 @@
+@use "../../styles/typography" as *;
+
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 9999px;
+  background: var(--uds-surface-brand-quaternary, #004b88);
+
+  // ── Size: small ─────────────────────────────────────
+  &--small {
+    width: 32px;
+    height: 32px;
+
+    .avatar__initials {
+      font-size: 12px;
+      line-height: 16px;
+    }
+
+    .avatar__status {
+      width: 8px;
+      height: 8px;
+      border-width: 1.5px;
+      bottom: 1px;
+      right: 1px;
+    }
+  }
+
+  // ── Size: large ─────────────────────────────────────
+  &--large {
+    width: 64px;
+    height: 64px;
+
+    .avatar__initials {
+      font-size: 18px;
+      line-height: 24px;
+    }
+
+    .avatar__status {
+      width: 16px;
+      height: 16px;
+      border-width: 2.5px;
+      bottom: 3px;
+      right: 3px;
+    }
+  }
+
+  // ── Element: image ──────────────────────────────────
+  &__image {
+    border-radius: 9999px;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+  }
+
+  // ── Element: initials ───────────────────────────────
+  &__initials {
+    @include uds-body-14-bold;
+    color: var(--uds-text-inverse);
+    line-height: 20px;
+    text-align: center;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  // ── Element: status dot ─────────────────────────────
+  &__status {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: var(--uds-color-accent-green-500, #23c55e);
+    border: 2px solid var(--uds-border-inverse, #ffffff);
+    box-sizing: border-box;
+  }
+}

package/src/ui/Avatar/Avatar.spec.ts

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

package/src/ui/Avatar/Avatar.stories.jsx

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

package/src/ui/Avatar/Avatar.stories.tsx

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

package/src/ui/Avatar/Avatar.test.tsx

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

package/src/ui/Avatar/Avatar.tsx

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

package/src/ui/Avatar/Avatar.types.ts

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

package/src/ui/Avatar/index.js

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

package/src/ui/Badge/Badge.ai.md

@@ -0,0 +1,37 @@
+# Badge
+
+Numeric badge indicator for counts, notifications, and status numbers.
+
+## When to Use
+- Notification counts on navigation items or icons
+- Unread message counts, item quantities
+- Any numeric indicator that overlays or accompanies another element
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `count` | `number\|string` | — | — | Number to display (renders nothing if 0 or falsy) |
+| `variant` | `string` | `"red"` | `"red"`, `"orange"`, `"yellow"`, `"green"`, `"dark-green"`, `"blue"`, `"dark-blue"`, `"purple"`, `"pink"`, `"gray"`, `"outline"` | Color variant |
+| `maxCount` | `number` | `99` | — | Max before showing "99+" |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Examples
+
+```jsx
+<Badge count={5} />
+<Badge count={150} maxCount={99} /> {/* Shows "99+" */}
+<Badge count={3} variant="blue" />
+<Badge count={12} variant="green" />
+```
+
+### With navigation item
+```jsx
+<Flex gap="8" alignItems="center">
+  <Icon name="Bell" size={20} />
+  <Badge count={notifications.length} />
+</Flex>
+```
+
+## Note
+- Returns `null` when `count` is 0 or falsy — safe to always render

package/src/ui/Badge/Badge.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import "./Badge.scss";
+
+const BASE_CLASS = "uds-badge";
+
+const variantClassMap = {
+  red: "red",
+  orange: "orange",
+  yellow: "yellow",
+  green: "green",
+  "dark-green": "dark-green",
+  blue: "blue",
+  "dark-blue": "dark-blue",
+  purple: "purple",
+  pink: "pink",
+  gray: "gray",
+  outline: "outline",
+};
+
+/**
+ * Badge component for displaying badges
+ * @param {number|string} count - The count to display (will be formatted with + if over maxCount)
+ * @param {string} variant - Color variant: 'red', 'orange', 'yellow', 'green', 'dark-green', 'blue', 'dark-blue', 'purple', 'pink', 'gray', 'outline'
+ * @param {number} maxCount - Maximum count to display before showing "+" (default: 99)
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the badge element
+ */
+export default function Badge({
+  count,
+  variant = "red",
+  maxCount = 99,
+  className = "",
+  ...props
+}) {
+  // Format the count: if over maxCount, show maxCount+
+  const formatCount = (num) => {
+    const numCount = typeof num === "number" ? num : parseInt(num, 10);
+    if (isNaN(numCount)) return "0";
+    if (numCount > maxCount) {
+      return `${maxCount}+`;
+    }
+    return numCount.toString();
+  };
+
+  const formattedCount = formatCount(count);
+
+  const classNames = [
+    BASE_CLASS,
+    variantClassMap[variant] && `${BASE_CLASS}--${variantClassMap[variant]}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  if (!count || count === 0) {
+    return null;
+  }
+
+  return (
+    <span className={classNames} {...props}>
+      {formattedCount}
+    </span>
+  );
+}

package/src/ui/Badge/Badge.scss

@@ -0,0 +1,84 @@
+@use "../../styles/typography" as *;
+
+.uds-badge {
+  @include uds-body-12-semibold;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 20px;
+  padding-inline: var(--uds-spacing-6);
+  padding-block: var(--uds-spacing-2);
+  border-radius: 999px; // Fully rounded pill shape
+  white-space: nowrap;
+  box-sizing: border-box;
+  line-height: 1;
+  flex-shrink: 0;
+
+  // Variant styles
+  &--red {
+    background-color: #ef4444; // Red
+    color: #ffffff;
+    border: none;
+  }
+
+  &--orange {
+    background-color: #f97316; // Orange
+    color: #ffffff;
+    border: none;
+  }
+
+  &--yellow {
+    background-color: #eab308; // Yellow
+    color: #000000;
+    border: none;
+  }
+
+  &--green {
+    background-color: #22c55e; // Light green
+    color: #000000;
+    border: none;
+  }
+
+  &--dark-green {
+    background-color: #16a34a; // Dark green
+    color: #ffffff;
+    border: none;
+  }
+
+  &--blue {
+    background-color: #3b82f6; // Light blue
+    color: #ffffff;
+    border: none;
+  }
+
+  &--dark-blue {
+    background-color: #2563eb; // Dark blue
+    color: #ffffff;
+    border: none;
+  }
+
+  &--purple {
+    background-color: #a855f7; // Purple
+    color: #ffffff;
+    border: none;
+  }
+
+  &--pink {
+    background-color: #ec4899; // Pink/Magenta
+    color: #ffffff;
+    border: none;
+  }
+
+  &--gray {
+    background-color: #1f2937; // Dark gray/Black
+    color: #ffffff;
+    border: none;
+  }
+
+  &--outline {
+    background-color: #f3f4f6; // Light gray
+    color: #111827; // Dark gray/black
+    border: var(--uds-border-width-1) solid #d1d5db; // Slightly darker gray
+  }
+}

package/src/ui/Badge/Badge.spec.ts

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

package/src/ui/Badge/Badge.stories.jsx

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

package/src/ui/Badge/Badge.stories.tsx

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

package/src/ui/Badge/Badge.test.tsx

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

package/src/ui/Badge/Badge.tsx

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

package/src/ui/Badge/Badge.types.ts

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

package/src/ui/Badge/index.js

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