sdaia-ui 1.0.1 → 1.0.2

package/src/components/DatePicker/DatePicker.types.ts

@@ -1,102 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-export type DatePickerPreset =
-  | 'today'
-  | 'yesterday'
-  | 'this-week'
-  | 'last-week'
-  | 'this-month'
-  | 'last-month'
-  | 'this-year'
-  | 'last-year'
-  | 'all-time';
-
-/** Single calendar or dual (side-by-side) calendar. */
-export type DatePickerType = 'single' | 'dual';
-
-/** Calendar pane can swap between the day grid and the month/year pickers. */
-export type DatePickerPickerMode = 'calendar' | 'month' | 'year';
-
-export interface DateRange {
-  start: Date | null;
-  end: Date | null;
-}
-
-export interface DatePickerLabels {
-  cancel: string;
-  submit: string;
-  startDate: string;
-  endDate: string;
-  /** Day headers, starting with the first column — default `['Su','Mo','Tu','We','Th','Fr','Sa']`. */
-  dayHeaders: string[];
-  /** Month names in calendar order — default English month names. */
-  monthNames: string[];
-  /** Short month names — default first three letters of each month. */
-  monthNamesShort: string[];
-  /** Visible labels for each preset. */
-  preset: Record<DatePickerPreset, string>;
-  /** Aria-labels for the previous / next month navigation buttons. */
-  previousMonth: string;
-  nextMonth: string;
-  /** Aria-label for the month trigger in the header. */
-  selectMonth: string;
-  /** Aria-label for the year trigger in the header. */
-  selectYear: string;
-  /** Placeholder text inside the mobile preset select. */
-  presetPlaceholder: string;
-}
-
-export interface DatePickerProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'onSubmit' | 'dir'> {
-  /** Layout direction — applied to the root element for RTL support. */
-  dir?: 'ltr' | 'rtl';
-  /** Calendar layout — `'dual'` (default) renders two calendars side-by-side. */
-  type?: DatePickerType;
-  /** Compact mobile layout — single calendar, stacked action row, preset as a select. */
-  mobile?: boolean;
-  /** Enable range selection (start + end date). */
-  range?: boolean;
-
-  /** Controlled single-date value. */
-  value?: Date | null;
-  /** Controlled range value. */
-  rangeValue?: DateRange;
-  /** Uncontrolled initial single-date value. */
-  defaultValue?: Date | null;
-  /** Uncontrolled initial range value. */
-  defaultRangeValue?: DateRange;
-
-  /** Fired when a date is picked (single mode). */
-  onChange?: (date: Date | null) => void;
-  /** Fired whenever the range changes (range mode). */
-  onRangeChange?: (range: DateRange) => void;
-  /** Fired when the Submit button is clicked. */
-  onSubmit?: (value: DateRange) => void;
-  /** Fired when the Cancel button is clicked. */
-  onCancel?: () => void;
-
-  /**
-   * Preset sidebar configuration.
-   *   - `true` (default for `type="dual"` on desktop) — show all presets.
-   *   - `false` — hide presets entirely.
-   *   - `string[]` — show only the listed presets, in that order.
-   */
-  presets?: boolean | DatePickerPreset[];
-  /** Show the Cancel / Submit action row. Default `true` for `type="dual"`. */
-  showActions?: boolean;
-  /** Show the date-input fields at the bottom. Default `true` for `type="dual"`. */
-  showDateInputs?: boolean;
-  /** Show the second calendar pane (only meaningful for `type="dual"`). Default `true`. */
-  showSecondMonth?: boolean;
-
-  /** Minimum selectable date (inclusive). */
-  minDate?: Date;
-  /** Maximum selectable date (inclusive). */
-  maxDate?: Date;
-
-  /** Label / copy overrides (for i18n). */
-  labels?: Partial<DatePickerLabels>;
-
-  /** Rendered after the preset list (advanced slot, e.g. custom preset). */
-  presetFooter?: ReactNode;
-}

package/src/components/DatePicker/DatePicker.variants.ts

