sdaia-ui 1.0.1

package/src/components/ContextMenuDropdown/ContextMenuDropdown.types.ts

@@ -0,0 +1,89 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * A single item rendered inside the ContextMenuDropdown panel.
+ */
+export interface ContextMenuDropdownItem {
+  /** Label text for the item */
+  label: string;
+  /** Click handler for the item */
+  onClick?: () => void;
+  /** Whether this item is disabled */
+  disabled?: boolean;
+  /**
+   * When true, renders the item in the destructive/error color (red).
+   * Use for irreversible actions such as Delete or Remove.
+   * Figma: Text/text-error + Icon/icon-error color tokens.
+   */
+  destructive?: boolean;
+  /**
+   * Optional leading icon rendered at the start of the item.
+   * Should be a 20×20 ReactNode (e.g. an SVG icon from IconFactory).
+   */
+  leadingIcon?: ReactNode;
+}
+
+export interface ContextMenuDropdownProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Label displayed in the trigger row. Defaults to 'Placeholder'. */
+  label?: string;
+
+  /**
+   * Items rendered in the dropdown panel when open.
+   * Each item uses `NavItem` with `leadingItem="default"` and `trailingIcon=true`,
+   * matching the Figma "Menu Item" inside the "Open Menu" layer.
+   */
+  items?: ContextMenuDropdownItem[];
+
+  /** Whether the trigger row is disabled. Prevents opening the panel. */
+  disabled?: boolean;
+
+  /**
+   * When true, renders the trigger row label and icon in the destructive/error
+   * color (red). Use for irreversible actions such as Delete or Remove.
+   * Figma: Text/text-error + Icon/icon-error color tokens.
+   */
+  destructive?: boolean;
+
+  /**
+   * Optional leading icon rendered at the start of the trigger row.
+   * When provided, the leading spacer is replaced with this icon.
+   * Should be a 20×20 ReactNode (e.g. an SVG icon from IconFactory).
+   */
+  leadingIcon?: ReactNode;
+
+  /**
+   * Called when a leaf row (no items) is clicked.
+   * For rows that open a submenu, use `onOpenChange` instead.
+   */
+  onSelect?: () => void;
+
+  /**
+   * Controlled open state.
+   * When provided, the component is fully controlled — pair with `onOpenChange`.
+   */
+  open?: boolean;
+
+  /**
+   * Initial open state for uncontrolled usage.
+   * Ignored when `open` is provided.
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Called when the open state changes (trigger click or outside click).
+   * Required for controlled usage.
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Optional tag displayed at the trailing end of the trigger row — used for
+   * keyboard shortcut hints (e.g. "⌘X", "⌘C").
+   * When present, replaces the chevron icon on leaf rows.
+   * Rendered as a styled bordered badge matching Figma Tag design.
+   */
+  tag?: string;
+
+  /** Additional class names on the root wrapper */
+  className?: string;
+}

package/src/components/ContextMenuDropdown/ContextMenuDropdown.variants.ts

