sdaia-ui 1.0.1 → 1.0.2

package/src/components/CalendarHeader/CalendarHeader.variants.ts

@@ -1,65 +0,0 @@
-/**
- * CalendarHeader.variants.ts
- *
- * Token mapping from Figma node 4514:38243 (_Calendar Header).
- *
- * Almost every visual is owned by the embedded `<Button>` /
- * `<ButtonMenu>` children; this file only carries the layout shell and
- * the mobile plain-text label styles.
- */
-
-/* ── Root layouts ───────────────────────────────────────────── */
-
-/**
- * Desktop dual-layout root. Fixed 320 px wide per Figma, with month/year
- * menus pinned to the inline-start and arrow buttons pinned to the
- * inline-end via `justify-between`.
- */
-export const ROOT_DESKTOP = [
-  'flex items-center justify-between',
-  'w-full',
-].join(' ');
-
-/** Desktop center-layout root — same width, centers the combined menu. */
-export const ROOT_DESKTOP_CENTER = [
-  'flex items-center justify-between',
-  'w-full',
-].join(' ');
-
-/** Mobile root — compact, sized to content, 4 px gap between items. */
-export const ROOT_MOBILE = [
-  'inline-flex items-center',
-  'gap-spacing-xs',
-].join(' ');
-
-/* Inner group holding the two menus in the dual-desktop layout. */
-export const DUAL_MENUS_WRAP = 'flex items-center';
-
-/* Inner group holding the prev/next arrows in the dual-desktop layout. */
-export const DUAL_ARROWS_WRAP = [
-  'flex items-center',
-  'gap-spacing-xs',
-].join(' ');
-
-/* ── Mobile plain label ─────────────────────────────────────── */
-
-/**
- * Mobile label text. Figma "Text md/Medium" on `Text/text-default`.
- * `color-display` does not map to #161616 in our tokens, so the Figma
- * hex is inlined with a comment.
- */
-export const MOBILE_LABEL = [
-  'text-text-md font-[500] leading-[24px]',
-  'text-[rgba(22,22,22,1)] dark:text-white',   // Text/text-default
-  'whitespace-nowrap',
-].join(' ');
-
-/* ── Arrow icon wrapper ─────────────────────────────────────── */
-
-/**
- * Wrapper added inside the leading-icon slot so the arrow flips in RTL.
- * The ArrowLeftIcon / ArrowRightIcon glyphs are physical (they point a
- * specific direction), so under `dir="rtl"` we rotate 180° to preserve
- * the semantic meaning of "previous" and "next".
- */
-export const RTL_FLIP_ICON = 'rtl:rotate-180';

package/src/components/CalendarHeader/index.ts

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

package/src/components/Card/Card.tsx

@@ -1,76 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import type { CardProps } from './Card.types';
-import { CARD } from './Card.variants';
-
-/*
- * Real sibling components — each lives in its own folder and is the single
- * source of truth for its markup, tokens, and states. `Card` is purely a
- * thin container that composes them via the compound API.
- */
-import { CardHeader } from '../CardHeader';
-import { CardMedia } from '../CardMedia';
-import { CardContent } from '../CardContent';
-import { CardFooter } from '../CardFooter';
-import { CardLeadingItem } from '../CardLeadingItem';
-
-/* ──────────────────────────────────────────────────────────────
- * Card — composable surface used to build the Default, Task,
- * Product, Content, Item, Event, and Social Post layouts shown
- * in Figma node 4407:37825. Each Figma "Type" is just a
- * different composition of the same five slots:
- *
- *   <Card>
- *     <Card.Header ... />           ← optional
- *     <Card.Media ... stretched />  ← optional
- *     <Card.LeadingItem ... />      ← optional (standalone)
- *     <Card.Content ... />          ← one or more
- *     <Card.Footer type="...">      ← optional
- *       …
- *     </Card.Footer>
- *   </Card>
- *
- * Responsive by default: the Card itself is fluid (`w-full`);
- * all padding, gap, and typography use the `--ds-*` tokens in
- * `styles.css`, so the component automatically adapts across
- * mobile, tablet, and desktop. Consumers constrain width with
- * a wrapper (e.g. `max-w-[400px]`) so a card sized for desktop
- * still collapses gracefully on a phone.
- * ────────────────────────────────────────────────────────────── */
-const CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(
-  { className, children, dir: dirProp, direction, ...rest },
-  ref,
-) {
-  const dir = dirProp ?? direction;
-  return (
-    <div
-      ref={ref}
-      dir={dir}
-      data-slot="card"
-      className={cn(CARD.root, className)}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-});
-
-/* ── Compound export ─────────────────────────────────────────── */
-type CardComponent = typeof CardRoot & {
-  Header: typeof CardHeader;
-  Media: typeof CardMedia;
-  Content: typeof CardContent;
-  Footer: typeof CardFooter;
-  LeadingItem: typeof CardLeadingItem;
-};
-
-const Card = CardRoot as CardComponent;
-Card.Header = CardHeader;
-Card.Media = CardMedia;
-Card.Content = CardContent;
-Card.Footer = CardFooter;
-Card.LeadingItem = CardLeadingItem;
-
-export { Card };

