noecosystem-design 0.1.0

package/packages/ui/src/error-state.tsx

@@ -0,0 +1,44 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface ErrorStateProps extends Omit<React.ComponentProps<'section'>, 'title'> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  media?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export function ErrorState({
+  className,
+  title,
+  description,
+  media,
+  action,
+  ...props
+}: ErrorStateProps) {
+  return (
+    <section
+      className={cn(
+        'flex min-h-64 w-full flex-col items-center justify-center gap-6 rounded-lg border border-destructive/30 bg-destructive/5 p-8 text-center',
+        className,
+      )}
+      data-slot="error-state"
+      role="alert"
+      {...props}
+    >
+      <div className="flex max-w-md flex-col items-center gap-3">
+        {media ? (
+          <div className="flex size-12 items-center justify-center rounded-lg border border-destructive/30 bg-destructive/10 text-destructive [&_svg:not([class*=size-])]:size-6">
+            {media}
+          </div>
+        ) : null}
+        <h3 className="m-0 font-heading text-lg font-semibold leading-snug">{title}</h3>
+        {description ? (
+          <p className="m-0 text-sm leading-normal text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+      {action ? <div className="flex flex-wrap justify-center gap-2">{action}</div> : null}
+    </section>
+  );
+}

package/packages/ui/src/fab.tsx

@@ -0,0 +1,32 @@
+import type * as React from 'react';
+
+import { Button } from './button';
+import { cn } from './lib/cn';
+
+export interface FabProps extends Omit<React.ComponentProps<typeof Button>, 'aria-label'> {
+  label: string;
+}
+
+/**
+ * FAB — mobile floating action button.
+ * Composes the canonical Button primitive (variant primary, size lg rounded-full)
+ * and applies positioning via logical `end` property. Documented as Button composition,
+ * not a second primitive.
+ */
+export function Fab({ label, className, children, ...props }: FabProps) {
+  return (
+    <Button
+      aria-label={label}
+      variant="primary"
+      size="lg"
+      className={cn(
+        'fixed bottom-[calc(4.5rem+env(safe-area-inset-bottom))] end-4 z-40 size-14 rounded-full shadow-raised md:hidden [&_svg:not([class*=size-])]:size-6',
+        className,
+      )}
+      data-slot="fab"
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}

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

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

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

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

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

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

package/packages/ui/src/featured-icon.tsx

@@ -0,0 +1,63 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+const featuredIconVariants = cva(
+  'inline-flex shrink-0 items-center justify-center border bg-surface-raised text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        brand: 'border-accent/20 bg-accent/10 text-accent',
+        muted: 'border-border bg-muted text-muted-foreground',
+        success: 'border-success/20 bg-success/10 text-success',
+        warning: 'border-warning/20 bg-warning/10 text-warning',
+        destructive: 'border-destructive/20 bg-destructive/10 text-destructive',
+        info: 'border-info/20 bg-info/10 text-info',
+      },
+      size: {
+        sm: 'size-8 rounded-md [&_svg:not([class*=size-])]:size-4',
+        md: 'size-10 rounded-lg [&_svg:not([class*=size-])]:size-5',
+        lg: 'size-12 rounded-xl [&_svg:not([class*=size-])]:size-6',
+        xl: 'size-14 rounded-xl [&_svg:not([class*=size-])]:size-7',
+      },
+    },
+    defaultVariants: {
+      variant: 'brand',
+      size: 'md',
+    },
+  },
+);
+
+export interface FeaturedIconProps
+  extends React.ComponentProps<'div'>,
+    VariantProps<typeof featuredIconVariants> {
+  /** Icon node — typically from @noe/icons. Never mirrors globally; directional icons must use logical contract externally. */
+  icon?: React.ReactNode;
+}
+
+export function FeaturedIcon({
+  className,
+  variant,
+  size,
+  icon,
+  children,
+  ...props
+}: FeaturedIconProps) {
+  // Prefer explicit icon prop, fallback to children for flexibility, but not both.
+  const content = icon ?? children;
+  return (
+    <div
+      className={cn(featuredIconVariants({ variant, size }), className)}
+      data-slot="featured-icon"
+      data-variant={variant}
+      data-size={size}
+      aria-hidden={content ? undefined : true}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+export { featuredIconVariants };

package/packages/ui/src/field.browser.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { Field, FieldDescription, FieldError, FieldLabel } from './field';
+import { Input } from './input';
+
+test('Field generates accessible label, description, and error relationships', async () => {
+  const ref = React.createRef<HTMLInputElement>();
+  const screen = await render(
+    <Field invalid name="email">
+      <FieldLabel>Email</FieldLabel>
+      <Input ref={ref} required type="email" />
+      <FieldDescription>Used for account updates.</FieldDescription>
+      <FieldError match>Please enter a valid email.</FieldError>
+    </Field>,
+  );
+
+  const input = screen.getByRole('textbox', { name: 'Email' });
+  await expect.element(input).toHaveAttribute('aria-invalid', 'true');
+  expect(ref.current).toBe(input.element());
+
+  const inputId = input.element().id;
+  expect(inputId).toBeTruthy();
+  expect(screen.getByText('Email', { exact: true }).element()).toHaveAttribute('for', inputId);
+
+  const describedBy = input.element().getAttribute('aria-describedby')?.split(' ') ?? [];
+  expect(describedBy).toHaveLength(2);
+  expect(describedBy.map((id) => document.getElementById(id)?.textContent)).toEqual([
+    'Used for account updates.',
+    'Please enter a valid email.',
+  ]);
+});

package/packages/ui/src/field.tsx

@@ -0,0 +1,117 @@
+import { Field as FieldPrimitive } from '@base-ui/react/field';
+import * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface LegacyFieldProps {
+  children: React.ReactElement<{
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    id?: string;
+  }>;
+  description?: React.ReactNode;
+  error?: React.ReactNode;
+  label: React.ReactNode;
+  required?: boolean;
+}
+
+type FieldProps = React.ComponentProps<typeof FieldPrimitive.Root> | LegacyFieldProps;
+
+function isLegacyFieldProps(props: FieldProps): props is LegacyFieldProps {
+  return 'label' in props;
+}
+
+export function Field(props: FieldProps) {
+  const generatedId = React.useId();
+
+  if (isLegacyFieldProps(props)) {
+    const { children, description, error, label, required } = props;
+    const inputId = children.props.id ?? `field-${generatedId}`;
+    const descriptionId = description ? `${inputId}-description` : undefined;
+    const errorId = error ? `${inputId}-error` : undefined;
+    const describedBy = [descriptionId, errorId].filter(Boolean).join(' ') || undefined;
+
+    return (
+      <FieldPrimitive.Root invalid={Boolean(error)}>
+        <FieldLabel htmlFor={inputId}>
+          {label}
+          {required ? <span aria-hidden="true"> *</span> : null}
+        </FieldLabel>
+        {React.cloneElement(children, {
+          id: inputId,
+          ...(describedBy ? { 'aria-describedby': describedBy } : {}),
+          ...(error ? { 'aria-invalid': true } : {}),
+        })}
+        {description ? <FieldDescription id={descriptionId}>{description}</FieldDescription> : null}
+        {error ? (
+          <FieldError id={errorId} match={true}>
+            {error}
+          </FieldError>
+        ) : null}
+      </FieldPrimitive.Root>
+    );
+  }
+
+  const { className, ...rootProps } = props;
+  return (
+    <FieldPrimitive.Root
+      className={cn('flex w-full flex-col items-start gap-2', className)}
+      data-slot="field"
+      {...rootProps}
+    />
+  );
+}
+
+export function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof FieldPrimitive.Label>) {
+  return (
+    <FieldPrimitive.Label
+      className={cn(
+        'inline-flex items-center gap-2 text-sm font-medium leading-snug text-foreground data-[disabled]:opacity-50',
+        className,
+      )}
+      data-slot="field-label"
+      {...props}
+    />
+  );
+}
+
+export function FieldDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof FieldPrimitive.Description>) {
+  return (
+    <FieldPrimitive.Description
+      className={cn('text-xs leading-normal text-muted-foreground', className)}
+      data-slot="field-description"
+      {...props}
+    />
+  );
+}
+
+export function FieldError({
+  className,
+  ...props
+}: React.ComponentProps<typeof FieldPrimitive.Error>) {
+  return (
+    <FieldPrimitive.Error
+      className={cn('text-xs leading-normal text-destructive', className)}
+      data-slot="field-error"
+      {...props}
+    />
+  );
+}
+
+export function FieldItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof FieldPrimitive.Item>) {
+  return (
+    <FieldPrimitive.Item className={cn('flex', className)} data-slot="field-item" {...props} />
+  );
+}
+
+export const FieldControl = FieldPrimitive.Control;
+export const FieldValidity = FieldPrimitive.Validity;