@@ -0,0 +1,88 @@
+/*
+ * ContextMenuDropdown variant maps
+ *
+ * Figma source: node 6058:82574 "Context Menu Dropdown"
+ * Variables traced to get_variable_defs output dated 2026-04-14.
+ *
+ * Trigger layout tokens  (match NavItem exactly):
+ *   Outer: px-spacing-sm(6px) py-spacing-xxs(2px)
+ *   Inner: p-spacing-md(8px) gap-spacing-md(8px) rounded-[8px]
+ *
+ * Panel layout tokens:
+ *   py-spacing-xs(4px)  rounded-[8px]  w-[250px]
+ *   Positioned: start-full top-[-4px] (inline-end of trigger, slight upward offset)
+ */
+
+/* ── Trigger: interactive (hover / active) ───────────────────────
+ * Figma: Background/background-neutral-100 = rgba(243,244,246,1)
+ * Applied on the INNER content div when NOT open and NOT disabled.
+ * ──────────────────────────────────────────────────────────────── */
+export const TRIGGER_HOVER_BG =
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(255,255,255,0.08)] active:bg-[rgba(229,231,235,1)] dark:active:bg-[rgba(255,255,255,0.13)]';
+
+export const TRIGGER_FOCUS_RING =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[rgba(22,22,22,1)] dark:focus-visible:ring-[rgba(229,231,235,1)]';
+
+/* Forced active bg when trigger is open (Figma: Hover/Active state bg on trigger row) */
+export const TRIGGER_OPEN_BG =
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(255,255,255,0.08)]';
+
+/* ── Trigger: text colors ────────────────────────────────────────
+ * Default:     Text/text-default            = rgba(22,22,22,1)
+ * Disabled:    Global/text-default-disabled = rgba(157,164,174,1)
+ * Destructive: Text/text-error              = rgba(220,38,38,1)
+ * ──────────────────────────────────────────────────────────────── */
+export const DEFAULT_TEXT =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+export const DISABLED_TEXT =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+export const DESTRUCTIVE_TEXT =
+  'text-[rgba(220,38,38,1)] dark:text-[rgba(248,113,113,1)]';
+
+/* ── Trigger: icon colors ────────────────────────────────────────
+ * Default:     Icon/icon-default-500        = rgba(108,115,127,1)
+ * Disabled:    Global/icon-default-disabled = rgba(157,164,174,1)
+ * Destructive: Icon/icon-error              = rgba(220,38,38,1)
+ * ──────────────────────────────────────────────────────────────── */
+export const DEFAULT_ICON_COLOR =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+export const DISABLED_ICON_COLOR =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+export const DESTRUCTIVE_ICON_COLOR =
+  'text-[rgba(220,38,38,1)] dark:text-[rgba(248,113,113,1)]';
+
+/* ── Keyboard shortcut tag badge ─────────────────────────────────
+ * Figma: "Tag" node 6091:84663
+ *   bg:     Background/background-white = #ffffff (dark: transparent)
+ *   border: Border/border-background-neutral = rgba(210,214,219,1)
+ *   radius: Radius/radius-6 = 6px
+ *   px:     Global/spacing-sm = 6px
+ *   py:     Global/spacing-xs = 4px
+ *   text:   Size/Text/typo-size-text-2xs = 10px  Line-height 14px
+ * ──────────────────────────────────────────────────────────────── */
+export const TAG_BADGE =
+  'inline-flex items-center justify-center px-[6px] py-[4px] rounded-[6px] border border-[rgba(210,214,219,1)] bg-white dark:bg-transparent dark:border-[rgba(75,85,99,1)] text-[10px] leading-[14px] font-normal whitespace-nowrap shrink-0';
+
+/* ── Trigger: disabled container ─────────────────────────────────
+ * Figma: pointer-events removed, text/icon shift to disabled color.
+ * ──────────────────────────────────────────────────────────────── */
+export const DISABLED_CONTAINER = 'pointer-events-none cursor-default';
+
+/* ── Dropdown panel ──────────────────────────────────────────────
+ * Background: Background/background-white = #ffffff
+ * Shadow: Shadows/shadow-xl
+ *   Layer 1: 0px 8px  8px  -4px rgba(16,24,40,0.03)   (#10182808)
+ *   Layer 2: 0px 20px 24px -4px rgba(16,24,40,0.08)   (#10182814)
+ * Radius: Radius/radius-8 = 8px
+ * Padding: Global/spacing-xs (4px) vertical
+ * Width: 250px (same as trigger)
+ * ──────────────────────────────────────────────────────────────── */
+export const PANEL_BG =
+  'bg-white dark:bg-[rgba(17,25,39,1)]';
+
+export const PANEL_SHADOW =
+  'shadow-[0px_8px_8px_-4px_rgba(16,24,40,0.03),0px_20px_24px_-4px_rgba(16,24,40,0.08)]';

package/src/components/ContextMenuDropdown/index.ts

@@ -0,0 +1,5 @@
+export { ContextMenuDropdown } from './ContextMenuDropdown';
+export type {
+  ContextMenuDropdownProps,
+  ContextMenuDropdownItem,
+} from './ContextMenuDropdown.types';

