noecosystem-design 0.1.0

package/packages/ui/src/contact-section.tsx

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export interface ContactSectionProps extends React.ComponentProps<'div'> {
+  children?: React.ReactNode;
+}
+export function ContactSection({ className, children, ...props }: ContactSectionProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-border bg-surface-raised p-4 text-sm text-foreground',
+        className,
+      )}
+      data-slot="contact-section"
+      {...props}
+    >
+      {children ?? 'Contact Section'}
+    </div>
+  );
+}

package/packages/ui/src/content-divider.tsx

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export interface ContentDividerProps extends React.ComponentProps<'div'> {
+  children?: React.ReactNode;
+}
+export function ContentDivider({ className, children, ...props }: ContentDividerProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-border bg-surface-raised p-4 text-sm text-foreground',
+        className,
+      )}
+      data-slot="content-divider"
+      {...props}
+    >
+      {children ?? 'Content Divider'}
+    </div>
+  );
+}

package/packages/ui/src/content-section.tsx

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export interface ContentSectionProps extends React.ComponentProps<'div'> {
+  children?: React.ReactNode;
+}
+export function ContentSection({ className, children, ...props }: ContentSectionProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-border bg-surface-raised p-4 text-sm text-foreground',
+        className,
+      )}
+      data-slot="content-section"
+      {...props}
+    >
+      {children ?? 'Content Section'}
+    </div>
+  );
+}

package/packages/ui/src/context-menu.tsx

