sdaia-ui 1.0.1

package/src/components/InputPrefixSuffix/InputPrefixSuffix.variants.ts

@@ -0,0 +1,128 @@
+/**
+ * InputPrefixSuffix.variants.ts
+ *
+ * All class-name constants mapped from Figma node 5285:77926 (Input Prefix-Suffix).
+ *
+ * Color sources (Section 0 mapping):
+ *   Button/button-background-neutral-default → #f3f4f6  / dark: rgba(31,42,55,1)
+ *   Button/button-background-neutral-hovered → #f3f4f6  (same; hover class uses darker)
+ *   Button/button-background-neutral-pressed → #e5e7eb  / dark: rgba(77,87,97,1)
+ *   Button/button-background-black-selected  → #384250  / dark: rgba(210,214,219,1)
+ *   Global/background-disabled               → #e5e7eb  / dark: rgba(31,42,55,1)
+ *   Border/border-neutral-primary            → #d2d6db  / dark: rgba(44,57,79,1)
+ *   Icon/icon-default                        → #161616  / dark: rgba(229,231,235,1)
+ *   Global/icon-default-disabled             → #9da4ae  / dark: rgba(75,85,99,1)
+ *   Icon/icon-oncolor                        → #ffffff  / dark: rgba(13,18,28,1)
+ *   Colors/Alpha/alpha-black-70              → rgba(22,22,22,0.7) — focus ring
+ */
+
+import type {
+  InputPrefixSuffixSide,
+  InputPrefixSuffixStyle,
+  InputPrefixSuffixSize,
+} from './InputPrefixSuffix.types';
+
+/* ── Base — applied to every instance ───────────────────────────── */
+
+/**
+ * Shared foundation: flex layout, cursor, no text selection, smooth
+ * transition, and focus-visible ring.
+ *
+ * The focus ring matches the Figma "Focus outline" element:
+ *   2 px border at rgba(22,22,22,0.7), positioned at the button edge.
+ * `ring-offset-0` places the ring directly on the border (no gap).
+ */
+export const BASE = [
+  'relative inline-flex shrink-0 items-center justify-center',
+  'cursor-pointer select-none',
+  'motion-feedback',
+  // Border style — width is set per-side in SIDE_CLASSES
+  'border-solid',
+  // Focus ring
+  'focus-visible:outline-none',
+  'focus-visible:ring-2',
+  'focus-visible:ring-[rgba(22,22,22,0.7)]',
+  'focus-visible:ring-offset-0',
+  'dark:focus-visible:ring-[rgba(210,214,219,0.7)]',
+].join(' ');
+
+/* ── Border color — shared across all styles/states ─────────────── */
+export const BORDER_COLOR =
+  'border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]';
+
+/* ── Side classes — RTL-safe via CSS logical properties ──────────── */
+
+/**
+ * `'start'` → rounded start-side corners + start/top/bottom borders (no end border).
+ *   In LTR: rounds the left corners; border-left, border-top, border-bottom.
+ *   In RTL: rounds the right corners; border-right, border-top, border-bottom.
+ *
+ * `'end'` → rounded end-side corners + end/top/bottom borders (no start border).
+ *   In LTR: rounds the right corners; border-right, border-top, border-bottom.
+ *   In RTL: rounds the left corners; border-left, border-top, border-bottom.
+ */
+export const SIDE_CLASSES: Record<InputPrefixSuffixSide, string> = {
+  start: 'rounded-s-[8px] border-y border-s',
+  end: 'rounded-e-[8px] border-y border-e',
+};
+
+/* ── Style classes (default + hover + active) ────────────────────── */
+export const STYLE_CLASSES: Record<InputPrefixSuffixStyle, string> = {
+  solid: [
+    'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)]',
+    'hover:bg-[rgba(229,231,235,1)] dark:hover:bg-[rgba(56,66,80,1)]',
+    'active:bg-[rgba(210,214,219,1)] dark:active:bg-[rgba(77,87,97,1)]',
+  ].join(' '),
+
+  subtle: [
+    'bg-transparent',
+    'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)]',
+    'active:bg-[rgba(229,231,235,1)] dark:active:bg-[rgba(56,66,80,1)]',
+  ].join(' '),
+};
+
+/* ── Selected state — overrides style bg ─────────────────────────── */
+// Button/button-background-black-selected (#384250) with white icon (icon-oncolor).
+export const SELECTED_CLASSES = [
+  'bg-[rgba(56,66,80,1)] dark:bg-[rgba(210,214,219,1)]',
+  // Keep bg on hover/active so it doesn't wash out the selected look
+  'hover:bg-[rgba(56,66,80,1)] dark:hover:bg-[rgba(210,214,219,1)]',
+  'active:bg-[rgba(44,57,79,1)] dark:active:bg-[rgba(229,231,235,1)]',
+].join(' ');
+
+/* ── Disabled state — overrides everything, no pointer events ─────── */
+export const DISABLED_SOLID =
+  'bg-[rgba(229,231,235,1)] dark:bg-[rgba(31,42,55,1)] pointer-events-none cursor-default';
+
+export const DISABLED_SUBTLE =
+  'bg-transparent pointer-events-none cursor-default';
+
+/* ── Icon color ──────────────────────────────────────────────────── */
+
+/** Default icon: Icon/icon-default */
+export const ICON_COLOR =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+/** Selected icon: Icon/icon-oncolor (white on dark bg) */
+export const ICON_SELECTED_COLOR =
+  'text-white dark:text-[rgba(13,18,28,1)]';
+
+/** Disabled icon: Global/icon-default-disabled */
+export const ICON_DISABLED_COLOR =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/* ── Size classes ────────────────────────────────────────────────── */
+export const SIZE_CLASSES: Record<InputPrefixSuffixSize, string> = {
+  /** Large — 48 × 40 px: px=spacing-lg(12px), py=spacing-md(8px) */
+  lg: 'px-spacing-lg py-spacing-md',
+  /** Medium — 36 × 32 px: px=spacing-md(8px), py=spacing-sm(6px) */
+  md: 'px-spacing-md py-spacing-sm',
+};
+
+/* ── Icon size classes (responsive tokens) ───────────────────────── */
+export const ICON_SIZE_CLASSES: Record<InputPrefixSuffixSize, string> = {
+  /** Large icon: 24 px desktop — size-icon-lg (20/20/24 px) */
+  lg: 'size-icon-lg',
+  /** Medium icon: 20 px desktop — size-icon-md (16/16/20 px) */
+  md: 'size-icon-md',
+};