@@ -1,274 +0,0 @@
-/**
- * DatePicker.variants.ts
- *
- * Token mapping from Figma node 4516:41579 (Date Picker Menu).
- *
- * The component composes DateCell, DateTab, CalendarHeader, Button,
- * TextInput, and IconFactory — so almost every interactive state is
- * owned by those children. This file only carries the shell layout
- * (card, sections, grid scaffolding, preset sidebar).
- */
-
-/* ── Root card ──────────────────────────────────────────────── */
-
-/**
- * Outer panel. White background, `radius-8`, shadow-2xl drop shadow
- * per Figma. `shadow-2xl`'s custom value matches Figma's
- * `0 24px 48px -12px rgba(16,24,40,0.18)` — no existing token, so
- * hardcoded here with the Figma variable name in a comment.
- */
-export const ROOT = [
-  'inline-flex flex-col',
-  'bg-white dark:bg-[rgba(22,22,22,1)]',                               // Background/background-white + dark fallback
-  'rounded-[8px]',                                                     // Radius/radius-8
-  'shadow-[0px_24px_48px_-12px_rgba(16,24,40,0.18)]',                  // Shadows/shadow-2xl
-  'border border-transparent dark:border-[rgba(255,255,255,0.08)]',
-  'overflow-hidden',
-].join(' ');
-
-/* ── Top row: optional preset aside + calendar area ─────────── */
-
-export const TOP_ROW = 'flex';
-
-/* ── Preset sidebar (dual desktop only) ─────────────────────── */
-
-/**
- * Preset sidebar column. ~140 px wide with a trailing divider.
- * Uses logical border so the divider sits on the correct edge in RTL.
- */
-export const PRESET_ASIDE = [
-  'flex flex-col',
-  'gap-spacing-xxs',
-  'p-spacing-lg',
-  'border-e border-e-[rgba(210,214,219,1)]',                           // Border/border-neutral-primary
-  'dark:border-e-[rgba(255,255,255,0.1)]',
-  'min-w-[150px]',
-].join(' ');
-
-
-/* ── Calendar area ──────────────────────────────────────────── */
-
-export const CALENDAR_AREA = 'flex flex-col';
-
-export const CALENDARS_ROW = 'flex';
-
-/* A single calendar pane — matches Figma single-calendar width
- * (`w-[392px]` content + padding => ~424 px with 16 px padding). */
-export const CALENDAR_PANE = [
-  'flex flex-col',
-  'gap-spacing-lg',
-  'p-spacing-xl',
-].join(' ');
-
-/* Compact variant for when two panes sit side-by-side. */
-export const CALENDAR_PANE_COMPACT = [
-  'flex flex-col',
-  'gap-spacing-lg',
-  'p-spacing-xl',
-].join(' ');
-
-/**
- * Mobile calendar pane — no outer padding because the mobile card
- * already provides it. This keeps `7 × 48 px = 336 px` of date cells
- * inside the mobile card's 336 px content area (`352 px − 16 px`).
- */
-export const CALENDAR_PANE_MOBILE = [
-  'flex flex-col',
-  'gap-spacing-md',
-  'p-0',
-].join(' ');
-
-/* ── Day-of-week header row ─────────────────────────────────── */
-
-/** Single day-header cell. Matches the 56 × 56 date-cell hit-area. */
-export const DAY_HEADER_CELL = [
-  'inline-flex items-center justify-center',
-  'w-[56px] h-[56px]',
-  'text-text-md font-[400] leading-[24px]',
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',        // Text/text-secondary-paragraph
-  'text-center select-none',
-].join(' ');
-
-/**
- * Mobile day-header — full-width square cell capped at 48 px.
- * `aspect-square` keeps header row height in sync with the date
- * cells so everything scales proportionally on narrow phones.
- */
-export const DAY_HEADER_CELL_MOBILE = [
-  'inline-flex items-center justify-center',
-  'w-full max-w-[48px] aspect-square',
-  'text-text-md font-[400] leading-[24px]',
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
-  'text-center select-none',
-  'mx-auto',
-].join(' ');
-
-/**
- * Mobile override passed through `className` on every `<DateCell>`.
- *   `w-full max-w-[48px]` — cells share the grid's inline space
- *                            equally, capped at the Figma 48 px spec.
- *   `aspect-square`       — outer button stays square at any size so
- *                            `rounded-full` renders as a circle.
- *   `p-0`                 — removes the outer 4 px padding; the disc
- *                            touches the column edge.
- *   `mx-auto`             — centers the (capped) cell inside a wider
- *                            grid column if the parent ever exceeds
- *                            the 48 px max-width cap.
- * The inner disc uses `w-[min(48px,100%)] aspect-square` (see
- * DateCell.variants) so it fills the cell on narrow widths without
- * ever overflowing.
- */
-export const DATE_CELL_MOBILE_OVERRIDE =
-  'w-full max-w-[48px] aspect-square p-0 mx-auto';
-
-/* ── Cells grid ─────────────────────────────────────────────── */
-
-/**
- * 7-column, 6-row grid. Using `grid` makes cells line up regardless of
- * DateCell's intrinsic width, and works cleanly in RTL (columns flip).
- */
-export const CALENDAR_GRID = [
-  'grid grid-cols-7',
-  'gap-0',
-].join(' ');
-
-/* ── Month / year picker panels ─────────────────────────────── */
-
-/**
- * Grid used when the calendar pane is showing the month (3×4) or
- * year (3×N) picker instead of the day grid. Gap matches the
- * DateTab's 4-px outer focus ring.
- */
-export const PICKER_GRID = [
-  'grid grid-cols-3',
-  'gap-spacing-xs',
-  'px-spacing-xs pt-spacing-xs',
-].join(' ');
-
-/** Overriding DateTab width for the 3-column picker (DateTab defaults to 150 px). */
-export const PICKER_TAB = 'w-full';
-
-/* Scrollable wrapper for year picker (since years can exceed viewport). */
-export const PICKER_SCROLL = [
-  'max-h-[320px] overflow-y-auto',
-  'scrollbar-thin',
-].join(' ');
-
-/* ── Picker-mode transition ─────────────────────────────────── */
-
-/**
- * When the picker mode swaps (calendar ↔ month ↔ year) we fade the
- * incoming content in. `animate-fade-in` isn't globally defined, so we
- * use an explicit Tailwind keyframe via @supports-friendly class. In
- * practice the simple opacity transition below is enough.
- */
-export const PICKER_FADE = [
-  'transition-opacity duration-150 motion-reduce:transition-none',
-].join(' ');
-
-/* ── Bottom panel (dual only / mobile full) ─────────────────── */
-
-export const BOTTOM_PANEL = [
-  'flex flex-col',
-  'gap-spacing-md',
-  'px-spacing-xl py-spacing-md',
-  'border-t border-t-[rgba(210,214,219,1)]',                           // Border/border-neutral-primary
-  'dark:border-t-[rgba(255,255,255,0.1)]',
-].join(' ');
-
-export const DATE_INPUTS_ROW = [
-  'flex items-center',
-  'gap-spacing-md',
-  'w-full',
-].join(' ');
-
-export const DATE_INPUT_DASH = [
-  'text-text-md font-[400] leading-[24px]',
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
-  'shrink-0',
-].join(' ');
-
-export const ACTIONS_ROW_DESKTOP = [
-  'flex items-center justify-between',
-  'gap-spacing-md',
-  'w-full',
-].join(' ');
-
-export const ACTIONS_ROW_MOBILE = [
-  'flex items-center',
-  'gap-spacing-md',
-  'w-full',
-].join(' ');
-
-/* ── Mobile root overrides ──────────────────────────────────── */
-
-/**
- * Mobile uses a flexible card that caps at the Figma 352 px spec but
- * shrinks to fit narrower phones (e.g. 320 px devices) so the picker
- * never forces a horizontal page scrollbar.
- *   Figma: `w-[352px]` with `px-spacing-md py-spacing-xl`.
- * Stacks calendar, inputs, actions.
- */
-export const ROOT_MOBILE = [
-  'flex flex-col gap-spacing-lg',
-  'w-full max-w-[352px]',
-  'px-spacing-xl py-spacing-xl',
-  'bg-white dark:bg-[rgba(22,22,22,1)]',
-  'rounded-[8px]',
-  'shadow-[0px_24px_48px_-12px_rgba(16,24,40,0.18)]',
-  'border border-transparent dark:border-[rgba(255,255,255,0.08)]',
-].join(' ');
-
-export const MOBILE_HEADER_ROW = [
-  'flex items-center',
-  'gap-spacing-lg',
-  'w-full',
-].join(' ');
-
-/**
- * Mobile preset chip row — horizontal scrollable list of preset
- * buttons above the calendar. Negative inline margins bleed the row
- * to the card edges so the first/last chips touch the edge when the
- * list scrolls. `scrollbar-none` (best-effort) hides the scrollbar
- * visually; users swipe or scroll with touch / trackpad.
- */
-export const MOBILE_PRESETS_ROW = [
-  'flex items-center gap-spacing-xs',
-  'w-full overflow-x-auto',
-  'pb-spacing-xs',
-  '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-].join(' ');
-
-/**
- * Single mobile preset chip. Compact, pill-shaped, uses the same
- * palette as the desktop preset button so selection / hover states
- * match across breakpoints.
- */
-export const MOBILE_PRESET_CHIP_BASE = [
-  'inline-flex items-center shrink-0',
-  'px-spacing-md py-spacing-xs',
-  'rounded-[9999px]',
-  'text-text-md leading-[24px] whitespace-nowrap',
-  'motion-feedback motion-reduce:transition-none',
-  'cursor-pointer select-none',
-  'focus-visible:outline-none focus-visible:ring-2',
-  'focus-visible:ring-[rgba(27,131,84,0.7)]',
-].join(' ');
-
-export const MOBILE_PRESET_CHIP_IDLE = [
-  'font-[400]',
-  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
-  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,41,55,1)]',
-  'hover:bg-[rgba(229,231,235,1)] dark:hover:bg-[rgba(55,65,81,1)]',
-].join(' ');
-
-export const MOBILE_PRESET_CHIP_ACTIVE = [
-  'font-[500]',
-  'text-white',
-  'bg-[rgba(27,131,84,1)]',
-  'hover:bg-[rgba(22,106,69,1)]',
-].join(' ');
-
-/** On mobile the DateCell grid uses `p-0` rather than `p-spacing-xs`
- *  so 7 × 48-px cells fit within the 352-px card. */
-export const MOBILE_CELL_OVERRIDE = 'p-0 w-[48px] h-[48px]';