package/packages/ui/src/file-uploader.tsx

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export function FileUploader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-dashed border-border bg-surface p-6 text-center text-sm text-muted-foreground',
+        className,
+      )}
+      data-slot="file-uploader"
+      {...props}
+    >
+      Drag files here or{' '}
+      <button type="button" className="text-accent">
+        browse
+      </button>
+    </div>
+  );
+}

package/packages/ui/src/footer.tsx

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

package/packages/ui/src/forgot-password-page.tsx

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

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface GradientPickerProps extends React.ComponentProps<'div'> {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  label?: string;
+}
+
+/**
+ * GradientPicker — linear gradient with two color stops, tokenized, accessible.
+ * Separate from ColorPicker; shares hue logic but not form semantics.
+ */
+// Token-derived defaults: mint-500 (#0b6f6b) and mint-100 (#98e8cf) — keep in sync with tokens.json primitive palette.
+// These are example gradient stops for the picker UI, not product UI chrome colors; input type=color requires hex.
+const GRADIENT_START = '#0b6f6b';
+const GRADIENT_END = '#98e8cf';
+
+export function GradientPicker({
+  className,
+  value = `linear-gradient(90deg, ${GRADIENT_START}, ${GRADIENT_END})`,
+  onValueChange,
+  label = 'Gradient',
+  ...props
+}: GradientPickerProps) {
+  const id = React.useId();
+  const previewId = `${id}-preview`;
+  return (
+    <div className={cn('flex flex-col gap-2', className)} data-slot="gradient-picker" {...props}>
+      <label htmlFor={previewId} className="text-sm font-medium text-foreground">
+        {label}
+      </label>
+      <div
+        id={previewId}
+        className="h-12 rounded-md border border-border"
+        style={{ background: value }}
+        aria-hidden
+      />
+      <div className="flex gap-2">
+        <input
+          aria-label="Start color"
+          type="color"
+          defaultValue={GRADIENT_START}
+          onChange={(e) => onValueChange?.(`linear-gradient(90deg, ${e.target.value}, ${GRADIENT_END})`)}
+          className="size-8 rounded-md border border-border"
+        />
+        <input
+          aria-label="End color"
+          type="color"
+          defaultValue={GRADIENT_END}
+          onChange={(e) => onValueChange?.(`linear-gradient(90deg, ${GRADIENT_START}, ${e.target.value})`)}
+          className="size-8 rounded-md border border-border"
+        />
+        <input
+          aria-label="Gradient CSS"
+          value={value}
+          readOnly
+          dir="ltr"
+          className="flex-1 rounded-md border border-border bg-muted px-2 font-mono text-xs"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface HeaderNavLink {
+  id?: string;
+  href: string;
+  label: React.ReactNode;
+  current?: boolean;
+}
+
+export interface HeaderNavigationProps extends Omit<React.ComponentProps<'header'>, 'children'> {
+  label: string;
+  brand?: React.ReactNode;
+  links?: readonly HeaderNavLink[];
+  actions?: React.ReactNode;
+  menuTrigger?: React.ReactNode;
+}
+
+export function HeaderNavigation({
+  label,
+  brand,
+  links,
+  actions,
+  menuTrigger,
+  className,
+  ...props
+}: HeaderNavigationProps) {
+  return (
+    <header
+      className={cn(
+        'flex w-full items-center gap-x-6 gap-y-2 bg-surface-raised px-4 py-3',
+        className,
+      )}
+      data-slot="header-navigation"
+      {...props}
+    >
+      {brand ? <div className="flex shrink-0 items-center">{brand}</div> : null}
+      {menuTrigger ? <div className="sm:hidden">{menuTrigger}</div> : null}
+      {links?.length ? (
+        <nav
+          aria-label={label}
+          className="hidden min-w-0 flex-1 flex-wrap items-center gap-1 sm:flex"
+          data-slot="header-navigation-links"
+        >
+          {links.map((link, index) => (
+            <a
+              aria-current={link.current ? 'page' : undefined}
+              className={cn(
+                'rounded-md px-3 py-1.5 text-sm leading-normal no-underline hover:bg-surface-sunken/60',
+                link.current
+                  ? 'bg-surface-sunken font-medium text-foreground'
+                  : 'text-muted-foreground',
+              )}
+              data-current={link.current || undefined}
+              href={link.href}
+              key={link.id ?? `${link.href}-${index}`}
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      ) : (
+        <div className="min-w-0 flex-1" />
+      )}
+      {actions ? (
+        <div className="ms-auto flex shrink-0 flex-wrap items-center gap-2">{actions}</div>
+      ) : null}
+    </header>
+  );
+}

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

@@ -0,0 +1,57 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface HeroHeaderProps extends Omit<React.ComponentProps<'section'>, 'title'> {
+  eyebrow?: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+  media?: React.ReactNode;
+}
+
+/**
+ * HeroHeader — marketing hero header section, content-driven, tokenized, RTL-safe.
+ */
+export function HeroHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  media,
+  className,
+  ...props
+}: HeroHeaderProps) {
+  return (
+    <section
+      className={cn(
+        'flex w-full flex-col gap-8 bg-background px-6 py-12 sm:py-16 lg:flex-row lg:items-center lg:gap-12',
+        className,
+      )}
+      data-slot="hero-header"
+      {...props}
+    >
+      <div className="flex flex-1 flex-col gap-4 text-start">
+        {eyebrow ? (
+          <p className="m-0 text-xs font-medium uppercase tracking-widest text-muted-foreground">
+            {eyebrow}
+          </p>
+        ) : null}
+        <h1 className="m-0 font-heading text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
+          {title}
+        </h1>
+        {description ? (
+          <p className="m-0 max-w-prose text-base leading-normal text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+        {actions ? <div className="flex flex-wrap gap-2 pt-2">{actions}</div> : null}
+      </div>
+      {media ? (
+        <div className="flex flex-1 items-center justify-center" data-slot="hero-header-media">
+          {media}
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/packages/ui/src/illustration.tsx

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

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface ImagePickerProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {
+  label?: string;
+  onValueChange?: (file: File | null) => void;
+}
+
+/**
+ * ImagePicker — image selection with preview, drag, and file input. Tokenized, RTL-safe.
+ * Distinct from FileUploader (generic files) and distinct from GradientPicker.
+ */
+export function ImagePicker({
+  className,
+  label = 'Image',
+  onValueChange,
+  ...props
+}: ImagePickerProps) {
+  const inputId = React.useId();
+  const labelId = `${inputId}-label`;
+  const [preview, setPreview] = React.useState<string | null>(null);
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const file = e.target.files?.[0] ?? null;
+    onValueChange?.(file);
+    if (file) {
+      const url = URL.createObjectURL(file);
+      setPreview(url);
+    } else setPreview(null);
+  };
+  return (
+    <div className={cn('flex flex-col gap-2', className)} data-slot="image-picker" {...props}>
+      <span className="text-sm font-medium text-foreground" id={labelId}>
+        {label}
+      </span>
+      <label
+        htmlFor={inputId}
+        className="flex min-h-32 cursor-pointer flex-col items-center justify-center rounded-md border border-dashed border-border bg-surface p-4 text-sm text-muted-foreground hover:bg-muted/50"
+      >
+        {preview ? (
+          <img src={preview} alt="Selected" className="max-h-28 rounded-md object-cover" />
+        ) : (
+          <span>Drop image or click to browse</span>
+        )}
+        <input
+          id={inputId}
+          aria-labelledby={labelId}
+          type="file"
+          accept="image/*"
+          className="sr-only"
+          onChange={onChange}
+        />
+      </label>
+    </div>
+  );
+}