sdaia-ui 1.0.1

package/dist/styles.css

@@ -0,0 +1,242 @@
+/*
+ * @sdaia/ui — Portable theme layer
+ * -----------------------------------------------------------
+ * Consumers import this file ONCE from their root stylesheet:
+ *
+ *   @import "@sdaia/ui/styles.css";
+ *
+ * It provides:
+ *   1. Responsive `--ds-*` design tokens (spacing, icons, typography)
+ *      at mobile / tablet (≥768px) / desktop (≥1280px) breakpoints.
+ *   2. A Tailwind v4 `@theme` mapping that exposes those tokens as
+ *      utility classes: `ps-spacing-3xl`, `gap-spacing-lg`,
+ *      `w-icon-md`, etc.
+ *   3. Typography utilities: `text-text-md`, `text-display-sm`, ...
+ *   4. A `dark` variant hook bound to `.dark` on any ancestor.
+ *
+ * NOTE for Tailwind v4 consumers: you must also add
+ *
+ *   @source "../node_modules/@sdaia/ui/dist";
+ *
+ * to your root CSS so Tailwind scans the shipped component code for
+ * class strings. Otherwise utilities referenced by the components
+ * will be tree-shaken out of your build.
+ * ----------------------------------------------------------- */
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ── Mobile-first token defaults ─────────────────────────────── */
+:root {
+  --ds-spacing-none: 0px;
+  --ds-spacing-xxs: 2px;
+  --ds-spacing-xs: 4px;
+  --ds-spacing-sm: 6px;
+  --ds-spacing-md: 8px;
+  --ds-spacing-lg: 8px;
+  --ds-spacing-xl: 12px;
+  --ds-spacing-2xl: 12px;
+  --ds-spacing-3xl: 16px;
+  --ds-spacing-4xl: 20px;
+  --ds-spacing-5xl: 24px;
+  --ds-spacing-6xl: 32px;
+  --ds-spacing-7xl: 40px;
+  --ds-spacing-8xl: 48px;
+  --ds-spacing-9xl: 64px;
+  --ds-spacing-10xl: 80px;
+  --ds-spacing-11xl: 96px;
+
+  --ds-icon-xs: 12px;
+  --ds-icon-sm: 12px;
+  --ds-icon-ms: 16px;
+  --ds-icon-md: 16px;
+  --ds-icon-lg: 20px;
+  --ds-icon-xl: 20px;
+  --ds-icon-xxl: 24px;
+
+  --ds-typo-display-2xl: 48px;
+  --ds-typo-display-xl: 40px;
+  --ds-typo-display-lg: 32px;
+  --ds-typo-display-md: 24px;
+  --ds-typo-display-sm: 20px;
+  --ds-typo-display-xs: 18px;
+
+  --ds-typo-text-xl: 16px;
+  --ds-typo-text-lg: 14px;
+  --ds-typo-text-md: 12px;
+  --ds-typo-text-sm: 10px;
+  --ds-typo-text-xs: 8px;
+  --ds-typo-text-2xs: 8px;
+}
+
+/* ── Tablet (≥768px) ─────────────────────────────────────────── */
+@media (min-width: 768px) {
+  :root {
+    --ds-spacing-lg: 12px;
+    --ds-spacing-2xl: 16px;
+    --ds-spacing-3xl: 20px;
+    --ds-spacing-4xl: 24px;
+    --ds-spacing-5xl: 32px;
+    --ds-spacing-6xl: 40px;
+    --ds-spacing-7xl: 48px;
+    --ds-spacing-8xl: 64px;
+    --ds-spacing-9xl: 80px;
+    --ds-spacing-10xl: 96px;
+    --ds-spacing-11xl: 128px;
+
+    --ds-icon-ms: 18px;
+    --ds-icon-xl: 24px;
+    --ds-icon-xxl: 28px;
+
+    --ds-typo-display-2xl: 56px;
+    --ds-typo-display-xl: 48px;
+    --ds-typo-display-lg: 36px;
+    --ds-typo-display-md: 30px;
+    --ds-typo-display-sm: 24px;
+    --ds-typo-display-xs: 20px;
+
+    --ds-typo-text-xl: 18px;
+    --ds-typo-text-lg: 16px;
+    --ds-typo-text-md: 14px;
+    --ds-typo-text-sm: 12px;
+    --ds-typo-text-xs: 10px;
+    --ds-typo-text-2xs: 8px;
+  }
+}
+
+/* ── Desktop (≥1280px) ───────────────────────────────────────── */
+@media (min-width: 1280px) {
+  :root {
+    --ds-spacing-sm: 8px;
+    --ds-spacing-xl: 16px;
+    --ds-spacing-2xl: 20px;
+    --ds-spacing-3xl: 24px;
+    --ds-spacing-4xl: 32px;
+    --ds-spacing-5xl: 40px;
+    --ds-spacing-6xl: 48px;
+    --ds-spacing-7xl: 64px;
+    --ds-spacing-8xl: 80px;
+    --ds-spacing-9xl: 96px;
+    --ds-spacing-10xl: 128px;
+    --ds-spacing-11xl: 160px;
+
+    --ds-icon-sm: 16px;
+    --ds-icon-md: 20px;
+    --ds-icon-lg: 24px;
+    --ds-icon-xl: 28px;
+    --ds-icon-xxl: 32px;
+
+    --ds-typo-display-2xl: 72px;
+    --ds-typo-display-xl: 60px;
+    --ds-typo-display-lg: 48px;
+    --ds-typo-display-md: 36px;
+    --ds-typo-display-sm: 30px;
+    --ds-typo-display-xs: 24px;
+
+    --ds-typo-text-xl: 20px;
+    --ds-typo-text-lg: 18px;
+    --ds-typo-text-md: 16px;
+    --ds-typo-text-sm: 14px;
+    --ds-typo-text-xs: 12px;
+    --ds-typo-text-2xs: 10px;
+  }
+}
+
+/* ── Tailwind v4 theme mapping ───────────────────────────────── */
+@theme {
+  --spacing-spacing-none: var(--ds-spacing-none);
+  --spacing-spacing-xxs: var(--ds-spacing-xxs);
+  --spacing-spacing-xs: var(--ds-spacing-xs);
+  --spacing-spacing-sm: var(--ds-spacing-sm);
+  --spacing-spacing-md: var(--ds-spacing-md);
+  --spacing-spacing-lg: var(--ds-spacing-lg);
+  --spacing-spacing-xl: var(--ds-spacing-xl);
+  --spacing-spacing-2xl: var(--ds-spacing-2xl);
+  --spacing-spacing-3xl: var(--ds-spacing-3xl);
+  --spacing-spacing-4xl: var(--ds-spacing-4xl);
+  --spacing-spacing-5xl: var(--ds-spacing-5xl);
+  --spacing-spacing-6xl: var(--ds-spacing-6xl);
+  --spacing-spacing-7xl: var(--ds-spacing-7xl);
+  --spacing-spacing-8xl: var(--ds-spacing-8xl);
+  --spacing-spacing-9xl: var(--ds-spacing-9xl);
+  --spacing-spacing-10xl: var(--ds-spacing-10xl);
+  --spacing-spacing-11xl: var(--ds-spacing-11xl);
+
+  --spacing-icon-xs: var(--ds-icon-xs);
+  --spacing-icon-sm: var(--ds-icon-sm);
+  --spacing-icon-ms: var(--ds-icon-ms);
+  --spacing-icon-md: var(--ds-icon-md);
+  --spacing-icon-lg: var(--ds-icon-lg);
+  --spacing-icon-xl: var(--ds-icon-xl);
+  --spacing-icon-xxl: var(--ds-icon-xxl);
+}
+
+/* ── Responsive typography utilities ─────────────────────────── */
+@utility text-display-2xl { font-size: var(--ds-typo-display-2xl); }
+@utility text-display-xl  { font-size: var(--ds-typo-display-xl); }
+@utility text-display-lg  { font-size: var(--ds-typo-display-lg); }
+@utility text-display-md  { font-size: var(--ds-typo-display-md); }
+@utility text-display-sm  { font-size: var(--ds-typo-display-sm); }
+@utility text-display-xs  { font-size: var(--ds-typo-display-xs); }
+
+@utility text-text-xl  { font-size: var(--ds-typo-text-xl); }
+@utility text-text-lg  { font-size: var(--ds-typo-text-lg); }
+@utility text-text-md  { font-size: var(--ds-typo-text-md); }
+@utility text-text-sm  { font-size: var(--ds-typo-text-sm); }
+@utility text-text-xs  { font-size: var(--ds-typo-text-xs); }
+@utility text-text-2xs { font-size: var(--ds-typo-text-2xs); }
+
+/* ── Motion tokens ───────────────────────────────────────── */
+/*
+ * Consumed by components via data-motion="<name>" attributes.
+ * All animations respect `prefers-reduced-motion` — they collapse
+ * to instant visibility changes so content is always reachable.
+ *
+ * External consumers: the tokens and keyframes are shipped in this
+ * file so every animation works identically when the package is
+ * installed in another project.
+ */
+:root {
+  --motion-duration-fast:   150ms;
+  --motion-duration-normal: 200ms;
+  --motion-duration-slow:   300ms;
+  --motion-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-in:         cubic-bezier(0.7,  0, 0.84, 0);
+  --motion-ease-inout:      cubic-bezier(0.45, 0, 0.55,  1);
+}
+
+/* ── Keyframes ───────────────────────────────────────────── */
+
+/* Opacity */
+@keyframes sdaia-fade-in  { from { opacity: 0 } to { opacity: 1 } }
+@keyframes sdaia-fade-out { from { opacity: 1 } to { opacity: 0 } }
+
+/* Slide from / to inline-end (right in LTR, left in RTL) */
+@keyframes sdaia-slide-in-end  { from { transform: translateX(100%) } to { transform: translateX(0) } }
+@keyframes sdaia-slide-out-end { from { transform: translateX(0)    } to { transform: translateX(100%) } }
+
+/* Slide from / to inline-start (left in LTR, right in RTL) */
+@keyframes sdaia-slide-in-start  { from { transform: translateX(-100%) } to { transform: translateX(0) } }
+@keyframes sdaia-slide-out-start { from { transform: translateX(0)     } to { transform: translateX(-100%) } }
+
+/* Scale + fade — modals, popovers, dropdowns */
+@keyframes sdaia-scale-in  { from { opacity: 0; transform: scale(0.96) } to { opacity: 1; transform: scale(1) } }
+@keyframes sdaia-scale-out { from { opacity: 1; transform: scale(1)    } to { opacity: 0; transform: scale(0.96) } }
+
+/* ── data-motion attribute selectors ─────────────────────── */
+
+[data-motion="fade-in"]         { animation: sdaia-fade-in         var(--motion-duration-normal) var(--motion-ease-out)  both; }
+[data-motion="fade-out"]        { animation: sdaia-fade-out        var(--motion-duration-normal) var(--motion-ease-in)   both; }
+[data-motion="slide-in-end"]    { animation: sdaia-slide-in-end    var(--motion-duration-slow)   var(--motion-ease-out)  both; }
+[data-motion="slide-out-end"]   { animation: sdaia-slide-out-end   var(--motion-duration-slow)   var(--motion-ease-in)   both; }
+[data-motion="slide-in-start"]  { animation: sdaia-slide-in-start  var(--motion-duration-slow)   var(--motion-ease-out)  both; }
+[data-motion="slide-out-start"] { animation: sdaia-slide-out-start var(--motion-duration-slow)   var(--motion-ease-in)   both; }
+[data-motion="scale-in"]        { animation: sdaia-scale-in        var(--motion-duration-normal) var(--motion-ease-out)  both; }
+[data-motion="scale-out"]       { animation: sdaia-scale-out       var(--motion-duration-normal) var(--motion-ease-in)   both; }
+
+/* ── Reduced-motion override ─────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  [data-motion] {
+    animation:  none !important;
+    transition: none !important;
+  }
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "sdaia-ui",
+  "version": "1.0.1",
+  "description": "SDAIA Design System — React component library",
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "assets",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.mjs",
+      "require": "./dist/icons.cjs"
+    },
+    "./dga-icons": {
+      "types": "./dist/dga-icons.d.ts",
+      "import": "./dist/dga-icons.mjs",
+      "require": "./dist/dga-icons.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./assets/*": "./assets/*",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup && cp src/styles.css dist/styles.css",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "icons:build": "node scripts/build-icon-factory.mjs",
+    "dga-icons:build": "node scripts/build-dga-icon-names.mjs"
+  },
+  "dependencies": {
+    "@platformscode/icons": "^0.0.11",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { forwardRef, useId, useState } from 'react';
+import type { AccordionProps, AccordionSize, AccordionState } from './Accordion.types';
+import { ACCORDION_ICON, ACCORDION_STYLES } from './Accordion.variants';
+import { cn } from '../../lib/cn';
+
+/* Per Figma, the title is always Text md/Semibold (16/24) and the
+ * body is Text md/Regular (16/24) regardless of size. Only the
+ * trigger's vertical padding and the icon size vary by size. */
+const SIZE_CLASSES: Record<
+  AccordionSize,
+  { trigger: string; content: string; icon: string }
+> = {
+  sm: {
+    trigger: 'py-spacing-md text-text-md font-[600]',
+    content: 'text-text-md',
+    icon: 'size-icon-sm',
+  },
+  md: {
+    trigger: 'py-spacing-lg text-text-md font-[600]',
+    content: 'text-text-md',
+    icon: 'size-icon-sm',
+  },
+  lg: {
+    trigger: 'py-spacing-xl text-text-md font-[600]',
+    content: 'text-text-md',
+    icon: 'size-icon-sm',
+  },
+};
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
+  {
+    direction = 'ltr',
+    size = 'md',
+    variant = 'light',
+    state,
+    iconAlignment = 'trailing',
+    label = 'Accordion title',
+    expanded,
+    defaultExpanded = false,
+    disabled = false,
+    onExpandedChange,
+    preserveContentSpaceWhenCollapsed = false,
+    className = '',
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const [focusedViaKeyboard, setFocusedViaKeyboard] = useState(false);
+  const isControlled = typeof expanded === 'boolean';
+  const isExpanded = isControlled ? Boolean(expanded) : uncontrolledExpanded;
+  const isDisabled = disabled || state === 'disabled';
+  const contentId = useId();
+  const triggerId = useId();
+  const sizeClasses = SIZE_CLASSES[size];
+
+  const resolvedState: AccordionState =
+    state ??
+    (isDisabled
+      ? 'disabled'
+      : pressed
+        ? 'pressed'
+        : focusedViaKeyboard
+          ? 'focused'
+          : hovered
+            ? 'hovered'
+            : 'default');
+
+  const styleSet =
+    ACCORDION_STYLES[variant][resolvedState][iconAlignment][isExpanded ? 'expanded' : 'collapsed'];
+  const Icon = ACCORDION_ICON;
+  const hasDivider = Boolean(styleSet.divider.trim());
+  const showTopDivider =
+    isExpanded && hasDivider && (variant === 'light' || variant === 'light-compact');
+  const contentClass = cn(styleSet.content, sizeClasses.content);
+  const isCollapsedWithReservedSpace = preserveContentSpaceWhenCollapsed && !isExpanded;
+  const triggerSizeClass = cn(
+    sizeClasses.trigger,
+    variant === 'block' && 'py-spacing-lg',
+  );
+
+  const handleToggle = () => {
+    if (isDisabled) return;
+    const nextExpanded = !isExpanded;
+    if (!isControlled) setUncontrolledExpanded(nextExpanded);
+    onExpandedChange?.(nextExpanded);
+  };
+
+  return (
+    <div
+      ref={ref}
+      dir={direction}
+      data-slot="accordion"
+      className={cn('w-full', styleSet.container, className)}
+      {...rest}
+    >
+      {/* Divider above trigger: shown when collapsed (light/light-compact) or expanded top divider */}
+      {showTopDivider ? (
+        <div aria-hidden="true" className={styleSet.divider} />
+      ) : !isExpanded && hasDivider ? (
+        <div aria-hidden="true" className={styleSet.divider} />
+      ) : null}
+      <button
+        data-slot="trigger"
+        id={triggerId}
+        type="button"
+        disabled={isDisabled}
+        aria-expanded={isExpanded}
+        aria-controls={contentId}
+        onClick={handleToggle}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => {
+          setHovered(false);
+          setPressed(false);
+        }}
+        onMouseDown={() => {
+          setPressed(true);
+          setFocusedViaKeyboard(false);
+        }}
+        onMouseUp={() => setPressed(false)}
+        onFocus={(e) => {
+          /* Only show focus styling for keyboard navigation (Tab), not mouse clicks */
+          if (e.target.matches(':focus-visible')) {
+            setFocusedViaKeyboard(true);
+          }
+        }}
+        onBlur={() => {
+          setFocusedViaKeyboard(false);
+          setPressed(false);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') setPressed(true);
+        }}
+        onKeyUp={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') setPressed(false);
+        }}
+        className={cn(
+          'motion-feedback outline-none',
+          styleSet.trigger,
+          triggerSizeClass,
+          isDisabled && 'opacity-60',
+        )}
+      >
+        <span data-slot="label" className={styleSet.title}>{label}</span>
+        <span className={cn(styleSet.iconContainer, sizeClasses.icon)}>
+          <Icon
+            className={cn(
+              'h-full w-full motion-expand-rotate',
+              styleSet.icon,
+              isExpanded && 'rotate-180',
+            )}
+            aria-hidden="true"
+          />
+        </span>
+      </button>
+
+      {preserveContentSpaceWhenCollapsed ? (
+        /* Legacy: always in DOM, visibility hidden when collapsed — preserves layout height */
+        <div
+          data-slot="content"
+          id={contentId}
+          role={isExpanded ? 'region' : undefined}
+          aria-hidden={isCollapsedWithReservedSpace || undefined}
+          aria-labelledby={isExpanded ? triggerId : undefined}
+          className={cn(contentClass, isCollapsedWithReservedSpace && 'invisible')}
+        >
+          {children}
+        </div>
+      ) : (
+        /*
+         * CSS grid-template-rows animation: collapses to 0 height without JS.
+         * Outer div is the grid container (height animates 0fr ↔ 1fr).
+         * Inner div needs overflow:hidden + min-h-0 so 0fr actually collapses.
+         * prefers-reduced-motion: the [data-motion] override in styles.css does
+         * not apply here (no data-motion attr), but CSS respects the media query
+         * automatically via the transition property below.
+         */
+        <div
+          aria-hidden={!isExpanded}
+          className={cn(
+            'grid',
+            'transition-[grid-template-rows] duration-[var(--motion-expand-duration)] ease-[var(--motion-expand-easing)]',
+            'motion-reduce:transition-none',
+            isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+          )}
+        >
+          <div className="overflow-hidden min-h-0">
+            <div
+              data-slot="content"
+              id={contentId}
+              role={isExpanded ? 'region' : undefined}
+              aria-labelledby={isExpanded ? triggerId : undefined}
+              className={contentClass}
+            >
+              {children}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/Accordion/Accordion.types.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type AccordionDirection = 'ltr' | 'rtl';
+
+export type AccordionSize = 'sm' | 'md' | 'lg';
+
+export type AccordionStyle = 'light' | 'light-compact' | 'block';
+
+export type AccordionState = 'default' | 'hovered' | 'pressed' | 'focused' | 'disabled';
+
+export type AccordionIconAlign = 'trailing' | 'leading';
+
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+  /** Layout alignment */
+  direction?: AccordionDirection;
+  /** Accordion size */
+  size?: AccordionSize;
+  /** Visual style */
+  variant?: AccordionStyle;
+  /** Force a specific visual state (useful for docs/previews) */
+  state?: AccordionState;
+  /** Icon position in the trigger row */
+  iconAlignment?: AccordionIconAlign;
+  /** Trigger label text/content */
+  label?: ReactNode;
+  /** Controlled expanded state */
+  expanded?: boolean;
+  /** Uncontrolled initial expanded state */
+  defaultExpanded?: boolean;
+  /** Non-interactive state */
+  disabled?: boolean;
+  /** Fires when expanded state changes */
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Keep content height reserved while collapsed (useful for demos/previews) */
+  preserveContentSpaceWhenCollapsed?: boolean;
+}