sdaia-ui 1.0.1

package/src/components/XAxis/XAxis.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { XAxisProps } from './XAxis.types';
+import {
+  AXIS_LABELS,
+  CONTAINER_BASE,
+  CELL_BASE,
+  LABEL_COLOR,
+} from './XAxis.variants';
+
+/**
+ * XAxis
+ *
+ * A horizontal row of evenly-distributed text labels used as the x-axis of a
+ * chart. Each cell gets `flex: 1` so the labels always span the full container
+ * width regardless of count.
+ *
+ * Traced from Figma node 5441:77363 ("X-axis" frame).
+ *
+ * Data presets:
+ *   '3 Days'       →  Mon Tue Wed
+ *   '5 Work Days'  →  Mon … Fri
+ *   '7 Week Days'  →  Mon … Sun
+ *   '12 Months'    →  Jan … Dec
+ *
+ * RTL: set `rtl` prop — `dir="rtl"` on the container flips the flex row,
+ *   placing cell[0] on the right. `ps-spacing-4xl` automatically moves the
+ *   32 px start-padding to the right side. No DOM reordering needed.
+ *
+ * Dark mode: zero extra config — text colour swaps via `html.dark`.
+ *
+ * Spacing: `gap-spacing-3xl` and `ps-spacing-4xl` are responsive CSS vars
+ *   that scale mobile → tablet → desktop automatically (16→20→24 px gap,
+ *   20→24→32 px start-padding).
+ *
+ * @example
+ * <XAxis data="7 Week Days" />
+ * <XAxis data="12 Months" rtl />
+ */
+export const XAxis = forwardRef<HTMLDivElement, XAxisProps>(
+  function XAxis({ data = '3 Days', rtl = false, className, ...props }, ref) {
+    const labels = AXIS_LABELS[data];
+
+    return (
+      <div
+        ref={ref}
+        className={cn(CONTAINER_BASE, className)}
+        dir={rtl ? 'rtl' : undefined}
+        {...props}
+      >
+        {labels.map((label) => (
+          <div key={label} className={CELL_BASE}>
+            <p
+              className={cn('flex-1 text-center whitespace-nowrap', LABEL_COLOR)}
+            >
+              {label}
+            </p>
+          </div>
+        ))}
+      </div>
+    );
+  },
+);
+
+XAxis.displayName = 'XAxis';

package/src/components/XAxis/XAxis.types.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * The four data-density presets shipped in Figma node 5441:77363.
+ *
+ * | Value          | Labels rendered |
+ * |----------------|----------------|
+ * | '3 Days'       | Mon Tue Wed (3) |
+ * | '5 Work Days'  | Mon … Fri  (5) |
+ * | '7 Week Days'  | Mon … Sun  (7) |
+ * | '12 Months'    | Jan … Dec (12) |
+ */
+export type XAxisDataType = '3 Days' | '5 Work Days' | '7 Week Days' | '12 Months';
+
+export interface XAxisProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Which label set to render.
+   * @default '3 Days'
+   */
+  data?: XAxisDataType;
+
+  /**
+   * Render in right-to-left orientation.
+   * Setting `rtl` applies `dir="rtl"` on the container which causes CSS flex
+   * to reverse the visual order of cells (no DOM reordering needed) and swaps
+   * the inline-start padding to the right side automatically.
+   * @default false
+   */
+  rtl?: boolean;
+}

package/src/components/XAxis/XAxis.variants.ts

