sdaia-ui 1.0.1

package/src/components/SdaiaTouch2dAnimation/Star.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { forwardRef, useState, type HTMLAttributes, type MouseEvent } from 'react';
+import { cn } from '../../lib/cn';
+import { StarShape } from './StarShape';
+
+export interface StarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Tip scale at rest. 0 = collapsed (outline only). Default 0. */
+  collapsedScale?: number;
+  /** Time (ms) the tip takes to grow on hover. Default 900. */
+  growMs?: number;
+  /** Time (ms) the tip takes to shrink on mouse leave. Default 600. */
+  shrinkMs?: number;
+}
+
+/**
+ * A single SDAIA Touch "star" — a tall flag silhouette with a V-chevron
+ * notch cut into the top. The outline is always visible (border-only at
+ * rest); on hover, the V-tip fills with a green gradient growing from 0
+ * to 1 along its top edge. The body of the flag extends well past the
+ * visible area and is clipped by the parent container.
+ */
+export const Star = forwardRef<HTMLDivElement, StarProps>(function Star(
+  {
+    className,
+    collapsedScale = 0,
+    growMs = 900,
+    shrinkMs = 600,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    ...rest
+  },
+  ref,
+) {
+  const [active, setActive] = useState(false);
+
+  const handleEnter = (event: MouseEvent<HTMLDivElement>) => {
+    setActive(true);
+    onMouseEnter?.(event);
+  };
+
+  const handleLeave = (event: MouseEvent<HTMLDivElement>) => {
+    setActive(false);
+    onMouseLeave?.(event);
+  };
+
+  const tipScale = active ? 1 : collapsedScale;
+  const tipTransition = `transform ${active ? growMs : shrinkMs}ms ${
+    active ? 'cubic-bezier(0.22, 1, 0.36, 1)' : 'cubic-bezier(0.4, 0, 0.6, 1)'
+  }`;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="sdaia-touch-star"
+      data-state={active ? 'expanded' : 'collapsed'}
+      onMouseEnter={handleEnter}
+      onMouseLeave={handleLeave}
+      onFocus={(event) => {
+        setActive(true);
+        onFocus?.(event);
+      }}
+      onBlur={(event) => {
+        setActive(false);
+        onBlur?.(event);
+      }}
+      className={cn(
+        'relative h-full w-full overflow-hidden',
+        className,
+      )}
+      {...rest}
+    >
+      <StarShape
+        className="block h-full w-full"
+        tipScale={tipScale}
+        tipTransition={tipTransition}
+      />
+    </div>
+  );
+});

package/src/components/SdaiaTouch2dAnimation/StarShape.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { forwardRef, useId, type SVGProps } from 'react';
+
+const VIEW_W = 226;
+const VIEW_H = 162;
+const STROKE_WIDTH = 1.2;
+const STROKE_COLOR = '#1B8354';
+
+export interface StarShapeProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+  /** Fill scale. 0 = no fill (outline only), 1 = fully filled triangle. */
+  tipScale?: number;
+  /** Transition applied to the fill scale. */
+  tipTransition?: string;
+}
+
+/**
+ * The SDAIA Touch "star" silhouette — a downward-pointing triangle.
+ * The outline is always visible. On hover, a duplicate filled triangle
+ * scales uniformly (2D) from the bottom apex outward, mirroring Figma's
+ * Smart-Animate variant transition.
+ */
+export const StarShape = forwardRef<SVGSVGElement, StarShapeProps>(function StarShape(
+  { tipScale = 0, tipTransition = 'none', preserveAspectRatio = 'none', ...rest },
+  ref,
+) {
+  const reactId = useId();
+  const gradientId = `sdaia-star-tip-${reactId}`;
+
+  const trianglePath = `M0 0 L${VIEW_W} 0 L${VIEW_W / 2} ${VIEW_H} Z`;
+  const safeScale = Math.max(0, Math.min(1, tipScale));
+
+  return (
+    <svg
+      ref={ref}
+      viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
+      preserveAspectRatio={preserveAspectRatio}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...rest}
+    >
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1="0"
+          y1="0"
+          x2="0"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stopColor="#1B8354" />
+          <stop offset="1" stopColor="#0D121C" />
+        </linearGradient>
+      </defs>
+
+      <path
+        d={trianglePath}
+        fill={`url(#${gradientId})`}
+        style={{
+          transform: `scale(${safeScale})`,
+          transformOrigin: '50% 100%',
+          transformBox: 'fill-box',
+          transition: tipTransition,
+          willChange: 'transform',
+        }}
+      />
+
+      <path
+        d={trianglePath}
+        stroke={STROKE_COLOR}
+        strokeWidth={STROKE_WIDTH}
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  );
+});