package/src/components/DatePicker/index.ts

@@ -1,9 +0,0 @@
-export { DatePicker } from './DatePicker';
-export type {
-  DatePickerProps,
-  DatePickerPreset,
-  DatePickerType,
-  DatePickerLabels,
-  DatePickerPickerMode,
-  DateRange,
-} from './DatePicker.types';

package/src/components/DateTab/DateTab.tsx

@@ -1,91 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import type { DateTabProps } from './DateTab.types';
-import {
-  ROOT_BASE,
-  BG_UNSELECTED,
-  BG_SELECTED,
-  LABEL_BASE,
-  LABEL_UNSELECTED,
-  LABEL_SELECTED,
-  LABEL_DISABLED,
-  FOCUS_RING_BASE,
-  FOCUS_RING_UNSELECTED,
-  FOCUS_RING_SELECTED,
-} from './DateTab.variants';
-
-/**
- * DateTab — a selectable row used inside DatePicker's month / year
- * pickers.
- *
- * Fixed 150 × 40 px per Figma. All interaction states (hover, pressed,
- * focus-visible, disabled) are browser-driven; only `selected` is
- * carried as a prop.
- *
- * Accessibility
- * ─────────────
- *   • Renders a native `<button type="button">`.
- *   • `aria-pressed={selected}` gives the tab toggle semantics.
- *   • The focus halo is drawn only under `:focus-visible`, so mouse
- *     clicks don't leave a ring behind.
- */
-export const DateTab = forwardRef<HTMLButtonElement, DateTabProps>(
-  function DateTab(
-    {
-      children,
-      selected = false,
-      disabled: disabledProp,
-      className,
-      onClick,
-      ...rest
-    },
-    ref,
-  ) {
-    const disabled = Boolean(disabledProp);
-
-    const bgClass = disabled
-      ? ''
-      : selected
-        ? BG_SELECTED
-        : BG_UNSELECTED;
-
-    const labelClass = disabled
-      ? LABEL_DISABLED
-      : selected
-        ? LABEL_SELECTED
-        : LABEL_UNSELECTED;
-
-    const ringColor = selected ? FOCUS_RING_SELECTED : FOCUS_RING_UNSELECTED;
-
-    return (
-      <button
-        ref={ref}
-        type="button"
-        disabled={disabled}
-        onClick={onClick}
-        aria-pressed={selected}
-        data-slot="date-tab"
-        data-selected={selected || undefined}
-        className={cn(ROOT_BASE, bgClass, className)}
-        {...rest}
-      >
-        <span
-          data-slot="date-tab-label"
-          className={cn(LABEL_BASE, labelClass)}
-        >
-          {children}
-        </span>
-
-        <span
-          aria-hidden="true"
-          data-slot="date-tab-focus-ring"
-          className={cn(FOCUS_RING_BASE, ringColor)}
-        />
-      </button>
-    );
-  },
-);
-
-DateTab.displayName = 'DateTab';