package/src/components/InputPrefixSuffix/index.ts

@@ -0,0 +1,8 @@
+export { InputPrefixSuffix } from './InputPrefixSuffix';
+export type {
+  InputPrefixSuffixProps,
+  InputPrefixSuffixIconType,
+  InputPrefixSuffixStyle,
+  InputPrefixSuffixSize,
+  InputPrefixSuffixSide,
+} from './InputPrefixSuffix.types';

package/src/components/InputsActions/InputsActions.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Skeleton } from '../Skeleton';
+import { SkeletonAvatar } from '../SkeletonAvatar';
+import type { InputsActionsProps } from './InputsActions.types';
+import {
+  ACTION_BLOCK,
+  ACTION_LINE_MED,
+  ACTION_LINE_SHORT,
+  CONTAINER_GAP,
+  CONTAINER_WIDTH,
+  FIELD_CLASS,
+  LABEL_CLASS,
+  ROW_GAP,
+  TEXTAREA_CLASS,
+} from './InputsActions.variants';
+
+export const InputsActions = forwardRef<HTMLDivElement, InputsActionsProps>(function InputsActions(
+  { variant = 'inputs', className, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      data-slot="inputs-actions"
+      className={cn('flex flex-col items-start', CONTAINER_GAP, CONTAINER_WIDTH[variant], className)}
+      {...rest}
+    >
+      {variant === 'inputs' ? (
+        <>
+          <Skeleton data-slot="inputs-actions-label-1" className={LABEL_CLASS} />
+          <Skeleton data-slot="inputs-actions-field-1" className={FIELD_CLASS} />
+          <Skeleton data-slot="inputs-actions-label-2" className={LABEL_CLASS} />
+          <Skeleton data-slot="inputs-actions-textarea" className={TEXTAREA_CLASS} />
+        </>
+      ) : (
+        <>
+          <div data-slot="inputs-actions-row-1" className={cn('flex items-center', ROW_GAP)}>
+            <SkeletonAvatar data-slot="inputs-actions-avatar-1" size="sm" />
+            <Skeleton data-slot="inputs-actions-line-1" className={ACTION_LINE_SHORT} />
+          </div>
+          <div data-slot="inputs-actions-row-2" className={cn('flex items-center', ROW_GAP)}>
+            <SkeletonAvatar data-slot="inputs-actions-avatar-2" size="sm" />
+            <Skeleton data-slot="inputs-actions-line-2" className={ACTION_LINE_MED} />
+          </div>
+          <Skeleton data-slot="inputs-actions-block" className={ACTION_BLOCK} />
+        </>
+      )}
+    </div>
+  );
+});