@@ -0,0 +1,77 @@
+/**
+ * XAxis.variants.ts
+ *
+ * All constants for the XAxis component.
+ * Traced from Figma node 5441:77363 (frame "X-axis").
+ *
+ * ── Color tokens (get_variable_defs) ──────────────────────────────────────────
+ *   Text/text-secondary-paragraph  →  #6c737f (light) / #9ca3af (dark)
+ *     Confirmed cross-referenced against ActivityItem, Metric, RadialStepper.
+ *
+ * ── Typography tokens ─────────────────────────────────────────────────────────
+ *   Font family:   Font Family/font-family-text = IBM Plex Sans Arabic (inherited)
+ *   Font weight:   Font Weight/font-weight-regular = 400
+ *   Font size:     Size/Text/typo-size-text-sm = 14px  → inline style (px)
+ *   Line height:   Line Height/Text/line-heights-text-sm = 20px → inline style
+ *
+ *   px values used directly (not rem) — root-font-size-agnostic.
+ *
+ * ── Spacing tokens (responsive via globals.css CSS vars) ──────────────────────
+ *   Global/spacing-3xl  →  gap-spacing-3xl
+ *     mobile 16px · tablet 20px · desktop 24px
+ *   Global/spacing-4xl  →  ps-spacing-4xl
+ *     mobile 20px · tablet 24px · desktop 32px
+ *   Global/spacing-none →  py-0 pe-0
+ */
+
+import type { XAxisDataType } from './XAxis.types';
+
+// ─── Label arrays (canonical LTR order) ───────────────────────────────────────
+// RTL display-reversal is handled purely in CSS via `dir="rtl"` on the container.
+
+export const AXIS_LABELS: Record<XAxisDataType, readonly string[]> = {
+  '3 Days':      ['Mon', 'Tue', 'Wed'],
+  '5 Work Days': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+  '7 Week Days': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  '12 Months':   ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+} as const;
+
+// ─── Container ────────────────────────────────────────────────────────────────
+/**
+ * Root flex row.
+ *
+ * gap-spacing-3xl  — Global/spacing-3xl (24px desktop, responsive smaller)
+ * ps-spacing-4xl   — padding-inline-start: 32px desktop; auto-swaps in RTL
+ * pe-0             — padding-inline-end: 0
+ * py-0             — padding-block: 0
+ *
+ * RTL: `dir="rtl"` on this element causes the browser to render flex items
+ * right-to-left, placing cell[0] on the right and cell[n-1] on the left.
+ * The ps-spacing-4xl padding also automatically shifts to the right side.
+ * No DOM manipulation is needed.
+ */
+export const CONTAINER_BASE =
+  'flex items-center w-full py-0 ps-spacing-4xl pe-0 gap-spacing-3xl';
+
+// ─── Cell ──────────────────────────────────────────────────────────────────────
+/**
+ * Each individual label cell.
+ * flex-1      — cells share available width equally (matches Figma flex-[1_0_0])
+ * min-w-0     — allows cells to shrink below content width
+ * min-h-0     — prevents implicit height expansion
+ */
+export const CELL_BASE = 'flex flex-1 items-center justify-center min-w-0 min-h-0';
+
+// ─── Label text ───────────────────────────────────────────────────────────────
+/**
+ * Light:  Text/text-secondary-paragraph = #6c737f
+ * Dark:   #9ca3af  (confirmed: ActivityItem, Metric, RadialStepper variants)
+ */
+export const LABEL_COLOR = 'text-[#6c737f] dark:text-[#9ca3af] text-text-sm font-[400]';
+
+/**
+ * Text sm / Regular — responsive via --ds-typo-text-sm CSS var.
+ * Mobile 10px → Tablet 12px → Desktop 14px.
+ * Utility class: text-text-sm (defined in globals.css @utility).
+ */
+export const LABEL_TYPO = 'text-text-sm font-[400]';

package/src/components/XAxis/index.ts

@@ -0,0 +1,2 @@
+export { XAxis } from './XAxis';
+export type { XAxisProps, XAxisDataType } from './XAxis.types';

