noecosystem-design 0.1.0

package/packages/ui/src/menu.tsx

@@ -0,0 +1,220 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { useDirection } from './direction';
+import { cn } from './lib/cn';
+
+export const Menu = MenuPrimitive.Root;
+export const MenuSub = MenuPrimitive.SubmenuRoot;
+export const MenuGroup = MenuPrimitive.Group;
+export const MenuRadioGroup = MenuPrimitive.RadioGroup;
+
+export function MenuTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.Trigger>) {
+  return <MenuPrimitive.Trigger className={cn(className)} data-slot="menu-trigger" {...props} />;
+}
+
+const menuPopupClassName =
+  '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 interface MenuPopupProps extends React.ComponentProps<typeof MenuPrimitive.Popup> {
+  portalProps?: React.ComponentProps<typeof MenuPrimitive.Portal>;
+  positionerProps?: React.ComponentProps<typeof MenuPrimitive.Positioner>;
+}
+
+export function MenuPopup({
+  className,
+  children,
+  portalProps,
+  positionerProps,
+  ...props
+}: MenuPopupProps) {
+  const direction = useDirection();
+
+  return (
+    <MenuPrimitive.Portal {...portalProps}>
+      <MenuPrimitive.Positioner align="start" sideOffset={6} {...positionerProps}>
+        <MenuPrimitive.Popup
+          className={cn(menuPopupClassName, className)}
+          data-slot="menu-popup"
+          dir={direction}
+          {...props}
+        >
+          {children}
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+export function MenuSubPopup({
+  className,
+  children,
+  portalProps,
+  positionerProps,
+  ...props
+}: MenuPopupProps) {
+  const direction = useDirection();
+
+  return (
+    <MenuPrimitive.Portal {...portalProps}>
+      <MenuPrimitive.Positioner align="start" side="inline-end" sideOffset={4} {...positionerProps}>
+        <MenuPrimitive.Popup
+          className={cn(menuPopupClassName, className)}
+          data-slot="menu-sub-popup"
+          dir={direction}
+          {...props}
+        >
+          {children}
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+const menuItemVariants = 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 MenuItemProps extends React.ComponentProps<typeof MenuPrimitive.Item> {
+  variant?: VariantProps<typeof menuItemVariants>['variant'];
+}
+
+export function MenuItem({ className, variant, ...props }: MenuItemProps) {
+  return (
+    <MenuPrimitive.Item
+      className={cn(menuItemVariants({ variant }), className)}
+      data-slot="menu-item"
+      {...props}
+    />
+  );
+}
+
+export function MenuLinkItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.LinkItem>) {
+  return (
+    <MenuPrimitive.LinkItem
+      className={cn(menuItemVariants(), className)}
+      data-slot="menu-link-item"
+      {...props}
+    />
+  );
+}
+
+export function MenuCheckboxItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      className={cn(menuItemVariants(), 'ps-8', className)}
+      data-slot="menu-checkbox-item"
+      {...props}
+    />
+  );
+}
+
+export function MenuCheckboxItemIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.CheckboxItemIndicator>) {
+  return (
+    <MenuPrimitive.CheckboxItemIndicator
+      className={cn('absolute start-2 flex size-4 items-center justify-center', className)}
+      data-slot="menu-checkbox-item-indicator"
+      {...props}
+    />
+  );
+}
+
+export function MenuRadioItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.RadioItem>) {
+  return (
+    <MenuPrimitive.RadioItem
+      className={cn(menuItemVariants(), 'ps-8', className)}
+      data-slot="menu-radio-item"
+      {...props}
+    />
+  );
+}
+
+export function MenuRadioItemIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.RadioItemIndicator>) {
+  return (
+    <MenuPrimitive.RadioItemIndicator
+      className={cn('absolute start-2 size-2 rounded-pill bg-current', className)}
+      data-slot="menu-radio-item-indicator"
+      {...props}
+    />
+  );
+}
+
+export function MenuGroupLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.GroupLabel>) {
+  return (
+    <MenuPrimitive.GroupLabel
+      className={cn('px-2.5 py-1.5 text-xs font-medium text-muted-foreground', className)}
+      data-slot="menu-group-label"
+      {...props}
+    />
+  );
+}
+
+export function MenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.Separator>) {
+  return (
+    <MenuPrimitive.Separator
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      data-slot="menu-separator"
+      {...props}
+    />
+  );
+}
+
+export function MenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn('ms-auto font-mono text-xs text-muted-foreground', className)}
+      data-slot="menu-shortcut"
+      dir="ltr"
+      {...props}
+    />
+  );
+}
+
+export function MenuSubTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger>) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      className={cn(menuItemVariants(), className)}
+      data-slot="menu-sub-trigger"
+      {...props}
+    />
+  );
+}

package/packages/ui/src/messaging.tsx

