sdaia-ui 1.0.1 → 1.0.2

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

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

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

package/src/components/CodeSnippet/CodeSnippet.tsx

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

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