package/src/components/YAxis/YAxis.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { YAxisProps } from './YAxis.types';
+import {
+  TICK_LABELS,
+  CONTAINER_HEIGHTS,
+  CONTAINER_BASE,
+  ROW_BASE,
+  LABEL_COLOR,
+} from './YAxis.variants';
+
+/**
+ * YAxis
+ *
+ * A vertical column of evenly-distributed numeric tick labels used as the
+ * y-axis of a chart. Labels are spaced with CSS `justify-between`, so the
+ * column height fully controls the tick density — the top label sits at the
+ * very top of the chart area, the bottom label at the very bottom.
+ *
+ * Traced from Figma node 5441:77423 ("Y-axis" frame).
+ *
+ * Tick presets (`value` prop):
+ *   '3'  →  100 · 50 · 0              (242 px default height)
+ *   '6'  →  250 · 200 · 150 · 100 · 50 · 0  (242 px)
+ *   '9'  →  400 · 350 · … · 50 · 0   (369 px default height)
+ *
+ * Custom labels: pass a `ticks` array to override the preset label strings
+ * while keeping the layout behaviour.
+ *
+ * Height override: pass a `style` or `className` with an explicit height to
+ * adapt the axis to any chart area (e.g. `style={{ height: '320px' }}`).
+ *
+ * RTL: set `rtl` prop — `dir="rtl"` is applied on the container, which flips
+ *   the flex-row direction of each tick row so `justify-end` pushes labels to
+ *   the physical **left** edge instead of the right. No DOM reordering.
+ *
+ * Dark mode: zero extra config — label colour swaps via `html.dark`.
+ *
+ * @example
+ * <YAxis value="9" />
+ * <YAxis value="6" ticks={['500', '250', '125', '62', '31', '0']} />
+ * <YAxis value="9" rtl />
+ * <YAxis value="9" style={{ height: '320px' }} />
+ */
+export const YAxis = forwardRef<HTMLDivElement, YAxisProps>(
+  function YAxis({ value = '9', ticks, rtl = false, className, style, ...props }, ref) {
+    const labels = ticks ?? TICK_LABELS[value];
+
+    return (
+      <div
+        ref={ref}
+        dir={rtl ? 'rtl' : undefined}
+        className={cn(CONTAINER_BASE, className)}
+        style={{ height: `${CONTAINER_HEIGHTS[value]}px`, ...style }}
+        {...props}
+      >
+        {labels.map((label, i) => (
+          <div
+            // Use index key — labels in a Y-axis are positional, not identity-based
+            // eslint-disable-next-line react/no-array-index-key
+            key={i}
+            className={ROW_BASE}
+          >
+            <p
+              className={cn('shrink-0 whitespace-nowrap', LABEL_COLOR)}
+            >
+              {label}
+            </p>
+          </div>
+        ))}
+      </div>
+    );
+  },
+);
+
+YAxis.displayName = 'YAxis';

package/src/components/YAxis/YAxis.types.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Number of evenly-distributed tick labels to render on the Y-axis.
+ *
+ * | Value | Labels rendered (top → bottom) | Default height |
+ * |-------|-------------------------------|----------------|
+ * | '3'   | 100 · 50 · 0                  | 242 px         |
+ * | '6'   | 250 · 200 · 150 · 100 · 50 · 0 | 242 px       |
+ * | '9'   | 400 · 350 · … · 50 · 0        | 369 px         |
+ *
+ * Note: value '3' and '6' share the same 242 px default height — labels are
+ * simply more spread out with fewer ticks.
+ */
+export type YAxisTickCount = '3' | '6' | '9';
+
+export interface YAxisProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Preset tick-count that controls both the labels rendered and the default
+   * container height.
+   * @default '9'
+   */
+  value?: YAxisTickCount;
+
+  /**
+   * Override the default label array for the chosen `value` preset.
+   * When supplied, these strings are rendered top-to-bottom instead of the
+   * Figma defaults.  Must be the same length as the tick count or any length
+   * you need for custom scales.
+   */
+  ticks?: string[];
+
+  /**
+   * Render in right-to-left orientation.
+   * `dir="rtl"` is applied to the container; each row uses `justify-end`
+   * which, in an RTL flex context, pushes the label to the physical left
+   * edge — matching the Figma RTL variants.
+   * @default false
+   */
+  rtl?: boolean;
+}

package/src/components/YAxis/YAxis.variants.ts