package/src/components/SdaiaTouch2dAnimation/index.ts

@@ -0,0 +1,6 @@
+export { SdaiaTouch2dAnimation } from './SdaiaTouch2dAnimation';
+export { Star } from './Star';
+export { StarShape } from './StarShape';
+export type { SdaiaTouch2dAnimationProps } from './SdaiaTouch2dAnimation.types';
+export type { StarProps } from './Star';
+export type { StarShapeProps } from './StarShape';

package/src/components/SecondNavHeader/SecondNavHeader.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { SubHeaderItem } from '../SubHeaderItem';
+import type { SecondNavHeaderProps } from './SecondNavHeader.types';
+import { ROOT, INNER, LEADING, TRAILING, ACTIONS_ROW, LABEL, DIVIDER } from './SecondNavHeader.variants';
+
+/**
+ * SecondNavHeader — the secondary navigation bar rendered below the primary
+ * NavHeader.
+ *
+ * ── Layout ────────────────────────────────────────────────────────────────────
+ *   Leading (start): up to 3 SubHeaderItem contextual chips (weather, date, time)
+ *   Trailing (end):  Instance slot · secondary label · icon-only action buttons
+ *
+ * ── Figma ─────────────────────────────────────────────────────────────────────
+ *   Node 4970:55009 "Second Nav Header" (Gray style, LTR + RTL variants)
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────────
+ *   Set `dir="rtl"` — CSS flex and logical properties mirror the layout
+ *   automatically. Each `SubHeaderItem` inherits direction from context.
+ *
+ * ── Dark mode ─────────────────────────────────────────────────────────────────
+ *   All dark: utilities are in variants.ts. Toggle `html.dark` on the root.
+ */
+export const SecondNavHeader = forwardRef<HTMLDivElement, SecondNavHeaderProps>(
+  function SecondNavHeader(
+    { items, instance, label, actions, divider = true, dir: dirProp, rtl, className, ...rest },
+    ref,
+  ) {
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+
+    const hasLeading = items && items.length > 0;
+    const hasTrailing = instance != null || label != null || actions != null;
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="second-nav-header"
+        className={cn(ROOT, className)}
+        {...rest}
+      >
+        <div className={INNER}>
+          {/* ── Leading: contextual info items ─────────────────────────── */}
+          {hasLeading && (
+            <div data-slot="second-nav-header-leading" className={LEADING}>
+              {items!.map((itemProps, i) => (
+                <SubHeaderItem key={i} dir={dir} {...itemProps} />
+              ))}
+            </div>
+          )}
+
+          {/* ── Trailing: instance slot · label · actions ───────────────── */}
+          {hasTrailing && (
+            <div data-slot="second-nav-header-trailing" className={TRAILING}>
+              {instance && (
+                <div data-slot="second-nav-header-instance">{instance}</div>
+              )}
+              {label && (
+                <span data-slot="second-nav-header-label" className={LABEL}>
+                  {label}
+                </span>
+              )}
+              {actions && (
+                <div data-slot="second-nav-header-actions" className={ACTIONS_ROW}>
+                  {actions}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* ── Bottom divider ────────────────────────────────────────────── */}
+        {divider && <div data-slot="second-nav-header-divider" className={DIVIDER} />}
+      </div>
+    );
+  },
+);

package/src/components/SecondNavHeader/SecondNavHeader.types.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { SubHeaderItemProps } from '../SubHeaderItem/SubHeaderItem.types';
+
+export interface SecondNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /**
+   * Up to 3 contextual info items (e.g. weather, date, time).
+   * Each entry is spread onto a `SubHeaderItem`.
+   */
+  items?: SubHeaderItemProps[];
+
+  /**
+   * Custom content injected into the Instance slot (leading side of the
+   * trailing group). Typically a breadcrumb, tab set, or status chip.
+   */
+  instance?: ReactNode;
+
+  /**
+   * Secondary text label shown in the trailing group (e.g. "List Item").
+   */
+  label?: string;
+
+  /**
+   * Action content — typically one to three `<Button iconOnly>` elements.
+   * Rendered in a `gap-spacing-sm` flex row.
+   */
+  actions?: ReactNode;
+
+  /**
+   * Whether to render a bottom border divider.
+   * @default true
+   */
+  divider?: boolean;
+
+  /** Layout direction. Applied to the root element. */
+  dir?: 'ltr' | 'rtl';
+
+  /** @deprecated Use `dir="rtl"` instead. */
+  rtl?: boolean;
+
+  className?: string;
+}

package/src/components/SecondNavHeader/SecondNavHeader.variants.ts

@@ -0,0 +1,42 @@
+/*
+ * SecondNavHeader variants
+ *
+ * Figma source: node 4970:55009 "Second Nav Header"
+ *
+ * Layout tokens:
+ *   Outer padding: px-[32px] (container-padding-desktop) → responsive via px-spacing-xl lg:px-[32px]
+ *   Vertical padding: py-spacing-xs (4px)
+ *   Leading items gap: gap-spacing-xl (16px)
+ *   Trailing group gap: gap-spacing-xl (16px)
+ *   Actions gap: gap-spacing-sm (6px)
+ *
+ * Color tokens:
+ *   Background/background-body → rgba(249,250,251,1) #f9fafb / dark: rgba(17,25,39,1)
+ *   Border/border-neutral-primary → rgba(210,214,219,1) #d2d6db / dark: rgba(55,65,81,1)
+ *   Text/text-secondary-paragraph → rgba(108,115,127,1) #6c737f / dark: rgba(156,163,175,1)
+ */
+
+export const ROOT =
+  'relative w-full' +
+  'bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]';
+
+export const INNER =
+  'flex flex-wrap gap-y-4 items-center justify-between ' +
+  'w-full px-spacing-xl lg:px-[32px] py-spacing-xs';
+
+export const LEADING =
+  'flex items-center gap-spacing-xl shrink-0';
+
+export const TRAILING =
+  'flex items-center gap-spacing-xl shrink-0';
+
+export const ACTIONS_ROW =
+  'flex items-center gap-spacing-sm';
+
+export const LABEL =
+  'text-text-md font-normal whitespace-nowrap text-center ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+export const DIVIDER =
+  'absolute bottom-0 inset-x-0 h-px ' +
+  'bg-[rgba(210,214,219,1)] dark:bg-[rgba(55,65,81,1)]';

package/src/components/SecondNavHeader/index.ts

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

package/src/components/Select/Select.tsx

@@ -0,0 +1,351 @@
+'use client';
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../../lib/cn';
+import { Chip } from '../Chip';
+import { SelectMenuItem } from '../SelectMenuItem';
+import { ArrowDownIcon, HelpCircleIcon, XSmallIcon } from '../../icons/IconFactory';
+import type { SelectOption, SelectProps } from './Select.types';
+import {
+  ARROW_DEFAULT,
+  ARROW_DISABLED,
+  ARROW_WRAP,
+  AVATAR_TRIGGER,
+  CONTENT,
+  DOT_DEFAULT,
+  DOT_DISABLED,
+  HELPER_DEFAULT,
+  HELPER_DISABLED,
+  HELPER_ERROR,
+  HELPER_TEXT,
+  HELPER_WRAP,
+  LABEL_DEFAULT,
+  LABEL_DISABLED,
+  LABEL_REQUIRED,
+  LABEL_WRAP,
+  LEADING_ICON_DEFAULT,
+  LEADING_ICON_DISABLED,
+  PANEL,
+  TRIGGER_BASE,
+  TRIGGER_BG_DEFAULT,
+  TRIGGER_BG_DISABLED,
+  TRIGGER_BORDER_DEFAULT,
+  TRIGGER_BORDER_ERROR,
+  TRIGGER_BORDER_OPEN,
+  TRIGGER_PADDING,
+  VALUE_DISABLED,
+  VALUE_FILLED,
+  VALUE_PLACEHOLDER,
+  VALUE_TEXT,
+  WRAPPER,
+} from './Select.variants';
+
+/**
+ * Select — a fully-featured dropdown field that supports:
+ * - Single and multi-select (`multiple` prop)
+ * - Five leading element types: none / icon / dot / checkbox / avatar
+ * - Two sizes: large (40 px) and medium (36 px)
+ * - Label, required marker, helper text, error state, disabled state
+ * - Multi-select: selected values render as removable Chip components
+ * - Keyboard: Enter/Space opens, Escape closes
+ * - RTL: set `dir="rtl"` on any ancestor — no extra props needed
+ * - Dark mode: set `html.dark` — no extra props needed
+ *
+ * Figma source: node 6150:85603
+ */
+export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
+  {
+    size = 'large',
+    leading = 'none',
+    options = [],
+    value,
+    onChange,
+    multiple = false,
+    placeholder = 'Select option',
+    label,
+    required = false,
+    helperText,
+    error,
+    disabled = false,
+    leadingIcon,
+    avatarSrc = '/images/avatar.webp',
+    id,
+    className,
+    ...props
+  },
+  forwardedRef,
+) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  /* ── Multi-select / chips logic ──────────────────────────────── */
+  // checkbox leading = always multi-select, no chips in trigger
+  // avatar leading with multiple = multi-select, avatar chips in trigger
+  const isMultiSelect = multiple || leading === 'checkbox';
+  const showChipsInTrigger = isMultiSelect && leading === 'avatar';
+
+  /* ── Ref merging ─────────────────────────────────────────────── */
+  const setContainerRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      if (typeof forwardedRef === 'function') forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef],
+  );
+
+  /* ── Normalise values ────────────────────────────────────────── */
+  const selectedValues: string[] = isMultiSelect
+    ? Array.isArray(value)
+      ? value
+      : value
+        ? [value as string]
+        : []
+    : value && !Array.isArray(value)
+      ? [value]
+      : Array.isArray(value) && value.length > 0
+        ? [value[0]]
+        : [];
+
+  const hasValue = selectedValues.length > 0;
+  const hasError = Boolean(error);
+
+  /* ── Lookup helpers ──────────────────────────────────────────── */
+  const findOption = (v: string): SelectOption | undefined =>
+    options.find((o) => o.value === v);
+
+  const singleSelected = !multiple ? findOption(selectedValues[0]) : undefined;
+
+  /* ── Close on outside click / focus loss ────────────────────── */
+  useEffect(() => {
+    if (!isOpen) return;
+    function onPointerDown(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [isOpen]);
+
+  /* ── Keyboard on trigger ─────────────────────────────────────── */
+  function handleTriggerKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      if (!disabled) setIsOpen((o) => !o);
+    }
+    if (e.key === 'Escape') setIsOpen(false);
+  }
+
+  /* ── Selection logic ─────────────────────────────────────────── */
+  function handleSelect(optValue: string) {
+    if (isMultiSelect) {
+      const next = selectedValues.includes(optValue)
+        ? selectedValues.filter((v) => v !== optValue)
+        : [...selectedValues, optValue];
+      onChange?.(next);
+      // keep dropdown open for multi-select
+    } else {
+      onChange?.(optValue);
+      setIsOpen(false);
+    }
+  }
+
+  function handleRemoveChip(optValue: string) {
+    const next = selectedValues.filter((v) => v !== optValue);
+    onChange?.(next);
+  }
+
+  /* ── Border class ────────────────────────────────────────────── */
+  const borderClass = hasError
+    ? TRIGGER_BORDER_ERROR
+    : isOpen
+      ? TRIGGER_BORDER_OPEN
+      : TRIGGER_BORDER_DEFAULT;
+
+  /* ── Avatar src for trigger (filled single-select) ───────────── */
+  const triggerAvatarSrc =
+    leading === 'avatar' && singleSelected?.avatar
+      ? singleSelected.avatar
+      : avatarSrc;
+
+  /* ─────────────────────────────────────────────────────────────── */
+  return (
+    <div
+      ref={setContainerRef}
+      data-slot="select"
+      data-disabled={disabled || undefined}
+      data-open={isOpen || undefined}
+      className={cn(WRAPPER, className)}
+      {...props}
+    >
+      {/* ── Label ─────────────────────────────────────────────── */}
+      {label && (
+        <label
+          htmlFor={id}
+          data-slot="select-label"
+          className={cn(LABEL_WRAP, disabled ? LABEL_DISABLED : LABEL_DEFAULT)}
+        >
+          {label}
+          {required && <span className={LABEL_REQUIRED}>*</span>}
+        </label>
+      )}
+
+      {/* ── Trigger + Panel container ─────────────────────────── */}
+      <div className="relative">
+        <button
+          id={id}
+          type="button"
+          role="combobox"
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+          aria-disabled={disabled}
+          disabled={disabled}
+          data-slot="select-trigger"
+          onClick={() => !disabled && setIsOpen((o) => !o)}
+          onKeyDown={handleTriggerKeyDown}
+          className={cn(
+            TRIGGER_BASE,
+            TRIGGER_PADDING[size],
+            disabled ? TRIGGER_BG_DISABLED : TRIGGER_BG_DEFAULT,
+            borderClass,
+            disabled && 'cursor-not-allowed',
+          )}
+        >
+          {/* ── Content area ──────────────────────────────────── */}
+          <div className={CONTENT}>
+            {/* Leading element */}
+            {leading === 'icon' && leadingIcon && (
+              <span
+                className={cn(disabled ? LEADING_ICON_DISABLED : LEADING_ICON_DEFAULT)}
+                aria-hidden="true"
+              >
+                {leadingIcon}
+              </span>
+            )}
+
+            {leading === 'dot' && (
+              <span
+                className={disabled ? DOT_DISABLED : DOT_DEFAULT}
+                aria-hidden="true"
+              />
+            )}
+
+            {/* Leading avatar image — only when NOT showing chips */}
+            {leading === 'avatar' && !showChipsInTrigger && (
+              <img
+                src={triggerAvatarSrc}
+                alt=""
+                className={AVATAR_TRIGGER}
+                aria-hidden="true"
+              />
+            )}
+
+            {/* ── Avatar chips (avatar multi-select) ───────────── */}
+            {showChipsInTrigger && hasValue ? (
+              <div className="flex flex-wrap gap-spacing-xxs flex-1 min-w-0">
+                {selectedValues.map((v) => {
+                  const opt = findOption(v);
+                  return (
+                    <Chip
+                      key={v}
+                      as="div"
+                      size="md"
+                      variant="outline"
+                      rounded={false}
+                      avatar
+                      avatarSrc={opt?.avatar ?? avatarSrc}
+                      trailingIcon={<XSmallIcon />}
+                      trailingIconLabel={`Remove ${opt?.label ?? v}`}
+                      onTrailingIconClick={(e) => {
+                        e.stopPropagation();
+                        handleRemoveChip(v);
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                      disabled={disabled}
+                    >
+                      {opt?.label ?? v}
+                    </Chip>
+                  );
+                })}
+              </div>
+            ) : (
+              /* Single-select or checkbox multi — text label or placeholder */
+              <span
+                className={cn(
+                  'flex-1 min-w-0 truncate',
+                  VALUE_TEXT[size],
+                  disabled
+                    ? VALUE_DISABLED
+                    : !showChipsInTrigger && hasValue
+                      ? VALUE_FILLED
+                      : VALUE_PLACEHOLDER,
+                )}
+              >
+                {!showChipsInTrigger && hasValue && singleSelected
+                  ? singleSelected.label
+                  : placeholder}
+              </span>
+            )}
+          </div>
+
+          {/* ── Arrow icon ────────────────────────────────────── */}
+          <span
+            className={cn(
+              ARROW_WRAP,
+              isOpen && 'rotate-180',
+              disabled ? ARROW_DISABLED : ARROW_DEFAULT,
+            )}
+            aria-hidden="true"
+          >
+            <ArrowDownIcon className="size-icon-sm" />
+          </span>
+        </button>
+
+        {/* ── Dropdown panel ────────────────────────────────────── */}
+        {isOpen && (
+          <div
+            role="listbox"
+            aria-multiselectable={multiple}
+            data-slot="select-panel"
+            className={PANEL}
+          >
+            {options.map((opt) => (
+              <SelectMenuItem
+                key={opt.value}
+                size={size}
+                leading={leading}
+                icon={leadingIcon}
+                avatar={opt.avatar ?? avatarSrc}
+                label={opt.label}
+                selected={selectedValues.includes(opt.value)}
+                disabled={opt.disabled}
+                role="option"
+                aria-selected={selectedValues.includes(opt.value)}
+                className="cursor-pointer"
+                onClick={() => {
+                  if (!opt.disabled) handleSelect(opt.value);
+                }}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* ── Helper / Error row ──────────────────────────────────── */}
+      {(helperText || error) && (
+        <p
+          data-slot="select-helper"
+          className={cn(
+            HELPER_WRAP,
+            HELPER_TEXT,
+            hasError ? HELPER_ERROR : disabled ? HELPER_DISABLED : HELPER_DEFAULT,
+          )}
+        >
+          <HelpCircleIcon className="shrink-0 size-icon-sm" />
+          {error ?? helperText}
+        </p>
+      )}
+    </div>
+  );
+});