sdaia-ui 1.0.1

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { ButtonGroupProps, ButtonGroupSize } from './ButtonGroup.types';
+import {
+  GROUP_BUTTON_BASE,
+  GROUP_BUTTON_SELECTED,
+  GROUP_BUTTON_DISABLED,
+  GROUP_TEXT_SIZE_CLASSES,
+  GROUP_ICON_BTN_SIZE_CLASSES,
+  GROUP_DIVIDER_CLASS,
+  ICON_SIZE_CLASSES,
+  FOCUS_RING,
+} from './ButtonGroup.variants';
+
+// ── Helper: resolve corner-radius classes by position ─────────────────────
+function getRadiusClasses(isFirst: boolean, isLast: boolean): string {
+  if (isFirst && isLast) return 'rounded-[8px]';          // single item
+  if (isFirst) return 'rounded-s-[8px]';                  // first only
+  if (isLast) return 'rounded-e-[8px]';                   // last only
+  return '';                                               // middle
+}
+
+// ── Helper: resolve button size / icon size per size + iconOnly flag ───────
+function getButtonSizeClasses(size: ButtonGroupSize, iconOnly: boolean): string {
+  return iconOnly ? GROUP_ICON_BTN_SIZE_CLASSES[size] : GROUP_TEXT_SIZE_CLASSES[size];
+}
+
+// ── Component ──────────────────────────────────────────────────────────────
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup(
+    {
+      items,
+      size = 'md',
+      dir: dirProp,
+      rtl,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    // Normalise dir: explicit `dir` prop wins, then legacy `rtl` boolean
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+    const iconSizeClass = ICON_SIZE_CLASSES[size];
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="button-group"
+        className={cn('inline-flex items-stretch', className)}
+        role="group"
+        {...rest}
+      >
+        {items.map((item, index) => {
+          const isFirst = index === 0;
+          const isLast = index === items.length - 1;
+          const isIconOnly = item.iconOnly ?? false;
+          const isSelected = item.selected ?? false;
+          const isDisabled = item.disabled ?? false;
+
+          const radiusClass = getRadiusClasses(isFirst, isLast);
+          const sizeClass = getButtonSizeClasses(size, isIconOnly);
+
+          // State-based style: disabled > selected > default
+          const stateClass = isDisabled
+            ? GROUP_BUTTON_DISABLED
+            : isSelected
+            ? GROUP_BUTTON_SELECTED
+            : GROUP_BUTTON_BASE;
+
+          return (
+            <div
+              key={index}
+              className="inline-flex items-stretch"
+              data-slot="button-group-item-wrapper"
+            >
+              {/* Divider between buttons */}
+              {!isFirst && (
+                <div
+                  aria-hidden="true"
+                  className={cn('w-px shrink-0 self-stretch', GROUP_DIVIDER_CLASS)}
+                />
+              )}
+
+              {/* The button itself */}
+              <button
+                type="button"
+                disabled={isDisabled}
+                aria-pressed={isSelected ? true : undefined}
+                aria-label={isIconOnly ? item.ariaLabel : undefined}
+                onClick={isDisabled ? undefined : () => item.onClick?.(index)}
+                data-slot="button-group-button"
+                className={cn(
+                  'inline-flex items-center justify-center font-[500] motion-feedback whitespace-nowrap',
+                  sizeClass,
+                  radiusClass,
+                  stateClass,
+                  !isDisabled && FOCUS_RING,
+                )}
+              >
+                {/* Leading icon (icon-only or icon+text) */}
+                {item.icon && (
+                  <span
+                    data-slot="button-group-icon"
+                    className={cn(
+                      'inline-flex items-center justify-center flex-shrink-0',
+                      iconSizeClass,
+                    )}
+                  >
+                    {item.icon}
+                  </span>
+                )}
+
+                {/* Text label (text-only or icon+text) */}
+                {!isIconOnly && item.label && (
+                  <span data-slot="button-group-label">{item.label}</span>
+                )}
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);

package/src/components/ButtonGroup/ButtonGroup.types.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type ButtonGroupSize = 'sm' | 'md' | 'lg';
+
+// Omit `dir` from base so we can re-declare it with a narrower type
+type DivWithoutDir = Omit<HTMLAttributes<HTMLDivElement>, 'dir'>;
+
+/**
+ * A single item within the ButtonGroup.
+ *
+ * Types (structural variations):
+ *  - text-only: provide `label`, no `icon`
+ *  - icon + text: provide both `label` and `icon`
+ *  - icon-only: provide `icon`, set `iconOnly: true`, supply `aria-label` via the item's `ariaLabel`
+ *
+ * States per item:
+ *  - default, hover, pressed (all handled by CSS)
+ *  - selected: `selected: true`
+ *  - disabled: `disabled: true`
+ */
+export interface ButtonGroupItem {
+  /** Text label rendered inside the button. Omit when `iconOnly` is true. */
+  label?: string;
+  /** Leading icon node (from IconFactory). */
+  icon?: ReactNode;
+  /** Renders as a square icon-only button — must also supply `ariaLabel`. */
+  iconOnly?: boolean;
+  /** Accessible label for icon-only buttons (used as `aria-label`). */
+  ariaLabel?: string;
+  /** Marks this item as the active/selected button. */
+  selected?: boolean;
+  /** Disables this individual button. */
+  disabled?: boolean;
+  /** Click handler for this item — receives the item index. */
+  onClick?: (index: number) => void;
+}
+
+export interface ButtonGroupProps extends DivWithoutDir {
+  /**
+   * The list of button items. Each item can be text-only, icon+text, or icon-only.
+   * - 1 item: single button with both rounded corners
+   * - 2–5 items: fused segmented control, first gets rounded-start, last gets rounded-end
+   */
+  items: [ButtonGroupItem, ...ButtonGroupItem[]];
+  /** Size of all buttons in the group. */
+  size?: ButtonGroupSize;
+  /** Direction — pass 'rtl' for Arabic/RTL layouts. */
+  dir?: 'ltr' | 'rtl';
+  /** @deprecated Use `dir` instead. */
+  rtl?: boolean;
+}

package/src/components/ButtonGroup/ButtonGroup.variants.ts

@@ -0,0 +1,65 @@
+import type { ButtonGroupSize } from './ButtonGroup.types';
+
+// ── Focus ring (matches Button's focus ring) ───────────────────────────────
+export const FOCUS_RING =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,1)] focus-visible:ring-offset-2 dark:focus-visible:ring-[rgba(210,214,219,1)] dark:focus-visible:ring-offset-[rgba(17,25,39,1)]';
+
+// ── Base background for every button in the group ─────────────────────────
+// Figma: button/button-background-black-default → #0d121c = neutral bg
+// Dark mode: the group inverts — light bg with dark text
+export const GROUP_BUTTON_BASE = [
+  'bg-[rgba(13,18,28,1)] text-white cursor-pointer',
+  'hover:bg-[rgba(31,42,55,1)]',
+  'active:bg-[rgba(56,66,80,1)]',
+  'dark:bg-[rgba(243,244,246,1)] dark:text-[rgba(13,18,28,1)]',
+  'dark:hover:bg-[rgba(229,231,235,1)]',
+  'dark:active:bg-[rgba(210,214,219,1)]',
+].join(' ');
+
+// ── Selected state override ────────────────────────────────────────────────
+// Figma: selected button is visually depressed / lighter within the dark group
+export const GROUP_BUTTON_SELECTED = [
+  'bg-[rgba(56,66,80,1)] text-white',
+  'hover:bg-[rgba(56,66,80,1)]',
+  'active:bg-[rgba(56,66,80,1)]',
+  'dark:bg-[rgba(56,66,80,1)] dark:text-[rgba(243,244,246,1)]',
+  'dark:hover:bg-[rgba(56,66,80,1)]',
+  'dark:active:bg-[rgba(56,66,80,1)]',
+].join(' ');
+
+// ── Disabled state ─────────────────────────────────────────────────────────
+export const GROUP_BUTTON_DISABLED =
+  'bg-[rgba(13,18,28,1)] text-[rgba(75,85,99,1)] pointer-events-none dark:bg-[rgba(243,244,246,1)] dark:text-[rgba(157,164,174,1)]';
+
+// ── 1px divider between buttons ────────────────────────────────────────────
+// Figma: colors/neutral/700 → #384250 on dark bg; neutral/300 in dark mode
+export const GROUP_DIVIDER_CLASS =
+  'bg-[rgba(56,66,80,1)] dark:bg-[rgba(210,214,219,1)]';
+
+// ── Text button size classes (text-only / icon+text) ──────────────────────
+// lg: 40px height — py-spacing-md (8px) + text-md (24px lh) + px-spacing-xl (16px)
+// md: 32px height — py-spacing-sm (6px) + text-sm (20px lh) + px-spacing-lg (12px)
+// sm: 24px height — py-spacing-xs (4px) + text-xs (18px lh) + px-spacing-md (8px)
+export const GROUP_TEXT_SIZE_CLASSES: Record<ButtonGroupSize, string> = {
+  lg: 'px-spacing-xl py-spacing-md text-text-md gap-spacing-xs',
+  md: 'px-spacing-lg py-spacing-sm text-text-sm gap-spacing-xs',
+  sm: 'px-spacing-md py-spacing-xs text-text-xs gap-spacing-xs',
+};
+
+// ── Icon-only button size classes ─────────────────────────────────────────
+// lg: p-spacing-md (8px) → 24+8+8 = 40px
+// md: p-spacing-sm (6px) → 20+6+6 = 32px
+// sm: p-spacing-xs (4px) → 16+4+4 = 24px
+export const GROUP_ICON_BTN_SIZE_CLASSES: Record<ButtonGroupSize, string> = {
+  lg: 'p-spacing-md',
+  md: 'p-spacing-sm',
+  sm: 'p-spacing-xs',
+};
+
+// ── Icon wrapper size ──────────────────────────────────────────────────────
+// Figma: lg→24px, md→20px, sm→16px
+export const ICON_SIZE_CLASSES: Record<ButtonGroupSize, string> = {
+  lg: 'size-icon-lg',
+  md: 'size-icon-md',
+  sm: 'size-icon-sm',
+};

package/src/components/ButtonGroup/index.ts

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupItem, ButtonGroupSize } from './ButtonGroup.types';

package/src/components/ButtonMenu/ButtonMenu.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { ChevronDownIcon } from '../../icons';
+import { Button } from '../Button';
+import type { ButtonMenuProps } from './ButtonMenu.types';
+
+/**
+ * ButtonMenu — a button that opens a dropdown/menu.
+ *
+ * Identical to Button in every visual respect (variants, sizes, states,
+ * dark mode, RTL) with one structural addition: a fixed trailing chevron-down
+ * icon that signals a menu will open.
+ *
+ * Figma: Button_Menu — node 4144:11071
+ *
+ * ## States (all 6 delegated to Button):
+ *   default · hovered · pressed · focused · selected · disabled
+ *
+ * ## Variants (6, matching Figma "Style" property):
+ *   neutral · primary · secondary-solid · secondary-outline · subtle · transparent
+ *
+ * ## Sizes (3, matching Figma "Size" property):
+ *   sm (Small) · md (Medium) · lg (Large)
+ *
+ * ## Types:
+ *   default (with label) · iconOnly (leading icon + chevron, no label)
+ *
+ * ## RTL
+ *   Works automatically via dir="rtl" on the HTML element.
+ *   Flex order reverses: chevron moves to the logical start (left in RTL),
+ *   leading icon moves to the logical end (right in RTL).
+ *
+ * ## Dark mode
+ *   Inherited from Button — toggle html.dark, zero extra config.
+ */
+export const ButtonMenu = forwardRef<HTMLButtonElement, ButtonMenuProps>(
+  function ButtonMenu(
+    {
+      variant = 'neutral',
+      size = 'md',
+      iconOnly = false,
+      disabled = false,
+      selected = false,
+      fullWidth = false,
+      leadingIcon,
+      as,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        disabled={disabled}
+        selected={selected}
+        fullWidth={fullWidth}
+        leadingIcon={leadingIcon}
+        trailingIcon={<ChevronDownIcon />}
+        as={as}
+        className={className}
+        {...rest}
+      >
+        {/* iconOnly hides text but keeps normal (non-square) padding */}
+        {!iconOnly ? children : null}
+      </Button>
+    );
+  },
+);

package/src/components/ButtonMenu/ButtonMenu.types.ts

@@ -0,0 +1,43 @@
+import type { ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+
+/**
+ * Six visual styles — matches Figma "Button_Menu" Style property exactly.
+ * Maps 1-to-1 to the existing Button variants.
+ * Destructive is excluded — not in the Figma ButtonMenu spec.
+ */
+export type ButtonMenuVariant =
+  | 'neutral'
+  | 'primary'
+  | 'secondary-solid'
+  | 'secondary-outline'
+  | 'subtle'
+  | 'transparent';
+
+/** Three sizes — maps Figma Large→lg, Medium→md, Small→sm */
+export type ButtonMenuSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonMenuProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Layout direction for RTL support. */
+  dir?: 'ltr' | 'rtl';
+  /** Visual style variant. Defaults to 'neutral'. */
+  variant?: ButtonMenuVariant;
+  /** Size tier. Defaults to 'md'. */
+  size?: ButtonMenuSize;
+  /** Icon displayed before the label. Direction-aware: appears on the logical start side. */
+  leadingIcon?: ReactNode;
+  /**
+   * When true: renders only the leading icon + trailing chevron, no label text.
+   * Uses the same padding as a regular button (not the square icon-only padding).
+   */
+  iconOnly?: boolean;
+  /** Disables the button and prevents interaction. */
+  disabled?: boolean;
+  /** Marks the button as selected/toggled-on. */
+  selected?: boolean;
+  /** Makes the button take the full width of its container. */
+  fullWidth?: boolean;
+  /** Override the rendered HTML element (e.g. 'a' for link-styled trigger). */
+  as?: ElementType;
+  /** Button label. Hidden when iconOnly is true. */
+  children?: ReactNode;
+}

package/src/components/ButtonMenu/ButtonMenu.variants.ts

@@ -0,0 +1,18 @@
+/**
+ * ButtonMenu variants.
+ *
+ * All background / text / border / focus styling is delegated to the existing
+ * Button component. This file documents the mapping between Figma "Style"
+ * property values and the Button variant keys used internally.
+ *
+ * Figma Style  →  Button variant
+ * ─────────────────────────────
+ * Neutral          →  neutral
+ * Primary          →  primary
+ * Secondary-Solid  →  secondary-solid
+ * Secondary-Outline→  secondary-outline
+ * Subtle           →  subtle
+ * Transparent      →  transparent
+ *
+ * Chevron-down icon: ChevronDownIcon from sdaia-ui/icons (Figma node 4074:5854)
+ */

package/src/components/ButtonMenu/index.ts

@@ -0,0 +1,2 @@
+export { ButtonMenu } from './ButtonMenu';
+export type { ButtonMenuProps, ButtonMenuVariant, ButtonMenuSize } from './ButtonMenu.types';