sdaia-ui 1.0.1

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

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

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

package/src/components/Card/Card.tsx

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

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

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

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

package/src/components/CardContent/CardContent.tsx

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

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

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

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