sdaia-ui 1.0.1

package/src/components/CircularItem/CircularItem.variants.ts

@@ -0,0 +1,128 @@
+/**
+ * CircularItem.variants.ts
+ *
+ * All sizing, colour, and typography constants for CircularItem.
+ * Values traced directly from Figma node 4986:55673.
+ *
+ * Color tokens (from get_variable_defs):
+ *   Background/background-primary        → #1b8354  (Primary arc, light + dark)
+ *   Background/background-neutral-100    → #f3f4f6  (Track ring, light)
+ *   Background/background-neutral-800    → #1f2a37  (Neutral arc, light)
+ *   Text/text-primary-paragraph          → #384250  (Centre label, light)
+ *
+ * Dark mode (inferred from design system conventions):
+ *   Track ring dark                      → rgba(55,65,81,1)
+ *   Neutral arc dark                     → rgba(229,231,235,1)
+ *   Centre label dark                    → rgba(229,231,235,1)
+ */
+
+import type { CircularItemIndicator, CircularItemSize, CircularItemStyle } from './CircularItem.types';
+
+// ─── Size configuration ────────────────────────────────────────────────────────
+// Each tier: container px, SVG cx/cy, ring radius, stroke width, typography token
+
+export interface SizeConfig {
+  /** Total width & height of the container in px */
+  px: number;
+  /** SVG circle centre (cx = cy = px / 2) */
+  c: number;
+  /** Ring radius – px/2 minus half-stroke minus 1px inset */
+  r: number;
+  /** Stroke width for both track and arc */
+  sw: number;
+  /**
+   * Inline style for the centre label.
+   * px values match the design-system TEXT_TOKENS exactly and are
+   * root-font-size-agnostic (unlike rem):
+   *   Small       → text2Xs  : 10px / lh 18px
+   *   Medium      → textSm   : 14px / lh 20px
+   *   Large       → textLg   : 18px / lh 28px
+   *   Extra Large → displayXs: 24px / lh 32px
+   */
+  fontStyle: { fontSize: string; lineHeight: string };
+}
+
+export const SIZE_CONFIG = {
+  Small: {
+    px: 48,
+    c: 24,
+    r: 19,
+    sw: 4,
+    fontStyle: { fontSize: '10px', lineHeight: '18px' }, // text2Xs
+  },
+  Medium: {
+    px: 64,
+    c: 32,
+    r: 26,
+    sw: 5,
+    fontStyle: { fontSize: '14px', lineHeight: '20px' }, // textSm
+  },
+  Large: {
+    px: 80,
+    c: 40,
+    r: 33,
+    sw: 6,
+    fontStyle: { fontSize: '18px', lineHeight: '28px' }, // textLg
+  },
+  'Extra Large': {
+    px: 120,
+    c: 60,
+    r: 50,
+    sw: 8,
+    fontStyle: { fontSize: '24px', lineHeight: '32px' }, // displayXs
+  },
+} as const satisfies Record<CircularItemSize, SizeConfig>;
+
+// ─── Progress fractions ────────────────────────────────────────────────────────
+
+export const PROGRESS: Record<CircularItemIndicator, number> = {
+  '1 of 4': 0.25,
+  '2 of 4': 0.50,
+  '3 of 4': 0.75,
+  '4 of 4': 1.00,
+};
+
+// ─── Auto-generated centre labels ──────────────────────────────────────────────
+
+export const LABEL_LTR: Record<CircularItemIndicator, string> = {
+  '1 of 4': '1 of 4',
+  '2 of 4': '2 of 4',
+  '3 of 4': '3 of 4',
+  '4 of 4': '4 of 4',
+};
+
+export const LABEL_RTL: Record<CircularItemIndicator, string> = {
+  '1 of 4': '1 من 4',
+  '2 of 4': '2 من 4',
+  '3 of 4': '3 من 4',
+  '4 of 4': '4 من 4',
+};
+
+// ─── SVG colour classes ────────────────────────────────────────────────────────
+// Tailwind class strings for SVG `stroke` attribute via className.
+
+/**
+ * Track ring (always full circle, neutral grey).
+ * Light: background-neutral-100 (#f3f4f6)
+ * Dark:  rgba(55,65,81,1)  — consistent with other dark borders in the system
+ */
+export const TRACK_STROKE =
+  'stroke-[rgba(243,244,246,1)] dark:stroke-[rgba(55,65,81,1)]';
+
+/**
+ * Arc stroke classes per style.
+ * Primary light: background-primary (#1b8354); same in dark mode.
+ * Neutral light: background-neutral-800 (#1f2a37); dark: rgba(229,231,235,1).
+ */
+export const ARC_STROKE: Record<CircularItemStyle, string> = {
+  Primary: 'stroke-[rgba(27,131,84,1)]',
+  Neutral: 'stroke-[rgba(31,42,55,1)] dark:stroke-[rgba(229,231,235,1)]',
+};
+
+// ─── Centre label colour ───────────────────────────────────────────────────────
+
+/**
+ * text-primary-paragraph (#384250 light, #e5e7eb dark).
+ */
+export const LABEL_COLOR =
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]';