@@ -0,0 +1,208 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import type * as React from 'react';
+
+import { useDirection } from './direction';
+import { cn } from './lib/cn';
+
+// ContextMenu — Base UI Menu adapted for right-click + keyboard alternative.
+// Uses logical placement (side inline-end) and dir propagation, no global mirror.
+
+const contextMenuPopupClassName =
+  'z-(--noe-z-index-overlay) min-w-48 origin-(--transform-origin) overflow-hidden rounded-md border border-border bg-surface-raised p-1 text-sm text-foreground shadow-overlay outline-none transition-[opacity,transform] duration-(--noe-motion-duration-fast) ease-standard data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0';
+
+export const ContextMenu = MenuPrimitive.Root;
+export const ContextMenuSub = MenuPrimitive.SubmenuRoot;
+export const ContextMenuGroup = MenuPrimitive.Group;
+export const ContextMenuRadioGroup = MenuPrimitive.RadioGroup;
+
+export function ContextMenuTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.Trigger>) {
+  return (
+    <MenuPrimitive.Trigger className={cn(className)} data-slot="context-menu-trigger" {...props} />
+  );
+}
+
+export interface ContextMenuContentProps extends React.ComponentProps<typeof MenuPrimitive.Popup> {
+  portalProps?: React.ComponentProps<typeof MenuPrimitive.Portal>;
+  positionerProps?: React.ComponentProps<typeof MenuPrimitive.Positioner>;
+}
+
+/**
+ * ContextMenuContent — portalled, direction-aware popup.
+ * Trigger via right-click or Shift+F10 (Menu key). Provide keyboard alternative via MenuTrigger + MenuItem.
+ */
+export function ContextMenuContent({
+  className,
+  children,
+  portalProps,
+  positionerProps,
+  ...props
+}: ContextMenuContentProps) {
+  const direction = useDirection();
+  return (
+    <MenuPrimitive.Portal {...portalProps}>
+      <MenuPrimitive.Positioner sideOffset={6} {...positionerProps}>
+        <MenuPrimitive.Popup
+          className={cn(contextMenuPopupClassName, className)}
+          data-slot="context-menu-content"
+          dir={direction}
+          {...props}
+        >
+          {children}
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+export function ContextMenuSubContent({
+  className,
+  children,
+  portalProps,
+  positionerProps,
+  ...props
+}: ContextMenuContentProps) {
+  const direction = useDirection();
+  return (
+    <MenuPrimitive.Portal {...portalProps}>
+      <MenuPrimitive.Positioner align="start" side="inline-end" sideOffset={4} {...positionerProps}>
+        <MenuPrimitive.Popup
+          className={cn(contextMenuPopupClassName, className)}
+          data-slot="context-menu-sub-content"
+          dir={direction}
+          {...props}
+        >
+          {children}
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+import { cva, type VariantProps } from 'class-variance-authority';
+// Reuse item styles from menu (logical, tokenized)
+import { cn as cn2 } from './lib/cn';
+
+const contextMenuItemVariants = cva(
+  'relative flex min-h-9 cursor-default select-none items-center gap-2 rounded-sm px-2.5 py-2 outline-none transition-colors duration-(--noe-motion-duration-fast) data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+  {
+    variants: {
+      variant: {
+        default: 'text-foreground',
+        destructive: 'text-destructive data-[highlighted]:bg-destructive/10',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
+export interface ContextMenuItemProps extends React.ComponentProps<typeof MenuPrimitive.Item> {
+  variant?: VariantProps<typeof contextMenuItemVariants>['variant'];
+}
+
+export function ContextMenuItem({ className, variant, ...props }: ContextMenuItemProps) {
+  return (
+    <MenuPrimitive.Item
+      className={cn2(contextMenuItemVariants({ variant }), className)}
+      data-slot="context-menu-item"
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuCheckboxItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      className={cn2(contextMenuItemVariants(), 'ps-8', className)}
+      data-slot="context-menu-checkbox-item"
+      {...props}
+    />
+  );
+}
+export function ContextMenuCheckboxItemIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.CheckboxItemIndicator>) {
+  return (
+    <MenuPrimitive.CheckboxItemIndicator
+      className={cn2('absolute start-2 flex size-4 items-center justify-center', className)}
+      data-slot="context-menu-checkbox-item-indicator"
+      {...props}
+    />
+  );
+}
+export function ContextMenuRadioItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.RadioItem>) {
+  return (
+    <MenuPrimitive.RadioItem
+      className={cn2(contextMenuItemVariants(), 'ps-8', className)}
+      data-slot="context-menu-radio-item"
+      {...props}
+    />
+  );
+}
+export function ContextMenuRadioItemIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.RadioItemIndicator>) {
+  return (
+    <MenuPrimitive.RadioItemIndicator
+      className={cn2('absolute start-2 size-2 rounded-pill bg-current', className)}
+      data-slot="context-menu-radio-item-indicator"
+      {...props}
+    />
+  );
+}
+export function ContextMenuGroupLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.GroupLabel>) {
+  return (
+    <MenuPrimitive.GroupLabel
+      className={cn2('px-2.5 py-1.5 text-xs font-medium text-muted-foreground', className)}
+      data-slot="context-menu-group-label"
+      {...props}
+    />
+  );
+}
+export function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.Separator>) {
+  return (
+    <MenuPrimitive.Separator
+      className={cn2('-mx-1 my-1 h-px bg-border', className)}
+      data-slot="context-menu-separator"
+      {...props}
+    />
+  );
+}
+export function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn2('ms-auto font-mono text-xs text-muted-foreground', className)}
+      data-slot="context-menu-shortcut"
+      dir="ltr"
+      {...props}
+    />
+  );
+}
+export function ContextMenuSubTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger>) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      className={cn2(contextMenuItemVariants(), className)}
+      data-slot="context-menu-sub-trigger"
+      {...props}
+    />
+  );
+}

package/packages/ui/src/credit-card.tsx

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export interface CreditCardProps extends React.ComponentProps<'div'> {
+  children?: React.ReactNode;
+}
+export function CreditCard({ className, children, ...props }: CreditCardProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-border bg-surface-raised p-4 text-sm text-foreground',
+        className,
+      )}
+      data-slot="credit-card"
+      {...props}
+    >
+      {children ?? 'Credit Card'}
+    </div>
+  );
+}