package/src/components/InputsActions/InputsActions.types.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+
+export type InputsActionsVariant = 'inputs' | 'actions';
+
+export interface InputsActionsProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Layout preset for the skeleton composition.
+   * Maps to Figma variants:
+   * - inputs: Inputs
+   * - actions: Actions
+   */
+  variant?: InputsActionsVariant;
+}

package/src/components/InputsActions/InputsActions.variants.ts

@@ -0,0 +1,18 @@
+import type { InputsActionsVariant } from './InputsActions.types';
+
+export const CONTAINER_GAP = 'gap-spacing-3xl';
+
+export const CONTAINER_WIDTH: Record<InputsActionsVariant, string> = {
+  inputs: 'w-[336px]',
+  actions: '',
+};
+
+export const ROW_GAP = 'gap-spacing-3xl';
+
+export const LABEL_CLASS = 'h-[16px] w-[128px]';
+export const FIELD_CLASS = 'h-[32px] w-full';
+export const TEXTAREA_CLASS = 'h-[92px] w-full';
+
+export const ACTION_LINE_SHORT = 'h-[16px] w-[128px]';
+export const ACTION_LINE_MED = 'h-[16px] w-[192px]';
+export const ACTION_BLOCK = 'h-[32px] w-[282px]';

package/src/components/InputsActions/index.ts

@@ -0,0 +1,2 @@
+export { InputsActions } from './InputsActions';
+export type { InputsActionsProps, InputsActionsVariant } from './InputsActions.types';