package/src/components/DateTab/DateTab.types.ts

@@ -1,9 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-
-export interface DateTabProps
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
-  /** Label rendered inside the tab (e.g. "January", "2025"). */
-  children: ReactNode;
-  /** Whether this tab is currently selected. Default `false`. */
-  selected?: boolean;
-}

package/src/components/DateTab/DateTab.variants.ts

@@ -1,98 +0,0 @@
-/**
- * DateTab.variants.ts
- *
- * Token mapping from Figma node 4514:38398 (_Date Tab).
- *
- * Geometry (fixed per Figma):
- *   Outer         150 × 40 px (`w-[150px]`, `py-spacing-md`+24 px line-height)
- *   Horizontal pad 12 px       (`px-spacing-lg`)
- *   Vertical pad   8 px        (`py-spacing-md`)
- *   Radius         `radius-8`  (`rounded-[8px]`)
- *   Focus halo     `inset-[-4px]` with `rounded-[6px]` (`radius-6`)
- *
- * Colors without a semantic token are inlined with the Figma variable
- * name in a trailing comment.
- */
-
-/* ── Root shell ─────────────────────────────────────────────── */
-
-/**
- * `group/date-tab` enables the focus ring child to show only when the
- * button itself is `:focus-visible` (keyboard users, not mouse clicks).
- */
-export const ROOT_BASE = [
-  'group/date-tab',
-  'relative inline-flex items-center',
-  'w-[150px]',
-  'px-spacing-lg py-spacing-md',
-  'rounded-[8px]',
-  'bg-transparent',
-  'cursor-pointer select-none',
-  'motion-feedback motion-reduce:transition-none',
-  'focus:outline-none',
-  'disabled:cursor-not-allowed',
-].join(' ');
-
-/* Background state classes — not applied when `disabled` is true. */
-export const BG_UNSELECTED = [
-  'hover:bg-[rgba(229,231,235,1)]',           // datecell-today-background-hovered
-  'active:bg-[rgba(210,214,219,1)]',          // datecell-today-background-pressed
-  'dark:hover:bg-[rgba(55,65,81,0.5)]',
-  'dark:active:bg-[rgba(75,85,99,0.5)]',
-].join(' ');
-
-export const BG_SELECTED = [
-  'hover:bg-[rgba(223,246,231,1)]',           // datecell-background-100
-  'active:bg-[rgba(184,234,203,1)]',          // datecell-background-200
-].join(' ');
-
-/* ── Label ──────────────────────────────────────────────────── */
-
-export const LABEL_BASE = [
-  'flex-1 min-w-0',
-  'text-text-md leading-[24px]',
-  'text-start',
-].join(' ');
-
-/** Unselected, enabled — 400 weight on text-secondary-paragraph. */
-export const LABEL_UNSELECTED = [
-  'font-[400]',
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',   // text-secondary-paragraph
-].join(' ');
-
-/** Selected, enabled — 500 weight on text-primary green. */
-export const LABEL_SELECTED = [
-  'font-[500]',
-  'text-[rgba(27,131,84,1)]',                                     // text-primary
-].join(' ');
-
-/**
- * Disabled label — the same regardless of `selected`, per Figma's
- * "Selected=True, State=Disabled" frame which drops the green tint
- * entirely.
- */
-export const LABEL_DISABLED = [
-  'font-[400]',
-  'text-[rgba(157,164,174,1)]',                                   // text-default-disabled
-].join(' ');
-
-/* ── Focus ring halo ────────────────────────────────────────── */
-
-/**
- * Drawn 4 px outside the tab, 2 px border, radius-6. Renders only when
- * the parent button is `:focus-visible` — mouse clicks don't show it.
- */
-export const FOCUS_RING_BASE = [
-  'absolute inset-[-4px]',
-  'rounded-[6px]',
-  'border-2 border-solid',
-  'pointer-events-none',
-  'opacity-0 group-focus-visible/date-tab:opacity-100',
-  'transition-opacity duration-150 motion-reduce:transition-none',
-].join(' ');
-
-export const FOCUS_RING_UNSELECTED =
-  'border-[rgba(22,22,22,0.7)] dark:border-[rgba(255,255,255,0.7)]'; // alpha-black-70
-
-export const FOCUS_RING_SELECTED =
-  'border-[rgba(27,131,84,0.7)]';                                    // alpha-600-primary-70