package/packages/ui/src/cta-section.tsx

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export interface CtaSectionProps extends React.ComponentProps<'div'> {
+  children?: React.ReactNode;
+}
+export function CtaSection({ className, children, ...props }: CtaSectionProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-border bg-surface-raised p-4 text-sm text-foreground',
+        className,
+      )}
+      data-slot="cta-section"
+      {...props}
+    >
+      {children ?? 'CTA Section'}
+    </div>
+  );
+}

package/packages/ui/src/data-list.tsx

@@ -0,0 +1,81 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface DataListItem {
+  id: string;
+  href?: string;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  current?: boolean;
+}
+
+export interface DataListProps extends React.ComponentProps<'ul'> {
+  label: string;
+  items: readonly DataListItem[];
+}
+
+export function DataList({ label, items, className, ...props }: DataListProps) {
+  return (
+    <ul
+      aria-label={label}
+      className={cn('m-0 flex list-none flex-col divide-y divide-border p-0', className)}
+      data-slot="data-list"
+      {...props}
+    >
+      {items.map((item) => {
+        const content = (
+          <>
+            {item.leading ? (
+              <span
+                aria-hidden="true"
+                className="flex size-10 shrink-0 items-center justify-center rounded-md bg-surface-sunken text-muted-foreground [&_svg:not([class*=size-])]:size-5"
+                data-slot="data-list-leading"
+              >
+                {item.leading}
+              </span>
+            ) : null}
+            <span className="flex min-w-0 flex-1 flex-col gap-0.5 text-start">
+              <span className="truncate text-sm font-medium leading-normal text-foreground">
+                {item.title}
+              </span>
+              {item.subtitle ? (
+                <span className="truncate text-xs leading-normal text-muted-foreground">
+                  {item.subtitle}
+                </span>
+              ) : null}
+            </span>
+            {item.trailing ? (
+              <span
+                className="ms-auto flex shrink-0 items-center gap-2 text-xs text-muted-foreground"
+                data-slot="data-list-trailing"
+              >
+                {item.trailing}
+              </span>
+            ) : null}
+          </>
+        );
+        const rowClass =
+          'flex min-h-14 w-full items-center gap-3 px-3 py-2 no-underline hover:bg-surface-sunken/60';
+        return (
+          <li className="m-0 p-0" data-slot="data-list-item" key={item.id}>
+            {item.href ? (
+              <a
+                aria-current={item.current ? 'page' : undefined}
+                className={rowClass}
+                data-current={item.current || undefined}
+                href={item.href}
+              >
+                {content}
+              </a>
+            ) : (
+              <div className={rowClass}>{content}</div>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/packages/ui/src/date-picker.browser.test.tsx

@@ -0,0 +1,48 @@
+import { expect, test } from 'vitest';
+import { userEvent } from 'vitest/browser';
+import { render } from 'vitest-browser-react';
+
+import { DatePicker } from './date-picker';
+
+test('DatePicker Escape closes popover and returns focus to input', async () => {
+  const screen = await render(<DatePicker label="Choose date" locale="en-US" />);
+
+  const input = screen.getByRole('combobox');
+  await userEvent.click(input.element());
+  // Calendar should appear (table) — portal-based
+  await expect.element(document.querySelector('table') as HTMLElement).toBeInTheDocument();
+
+  await userEvent.keyboard('{Escape}');
+  // Popover should be removed
+  expect(document.querySelector('table')).toBeNull();
+  await expect.element(input.element()).toHaveFocus();
+});
+
+test('DatePicker click outside closes popover', async () => {
+  await render(
+    <div>
+      <DatePicker label="Pick" locale="en-US" />
+      <div
+        data-testid="outside"
+        style={{
+          position: 'fixed',
+          top: '0px',
+          left: '0px',
+          width: '50px',
+          height: '50px',
+          background: 'red',
+        }}
+      >
+        outside
+      </div>
+    </div>,
+  );
+
+  const input = document.querySelector('input[aria-haspopup="dialog"]') as HTMLInputElement;
+  await userEvent.click(input);
+  await expect.element(document.querySelector('table') as HTMLElement).toBeInTheDocument();
+
+  const outside = document.querySelector('[data-testid="outside"]') as HTMLElement;
+  await userEvent.click(outside);
+  expect(document.querySelector('table')).toBeNull();
+});

package/packages/ui/src/date-picker.tsx

@@ -0,0 +1,248 @@
+import * as React from 'react';
+
+import { Calendar, type CalendarSystem } from './calendar';
+import { DirectionPortal, useDirection } from './direction';
+import { Field } from './field';
+import { Input } from './input';
+import { cn } from './lib/cn';
+import { t } from './lib/i18n-messages';
+
+export interface DatePickerProps
+  extends Omit<React.ComponentProps<'div'>, 'onChange' | 'defaultValue'> {
+  calendar?: CalendarSystem;
+  locale?: string | undefined;
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onValueChange?: (date: Date | null) => void;
+  label?: string;
+  placeholder?: string;
+  min?: Date | null | undefined;
+  max?: Date | null | undefined;
+  disabled?: boolean;
+  /** i18n overrides */
+  labels?: {
+    close?: string;
+    previousMonth?: string;
+    nextMonth?: string;
+  };
+}
+
+/**
+ * DatePicker — Field + Input + Calendar popover.
+ * Calendar system (gregory/persian) is separate from locale formatting (Intl).
+ * Jalali logic is from injast-core (Intl ca-persian, binary search) — extension point via `calendar` prop.
+ * Locale `fa` defaults to `persian` calendar unless explicitly overridden; `en` defaults to `gregory`.
+ * Popover is portal-based with Escape, click-outside, focus-return, explicit dir and min/max validation.
+ */
+export function DatePicker({
+  calendar,
+  locale,
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  placeholder,
+  min,
+  max,
+  disabled,
+  labels,
+  className,
+  ...props
+}: DatePickerProps) {
+  const inferredCalendar: CalendarSystem =
+    calendar ?? (locale?.startsWith('fa') ? 'persian' : 'gregory');
+  const direction = useDirection();
+  const [open, setOpen] = React.useState(false);
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = React.useState<Date | null>(defaultValue ?? null);
+  const selected = isControlled ? (value ?? null) : internal;
+
+  const inputId = React.useId();
+  const popoverId = `${inputId}-popover`;
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const popoverRef = React.useRef<HTMLDivElement>(null);
+  const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({});
+
+  const formatDate = (date: Date | null) => {
+    if (!date) return '';
+    const cal = inferredCalendar === 'persian' ? 'persian' : 'gregory';
+    try {
+      return new Intl.DateTimeFormat(locale ?? (cal === 'persian' ? 'fa-IR' : 'en-US'), {
+        calendar: cal,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        timeZone: 'UTC',
+      }).format(date);
+    } catch {
+      return date.toISOString().slice(0, 10);
+    }
+  };
+
+  const onSelect = (date: Date | null) => {
+    if (!isControlled) setInternal(date);
+    onValueChange?.(date);
+    setOpen(false);
+  };
+
+  // Position popover relative to input when open (portal-based, logical placement)
+  React.useEffect(() => {
+    if (!open) return;
+    const updatePosition = () => {
+      const inputEl = document.getElementById(inputId);
+      if (!inputEl) return;
+      const rect = inputEl.getBoundingClientRect();
+      const isRtl = direction === 'rtl';
+      setPopoverStyle({
+        position: 'fixed',
+        top: `${rect.bottom + 8}px`,
+        left: isRtl ? 'auto' : `${rect.left}px`,
+        right: isRtl ? `${window.innerWidth - rect.right}px` : 'auto',
+        zIndex: 'var(--noe-z-index-overlay, 50)',
+      });
+    };
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [open, inputId, direction]);
+
+  // Close on Escape and click-outside, restore focus
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        setOpen(false);
+        const el = document.getElementById(inputId) as HTMLInputElement | null;
+        el?.focus();
+      }
+    };
+    const onPointerDown = (e: MouseEvent) => {
+      const target = e.target as Node | null;
+      const inputEl = document.getElementById(inputId);
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(target) &&
+        inputEl &&
+        !inputEl.contains(target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('mousedown', onPointerDown);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('mousedown', onPointerDown);
+    };
+  }, [open, inputId]);
+
+  const closeLabel = labels?.close ?? t(locale, 'datePicker.close');
+  const prevLabel = labels?.previousMonth ?? t(locale, 'calendar.previousMonth');
+  const nextLabel = labels?.nextMonth ?? t(locale, 'calendar.nextMonth');
+  // locale-aware placeholder via Intl example; fallback via i18n messages (no hard-coded)
+  const inferredPlaceholder =
+    placeholder ??
+    (() => {
+      const sample = new Date(Date.UTC(2025, 2, 20)); // 1403-12-30
+      try {
+        return new Intl.DateTimeFormat(locale ?? 'en-US', {
+          calendar: inferredCalendar === 'persian' ? 'persian' : 'gregory',
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          timeZone: 'UTC',
+        }).format(sample);
+      } catch {
+        return t(
+          locale,
+          inferredCalendar === 'persian'
+            ? 'datePicker.placeholder.persian'
+            : 'datePicker.placeholder.gregory',
+        );
+      }
+    })();
+
+  // Determine dir for popover — explicit, bidi-safe
+  const popoverDir = direction;
+
+  const validationError =
+    selected && ((min && selected < min) || (max && selected > max))
+      ? t(locale, 'datePicker.outOfRange')
+      : undefined;
+
+  const inputEl = (
+    <Input
+      id={label ? inputId : undefined}
+      value={formatDate(selected)}
+      placeholder={inferredPlaceholder}
+      readOnly
+      disabled={disabled}
+      role="combobox"
+      aria-expanded={open}
+      aria-haspopup="dialog"
+      aria-controls={open ? popoverId : undefined}
+      aria-invalid={Boolean(validationError) || undefined}
+      onFocus={() => !disabled && setOpen(true)}
+      onClick={() => !disabled && setOpen(true)}
+      // do not force dir=ltr for Persian; let Input decide (auto) or inherit
+      onKeyDown={(e) => {
+        if (e.key === 'Escape' && open) {
+          e.preventDefault();
+          setOpen(false);
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setOpen((v) => !v);
+        }
+      }}
+    />
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn('relative flex flex-col gap-1.5', className)}
+      data-slot="date-picker"
+      {...props}
+    >
+      {label ? (
+        <Field label={label} error={validationError} description={undefined} required={false}>
+          {inputEl}
+        </Field>
+      ) : (
+        inputEl
+      )}
+      {open ? (
+        <DirectionPortal>
+          <div
+            id={popoverId}
+            ref={popoverRef}
+            dir={popoverDir}
+            role="dialog"
+            aria-label={label ?? t(locale, 'datePicker.chooseDate')}
+            className="rounded-md border border-border bg-surface-raised p-2 shadow-overlay"
+            style={popoverStyle}
+          >
+            <Calendar
+              calendar={inferredCalendar}
+              value={selected}
+              onValueChange={onSelect}
+              locale={locale}
+              min={min}
+              max={max}
+              labels={{ previousMonth: prevLabel, nextMonth: nextLabel }}
+            />
+            <button type="button" onClick={() => setOpen(false)} className="sr-only">
+              {closeLabel}
+            </button>
+          </div>
+        </DirectionPortal>
+      ) : null}
+    </div>
+  );
+}