@@ -0,0 +1,94 @@
+/**
+ * YAxis.variants.ts
+ *
+ * All constants for the YAxis component.
+ * Traced from Figma node 5441:77423 (frame "Y-axis").
+ *
+ * ── Color tokens (get_variable_defs) ──────────────────────────────────────────
+ *   Text/text-secondary-paragraph  →  #6c737f (light) / #9ca3af (dark)
+ *     Cross-referenced: ActivityItem, Metric, RadialStepper, XAxis.
+ *
+ * ── Typography tokens ─────────────────────────────────────────────────────────
+ *   Font family:   Font Family/font-family-text = IBM Plex Sans Arabic (inherited)
+ *   Font weight:   Font Weight/font-weight-regular = 400
+ *   Font size:     Size/Text/typo-size-text-xs = 12px  → inline style (px)
+ *   Line height:   Line Height/Text/line-heights-text-xs = 18px → inline style
+ *
+ *   px values used directly (not rem) — root-font-size-agnostic.
+ *
+ * ── Spacing tokens (responsive via globals.css) ────────────────────────────────
+ *   Global/spacing-md  →  py-spacing-md
+ *     mobile 8px · tablet 8px · desktop 8px (constant at all breakpoints)
+ *
+ * ── Dimensions (hardcoded — no token in globals.css) ──────────────────────────
+ *   Container width : 24 px  (fixed, matches Figma)
+ *   Container height: 369 px for value="9"; 242 px for value="3" or "6"
+ *     These heights are set via inline style so they can be overridden by
+ *     consumers passing their own `style` prop.
+ */
+
+import type { YAxisTickCount } from './YAxis.types';
+
+// ─── Tick label presets ────────────────────────────────────────────────────────
+// Canonical top-to-bottom label arrays for each tick-count preset.
+// Override with the `ticks` prop for custom scales.
+
+export const TICK_LABELS: Record<YAxisTickCount, readonly string[]> = {
+  '3': ['100', '50', '0'],
+  '6': ['250', '200', '150', '100', '50', '0'],
+  '9': ['400', '350', '300', '250', '200', '150', '100', '50', '0'],
+} as const;
+
+// ─── Container heights ─────────────────────────────────────────────────────────
+// Applied via inline style so consumers can still override through className/style.
+// value="3" and value="6" share 242 px — fewer labels are simply more spread out.
+
+export const CONTAINER_HEIGHTS: Record<YAxisTickCount, number> = {
+  '3': 242,
+  '6': 242,
+  '9': 369,
+} as const;
+
+// ─── Container ─────────────────────────────────────────────────────────────────
+/**
+ * Root flex column.
+ *
+ * flex flex-col justify-between  — distributes rows evenly top-to-bottom
+ * py-spacing-md                  — 8 px padding on both block ends (all breakpoints)
+ * w-[24px]                       — fixed 24 px axis width from Figma
+ *
+ * RTL: `dir="rtl"` is applied on the root element. Child rows use
+ *   `justify-end` which, in an RTL flex row, pushes content to the physical
+ *   left edge — no DOM branching needed.
+ */
+export const CONTAINER_BASE = 'flex flex-col justify-between py-spacing-md w-[24px]';
+
+// ─── Row ───────────────────────────────────────────────────────────────────────
+/**
+ * Each individual tick row.
+ * flex justify-end  — pushes label to the right edge in LTR; to the left edge
+ *                     in RTL (because dir="rtl" reverses main-axis direction)
+ * items-center      — vertically centres the label text
+ * w-full shrink-0   — row spans full container width; never shrinks
+ */
+/**
+ * h-0 overflow-visible — zero-height row so `justify-between` places the
+ * row's midline (not its top edge) at the same position as the h-0 grid lines
+ * in BarChart. This makes the numeric label visually centred on the dashed line.
+ */
+export const ROW_BASE = 'flex w-full items-center justify-end shrink-0 h-0 overflow-visible';
+
+// ─── Label typography ──────────────────────────────────────────────────────────
+
+/**
+ * Light:  Text/text-secondary-paragraph = #6c737f
+ * Dark:   #9ca3af (Tailwind gray-400) — confirmed across multiple components
+ */
+export const LABEL_COLOR = 'text-[#6c737f] dark:text-[#9ca3af] text-text-xs font-[400]';
+
+/**
+ * Text xs / Regular — responsive via --ds-typo-text-xs CSS var.
+ * Mobile 8px → Tablet 10px → Desktop 12px.
+ * Utility class: text-text-xs (defined in globals.css @utility).
+ */
+export const LABEL_TYPO = 'text-text-xs font-[400]';

package/src/components/YAxis/index.ts

@@ -0,0 +1,2 @@
+export { YAxis } from './YAxis';
+export type { YAxisProps, YAxisTickCount } from './YAxis.types';

package/src/dga-icons.ts

