sdaia-ui 1.0.1

package/src/components/FooterItem/FooterItem.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { FooterItemProps } from './FooterItem.types';
+import {
+  MAIN_TEXT_DEFAULT,
+  MAIN_TEXT_BRAND,
+  SECONDARY_TEXT_DEFAULT,
+  SECONDARY_TEXT_BRAND,
+  ACTION_ICON_DEFAULT,
+  ACTION_ICON_BRAND,
+  CARD_SELECTED_DEFAULT,
+  CARD_HOVER_DEFAULT,
+  CARD_SELECTED_BRAND,
+  CARD_HOVER_BRAND,
+  CARD_BASE,
+  OUTER_BASE,
+  CARD_FOCUS,
+} from './FooterItem.variants';
+import { PlayIcon } from '../../icons/IconFactory';
+import { Avatar } from '../Avatar';
+
+/**
+ * FooterItem
+ *
+ * A sidebar footer item showing the currently logged-in user. Displays a
+ * circular photo avatar, a primary name label, an email/subtitle, and a
+ * trailing action icon.
+ *
+ * This is structurally identical to HeaderItem — same layout, spacing, and
+ * color tokens — but uses a user photo avatar (`Avatar type="image"`) instead
+ * of an icon placeholder.
+ *
+ * ── Sizes ─────────────────────────────────────────────────────────────────
+ *   `large` — full row (avatar + text + action). Fills the container width.
+ *   `small` — avatar only (collapsed sidebar). Fits content.
+ *
+ * ── Variants ──────────────────────────────────────────────────────────────
+ *   `default` — dark text on light/neutral sidebar backgrounds.
+ *   `brand`   — white text for placement on dark/brand-coloured sidebars.
+ *
+ * ── States ────────────────────────────────────────────────────────────────
+ *   Unselected  → transparent card, subtle :hover tint
+ *   Selected    → solid card background (`selected` prop)
+ *   Focus       → 2px green ring on the inner card (keyboard accessible)
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────
+ *   Direction-aware. In `dir="rtl"` context the avatar moves to the
+ *   trailing (right) edge and the action icon to the leading (left) edge
+ *   via `rtl:flex-row-reverse` on the inner card.
+ *
+ * @example
+ * // Unselected user row
+ * <FooterItem mainText="User Name" secondaryText="user@example.com" avatarSrc="/avatar.jpg" />
+ *
+ * // Active / selected user row
+ * <FooterItem mainText="User Name" secondaryText="user@example.com" avatarSrc="/avatar.jpg" selected />
+ *
+ * // Brand style (on dark sidebar)
+ * <FooterItem variant="brand" mainText="User Name" secondaryText="user@example.com" />
+ *
+ * // Collapsed sidebar
+ * <FooterItem size="small" avatarSrc="/avatar.jpg" />
+ */
+export const FooterItem = forwardRef<HTMLElement, FooterItemProps>(function FooterItem(
+  {
+    size = 'large',
+    variant = 'default',
+    selected = false,
+    mainText,
+    secondaryText,
+    avatarSrc,
+    avatarAlt = '',
+    actionIcon,
+    showAction,
+    href,
+    onClick,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const isLarge = size === 'large';
+  const isDefault = variant === 'default';
+
+  /* ── Derived display flags ───────────────────────────────────────────── */
+  const shouldShowAction = isLarge && showAction !== false && actionIcon !== null;
+  const resolvedAction = actionIcon ?? <PlayIcon aria-hidden="true" />;
+
+  /* ── Card background resolution ─────────────────────────────────────── */
+  /* Priority: selected > hover (CSS pseudo). */
+  const cardBg = selected
+    ? isDefault
+      ? CARD_SELECTED_DEFAULT
+      : CARD_SELECTED_BRAND
+    : isDefault
+      ? CARD_HOVER_DEFAULT
+      : CARD_HOVER_BRAND;
+
+  /* ── Avatar chip ─────────────────────────────────────────────────────── */
+  // Uses Avatar type="image" size="md" — 32px outer, rounded-full, white ring.
+  // When avatarSrc is omitted, Avatar renders a gray placeholder automatically.
+  const avatarEl = (
+    <Avatar
+      data-slot="footer-item-avatar"
+      type="image"
+      size="md"
+      shape="round"
+      src={avatarSrc}
+      alt={avatarAlt}
+    />
+  );
+
+  /* ── Inner visual card ───────────────────────────────────────────────── */
+  const card = (
+    <div
+      data-slot="footer-item-card"
+      className={cn(
+        CARD_BASE,
+        /* Large: gap between children, full width */
+        isLarge ? 'gap-spacing-md w-full' : 'gap-[0px]',
+        cardBg,
+        CARD_FOCUS,
+      )}
+    >
+      {avatarEl}
+
+      {/* Text block — large only */}
+      {isLarge && (
+        <div
+          data-slot="footer-item-text"
+          className="flex flex-col flex-1 min-w-0 items-start"
+        >
+          {mainText && (
+            <p
+              data-slot="footer-item-main"
+              className={cn(
+                'w-full truncate',
+                isDefault ? MAIN_TEXT_DEFAULT : MAIN_TEXT_BRAND,
+              )}
+            >
+              {mainText}
+            </p>
+          )}
+          {secondaryText && (
+            <p
+              data-slot="footer-item-secondary"
+              className={cn(
+                'w-full truncate',
+                isDefault ? SECONDARY_TEXT_DEFAULT : SECONDARY_TEXT_BRAND,
+              )}
+            >
+              {secondaryText}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Trailing action icon — large only */}
+      {shouldShowAction && (
+        <span
+          data-slot="footer-item-action"
+          className={isDefault ? ACTION_ICON_DEFAULT : ACTION_ICON_BRAND}
+        >
+          {resolvedAction}
+        </span>
+      )}
+    </div>
+  );
+
+  /* ── Outer wrapper classes ───────────────────────────────────────────── */
+  const outerCn = cn(
+    OUTER_BASE,
+    /* Large fills the container width */
+    isLarge && 'w-full',
+    className,
+  );
+
+  /* ── Link variant ────────────────────────────────────────────────────── */
+  if (href) {
+    return (
+      <a
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        data-slot="footer-item"
+        href={href}
+        onClick={onClick as React.MouseEventHandler<HTMLAnchorElement> | undefined}
+        className={outerCn}
+        {...(rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+      >
+        {card}
+      </a>
+    );
+  }
+
+  /* ── Button variant ──────────────────────────────────────────────────── */
+  return (
+    <button
+      ref={ref as React.Ref<HTMLButtonElement>}
+      type="button"
+      data-slot="footer-item"
+      onClick={onClick}
+      className={outerCn}
+      {...rest}
+    >
+      {card}
+    </button>
+  );
+});
+
+FooterItem.displayName = 'FooterItem';

package/src/components/FooterItem/FooterItem.types.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Visual size of the FooterItem. Large shows text + action; small shows avatar only. */
+export type FooterItemSize = 'large' | 'small';
+
+/**
+ * Style (background context) of the FooterItem.
+ * - `default`  — dark text on light/neutral sidebar backgrounds
+ * - `brand`    — white text on dark/brand-colored sidebar backgrounds
+ */
+export type FooterItemVariant = 'default' | 'brand';
+
+export interface FooterItemProps extends HTMLAttributes<HTMLElement> {
+  /** Visual size. `large` shows name + email + action icon; `small` shows avatar only. */
+  size?: FooterItemSize;
+  /** Style context. `default` for light sidebars, `brand` for dark/brand sidebars. */
+  variant?: FooterItemVariant;
+  /**
+   * Whether the item is in its active/selected state.
+   * Selected items display a solid card background (default variant).
+   */
+  selected?: boolean;
+  /** Primary label — the user's name. */
+  mainText?: string;
+  /** Secondary label — e.g. email address or role. */
+  secondaryText?: string;
+  /** URL of the user's avatar image. Omit to show the default placeholder. */
+  avatarSrc?: string;
+  /** Alt text for the avatar image. Defaults to empty string. */
+  avatarAlt?: string;
+  /**
+   * Override the trailing action icon. Pass `null` to suppress it entirely.
+   * Defaults to the solid play chevron icon.
+   */
+  actionIcon?: ReactNode | null;
+  /**
+   * Control visibility of the trailing action icon (large size only).
+   * Defaults to `true`. Ignored for small size.
+   */
+  showAction?: boolean;
+  /** Render as an `<a>` element with this href instead of a `<button>`. */
+  href?: string;
+  /** Click handler. Works on both `<button>` and `<a>` variants. */
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}

package/src/components/FooterItem/FooterItem.variants.ts

@@ -0,0 +1,139 @@
+/**
+ * FooterItem.variants.ts
+ *
+ * Token mapping from Figma node 4920-60300 (_Footer Item).
+ *
+ * Structurally identical to HeaderItem — same layout, spacing, and color tokens.
+ * The only visual distinction is that FooterItem renders a user photo avatar
+ * (Avatar type="image") rather than an icon placeholder (Avatar type="icon").
+ *
+ * ── Sizes ────────────────────────────────────────────────────────────────────
+ *   large — avatar + main text + secondary text + action icon, w-full
+ *   small — avatar only, fits content
+ *
+ * ── Variants ─────────────────────────────────────────────────────────────────
+ *   default — dark text for light/neutral sidebar backgrounds
+ *   brand   — white text for dark/brand-colored sidebar backgrounds
+ *
+ * ── States ───────────────────────────────────────────────────────────────────
+ *   unselected (hover) — no card bg; subtle :hover tint
+ *   selected (active)  — solid bg card (default variant only)
+ *   focus-visible      — green ring via group-focus-visible on inner card
+ */
+
+/* ── Main text — font-[600], text-text-sm, leading-[20px] ─────────────────── */
+
+/** Main label — default variant. Figma: Text/text-display #1f2a37 */
+export const MAIN_TEXT_DEFAULT = [
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+  'font-[600] text-text-sm leading-[20px]',
+].join(' ');
+
+/** Main label — brand variant. Figma: Text/text-oncolor-primary #ffffff */
+export const MAIN_TEXT_BRAND = [
+  'text-white dark:text-white',
+  'font-[600] text-text-sm leading-[20px]',
+].join(' ');
+
+/* ── Secondary text — font-[400], text-text-xs, leading-[16px] ────────────── */
+
+/** Subtitle — default variant. Figma: Text/text-secondary-paragraph #6c737f */
+export const SECONDARY_TEXT_DEFAULT = [
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+  'font-[400] text-text-xs leading-[16px]',
+].join(' ');
+
+/** Subtitle — brand variant. Figma: Text/text-oncolor-secondary rgba(255,255,255,0.8) */
+export const SECONDARY_TEXT_BRAND = [
+  'text-[rgba(255,255,255,0.8)] dark:text-[rgba(255,255,255,0.8)]',
+  'font-[400] text-text-xs leading-[16px]',
+].join(' ');
+
+/* ── Action icon color ───────────────────────────────────────────────────── */
+
+/** Trailing action icon — default variant. Figma: Icon/icon-neutral #384250 */
+export const ACTION_ICON_DEFAULT = [
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+  'flex-shrink-0 inline-flex items-center justify-center size-icon-md',
+].join(' ');
+
+/** Trailing action icon — brand variant. Figma: Icon/icon-oncolor #ffffff */
+export const ACTION_ICON_BRAND = [
+  'text-white dark:text-white',
+  'flex-shrink-0 inline-flex items-center justify-center size-icon-md',
+].join(' ');
+
+/* ── Card backgrounds ─────────────────────────────────────────────────────── */
+
+/**
+ * Selected card background — default variant.
+ * Figma: Background/background-body #f9fafb
+ */
+export const CARD_SELECTED_DEFAULT = [
+  'bg-[rgba(249,250,251,1)]',
+  'dark:bg-[rgba(31,41,55,1)]',
+].join(' ');
+
+/**
+ * Hover card background — default variant (subtle tint on hover).
+ */
+export const CARD_HOVER_DEFAULT = [
+  'hover:bg-[rgba(243,244,246,0.65)]',
+  'dark:hover:bg-[rgba(55,65,81,0.35)]',
+].join(' ');
+
+/**
+ * Selected card background — brand variant.
+ * Figma: Button/button-background-transparent-default = rgba(255,255,255,0) → transparent.
+ * No visible card on brand; selection indicated by text emphasis only.
+ */
+export const CARD_SELECTED_BRAND = '';
+
+/**
+ * Hover card background — brand variant (subtle white overlay on dark bg).
+ */
+export const CARD_HOVER_BRAND = 'hover:bg-[rgba(255,255,255,0.08)]';
+
+/* ── Inner card base layout ───────────────────────────────────────────────── */
+
+/**
+ * Inner visual card shared by all variants.
+ * Height 52px (Figma hardcoded) · padding spacing-md · radius 8px.
+ * `rtl:flex-row-reverse` flips avatar ↔ action position in RTL layouts.
+ */
+export const CARD_BASE = [
+  'h-[52px] flex items-center',
+  'p-spacing-md rounded-[8px]',
+  'motion-feedback',
+  'rtl:flex-row-reverse',
+].join(' ');
+
+/* ── Outer interactive wrapper ────────────────────────────────────────────── */
+
+/**
+ * Outer button / anchor element.
+ * `p-spacing-md` creates breathing room outside the card.
+ * `group` enables `group-focus-visible:*` on the inner card.
+ * `focus-visible:outline-none` suppresses the default browser outline
+ * so only our custom ring (on the inner card) is visible.
+ */
+export const OUTER_BASE = [
+  'relative flex flex-col items-start',
+  'p-spacing-md',
+  'cursor-pointer select-none',
+  'group focus-visible:outline-none',
+  'motion-feedback',
+].join(' ');
+
+/* ── Focus ring — on inner card via group ─────────────────────────────────── */
+
+/**
+ * Applied to the inner card div.
+ * Activates when the outer button/anchor receives :focus-visible.
+ * Matches the design system focus ring: 2px green rgba(27,131,84,0.7).
+ */
+export const CARD_FOCUS = [
+  'group-focus-visible:ring-2',
+  'group-focus-visible:ring-[rgba(27,131,84,0.7)]',
+  'group-focus-visible:ring-offset-0',
+].join(' ');

package/src/components/FooterItem/index.ts

@@ -0,0 +1,2 @@
+export { FooterItem } from './FooterItem';
+export type { FooterItemProps, FooterItemSize, FooterItemVariant } from './FooterItem.types';

package/src/components/FooterLinkList/FooterLinkList.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { forwardRef, useId } from 'react';
+import { cn } from '../../lib/cn';
+import { Link } from '../Link';
+import { Divider } from '../Divider';
+import type { FooterLinkListProps } from './FooterLinkList.types';
+import {
+  CONTAINER_BASE,
+  LABEL_CLASSES,
+  LINK_WRAPPER_BASE,
+  SINGLE_LINK_GAP,
+  MULTI_LINK_GAP,
+} from './FooterLinkList.variants';
+
+/**
+ * FooterLinkList
+ *
+ * A labelled, divided column of footer navigation links. Mirrors the Figma
+ * spec (node 5156:60636) which exposes RTL × 1–6 links × optional label ×
+ * optional divider.
+ *
+ * ── Composition ───────────────────────────────────────────────────────────
+ *   Label    → native `<p>` (no existing design-system component required).
+ *   Divider  → reuses `<Divider lineType="horizontal" color="neutral"
+ *                              thickness="hairline" length="full" />`.
+ *   Links    → reuses `<Link variant="primary" size="lg" />` for each item.
+ *              All interactive states (hover / active / focus / visited /
+ *              disabled) are owned by `<Link>` — nothing re-implemented here.
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────
+ *   Pass `rtl` to flip the cross-axis alignment and inline padding. Uses
+ *   logical properties (`ps-*` / `pe-*`) so the same classes work in both
+ *   directions — `pe-spacing-3xl` becomes right-padding in LTR and
+ *   left-padding in RTL automatically.
+ *
+ * ── Dark mode ─────────────────────────────────────────────────────────────
+ *   Handled automatically via token-backed semantic classes
+ *   (`text-color-display`) and the dark-mode classes inside the reused
+ *   `<Divider>` and `<Link>` components.
+ *
+ * @example
+ * <FooterLinkList
+ *   label="Group Label"
+ *   items={[
+ *     { label: 'Footer Link', href: '#' },
+ *     { label: 'Footer Link', href: '#' },
+ *   ]}
+ * />
+ *
+ * @example // RTL
+ * <FooterLinkList
+ *   rtl
+ *   label="عنوان المجموعة"
+ *   items={[{ label: 'رابط', href: '#' }]}
+ * />
+ */
+export const FooterLinkList = forwardRef<HTMLElement, FooterLinkListProps>(function FooterLinkList(
+  {
+    label,
+    divider = true,
+    items,
+    rtl = false,
+    className,
+    'aria-labelledby': ariaLabelledByProp,
+    ...rest
+  },
+  ref,
+) {
+  const generatedId = useId();
+  const hasLabel = Boolean(label);
+  const labelId = hasLabel ? (ariaLabelledByProp || `${generatedId}-label`) : undefined;
+  const isSingle = items.length <= 1;
+  const showDivider = divider && hasLabel;
+
+  return (
+    <nav
+      ref={ref}
+      dir={rtl ? 'rtl' : undefined}
+      aria-labelledby={labelId}
+      data-slot="footer-link-list"
+      className={cn(
+        CONTAINER_BASE,
+        rtl ? 'items-end' : 'items-start',
+        className,
+      )}
+      {...rest}
+    >
+      {hasLabel && (
+        <p
+          id={labelId}
+          data-slot="footer-link-list-label"
+          className={cn(LABEL_CLASSES, rtl ? 'text-right' : 'text-left')}
+        >
+          {label}
+        </p>
+      )}
+
+      {showDivider && (
+        <Divider
+          lineType="horizontal"
+          color="neutral"
+          thickness="hairline"
+          length="full"
+          data-slot="footer-link-list-divider"
+        />
+      )}
+
+      {items.length > 0 && (
+        <div
+          data-slot="footer-link-list-items"
+          className={cn(
+            LINK_WRAPPER_BASE,
+            rtl ? 'items-end' : 'items-start',
+            isSingle ? SINGLE_LINK_GAP : MULTI_LINK_GAP,
+          )}
+        >
+          {items.map((item, index) => {
+            const { id, label: itemLabel, visited, disabled, ...anchorRest } = item;
+            return (
+              <Link
+                key={id ?? index}
+                size="lg"
+                variant="primary"
+                visited={visited}
+                disabled={disabled}
+                data-slot="footer-link-list-link"
+                {...anchorRest}
+              >
+                {itemLabel}
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </nav>
+  );
+});
+
+FooterLinkList.displayName = 'FooterLinkList';

package/src/components/FooterLinkList/FooterLinkList.types.ts

@@ -0,0 +1,46 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+
+/**
+ * A single link item rendered inside a `FooterLinkList`.
+ *
+ * Maps 1:1 onto the underlying `<Link>` component props. Extra anchor
+ * attributes (`target`, `rel`, etc.) are passed through.
+ */
+export interface FooterLinkListItem
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'onClick'> {
+  /** Stable key for list rendering. */
+  id?: string;
+  /** Visible link label. */
+  label: ReactNode;
+  /** Navigation target. */
+  href?: string;
+  /** Click handler. */
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  /** Controlled visited state (passes through to `<Link>`). */
+  visited?: boolean;
+  /** Disables the link (passes through to `<Link>`). */
+  disabled?: boolean;
+}
+
+export interface FooterLinkListProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+  /**
+   * Optional group heading shown above the divider.
+   * When omitted, the heading and its divider are both hidden.
+   */
+  label?: ReactNode;
+  /**
+   * Show the hairline divider between the label and the link list.
+   * Default `true`. Has no effect when `label` is omitted.
+   */
+  divider?: boolean;
+  /**
+   * Link items to render. Figma supports 1–6 items per list.
+   */
+  items: FooterLinkListItem[];
+  /**
+   * Mirror the layout for RTL languages. Sets `dir="rtl"` on the container
+   * and flips alignment and inline padding so the list sits flush with the
+   * inline-end edge.
+   */
+  rtl?: boolean;
+}

package/src/components/FooterLinkList/FooterLinkList.variants.ts

@@ -0,0 +1,64 @@
+/**
+ * FooterLinkList.variants.ts
+ *
+ * Token mapping from Figma node 5156:60636 (_Footer Link List).
+ *
+ * Structure (vertical stack, fixed 160 px width):
+ *   [ Group Label ]          ← optional
+ *   [ Divider     ]          ← optional, only when label present
+ *   [ Link Wrapper ]         ← 1-6 links
+ *
+ * No interactive states of its own — hover / focus / active / visited /
+ * disabled are all owned by the inner `<Link>` components.
+ *
+ * ── Spacing (Figma → token) ───────────────────────────────────────────────
+ *   Outer vertical gap             12 px  → gap-spacing-lg
+ *   Link-wrapper inline-end pad    24 px  → pe-spacing-3xl   (RTL-safe)
+ *   Link-wrapper inline-start pad   0     → ps-spacing-none
+ *   Gap between links              16 px  → gap-spacing-xl   (desktop=16px)
+ *
+ * ── Typography — Group Label ──────────────────────────────────────────────
+ *   16 px / 500 / 24 px line-height → text-text-md font-[500] leading-[24px]
+ *   Figma: Text/text-display #1f2a37 → color-display token (light + dark)
+ */
+
+/**
+ * Root container — vertical flex stack, fixed 160 px width.
+ * Cross-axis alignment toggled by the `rtl` prop in the component.
+ */
+export const CONTAINER_BASE = [
+  'flex flex-col',
+  'gap-spacing-lg',
+  'w-[160px]',
+].join(' ');
+
+/**
+ * Group label text. Matches Figma "Text md/Medium" style on Text/text-display.
+ * `text-color-display` maps to #1f2a37 in light and the matching dark value
+ * in `globals.css` — no manual dark: override needed.
+ */
+export const LABEL_CLASSES = [
+  'text-color-display',
+  'text-text-md font-[500] leading-[24px]',
+  'min-w-full',
+].join(' ');
+
+/**
+ * Link wrapper (vertical flex column holding the `<Link>` items).
+ *
+ * Padding uses logical properties so RTL flips automatically:
+ *   LTR → pe = right, ps = left
+ *   RTL → pe = left,  ps = right
+ */
+export const LINK_WRAPPER_BASE = [
+  'flex flex-col',
+  'justify-center',
+  'ps-spacing-none pe-spacing-3xl',
+  'shrink-0',
+].join(' ');
+
+/** Zero gap used when exactly one link is rendered (matches Figma Value=1). */
+export const SINGLE_LINK_GAP = 'gap-spacing-none';
+
+/** 16 px gap between links for multi-link variants (Value=2..6). */
+export const MULTI_LINK_GAP = 'gap-spacing-xl';

package/src/components/FooterLinkList/index.ts

@@ -0,0 +1,2 @@
+export { FooterLinkList } from './FooterLinkList';
+export type { FooterLinkListProps, FooterLinkListItem } from './FooterLinkList.types';