sdaia-ui 1.0.1 → 1.0.2

package/src/components/SdaiaTouch2dAnimation/Star.tsx

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

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

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

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

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

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

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

package/src/components/Select/Select.tsx

@@ -1,351 +0,0 @@
-'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>
-  );
-});