@@ -0,0 +1,18 @@
+/**
+ * Subpath barrel: `sdaia-ui/dga-icons`.
+ *
+ * Re-exports every named data URL from `@platformscode/icons` — each
+ * export is a string like `data:image/svg+xml;utf8,<svg…>`. Pair with
+ * {@link DgaIcon} from the main `sdaia-ui` entry:
+ *
+ * ```tsx
+ * import { DgaIcon } from 'sdaia-ui';
+ * import { home01Stroke, userSolid } from 'sdaia-ui/dga-icons';
+ *
+ * <DgaIcon data={home01Stroke} size={24} />
+ * ```
+ *
+ * Thanks to the upstream package's `"sideEffects": false`, only the
+ * icons you actually import end up in your bundle.
+ */
+export * from '@platformscode/icons';

package/src/hooks/usePresence.ts

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * Keeps a component mounted through its exit animation, then unmounts it.
+ *
+ * Works hand-in-hand with the `data-motion` CSS animation system in
+ * `sdaia-ui/styles.css`. Set `data-motion` on the animated element
+ * based on `exiting`, then let this hook handle the unmount timing.
+ *
+ * @param open        — controlled open state from the parent
+ * @param exitDuration — how long (ms) to wait before unmounting; should match
+ *                       the CSS `--motion-duration-slow` (default: 300 ms)
+ *
+ * @returns
+ *   `mounted`  — whether the element should be in the DOM
+ *   `exiting`  — whether the exit animation is running (set `data-motion`
+ *                to the "out" variant while this is true)
+ *
+ * @example
+ * ```tsx
+ * const { mounted, exiting } = usePresence(open);
+ * if (!mounted) return null;
+ *
+ * const motionAttr = exiting ? 'slide-out-end' : 'slide-in-end';
+ * return <div data-motion={motionAttr}>…</div>;
+ * ```
+ */
+export function usePresence(
+  open: boolean,
+  exitDuration: number = 300,
+): { mounted: boolean; exiting: boolean } {
+  const [mounted, setMounted] = useState(open);
+  const [exiting, setExiting] = useState(false);
+
+  // Ref mirrors `mounted` so the effect closure always reads the live value
+  // without needing to re-register the effect.
+  const mountedRef = useRef(open);
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      // Cancel any in-progress exit (user re-opened before animation finished)
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      mountedRef.current = true;
+      setMounted(true);
+      setExiting(false);
+    } else if (mountedRef.current) {
+      // Start exit: keep mounted, mark as exiting, then unmount after delay
+      setExiting(true);
+      timerRef.current = setTimeout(() => {
+        mountedRef.current = false;
+        setMounted(false);
+        setExiting(false);
+        timerRef.current = null;
+      }, exitDuration);
+    }
+
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [open, exitDuration]);
+
+  return { mounted, exiting };
+}

package/src/icons/AIIcon.tsx