package/src/components/DateCell/DateCell.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { DateCellProps, DateCellVariant } from './DateCell.types';
+import {
+  ROOT_BASE,
+  FOCUS_RING_DEFAULT,
+  FOCUS_RING_PRIMARY,
+  DISC_BASE,
+  DISC_BY_VARIANT,
+  DISC_DISABLED_BY_VARIANT,
+  LABEL_BASE,
+  LABEL_BY_VARIANT,
+  LABEL_DISABLED_REGULAR,
+  LABEL_DISABLED_MEDIUM,
+  SECONDARY_LABEL,
+  DOT_BASE,
+  DOT_PRIMARY,
+  DOT_ONCOLOR,
+  DOT_DISABLED,
+  RANGE_CONTAINER,
+  RANGE_MIDDLE,
+  RANGE_START_EXTENSION,
+  RANGE_END_EXTENSION,
+  NULL_SPACER,
+} from './DateCell.variants';
+
+/** Variants that use the green focus ring. Others use the dark ring. */
+const PRIMARY_RING_VARIANTS: ReadonlySet<DateCellVariant> = new Set([
+  'today',
+  'selected',
+]);
+
+/** Variants whose label is emphasised (medium weight). Used to pick the
+ *  right disabled-label style so a disabled "selected" / "today" cell
+ *  keeps its medium weight but in disabled gray. */
+const EMPHASISED_VARIANTS: ReadonlySet<DateCellVariant> = new Set([
+  'active',
+  'today',
+  'selected',
+]);
+
+/**
+ * DateCell — one day square inside a calendar grid.
+ *
+ * Renders at a fixed 56 × 56 px with a 48 × 48 inner disc. Interaction
+ * states (hover / pressed / focus-visible) are driven by native
+ * pseudo-classes on the `<button>` — no JS state needed. Disabled,
+ * selected, today, and "belongs to adjacent month" are carried on the
+ * `variant` prop.
+ *
+ * Range selection
+ * ───────────────
+ *   `range` turns on the highlight band behind the disc. `rangeStart` /
+ *   `rangeEnd` control whether the band extends beyond the cell on the
+ *   inline-start / inline-end edge respectively — omit one to render
+ *   the cell as a range cap. The band uses logical `start-*`/`end-*`
+ *   classes, so it flips automatically under `dir="rtl"`.
+ *
+ * Accessibility
+ * ─────────────
+ *   • `aria-pressed` when `variant="selected"`.
+ *   • `aria-current="date"` when `variant="today"`.
+ *   • `variant="null"` renders a non-interactive `<span aria-hidden>`.
+ */
+export const DateCell = forwardRef<HTMLButtonElement, DateCellProps>(
+  function DateCell(
+    {
+      date,
+      variant = 'default',
+      secondaryDate,
+      dot = false,
+      range = false,
+      rangeStart = true,
+      rangeEnd = true,
+      disabled: disabledProp,
+      className,
+      onClick,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── Null — inert spacer ─────────────────────────────────── */
+    if (variant === 'null') {
+      return (
+        <span
+          aria-hidden="true"
+          data-slot="date-cell"
+          data-variant="null"
+          className={cn(NULL_SPACER, className)}
+        />
+      );
+    }
+
+    const disabled = Boolean(disabledProp);
+
+    /* ── Class resolution ────────────────────────────────────── */
+    const focusRing = PRIMARY_RING_VARIANTS.has(variant)
+      ? FOCUS_RING_PRIMARY
+      : FOCUS_RING_DEFAULT;
+
+    const discClass = disabled
+      ? DISC_DISABLED_BY_VARIANT[variant]
+      : DISC_BY_VARIANT[variant];
+
+    const labelClass = disabled
+      ? EMPHASISED_VARIANTS.has(variant)
+        ? LABEL_DISABLED_MEDIUM
+        : LABEL_DISABLED_REGULAR
+      : LABEL_BY_VARIANT[variant];
+
+    const dotClass = disabled
+      ? DOT_DISABLED
+      : variant === 'selected'
+        ? DOT_ONCOLOR
+        : DOT_PRIMARY;
+
+    /* ── ARIA / data attributes ──────────────────────────────── */
+    const ariaProps = {
+      'aria-pressed': variant === 'selected' ? true : undefined,
+      'aria-current':
+        variant === 'today' ? ('date' as const) : undefined,
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        disabled={disabled}
+        onClick={onClick}
+        data-slot="date-cell"
+        data-variant={variant}
+        {...ariaProps}
+        className={cn(ROOT_BASE, focusRing, className)}
+        {...rest}
+      >
+        {/* Range band — rendered behind the disc */}
+        {range && (
+          <span aria-hidden="true" className={RANGE_CONTAINER} data-slot="date-cell-range">
+            <span className={RANGE_MIDDLE} />
+            {rangeStart && <span className={RANGE_START_EXTENSION} />}
+            {rangeEnd && <span className={RANGE_END_EXTENSION} />}
+          </span>
+        )}
+
+        {/* Inner disc + content */}
+        <span
+          data-slot="date-cell-disc"
+          className={cn(DISC_BASE, discClass)}
+        >
+          <span
+            data-slot="date-cell-label"
+            className={cn(LABEL_BASE, labelClass)}
+          >
+            {date}
+          </span>
+
+          {secondaryDate !== undefined && secondaryDate !== null && (
+            <span
+              data-slot="date-cell-secondary"
+              className={SECONDARY_LABEL}
+            >
+              {secondaryDate}
+            </span>
+          )}
+
+          {dot && (
+            <span
+              aria-hidden="true"
+              data-slot="date-cell-dot"
+              className={cn(DOT_BASE, dotClass)}
+            />
+          )}
+        </span>
+      </button>
+    );
+  },
+);
+
+DateCell.displayName = 'DateCell';

package/src/components/DateCell/DateCell.types.ts

@@ -0,0 +1,53 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Visual variant of a date cell.
+ *
+ * Priority (when a parent calendar resolves a day's logical state):
+ *   `null` > disabled > `selected` > `active` > `today` > `next-previous` > `default`
+ *
+ *   default        → ordinary day in the visible month.
+ *   active         → emphasised day (e.g. keyboard-cursor target, not yet selected).
+ *   today          → day whose date equals today.
+ *   selected       → user-selected day.
+ *   next-previous  → day that belongs to the adjacent month (shown faded).
+ *   null           → empty placeholder cell (renders a non-interactive spacer).
+ */
+export type DateCellVariant =
+  | 'default'
+  | 'active'
+  | 'today'
+  | 'selected'
+  | 'next-previous'
+  | 'null';
+
+export interface DateCellProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  /** Day number (kept as ReactNode so consumers can format however they need). */
+  date: ReactNode;
+  /** Visual variant. Default `'default'`. */
+  variant?: DateCellVariant;
+  /**
+   * Secondary date (e.g. Hijri) rendered below the primary label.
+   * When omitted, the secondary line is hidden.
+   */
+  secondaryDate?: ReactNode;
+  /** Show a 5 × 5 indicator dot below the label. Default `false`. */
+  dot?: boolean;
+  /**
+   * Show the range-selection highlight band behind the cell. Default `false`.
+   * Only rendered for variants other than `'null'`.
+   */
+  range?: boolean;
+  /**
+   * Extend the range band past the inline-start edge of the cell.
+   * Default `true`. Set to `false` on the first cell of a range so the band
+   * does not leak before it.
+   */
+  rangeStart?: boolean;
+  /**
+   * Extend the range band past the inline-end edge of the cell.
+   * Default `true`. Set to `false` on the last cell of a range.
+   */
+  rangeEnd?: boolean;
+}

package/src/components/DateCell/DateCell.variants.ts

@@ -0,0 +1,217 @@
+/**
+ * DateCell.variants.ts
+ *
+ * Token mapping from Figma node 4512:36979 (_Date Cell).
+ *
+ * Layout (fixed sizes — calendars are pixel-tight):
+ *   Outer button   56 × 56 (`p-spacing-xs` → inner 48 × 48)
+ *   Inner disc     48 × 48 (`rounded-full`)
+ *   Dot            5 × 5   (`rounded-full`)
+ *
+ * Colors without a semantic token are kept as raw rgba with the Figma
+ * variable name referenced in a trailing comment.
+ */
+
+import type { DateCellVariant } from './DateCell.types';
+
+/* ── Outer button ───────────────────────────────────────────── */
+
+/**
+ * Root shell. `group/date-cell` enables the disc to pick up hover /
+ * active states via `group-hover/date-cell:*` and friends. The outer
+ * button stays transparent — the coloured disc lives inside.
+ */
+export const ROOT_BASE = [
+  'group/date-cell',
+  'relative inline-flex items-center justify-center',
+  'w-[56px] h-[56px]',
+  'p-spacing-xs',
+  'rounded-full',
+  'bg-transparent',
+  'cursor-pointer select-none',
+  'motion-feedback motion-reduce:transition-none',
+  'focus:outline-none',
+  'disabled:cursor-not-allowed',
+].join(' ');
+
+/* Focus ring — 2 px inset circle.
+ * Non-green variants (default / next-previous / active) use black α70.
+ * Green variants (today / selected) use primary α70. */
+export const FOCUS_RING_DEFAULT = [
+  'focus-visible:ring-2 focus-visible:ring-inset',
+  'focus-visible:ring-[rgba(22,22,22,0.7)]',           // alpha-black-70
+  'dark:focus-visible:ring-[rgba(255,255,255,0.7)]',
+].join(' ');
+
+export const FOCUS_RING_PRIMARY = [
+  'focus-visible:ring-2 focus-visible:ring-inset',
+  'focus-visible:ring-[rgba(27,131,84,0.7)]',          // alpha-600-primary-70
+].join(' ');
+
+/* ── Inner disc ─────────────────────────────────────────────── */
+
+/**
+ * Inner disc. `w-[min(48px,100%)] aspect-square` caps the disc at the
+ * Figma 48 px spec but lets it shrink to the parent's width on narrow
+ * calendar grids (e.g. < 352 px phones) so it never overflows into the
+ * next column. `aspect-square` + `rounded-full` keeps it a perfect
+ * circle at any size.
+ */
+export const DISC_BASE = [
+  'relative z-[1]',
+  'w-[min(48px,100%)] aspect-square',
+  'rounded-full',
+  'inline-flex flex-col items-center justify-center',
+  'motion-feedback motion-reduce:transition-none',
+].join(' ');
+
+/* Disc background / border per variant — includes hover & pressed
+ * pseudo-classes keyed on `group/date-cell` so they respond to the
+ * outer button, not the disc itself. */
+export const DISC_BY_VARIANT: Record<DateCellVariant, string> = {
+  default: [
+    'bg-transparent',
+    'group-hover/date-cell:bg-[rgba(229,231,235,1)]',                  // datecell-today-background-hovered
+    'group-active/date-cell:bg-[rgba(210,214,219,1)]',                 // datecell-today-background-pressed
+    'dark:group-hover/date-cell:bg-[rgba(55,65,81,0.5)]',
+    'dark:group-active/date-cell:bg-[rgba(75,85,99,0.5)]',
+  ].join(' '),
+
+  'next-previous': [
+    'bg-transparent',
+    'group-hover/date-cell:bg-[rgba(229,231,235,1)]',
+    'group-active/date-cell:bg-[rgba(210,214,219,1)]',
+    'dark:group-hover/date-cell:bg-[rgba(55,65,81,0.5)]',
+    'dark:group-active/date-cell:bg-[rgba(75,85,99,0.5)]',
+  ].join(' '),
+
+  active: [
+    'bg-transparent',
+    'group-hover/date-cell:bg-[rgba(229,231,235,1)]',
+    'group-active/date-cell:bg-[rgba(210,214,219,1)]',
+    'dark:group-hover/date-cell:bg-[rgba(55,65,81,0.5)]',
+    'dark:group-active/date-cell:bg-[rgba(75,85,99,0.5)]',
+  ].join(' '),
+
+  today: [
+    'bg-transparent',
+    'border-2 border-[rgba(27,131,84,1)]',                             // datecell-background-600
+    'group-hover/date-cell:bg-[rgba(223,246,231,1)]',                  // datecell-background-100
+    'group-active/date-cell:bg-[rgba(184,234,203,1)]',                 // datecell-background-200
+  ].join(' '),
+
+  selected: [
+    'bg-[rgba(27,131,84,1)]',                                          // datecell-background-default
+    'group-hover/date-cell:bg-[rgba(22,106,69,1)]',                    // datecell-background-hovered
+    'group-active/date-cell:bg-[rgba(16,70,49,1)]',                    // datecell-background-pressed
+  ].join(' '),
+
+  null: '',
+};
+
+/* Disc when the cell is disabled — overrides the variant background
+ * and (for `today`) swaps the border to the disabled gray. */
+export const DISC_DISABLED_BY_VARIANT: Record<DateCellVariant, string> = {
+  default:         'bg-transparent',
+  'next-previous': 'bg-transparent',
+  active:          'bg-transparent',
+  today:           'bg-transparent border-2 border-[rgba(157,164,174,1)]', // border-disabled
+  selected:        'bg-transparent border-2 border-[rgba(157,164,174,1)]',
+  null:            '',
+};
+
+/* ── Primary label ──────────────────────────────────────────── */
+
+export const LABEL_BASE = [
+  'text-text-md leading-[24px]',
+  'text-center',
+].join(' ');
+
+export const LABEL_BY_VARIANT: Record<DateCellVariant, string> = {
+  default: [
+    'font-[400]',
+    'text-[rgba(22,22,22,1)] dark:text-white',                          // text-default
+  ].join(' '),
+  active: [
+    'font-[500]',
+    'text-[rgba(22,22,22,1)] dark:text-white',
+  ].join(' '),
+  today: [
+    'font-[500]',
+    'text-[rgba(27,131,84,1)]',                                         // text-primary
+  ].join(' '),
+  selected: [
+    'font-[500]',
+    'text-white',                                                       // text-oncolor-primary
+  ].join(' '),
+  'next-previous': [
+    'font-[400]',
+    'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',       // text-secondary-paragraph
+  ].join(' '),
+  null: '',
+};
+
+/* Disabled primary label — weight follows whether the original variant
+ * was an emphasised one (medium) or not (regular). */
+export const LABEL_DISABLED_REGULAR = [
+  'font-[400]',
+  'text-[rgba(157,164,174,1)]',                                         // text-default-disabled
+].join(' ');
+
+export const LABEL_DISABLED_MEDIUM = [
+  'font-[500]',
+  'text-[rgba(157,164,174,1)]',
+].join(' ');
+
+/* ── Secondary label ────────────────────────────────────────── */
+
+export const SECONDARY_LABEL = [
+  'text-text-xs font-[400] leading-[18px]',
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',         // text-secondary-paragraph
+  'text-center',
+].join(' ');
+
+/* ── Dot indicator ──────────────────────────────────────────── */
+
+export const DOT_BASE = 'block w-[5px] h-[5px] rounded-full shrink-0';
+
+/* Dot color — primary by default; white when sitting on the selected
+ * green disc; gray when the cell is disabled. */
+export const DOT_PRIMARY =  'bg-[rgba(27,131,84,1)]';
+export const DOT_ONCOLOR =  'bg-white';
+export const DOT_DISABLED = 'bg-[rgba(157,164,174,1)]';
+
+/* ── Range highlight band ───────────────────────────────────── */
+
+/**
+ * Sits behind the disc (z-0) and fills the cell's inner 48 px height.
+ * `start-*` / `end-*` are logical, so the side extensions flip
+ * automatically under `dir="rtl"`.
+ *
+ * The middle band is always the full cell width; the `rangeStart` /
+ * `rangeEnd` extension bars add 24 px past the cell on each side so
+ * adjacent cells visually connect.
+ */
+export const RANGE_CONTAINER = [
+  'absolute inset-y-[4px] inset-x-0 z-0',
+  'pointer-events-none',
+].join(' ');
+
+export const RANGE_MIDDLE = [
+  'absolute inset-0',
+  'bg-[rgba(223,246,231,1)] dark:bg-[rgba(27,131,84,0.25)]',            // datecell-background-100
+].join(' ');
+
+export const RANGE_START_EXTENSION = [
+  'absolute top-0 bottom-0 start-[-24px] w-[24px]',
+  'bg-[rgba(223,246,231,1)] dark:bg-[rgba(27,131,84,0.25)]',
+].join(' ');
+
+export const RANGE_END_EXTENSION = [
+  'absolute top-0 bottom-0 end-[-24px] w-[24px]',
+  'bg-[rgba(223,246,231,1)] dark:bg-[rgba(27,131,84,0.25)]',
+].join(' ');
+
+/* ── Null spacer ────────────────────────────────────────────── */
+
+export const NULL_SPACER = 'inline-block w-[56px] h-[56px]';

package/src/components/DateCell/index.ts

@@ -0,0 +1,2 @@
+export { DateCell } from './DateCell';
+export type { DateCellProps, DateCellVariant } from './DateCell.types';