sdaia-ui 1.0.1 → 1.0.2

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,127 +0,0 @@
-'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

@@ -1,51 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

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

package/src/components/ButtonMenu/ButtonMenu.tsx

@@ -1,73 +0,0 @@
-'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

@@ -1,43 +0,0 @@
-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

@@ -1,18 +0,0 @@
-/**
- * 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

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