package/src/components/Card/Card.types.ts

@@ -1,11 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-/* ── Card root ──────────────────────────────────────────────── */
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  /** Render children inside the card surface (radius, padding, bg). */
-  children?: ReactNode;
-  /** Direction — applied to the root and drives RTL layout. */
-  dir?: 'ltr' | 'rtl';
-  /** @deprecated Use `dir` instead. */
-  direction?: 'ltr' | 'rtl';
-}

package/src/components/Card/Card.variants.ts

@@ -1,30 +0,0 @@
-/* ──────────────────────────────────────────────────────────────
- * Card tokens — sourced from Figma node 4407:37825.
- *
- * Container:
- *   bg                  Background/background-card  (#fff light, dark surface)
- *   radius              Radius/radius-16            (16)
- *   padding             Global/spacing-2xl          (20)
- *   internal gap        Global/spacing-xl           (16)
- *
- * Every sub-slot (header, media, content, footer, leading item)
- * lives in its own sibling component and owns its own tokens.
- * This file intentionally contains only the outer container
- * styles.
- *
- * Responsive: the card itself is fluid (`w-full`). Consumers
- * constrain width via wrapper or `className`. Mobile / tablet /
- * desktop spacing and typography automatically scale because
- * every padding, gap, and font-size uses a `--ds-*` token
- * defined in `styles.css`.
- * ────────────────────────────────────────────────────────────── */
-
-export const CARD = {
-  root: [
-    'flex w-full flex-col min-w-[250px]',
-    'gap-spacing-xl p-spacing-2xl',
-    'rounded-[16px]',
-    'bg-white dark:bg-[rgba(31,42,55,1)]',
-    'text-start',
-  ].join(' '),
-} as const;

package/src/components/Card/index.ts

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

package/src/components/CardContent/CardContent.tsx