package/src/components/DateTab/index.ts

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

package/src/components/DgaIcon/DgaIcon.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import { forwardRef, type CSSProperties } from 'react';
-import { cn } from '../../lib/cn';
-import { decodeDataUrl } from './lib/decodeDataUrl';
-import { ROOT, RTL_FLIP } from './DgaIcon.variants';
-import type { DgaIconProps } from './DgaIcon.types';
-
-/**
- * Renders a single icon from the DGA Platforms Code icon set
- * (`@platformscode/icons`, re-exported as `sdaia-ui/dga-icons`).
- *
- * Accepts a `data` prop — the imported data URL string — and inlines the
- * source SVG so CSS `color` recolors the icon via `fill="currentColor"`.
- *
- * @example Tree-shakeable — recommended
- * ```tsx
- * import { DgaIcon } from 'sdaia-ui';
- * import { home01Stroke } from 'sdaia-ui/dga-icons';
- *
- * <DgaIcon data={home01Stroke} size={24} title="Home" />
- * ```
- */
-export const DgaIcon = forwardRef<SVGSVGElement, DgaIconProps>(function DgaIcon(
-  {
-    data,
-    size = '1em',
-    title,
-    flipOnRtl = false,
-    className,
-    style,
-    ...rest
-  },
-  ref,
-) {
-  const { viewBox, innerHtml } = decodeDataUrl(data);
-
-  const inner =
-    (title ? `<title>${escapeXml(title)}</title>` : '') + innerHtml;
-
-  const mergedStyle: CSSProperties = { width: size, height: size, ...style };
-
-  return (
-    <svg
-      ref={ref}
-      data-slot="dga-icon"
-      viewBox={viewBox}
-      role={title ? 'img' : undefined}
-      aria-hidden={title ? undefined : true}
-      focusable={false}
-      fill="none"
-      className={cn(ROOT, flipOnRtl && RTL_FLIP, className)}
-      style={mergedStyle}
-      dangerouslySetInnerHTML={{ __html: inner }}
-      {...rest}
-    />
-  );
-});
-
-/** Escape a short plain-text string for safe insertion into SVG markup. */
-function escapeXml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-}