@@ -0,0 +1,34 @@
+import type { SVGProps } from 'react';
+
+/* ── 24×24 toolbar icons ────────────────────────────────────── */
+
+/**
+ * Undo icon (undo-03) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */
+
+export function AIIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M18 9.75C18.3137 9.75 18.5941 9.55479 18.7031 9.26074L18.9248 8.66309C19.2385 7.81531 19.3292 7.61421 19.4717 7.47168C19.6142 7.32915 19.8153 7.23851 20.6631 6.9248L21.2607 6.70313C21.5548 6.59408 21.75 6.31365 21.75 6C21.75 5.68635 21.5548 5.40592 21.2607 5.29688L20.6631 5.0752C19.8153 4.76149 19.6142 4.67085 19.4717 4.52832C19.3292 4.38579 19.2385 4.18469 18.9248 3.33691L18.7031 2.73926C18.5941 2.44521 18.3137 2.25 18 2.25C17.6863 2.25 17.4059 2.44521 17.2969 2.73926L17.0752 3.33691C16.7615 4.18469 16.6708 4.38579 16.5283 4.52832C16.3858 4.67085 16.1847 4.76149 15.3369 5.0752L14.7393 5.29688C14.4452 5.40592 14.25 5.68635 14.25 6C14.25 6.31365 14.4452 6.59408 14.7393 6.70313L15.3369 6.9248C16.1847 7.23851 16.3858 7.32915 16.5283 7.47168C16.6708 7.61421 16.7615 7.81531 17.0752 8.66309L17.2969 9.26074C17.4059 9.55479 17.6863 9.75 18 9.75ZM18 6.97656C17.8858 6.76584 17.7546 6.57691 17.5889 6.41113C17.4231 6.24536 17.2342 6.11415 17.0234 6C17.2342 5.88585 17.4231 5.75464 17.5889 5.58887C17.7546 5.4231 17.8858 5.23416 18 5.02344C18.1142 5.23416 18.2454 5.4231 18.4111 5.58887C18.5769 5.75464 18.7658 5.88585 18.9766 6C18.7658 6.11415 18.5769 6.24536 18.4111 6.41113C18.2454 6.57691 18.1142 6.76584 18 6.97656ZM10 21.75C10.3137 21.75 10.5941 21.5548 10.7031 21.2607L11.2188 19.8662C11.919 17.9739 12.204 17.2511 12.7275 16.7275C13.2511 16.204 13.9739 15.919 15.8662 15.2188L17.2607 14.7031C17.5548 14.5941 17.75 14.3137 17.75 14C17.75 13.6863 17.5548 13.4059 17.2607 13.2969L15.8662 12.7813C13.9739 12.081 13.2511 11.796 12.7275 11.2725C12.204 10.7489 11.919 10.0261 11.2188 8.13379L10.7031 6.73926C10.5941 6.44521 10.3137 6.25 10 6.25C9.68635 6.25 9.40592 6.44521 9.29688 6.73926L8.78125 8.13379C8.08102 10.0261 7.79599 10.7489 7.27246 11.2725C6.74894 11.796 6.02613 12.081 4.13379 12.7812L2.73926 13.2969C2.44521 13.4059 2.25 13.6863 2.25 14C2.25 14.3137 2.44521 14.5941 2.73926 14.7031L4.13379 15.2188C6.02613 15.919 6.74894 16.204 7.27246 16.7275C7.79599 17.2511 8.08102 17.9739 8.78125 19.8662L9.29688 21.2607C9.40592 21.5548 9.68635 21.75 10 21.75ZM10 18.8389C9.45292 17.3652 9.06246 16.3964 8.33301 15.667C7.60355 14.9375 6.63478 14.5471 5.16113 14C6.63478 13.4529 7.60355 13.0625 8.33301 12.333C9.06246 11.6036 9.45292 10.6348 10 9.16113C10.5471 10.6348 10.9375 11.6036 11.667 12.333C12.3964 13.0625 13.3652 13.4529 14.8389 14C13.3652 14.5471 12.3964 14.9375 11.667 15.667C10.9375 16.3964 10.5471 17.3652 10 18.8389Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/* ── 16×16 icons ─────────────────────────────────────────────── */
+
+/**
+ * Text / T icon — 16×16 px.
+ * Used inside the text-style selector trigger.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */

package/src/icons/AaIcon.tsx

@@ -0,0 +1,34 @@
+import type { SVGProps } from 'react';
+
+/* ── 24×24 toolbar icons ────────────────────────────────────── */
+
+/**
+ * Undo icon (undo-03) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */
+
+export function AaIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.4805 16.3838L11.3145 16.834L9.60645 12.416H3.7334L2.02539 16.834L0.859375 16.3838L5.82422 3.54297H7.51465L12.4805 16.3838ZM16.0654 7.78809C17.2221 7.80668 17.9935 8.35615 18.4424 9.03418C18.8584 9.66261 18.996 10.3956 18.9531 10.9023V16.6631H17.7031V15.8457C17.6264 15.9067 17.5519 15.9588 17.4824 16.002C17.4754 16.0063 17.4601 16.0169 17.4385 16.0322C17.3287 16.1101 17.0467 16.3108 16.7471 16.4424C16.3413 16.6206 15.8154 16.7379 15.1455 16.6523C13.582 16.4524 12.9252 15.1298 12.7646 14.5029L12.7529 14.4561L12.748 14.4082C12.6301 13.1949 13.0422 12.3632 13.6357 11.8438C14.1948 11.3547 14.8577 11.1913 15.2158 11.1602L15.2422 11.1572H17.7031V10.8408L17.7061 10.8086C17.7294 10.5817 17.6624 10.1194 17.4004 9.72363C17.1614 9.3627 16.7585 9.04947 16.0449 9.03809C15.2912 9.02609 14.9103 9.294 14.7002 9.56543C14.4661 9.86785 14.3858 10.2534 14.3857 10.5088L13.1357 10.5098C13.1357 10.0534 13.2669 9.37577 13.7119 8.80078C14.1813 8.19452 14.9487 7.77027 16.0654 7.78809ZM15.3008 12.4072C15.1211 12.4281 14.7543 12.5268 14.459 12.7852C14.1907 13.02 13.922 13.4354 13.9873 14.2363C14.1057 14.6392 14.505 15.3099 15.3047 15.4121C15.7339 15.4669 16.0315 15.3912 16.2441 15.2979C16.4124 15.2239 16.5059 15.1575 16.6152 15.0801C16.6745 15.0381 16.7386 14.9924 16.8223 14.9404C16.9398 14.8674 17.164 14.6785 17.3594 14.3975C17.5496 14.1238 17.6875 13.7996 17.7031 13.4512V12.4072H15.3008ZM4.2168 11.166H9.12305L6.66992 4.82227L4.2168 11.166Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Smile / emoji icon — 20×20 px.
+ * Used in the input bottom bar.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */

package/src/icons/AlertCircle02Icon.tsx

@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react';
+
+/**
+ * AlertCircle02Icon — 32 × 32 glyph used inside the NotificationPopup
+ * "input" featured-icon (rendered on a light-green background circle).
+ * The path is pre-colored with the Figma `icon-success` variable (#067647)
+ * so the glyph reads correctly on the pale `background-primary-50` circle.
+ */
+export function AlertCircle02Icon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 32 32"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 1.66602C23.9161 1.66602 30.3333 8.08327 30.3333 15.9993C30.3333 23.9155 23.9161 30.3327 16 30.3327C8.08392 30.3327 1.66667 23.9155 1.66667 15.9993C1.66667 8.08327 8.08392 1.66602 16 1.66602ZM16.006 19.9993C15.2609 19.9993 14.6667 20.5963 14.6667 21.3327C14.6667 22.0691 15.2609 22.666 15.994 22.666C16.7391 22.666 17.3333 22.0691 17.3333 21.3327C17.3333 20.5963 16.7391 19.9993 16.006 19.9993ZM16 9.33268C15.2636 9.33268 14.6667 9.92964 14.6667 10.666V15.9993C14.6667 16.7357 15.2636 17.3327 16 17.3327C16.7364 17.3327 17.3333 16.7357 17.3333 15.9993V10.666C17.3333 9.92964 16.7364 9.33268 16 9.33268Z"
+        fill="#067647"
+      />
+    </svg>
+  );
+}

package/src/icons/AlertCircleIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+/**
+ * Alert icons — colocated inside the package so the component has no
+ * dependency on the host app's `/public` folder. All icons use
+ * `currentColor` so state styling is controlled by the parent's text color.
+ */
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+const base: IconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 20,
+  height: 20,
+  viewBox: '0 0 20 20',
+  fill: 'none',
+  'aria-hidden': true,
+};
+
+export const AlertCircleIcon = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M10 1.042A8.958 8.958 0 1 1 10 18.958 8.958 8.958 0 0 1 10 1.042Zm0 1.25a7.708 7.708 0 1 0 0 15.416 7.708 7.708 0 0 0 0-15.416ZM10 11.25a.833.833 0 1 1 0 1.667.833.833 0 0 1 0-1.667Zm0-5.625c.345 0 .625.28.625.625v3.333a.625.625 0 1 1-1.25 0V6.25c0-.345.28-.625.625-.625Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/icons/AlertCircleSVG.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+const AlertCircleSVG = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    width={16}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M7.001.73a6.27 6.27 0 1 1 0 12.54 6.27 6.27 0 0 1 0-12.54Zm0 .874a5.395 5.395 0 1 0 0 10.791 5.395 5.395 0 0 0 0-10.79Zm0 6.563a.583.583 0 0 1 0 1.166h-.005a.583.583 0 0 1 0-1.166h.006Zm0-3.938c.242 0 .437.196.437.438V7a.438.438 0 0 1-.875 0V4.667c0-.242.196-.438.438-.438Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default AlertCircleSVG