@@ -1,178 +0,0 @@
-'use client';
-
-import { forwardRef, type ChangeEvent, type ReactNode } from 'react';
-import { cn } from '../../lib/cn';
-import { CardLeadingItem } from '../CardLeadingItem';
-import { Checkbox } from '../Checkbox';
-import type { CardContentProps } from './CardContent.types';
-import {
-  CHECKBOX_OVERLAY_BASE,
-  CHECKBOX_OVERLAY_EDGE,
-  CONTENT_ALIGN,
-  CONTENT_TEXT_ALIGN,
-  HELPER_CLASS,
-  LABEL_CLASS,
-  ROOT_BASE,
-  ROOT_CONTENT,
-  ROOT_USER,
-  SUPPORTING_CLASS,
-  TEXT_COLUMN,
-  USER_AVATAR_TEXT,
-} from './CardContent.variants';
-
-/**
- * CardContent — the label / helper / supporting text block of a card, with a
- * matching leading item and (optionally) an overlay checkbox or a trailing
- * status tag. Two top-level shapes:
- *
- * - `type="content"` — stacked column with featured-icon leading item, three
- *   text tiers, and an absolutely-positioned `Checkbox` overlay opposite the
- *   leading item. Supports `start` / `center` / `end` placement.
- *
- * - `type="user"`    — inline row: avatar on one edge, `label + helperText`
- *   in the middle, and a trailing `Chip` tag on the opposite edge.
- *
- * Built on top of `CardLeadingItem`, our `Checkbox`, `Chip`, and `Avatar` —
- * no new primitives.
- */
-export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
-  function CardContent(
-    {
-      type = 'content',
-      contentPlacement = 'start',
-      label,
-      helperText,
-      supportingText,
-      leadingItem,
-      tag,
-      showCheckbox = true,
-      checked,
-      checkboxDisabled,
-      indeterminate,
-      onCheckedChange,
-      checkboxAriaLabel = 'Select',
-      dir: dirProp,
-      rtl = false,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
-    const isRtl = dir === 'rtl';
-
-    const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>) => {
-      onCheckedChange?.(e.target.checked);
-    };
-
-    /* ── USER layout ───────────────────────────────────────── */
-    if (type === 'user') {
-      const userLeading: ReactNode = leadingItem !== undefined
-        ? leadingItem
-        : (
-          <CardLeadingItem
-            type="avatar"
-            avatar={{ size: 'xl' }}
-          />
-        );
-
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="card-content"
-          data-type="user"
-          className={cn(ROOT_BASE, ROOT_USER, className)}
-          {...rest}
-        >
-          <div className={USER_AVATAR_TEXT}>
-            {userLeading}
-            {(label != null || helperText != null) ? (
-              <div
-                data-slot="text"
-                className={cn(TEXT_COLUMN, isRtl && 'text-end')}
-              >
-                {label != null ? <p className={LABEL_CLASS}>{label}</p> : null}
-                {helperText != null ? (
-                  <p className={HELPER_CLASS}>{helperText}</p>
-                ) : null}
-              </div>
-            ) : null}
-          </div>
-          {tag != null ? (
-            <div data-slot="tag" className="flex-shrink-0">
-              {tag}
-            </div>
-          ) : null}
-        </div>
-      );
-    }
-
-    /* ── CONTENT layout ────────────────────────────────────── */
-    const contentLeading: ReactNode = leadingItem !== undefined
-      ? leadingItem
-      : (
-        <CardLeadingItem
-          type="featured-icon"
-          featuredIconVariant="outline"
-        />
-      );
-
-    const textAlignClass =
-      isRtl && contentPlacement === 'start'
-        ? 'text-end'
-        : !isRtl && contentPlacement === 'end'
-          ? 'text-end'
-          : CONTENT_TEXT_ALIGN[contentPlacement];
-
-    return (
-      <div
-        ref={ref}
-        dir={dir}
-        data-slot="card-content"
-        data-type="content"
-        data-placement={contentPlacement}
-        className={cn(
-          ROOT_BASE,
-          ROOT_CONTENT,
-          CONTENT_ALIGN[contentPlacement],
-          className,
-        )}
-        {...rest}
-      >
-        {contentLeading}
-
-        {(label != null || helperText != null || supportingText != null) ? (
-          <div data-slot="text" className={cn(TEXT_COLUMN, textAlignClass)}>
-            {label != null ? <p className={LABEL_CLASS}>{label}</p> : null}
-            {helperText != null ? (
-              <p className={HELPER_CLASS}>{helperText}</p>
-            ) : null}
-            {supportingText != null ? (
-              <p className={SUPPORTING_CLASS}>{supportingText}</p>
-            ) : null}
-          </div>
-        ) : null}
-
-        {showCheckbox ? (
-          <div
-            data-slot="checkbox-overlay"
-            className={cn(
-              CHECKBOX_OVERLAY_BASE,
-              CHECKBOX_OVERLAY_EDGE[contentPlacement],
-            )}
-          >
-            <Checkbox
-              size="md"
-              checked={checked}
-              disabled={checkboxDisabled}
-              indeterminate={indeterminate}
-              aria-label={checkboxAriaLabel}
-              onChange={handleCheckboxChange}
-            />
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);

package/src/components/CardContent/CardContent.types.ts

@@ -1,70 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-/**
- * Visual type of the content block.
- * - `content` — vertical block: leading item / label / helper / supporting / checkbox.
- * - `user`    — horizontal row: avatar + label/helper + end tag (Chip).
- */
-export type CardContentType = 'content' | 'user';
-
-/**
- * Horizontal placement of the leading item and text block (only applies to
- * `type="content"`). `user` is always start-aligned.
- */
-export type CardContentPlacement = 'start' | 'center' | 'end';
-
-export interface CardContentProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /** Which block layout to render. @default 'content' */
-  type?: CardContentType;
-  /**
-   * Horizontal placement for `type="content"`. Drives the alignment of the
-   * leading item, the text block, and the checkbox position. Ignored for
-   * `type="user"`.
-   * @default 'start'
-   */
-  contentPlacement?: CardContentPlacement;
-
-  /* ── Text ─────────────────────────────────────────────────── */
-  /** Title label (bold). */
-  label?: ReactNode;
-  /** Supporting helper text under the label. */
-  helperText?: ReactNode;
-  /** Tertiary supporting text under the helper text (only `type="content"`). */
-  supportingText?: ReactNode;
-
-  /* ── Slots ────────────────────────────────────────────────── */
-  /**
-   * Leading node rendered on the start edge.
-   * Defaults to:
-   * - `type="content"` → `<CardLeadingItem type="featured-icon" featuredIconVariant="outline" />`
-   * - `type="user"`    → `<CardLeadingItem type="avatar" avatar={{ size: 'xl' }} />`
-   * Pass `null` to hide the leading item.
-   */
-  leadingItem?: ReactNode;
-  /**
-   * End-edge tag rendered in the `user` layout — typically a `<Chip>`.
-   * Ignored by `type="content"`.
-   */
-  tag?: ReactNode;
-
-  /* ── Checkbox (Content type only) ─────────────────────────── */
-  /** Show a checkbox overlay (only `type="content"`). @default true */
-  showCheckbox?: boolean;
-  /** Controlled checked state for the overlay checkbox. */
-  checked?: boolean;
-  /** Disabled state for the overlay checkbox. */
-  checkboxDisabled?: boolean;
-  /** Indeterminate visual state for the overlay checkbox. */
-  indeterminate?: boolean;
-  /** Fires when the checkbox toggles. */
-  onCheckedChange?: (checked: boolean) => void;
-  /** Accessible label for the overlay checkbox. @default 'Select' */
-  checkboxAriaLabel?: string;
-
-  /* ── Direction ────────────────────────────────────────────── */
-  /** Direction — applied to the root and drives RTL layout. */
-  dir?: 'ltr' | 'rtl';
-  /** @deprecated Use `dir="rtl"` instead. */
-  rtl?: boolean;
-}

package/src/components/CardContent/CardContent.variants.ts

@@ -1,90 +0,0 @@
-import type { CardContentPlacement } from './CardContent.types';
-
-/* ──────────────────────────────────────────────────────────────
- * CardContent — class-name maps.
- *
- * Color values are sourced from the Figma variables bound to the
- * _Card Content frame (JnxIDV6Ev4yznMM0njgo5i → 4410:34369). Values
- * that don't map to an existing global token are kept as rgba
- * literals with the Figma variable name in a comment. Dark-mode
- * pairs accompany every text surface.
- * ────────────────────────────────────────────────────────────── */
-
-/** Shared root — relative so the checkbox can sit absolutely. */
-export const ROOT_BASE = 'relative flex w-full';
-
-/* ── Content type ─────────────────────────────────────────────── */
-
-/** Root flex direction for `type="content"` — stacked column. */
-export const ROOT_CONTENT = 'flex-col gap-spacing-xl';
-
-/** Horizontal alignment per placement (Content type only). */
-export const CONTENT_ALIGN: Record<CardContentPlacement, string> = {
-  start: 'items-start',
-  center: 'items-center',
-  end: 'items-end',
-};
-
-/** Text alignment per placement (Content type only). */
-export const CONTENT_TEXT_ALIGN: Record<CardContentPlacement, string> = {
-  start: 'text-start',
-  center: 'text-center',
-  end: 'text-end',
-};
-
-/* ── User type ────────────────────────────────────────────────── */
-
-/** Root flex direction for `type="user"` — single row. */
-export const ROOT_USER = 'flex-row items-center gap-spacing-lg';
-
-/** Avatar + text container used by User type (takes available space). */
-export const USER_AVATAR_TEXT =
-  'flex flex-1 min-w-0 items-center gap-spacing-md';
-
-/* ── Text block (both types) ──────────────────────────────────── */
-
-export const TEXT_COLUMN =
-  'flex flex-col items-start justify-center gap-spacing-xxs w-full min-w-0';
-
-export const LABEL_CLASS = [
-  'm-0 w-full',
-  // text-lg / Bold / 28 LH
-  'text-text-lg font-[700] leading-[28px]',
-  // text-display — --color-display already handles dark via globals.css
-  'text-color-display',
-].join(' ');
-
-export const HELPER_CLASS = [
-  'm-0 w-full',
-  // text-md / Regular / 24 LH
-  'text-text-md font-[400] leading-[24px]',
-  // text-primary-paragraph (#384250)
-  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
-].join(' ');
-
-export const SUPPORTING_CLASS = [
-  'm-0 w-full',
-  // text-sm / Regular / 20 LH
-  'text-text-sm font-[400] leading-[20px]',
-  // text-secondary-paragraph (#6c737f)
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
-].join(' ');
-
-/* ── Checkbox overlay (Content type only) ─────────────────────── */
-
-/**
- * The Figma absolute-positions a 20 × 20 checkbox at the top of the content,
- * opposite the leading item. We use logical offsets so it flips with `dir`:
- *   - `start` / `center` placement → checkbox sits on the `end` edge
- *     (right in LTR, left in RTL)
- *   - `end` placement              → checkbox sits on the `start` edge
- *     (left in LTR, right in RTL)
- */
-export const CHECKBOX_OVERLAY_BASE =
-  'absolute top-0 flex-shrink-0';
-
-export const CHECKBOX_OVERLAY_EDGE: Record<CardContentPlacement, string> = {
-  start: 'end-0',
-  center: 'end-0',
-  end: 'start-0',
-};

package/src/components/CardContent/index.ts

@@ -1,6 +0,0 @@
-export { CardContent } from './CardContent';
-export type {
-  CardContentProps,
-  CardContentType,
-  CardContentPlacement,
-} from './CardContent.types';