package/src/components/CircularItem/index.ts

@@ -0,0 +1,7 @@
+export { CircularItem } from './CircularItem';
+export type {
+  CircularItemProps,
+  CircularItemIndicator,
+  CircularItemStyle,
+  CircularItemSize,
+} from './CircularItem.types';

package/src/components/CodeSnippet/CodeSnippet.tsx

@@ -0,0 +1,421 @@
+'use client';
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import { Divider } from '../Divider';
+import {
+  CodeSnippetChevronDownIcon,
+  CodeSnippetCopyIcon,
+  CodeSnippetStarIcon,
+} from '../../icons/IconFactory';
+import type {
+  CodeSnippetMultiLineFileProps,
+  CodeSnippetMultiLineTabsProps,
+  CodeSnippetProps,
+  CodeSnippetSingleLineProps,
+} from './CodeSnippet.types';
+import {
+  BODY_ROW,
+  CODE_COLUMN,
+  CODE_PRE,
+  CODE_TOOLBAR,
+  HEADER_FILE,
+  HEADER_FILE_TITLE,
+  HEADER_ICON_WRAP,
+  HEADER_TABS,
+  LINE_GUTTER,
+  LINE_NUMBER,
+  MULTILINE_BODY_MIN_HEIGHT,
+  ROOT,
+  SINGLE_COMMAND,
+  SINGLE_PREFIX,
+  SINGLE_ROW,
+} from './CodeSnippet.variants';
+
+const COLLAPSED_LINES = 15;
+
+function lineCountFromSource(source: string): number {
+  if (!source) return 1;
+  return source.split('\n').length;
+}
+
+function LineGutter({ count, startLine = 1 }: { count: number; startLine?: number }) {
+  const safe = Math.max(1, count);
+  return (
+    <div data-slot="code-snippet-line-gutter" className={LINE_GUTTER}>
+      {Array.from({ length: safe }, (_, i) => (
+        <p
+          key={startLine + i}
+          dir="ltr"
+          className={cn(LINE_NUMBER, i < safe - 1 ? 'mb-px' : undefined)}
+        >
+          {startLine + i}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+/** Tooltip that appears above the copy button after a successful copy. */
+function CopiedTooltip() {
+  return (
+    <div
+      className={cn(
+        'pointer-events-none absolute end-0 top-[-34px] z-10 whitespace-nowrap rounded-[6px] px-[8px] py-[4px]',
+        'text-[11px] font-[500] leading-[16px]',
+        'bg-[rgba(17,25,39,1)] text-white',
+        'dark:bg-[rgba(229,231,235,1)] dark:text-[rgba(17,25,39,1)]',
+      )}
+    >
+      Copied!
+    </div>
+  );
+}
+
+/** Reusable copy-with-tooltip wrapper. */
+function CopyButton({
+  onCopy,
+  copyText,
+  ariaLabel = 'Copy',
+  className,
+  size = 'md',
+}: {
+  onCopy?: () => void | Promise<void>;
+  copyText?: string;
+  ariaLabel?: string;
+  className?: string;
+  size?: 'md' | 'lg';
+}) {
+  const [isCopied, setIsCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);
+
+  const handleClick = async () => {
+    if (onCopy) {
+      await onCopy();
+    } else if (copyText && typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(copyText);
+    }
+    setIsCopied(true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setIsCopied(false), 2000);
+  };
+
+  return (
+    <div className={cn('relative shrink-0 self-start', className)}>
+      {isCopied && <CopiedTooltip />}
+      <Button
+        type="button"
+        variant="transparent"
+        size={size}
+        iconOnly
+        aria-label={ariaLabel}
+        leadingIcon={<CodeSnippetCopyIcon />}
+        onClick={() => void handleClick()}
+      />
+    </div>
+  );
+}
+
+const CodeSnippetMultiLineTabsImpl = forwardRef<HTMLDivElement, CodeSnippetMultiLineTabsProps>(
+  function CodeSnippetMultiLineTabsImpl(props, ref) {
+    const {
+      variant: _variant,
+      showHeader = true,
+      showLineNumbers = true,
+      copyText: copyTextProp,
+      onCopy,
+      showMoreButton = true,
+      showMoreLabel = 'Show More',
+      onShowMore,
+      showCopyButton = true,
+      className,
+      codeBodyMinHeight,
+      tabItems,
+      tabPanels,
+      tabValue,
+      defaultTabValue,
+      onTabValueChange,
+      ...divRest
+    } = props;
+
+    const isParentControlled = tabValue !== undefined;
+    const [internalTab, setInternalTab] = useState(
+      () => defaultTabValue ?? tabItems[0]?.value ?? '',
+    );
+    const selectedTab = isParentControlled ? tabValue! : internalTab;
+
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    // Reset expansion when tab changes
+    useEffect(() => { setIsExpanded(false); }, [selectedTab]);
+
+    const handleTabChange = useCallback(
+      (next: string) => {
+        if (!isParentControlled) setInternalTab(next);
+        onTabValueChange?.(next);
+      },
+      [isParentControlled, onTabValueChange],
+    );
+
+    const activeCode = tabPanels[selectedTab] ?? '';
+    const resolvedCopy = copyTextProp ?? activeCode;
+
+    const allLines = activeCode.split('\n');
+    const needsCollapse = showMoreButton && allLines.length > COLLAPSED_LINES;
+    const displayedCode = needsCollapse && !isExpanded
+      ? allLines.slice(0, COLLAPSED_LINES).join('\n')
+      : activeCode;
+    const displayedLineCount = needsCollapse && !isExpanded
+      ? COLLAPSED_LINES
+      : lineCountFromSource(activeCode);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="code-snippet"
+        data-variant="multi-line-with-tabs"
+        className={cn(ROOT, className)}
+        {...divRest}
+      >
+        {showHeader && (
+          <>
+            <div data-slot="code-snippet-header" className={HEADER_TABS}>
+              {/* Custom tab buttons — underline on active only, no full-width rail */}
+              <div className="flex items-stretch overflow-x-auto" role="tablist">
+                {tabItems.map((item) => {
+                  const isActive = item.value === selectedTab;
+                  return (
+                    <button
+                      key={item.value}
+                      role="tab"
+                      aria-selected={isActive}
+                      type="button"
+                      onClick={() => handleTabChange(item.value)}
+                      disabled={item.disabled}
+                      className={cn(
+                        'relative shrink-0 whitespace-nowrap px-spacing-lg py-spacing-md',
+                        'text-text-md motion-feedback',
+                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,1)] dark:focus-visible:ring-[rgba(84,192,138,1)]',
+                        isActive
+                          ? 'font-[600] text-[rgba(27,131,84,1)] dark:text-[rgba(84,192,138,1)]'
+                          : [
+                              'font-[400] text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
+                              'hover:text-[rgba(55,65,81,1)] dark:hover:text-[rgba(229,231,235,1)]',
+                              'disabled:pointer-events-none disabled:opacity-40',
+                            ],
+                      )}
+                    >
+                      {item.label ?? item.value}
+                      {isActive && (
+                        <span className="absolute inset-x-0 bottom-0 h-[2px] rounded-t-full bg-[rgba(27,131,84,1)] dark:bg-[rgba(84,192,138,1)]" />
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+            <Divider lineType="horizontal" color="neutral" thickness="hairline" length="full" className="ps-spacing-xl" />
+          </>
+        )}
+
+        <div
+          data-slot="code-snippet-body"
+          className={cn(BODY_ROW, !needsCollapse && MULTILINE_BODY_MIN_HEIGHT, codeBodyMinHeight)}
+        >
+          {showLineNumbers && <LineGutter count={displayedLineCount} />}
+          <div data-slot="code-snippet-content" className={CODE_COLUMN}>
+            <div className={CODE_TOOLBAR}>
+              <pre data-slot="code-snippet-code" className={CODE_PRE} dir="ltr">
+                <code>{displayedCode}</code>
+              </pre>
+              {showCopyButton && (
+                <CopyButton size="lg" copyText={resolvedCopy} onCopy={onCopy} />
+              )}
+            </div>
+
+            {needsCollapse && (
+              <Button
+                type="button"
+                variant="subtle"
+                size="sm"
+                trailingIcon={
+                  <CodeSnippetChevronDownIcon
+                    className={cn('transition-transform duration-200', isExpanded && 'rotate-180')}
+                  />
+                }
+                onClick={() => {
+                  setIsExpanded((prev) => !prev);
+                  onShowMore?.();
+                }}
+                className="mt-auto self-start"
+              >
+                {isExpanded ? 'Show Less' : showMoreLabel}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+const CodeSnippetMultiLineFileImpl = forwardRef<HTMLDivElement, CodeSnippetMultiLineFileProps>(
+  function CodeSnippetMultiLineFileImpl(props, ref) {
+    const {
+      variant: _variant,
+      showHeader = true,
+      showLineNumbers = true,
+      copyText: copyTextProp,
+      onCopy,
+      showMoreButton = true,
+      showMoreLabel = 'Show More',
+      onShowMore,
+      showCopyButton = true,
+      className,
+      codeBodyMinHeight,
+      code,
+      codeContent,
+      lineCount: lineCountProp,
+      fileTitle = '',
+      headerIcon,
+      ...divRest
+    } = props;
+
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const allLines = (code ?? '').split('\n');
+    const needsCollapse = showMoreButton && code !== undefined && allLines.length > COLLAPSED_LINES;
+    const displayedCode = needsCollapse && !isExpanded
+      ? allLines.slice(0, COLLAPSED_LINES).join('\n')
+      : (code ?? '');
+
+    const body = codeContent ?? <code>{needsCollapse ? displayedCode : (code ?? '')}</code>;
+    const totalLines = lineCountProp ?? (code !== undefined ? lineCountFromSource(code) : 1);
+    const displayedLineCount = needsCollapse && !isExpanded ? COLLAPSED_LINES : totalLines;
+    const resolvedCopy = copyTextProp ?? code ?? '';
+
+    return (
+      <div
+        ref={ref}
+        data-slot="code-snippet"
+        data-variant="multi-line-without-tabs"
+        className={cn(ROOT, className)}
+        {...divRest}
+      >
+        {showHeader && (
+          <div data-slot="code-snippet-header" className={HEADER_FILE}>
+            <span
+              className={cn(
+                HEADER_ICON_WRAP,
+                'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+              )}
+            >
+              {headerIcon ?? <CodeSnippetStarIcon />}
+            </span>
+            <div className="min-w-0 flex-1">
+              <p className={HEADER_FILE_TITLE}>{fileTitle}</p>
+            </div>
+          </div>
+        )}
+
+        <div
+          data-slot="code-snippet-body"
+          className={cn(BODY_ROW, !needsCollapse && MULTILINE_BODY_MIN_HEIGHT, codeBodyMinHeight)}
+        >
+          {showLineNumbers && <LineGutter count={displayedLineCount} />}
+          <div data-slot="code-snippet-content" className={CODE_COLUMN}>
+            <div className={CODE_TOOLBAR}>
+              <pre data-slot="code-snippet-code" className={CODE_PRE} dir="ltr">
+                {body}
+              </pre>
+              {showCopyButton && (
+                <CopyButton size="lg" copyText={resolvedCopy} onCopy={onCopy} />
+              )}
+            </div>
+
+            {needsCollapse && (
+              <Button
+                type="button"
+                variant="subtle"
+                size="sm"
+                trailingIcon={
+                  <CodeSnippetChevronDownIcon
+                    className={cn('transition-transform duration-200', isExpanded && 'rotate-180')}
+                  />
+                }
+                onClick={() => {
+                  setIsExpanded((prev) => !prev);
+                  onShowMore?.();
+                }}
+                className="mt-auto self-start"
+              >
+                {isExpanded ? 'Show Less' : showMoreLabel}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+const CodeSnippetSingleImpl = forwardRef<HTMLDivElement, CodeSnippetSingleLineProps>(
+  function CodeSnippetSingleImpl(props, ref) {
+    const {
+      variant: _variant,
+      showHeader: _showHeader,
+      showLineNumbers: _showLineNumbers,
+      showMoreButton: _showMoreButton,
+      showMoreLabel: _showMoreLabel,
+      onShowMore: _onShowMore,
+      codeBodyMinHeight: _codeBodyMinHeight,
+      showCopyButton = true,
+      copyText: copyTextProp,
+      onCopy,
+      className,
+      commandPrefix,
+      command,
+      ...divRest
+    } = props;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="code-snippet"
+        data-variant="single-line"
+        className={cn(ROOT, className)}
+        {...divRest}
+      >
+        <div data-slot="code-snippet-single" className={SINGLE_ROW}>
+          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-spacing-lg gap-y-spacing-md">
+            <span data-slot="code-snippet-prefix" className={SINGLE_PREFIX}>
+              {commandPrefix}
+            </span>
+            <div data-slot="code-snippet-command" className={SINGLE_COMMAND}>
+              {command}
+            </div>
+          </div>
+          {showCopyButton && (
+            <CopyButton copyText={copyTextProp} onCopy={onCopy} ariaLabel="Copy" className="self-center" />
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+export const CodeSnippet = forwardRef<HTMLDivElement, CodeSnippetProps>(function CodeSnippet(
+  props,
+  ref,
+) {
+  if (props.variant === 'multi-line-with-tabs') {
+    return <CodeSnippetMultiLineTabsImpl ref={ref} {...props} />;
+  }
+  if (props.variant === 'multi-line-without-tabs') {
+    return <CodeSnippetMultiLineFileImpl ref={ref} {...props} />;
+  }
+  return <CodeSnippetSingleImpl ref={ref} {...props} />;
+});

package/src/components/CodeSnippet/CodeSnippet.types.ts

@@ -0,0 +1,99 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { TabItem } from '../Tabs/Tabs.types';
+
+/**
+ * Structural layout from Figma "Code Snippet":
+ * - `multi-line-with-tabs` — underline `Tabs` + line gutter + body
+ * - `multi-line-without-tabs` — file header row + same body
+ * - `single-line` — compact command row (label + command + copy)
+ */
+export type CodeSnippetVariant =
+  | 'multi-line-with-tabs'
+  | 'multi-line-without-tabs'
+  | 'single-line';
+
+export interface CodeSnippetBaseProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Structural layout / Figma variant. */
+  variant: CodeSnippetVariant;
+  /**
+   * When true, shows the top region (tabs or file header for multi-line).
+   * @default true for multi-line variants; no effect for single-line.
+   */
+  showHeader?: boolean;
+  /**
+   * Line-number column for multi-line bodies.
+   * @default true for multi-line variants; no effect for single-line.
+   */
+  showLineNumbers?: boolean;
+  /**
+   * Tailwind classes for the **multi-line code body row** minimum height (below the header).
+   * Merged after the default (~384px). Ignored for `single-line`.
+   */
+  codeBodyMinHeight?: string;
+  /** Clipboard payload when the copy control is used. */
+  copyText?: string;
+  /**
+   * Invoked when the copy control is activated after a successful `writeText`,
+   * or by itself if `copyText` is empty (handle clipboard yourself).
+   */
+  onCopy?: () => void | Promise<void>;
+  /** Renders the secondary "Show more" control under multi-line code. @default true */
+  showMoreButton?: boolean;
+  /** @default "Show More" */
+  showMoreLabel?: string;
+  /** Called when "Show more" is pressed. */
+  onShowMore?: () => void;
+  /** Renders the primary copy control. @default true */
+  showCopyButton?: boolean;
+}
+
+/** Multi-line body with language tabs (`Tabs` type `underline`, size `md`). */
+export interface CodeSnippetMultiLineTabsProps extends CodeSnippetBaseProps {
+  variant: 'multi-line-with-tabs';
+  /** Items passed through to `Tabs`. */
+  tabItems: TabItem[];
+  /** Source per tab `value` — drives line count and default `copyText` when matched to the selected tab. */
+  tabPanels: Record<string, string>;
+  /** Controlled selected tab value. */
+  tabValue?: string;
+  /** Uncontrolled initial tab. */
+  defaultTabValue?: string;
+  /** Selection callback from `Tabs`. */
+  onTabValueChange?: (value: string) => void;
+}
+
+/** Multi-line body with optional file-style header (icon + title). */
+export interface CodeSnippetMultiLineFileProps extends CodeSnippetBaseProps {
+  variant: 'multi-line-without-tabs';
+  /**
+   * Plain source string. Ignored when `codeContent` is set.
+   * Provide either `code` or `codeContent`.
+   */
+  code?: string;
+  /**
+   * Custom body markup (e.g. highlighted spans). When set, supply `copyText`
+   * and optionally `lineCount` if line numbers should reflect a specific height.
+   */
+  codeContent?: ReactNode;
+  /** Number of lines for the gutter when `codeContent` is used; @default derived from `code` */
+  lineCount?: number;
+  /** File name shown in the header when `showHeader` is true. @default "" */
+  fileTitle?: string;
+  /** Replaces the default star icon in the file header. */
+  headerIcon?: ReactNode;
+}
+
+/** One-line install / CLI style row. */
+export interface CodeSnippetSingleLineProps extends CodeSnippetBaseProps {
+  variant: 'single-line';
+  /** Left label (e.g. package manager). Often styled as warning/accent text. */
+  commandPrefix: ReactNode;
+  /** Main command string or node (e.g. install line). */
+  command: ReactNode;
+}
+
+export type CodeSnippetProps =
+  | CodeSnippetMultiLineTabsProps
+  | CodeSnippetMultiLineFileProps
+  | CodeSnippetSingleLineProps;