@@ -0,0 +1,62 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface Message {
+  id: string;
+  author: string;
+  content: React.ReactNode;
+  timestamp?: React.ReactNode;
+  variant?: 'user' | 'assistant' | 'system';
+}
+
+export interface MessagingProps extends React.ComponentProps<'div'> {
+  /** Accessible label for message list */
+  label: string;
+  messages: readonly Message[];
+  /** Composer slot — e.g., textarea + button */
+  composer?: React.ReactNode;
+}
+
+/**
+ * Messaging — conversation list with auto-direction, timestamp and variant styling.
+ * Uses logical layout, dir="auto" for content, and bdi for author.
+ */
+export function Messaging({ label, messages, composer, className, ...props }: MessagingProps) {
+  return (
+    <div className={cn('flex w-full flex-col gap-4', className)} data-slot="messaging" {...props}>
+      <div role="log" aria-live="polite" aria-label={label} className="flex flex-col gap-3">
+        {messages.length === 0 ? (
+          <p className="m-0 text-sm text-muted-foreground">No messages yet.</p>
+        ) : (
+          messages.map((m) => (
+            <article
+              key={m.id}
+              aria-label={`${m.author} message`}
+              className={cn(
+                'flex max-w-[85%] flex-col gap-1 rounded-lg border p-3 text-sm',
+                m.variant === 'user'
+                  ? 'self-end border-accent/20 bg-accent/10'
+                  : 'self-start border-border bg-surface-raised',
+              )}
+              data-variant={m.variant}
+            >
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <bdi className="font-medium text-foreground">{m.author}</bdi>
+                {m.timestamp ? (
+                  <span dir="ltr" className="ms-auto tabular-nums">
+                    {m.timestamp}
+                  </span>
+                ) : null}
+              </div>
+              <div dir="auto" className="leading-normal text-foreground">
+                {m.content}
+              </div>
+            </article>
+          ))
+        )}
+      </div>
+      {composer ? <div data-slot="messaging-composer">{composer}</div> : null}
+    </div>
+  );
+}

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

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

package/packages/ui/src/mobile-screen.tsx

@@ -0,0 +1,37 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface MobileScreenProps extends React.ComponentProps<'div'> {
+  label: string;
+  appBar?: React.ReactNode;
+  bottomNavigation?: React.ReactNode;
+  fab?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function MobileScreen({
+  label,
+  appBar,
+  bottomNavigation,
+  fab,
+  children,
+  className,
+  ...props
+}: MobileScreenProps) {
+  return (
+    <section
+      aria-label={label}
+      className={cn('mx-auto flex min-h-dvh w-full max-w-md flex-col bg-surface', className)}
+      data-slot="mobile-screen"
+      {...props}
+    >
+      {appBar ? <div data-slot="mobile-screen-app-bar">{appBar}</div> : null}
+      <div className="relative min-w-0 flex-1 px-4 py-4" data-slot="mobile-screen-content">
+        {children}
+      </div>
+      {fab}
+      {bottomNavigation}
+    </section>
+  );
+}

package/packages/ui/src/multi-select.tsx

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export function MultiSelect({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'flex min-h-10 flex-wrap gap-1 rounded-md border border-border bg-background p-2',
+        className,
+      )}
+      data-slot="multi-select"
+      {...props}
+    >
+      MultiSelect
+    </div>
+  );
+}

package/packages/ui/src/newsletter.tsx

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

package/packages/ui/src/not-found.tsx

