sdaia-ui 1.0.1 → 1.0.2

package/src/components/FooterItem/FooterItem.tsx

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

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

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

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

package/src/components/FooterLinkList/FooterLinkList.tsx

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

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

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

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