package/src/components/InstanceColumn/InstanceColumn.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { InstanceSlot } from '../InstanceSlot';
+import { CONTAINER_BASE, GAP, MAX_COLUMNS } from './InstanceColumn.variants';
+import { InstanceColumnProps } from './InstanceColumn.types';
+
+const InstanceColumn = forwardRef<HTMLDivElement, InstanceColumnProps>(
+  (
+    {
+      spacing = '0px',
+      columnCount = 7,
+      columnLabels,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const count = Math.min(Math.max(1, columnCount), MAX_COLUMNS);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="instance-column"
+        className={cn(CONTAINER_BASE, GAP[spacing], className)}
+        {...props}
+      >
+        {Array.from({ length: count }, (_, i) => {
+          const label = columnLabels?.[i] ?? `Instance Slot ${i + 1}`;
+          return (
+            <div key={i} className="flex-1 min-w-0">
+              <InstanceSlot label={label} />
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+InstanceColumn.displayName = 'InstanceColumn';
+
+export { InstanceColumn };

package/src/components/InstanceColumn/InstanceColumn.types.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+
+export type InstanceColumnSpacing = '0px' | '16px' | '24px';
+
+export interface InstanceColumnProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Gap between columns.
+   * - `'0px'`  → `gap-spacing-none`
+   * - `'16px'` → `gap-spacing-xl`
+   * - `'24px'` → `gap-spacing-3xl`
+   * @default '0px'
+   */
+  spacing?: InstanceColumnSpacing;
+  /** Number of columns to render (1–7). @default 7 */
+  columnCount?: number;
+  /** Override labels for individual columns. Index 0 = column 1. */
+  columnLabels?: string[];
+}

package/src/components/InstanceColumn/InstanceColumn.variants.ts

@@ -0,0 +1,11 @@
+import { InstanceColumnSpacing } from './InstanceColumn.types';
+
+export const CONTAINER_BASE = 'flex flex-row items-center w-full';
+
+export const GAP: Record<InstanceColumnSpacing, string> = {
+  '0px': 'gap-spacing-none',
+  '16px': 'gap-spacing-xl',
+  '24px': 'gap-spacing-3xl',
+};
+
+export const MAX_COLUMNS = 7;

package/src/components/InstanceColumn/index.ts

@@ -0,0 +1,2 @@
+export { InstanceColumn } from './InstanceColumn';
+export type { InstanceColumnProps, InstanceColumnSpacing } from './InstanceColumn.types';

package/src/components/InstanceItem/InstanceItem.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { InstanceItemProps } from './InstanceItem.types';
+import { CONTAINER_BASE, LABEL_BASE } from './InstanceItem.variants';
+
+/**
+ * InstanceItem — a visual design-system slot placeholder.
+ *
+ * Renders a purple dashed-border box used in documentation and demos to mark
+ * where a consumer component should be injected (maps to Figma's "Instance
+ * Slot" pattern). Customize the label to name the slot.
+ *
+ * RTL layout is handled automatically by `dir="rtl"` on the html element —
+ * no extra configuration is required.
+ */
+export const InstanceItem = forwardRef<HTMLDivElement, InstanceItemProps>(
+  function InstanceItem({ label = 'Instance Item', className, ...rest }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-slot="instance-item"
+        className={cn(CONTAINER_BASE, className)}
+        {...rest}
+      >
+        <p data-slot="instance-item-label" className={LABEL_BASE}>
+          {label}
+        </p>
+      </div>
+    );
+  },
+);

package/src/components/InstanceItem/InstanceItem.types.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+
+export interface InstanceItemProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Text rendered inside the placeholder box.
+   * Use this to name the slot so developers know what goes here
+   * (e.g. "Instance Slot 1", "Card Body", etc.).
+   * @default 'Instance Item'
+   */
+  label?: string;
+}

package/src/components/InstanceItem/InstanceItem.variants.ts

@@ -0,0 +1,31 @@
+// ─── Container ───────────────────────────────────────────────────────────────
+
+/**
+ * Outer container: purple dashed border + faint purple background.
+ * Colors are Figma design-tool purples — no matching semantic token exists.
+ * Height 40 px is a fixed design constraint (not a responsive token).
+ * Width uses w-full so it fills whatever slot it is placed in.
+ */
+export const CONTAINER_BASE = [
+  'bg-[rgba(151,71,255,0.05)]',
+  'border border-dashed border-[#9747ff]',
+  'flex items-center justify-center',
+  'gap-spacing-none p-spacing-none',
+  'h-[40px] w-full',
+  'relative shrink-0',
+].join(' ');
+
+// ─── Label ────────────────────────────────────────────────────────────────────
+
+/**
+ * Placeholder label text: text-md/Regular, Figma purple.
+ * RTL direction is handled automatically by dir="rtl" on the html element —
+ * no extra class needed here.
+ */
+export const LABEL_BASE = [
+  'text-text-md font-[400]',
+  'text-[#9747ff]',
+  'whitespace-nowrap',
+  'shrink-0',
+  'relative',
+].join(' ');

package/src/components/InstanceItem/index.ts

@@ -0,0 +1,2 @@
+export { InstanceItem } from './InstanceItem';
+export type { InstanceItemProps } from './InstanceItem.types';

package/src/components/InstanceRows/InstanceRows.tsx

@@ -0,0 +1,41 @@
+'use client';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { InstanceSlot } from '../InstanceSlot';
+import { CONTAINER_BASE, GAP, MAX_ROWS } from './InstanceRows.variants';
+import { InstanceRowsProps } from './InstanceRows.types';
+
+const InstanceRows = forwardRef<HTMLDivElement, InstanceRowsProps>(
+  (
+    {
+      spacing = '12px',
+      rowCount = 9,
+      rowLabels,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const count = Math.min(Math.max(1, rowCount), MAX_ROWS);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="instance-rows"
+        className={cn(CONTAINER_BASE, GAP[spacing], className)}
+        {...props}
+      >
+        {Array.from({ length: count }, (_, i) => {
+          const label = rowLabels?.[i] ?? `Instance Slot ${i + 1}`;
+          return (
+            <InstanceSlot key={i} label={label} />
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+InstanceRows.displayName = 'InstanceRows';
+
+export { InstanceRows };

package/src/components/InstanceRows/InstanceRows.types.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+
+export type InstanceRowsSpacing = '12px' | '16px';
+
+export interface InstanceRowsProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Gap between rows.
+   * - `'12px'` → `gap-spacing-lg`
+   * - `'16px'` → `gap-spacing-xl`
+   * @default '12px'
+   */
+  spacing?: InstanceRowsSpacing;
+  /** Number of rows to render (1–9). @default 9 */
+  rowCount?: number;
+  /** Override labels for individual rows. Index 0 = row 1. */
+  rowLabels?: string[];
+}

package/src/components/InstanceRows/InstanceRows.variants.ts

@@ -0,0 +1,10 @@
+import { InstanceRowsSpacing } from './InstanceRows.types';
+
+export const CONTAINER_BASE = 'flex flex-col items-start w-full';
+
+export const GAP: Record<InstanceRowsSpacing, string> = {
+  '12px': 'gap-spacing-lg',
+  '16px': 'gap-spacing-xl',
+};
+
+export const MAX_ROWS = 9;

package/src/components/InstanceRows/index.ts

@@ -0,0 +1,2 @@
+export { InstanceRows } from './InstanceRows';
+export type { InstanceRowsProps, InstanceRowsSpacing } from './InstanceRows.types';

package/src/components/InstanceSlot/InstanceSlot.tsx

@@ -0,0 +1,25 @@
+'use client';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { InstanceItem } from '../InstanceItem';
+import { CONTAINER_BASE } from './InstanceSlot.variants';
+import { InstanceSlotProps } from './InstanceSlot.types';
+
+const InstanceSlot = forwardRef<HTMLDivElement, InstanceSlotProps>(
+  ({ children, label = 'Instance Slot', className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="instance-slot"
+        className={cn(CONTAINER_BASE, className)}
+        {...props}
+      >
+        {children ?? <InstanceItem label={label} />}
+      </div>
+    );
+  },
+);
+
+InstanceSlot.displayName = 'InstanceSlot';
+
+export { InstanceSlot };

package/src/components/InstanceSlot/InstanceSlot.types.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+export interface InstanceSlotProps extends HTMLAttributes<HTMLDivElement> {
+  /** Content to render inside the slot. When omitted, the placeholder is shown. */
+  children?: ReactNode;
+  /** Fallback label shown in the placeholder when no children are provided.
+   * @default 'Instance Slot'
+   */
+  label?: string;
+}

package/src/components/InstanceSlot/InstanceSlot.variants.ts

@@ -0,0 +1,2 @@
+export const CONTAINER_BASE =
+  'flex flex-col gap-spacing-none p-spacing-none items-start w-full';

package/src/components/InstanceSlot/index.ts

@@ -0,0 +1,2 @@
+export { InstanceSlot } from './InstanceSlot';
+export type { InstanceSlotProps } from './InstanceSlot.types';