@@ -0,0 +1,60 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface NotFoundProps extends Omit<React.ComponentProps<'section'>, 'title'> {
+  /** HTTP code — defaults to 404 */
+  code?: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Primary action — e.g., Button to home */
+  action?: React.ReactNode;
+  /** Optional illustration slot */
+  illustration?: React.ReactNode;
+}
+
+/**
+ * NotFound — 404 section composition.
+ * Tokenized, responsive, RTL-safe, no hard-coded strings beyond defaults.
+ * Uses logical layout; illustration and content swap order via flex.
+ */
+export function NotFound({
+  code = '404',
+  title,
+  description,
+  action,
+  illustration,
+  className,
+  ...props
+}: NotFoundProps) {
+  return (
+    <section
+      aria-label={typeof title === 'string' ? title : 'Not found'}
+      className={cn(
+        'flex w-full flex-col items-center justify-center gap-6 bg-background px-6 py-16 text-center sm:py-24',
+        className,
+      )}
+      data-slot="not-found"
+      {...props}
+    >
+      {illustration ? <div data-slot="not-found-illustration">{illustration}</div> : null}
+      <div className="flex flex-col items-center gap-3">
+        <p
+          className="m-0 font-mono text-sm font-medium tracking-widest text-muted-foreground"
+          dir="ltr"
+        >
+          {code}
+        </p>
+        <h1 className="m-0 font-heading text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">
+          {title}
+        </h1>
+        {description ? (
+          <p className="m-0 max-w-prose text-sm leading-normal text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      {action ? <div data-slot="not-found-action">{action}</div> : null}
+    </section>
+  );
+}

package/packages/ui/src/notification.tsx

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

package/packages/ui/src/page-header.tsx

@@ -0,0 +1,80 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface PageHeaderProps extends Omit<React.ComponentProps<'header'>, 'title'> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  breadcrumb?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+export function PageHeader({
+  className,
+  title,
+  description,
+  breadcrumb,
+  actions,
+  ...props
+}: PageHeaderProps) {
+  return (
+    <header className={cn('flex flex-col gap-4', className)} data-slot="page-header" {...props}>
+      {breadcrumb ? (
+        <nav aria-label="Breadcrumb" className="text-sm text-muted-foreground">
+          {breadcrumb}
+        </nav>
+      ) : null}
+      <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-3">
+        <div className="flex min-w-0 flex-col gap-1 text-start">
+          <h1 className="m-0 font-heading text-xl font-semibold leading-snug tracking-tight text-foreground">
+            {title}
+          </h1>
+          {description ? (
+            <p className="m-0 max-w-prose text-sm leading-normal text-muted-foreground">
+              {description}
+            </p>
+          ) : null}
+        </div>
+        {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
+      </div>
+    </header>
+  );
+}
+
+export function Breadcrumb({
+  items,
+  className,
+  ...props
+}: React.ComponentProps<'ol'> & {
+  items: readonly { id?: string; label: React.ReactNode; href?: string; current?: boolean }[];
+}) {
+  return (
+    <ol
+      className={cn('m-0 flex list-none flex-wrap items-center gap-2 p-0', className)}
+      data-slot="breadcrumb"
+      {...props}
+    >
+      {items.map((item, index) => (
+        <li
+          key={item.id ?? `${item.href ?? 'breadcrumb'}-${index}`}
+          className="flex items-center gap-2"
+        >
+          {item.href && !item.current ? (
+            <a className="hover:text-foreground" href={item.href}>
+              {item.label}
+            </a>
+          ) : (
+            <span aria-current={item.current ? 'page' : undefined} className="text-foreground">
+              {item.label}
+            </span>
+          )}
+          {index < items.length - 1 ? (
+            <span aria-hidden="true" className="text-muted-foreground">
+              /
+            </span>
+          ) : null}
+        </li>
+      ))}
+    </ol>
+  );
+}

package/packages/ui/src/pricing-page.tsx

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

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

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

package/packages/ui/src/progress-indicator.tsx

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

package/packages/ui/src/progress-steps.tsx

@@ -0,0 +1,85 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface Step {
+  id: string;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  state?: 'pending' | 'current' | 'completed';
+}
+
+export interface ProgressStepsProps extends React.ComponentProps<'ol'> {
+  label: string;
+  steps: readonly Step[];
+  /** Orientation — horizontal (default) or vertical */
+  orientation?: 'horizontal' | 'vertical';
+}
+
+/**
+ * ProgressSteps — accessible step indicator with current/completed states.
+ * Uses ordered list semantics, aria-current, and logical layout for RTL.
+ * Non-color encoding via icons/text, not color alone.
+ */
+export function ProgressSteps({
+  label,
+  steps,
+  orientation = 'horizontal',
+  className,
+  ...props
+}: ProgressStepsProps) {
+  return (
+    <ol
+      aria-label={label}
+      data-orientation={orientation}
+      className={cn(
+        'm-0 flex list-none gap-2 p-0',
+        orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap',
+        className,
+      )}
+      data-slot="progress-steps"
+      {...props}
+    >
+      {steps.map((step, index) => {
+        const state = step.state ?? (index === 0 ? 'current' : 'pending');
+        const isCompleted = state === 'completed';
+        const isCurrent = state === 'current';
+        return (
+          <li
+            key={step.id}
+            aria-current={isCurrent ? 'step' : undefined}
+            data-state={state}
+            className={cn(
+              'flex flex-1 items-center gap-2 rounded-md border px-3 py-2 text-sm',
+              isCompleted
+                ? 'border-success/20 bg-success/10 text-success'
+                : isCurrent
+                  ? 'border-accent bg-accent/10 text-accent'
+                  : 'border-border bg-surface text-muted-foreground',
+            )}
+          >
+            <span
+              aria-hidden
+              className={cn(
+                'flex size-6 shrink-0 items-center justify-center rounded-pill text-xs font-medium',
+                isCompleted
+                  ? 'bg-success text-success-foreground'
+                  : isCurrent
+                    ? 'bg-accent text-accent-foreground'
+                    : 'bg-muted text-muted-foreground',
+              )}
+            >
+              {isCompleted ? '✓' : index + 1}
+            </span>
+            <span className="flex min-w-0 flex-col text-start">
+              <span className="truncate font-medium leading-none">{step.label}</span>
+              {step.description ? (
+                <span className="truncate text-xs text-muted-foreground">{step.description}</span>
+              ) : null}
+            </span>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}