noecosystem-design 0.1.0

package/packages/testing/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@noe/testing",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.mjs"
+  }
+}

package/packages/testing/src/index.mjs

@@ -0,0 +1,10 @@
+export const directions = Object.freeze(['ltr', 'rtl']);
+export const themes = Object.freeze(['light', 'dark']);
+export const locales = Object.freeze(['en', 'fa', 'en-XA', 'ar-XB']);
+export function matrix(values) {
+  return Object.entries(values).reduce(
+    (rows, [key, options]) =>
+      rows.flatMap((row) => options.map((option) => ({ ...row, [key]: option }))),
+    [{}],
+  );
+}

package/packages/ui/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@noe/ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@base-ui/react": "1.7.0",
+    "@noe/design-tokens": "workspace:*",
+    "@noe/i18n": "workspace:*",
+    "@noe/icons": "workspace:*",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "tailwind-merge": "3.6.0"
+  },
+  "devDependencies": {
+    "vitest": "4.1.11",
+    "vitest-browser-react": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts"
+  }
+}

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

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

package/packages/ui/src/alert.tsx

@@ -0,0 +1,67 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+const alertVariants = cva(
+  'grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-1 rounded-lg border p-4 text-sm [&>svg]:mt-0.5 [&>svg]:size-5',
+  {
+    variants: {
+      variant: {
+        default: 'border-border bg-surface-raised text-foreground',
+        info: 'border-info/30 bg-info/10 text-foreground [&>svg]:text-info',
+        success: 'border-success/30 bg-success/10 text-foreground [&>svg]:text-success',
+        warning: 'border-warning/40 bg-warning/15 text-foreground [&>svg]:text-warning-foreground',
+        error: 'border-destructive/30 bg-destructive/10 text-foreground [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface AlertProps
+  extends React.ComponentProps<'section'>,
+    VariantProps<typeof alertVariants> {}
+
+export function Alert({ className, role, variant, ...props }: AlertProps) {
+  return (
+    <section
+      className={cn(alertVariants({ variant }), className)}
+      data-slot="alert"
+      role={role ?? (variant === 'error' ? 'alert' : 'status')}
+      {...props}
+    />
+  );
+}
+
+export function AlertTitle({ className, ...props }: React.ComponentProps<'h3'>) {
+  return (
+    <h3
+      className={cn('col-start-2 font-semibold leading-snug', className)}
+      data-slot="alert-title"
+      {...props}
+    />
+  );
+}
+
+export function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('col-start-2 leading-normal text-muted-foreground', className)}
+      data-slot="alert-description"
+      {...props}
+    />
+  );
+}
+
+export function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('col-start-2 mt-2 flex flex-wrap gap-2', className)}
+      data-slot="alert-action"
+      {...props}
+    />
+  );
+}

package/packages/ui/src/app-frame.tsx

@@ -0,0 +1,63 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface AppFrameProps extends React.ComponentProps<'div'> {
+  header?: React.ReactNode;
+  navigation?: React.ReactNode;
+  mobileNavigation?: React.ReactNode;
+  inspector?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function AppFrame({
+  header,
+  navigation,
+  mobileNavigation,
+  inspector,
+  children,
+  className,
+  ...props
+}: AppFrameProps) {
+  return (
+    <div
+      className={cn('grid min-h-dvh w-full grid-rows-[auto_1fr]', className)}
+      data-slot="app-frame"
+      {...props}
+    >
+      {header ? <div data-slot="app-frame-header">{header}</div> : null}
+      <div className="grid lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_18rem]">
+        {mobileNavigation ? (
+          <nav
+            aria-label="Primary"
+            className="border-b border-border bg-surface-raised p-4 lg:hidden"
+            data-slot="app-frame-mobile-navigation"
+          >
+            {mobileNavigation}
+          </nav>
+        ) : null}
+        {navigation ? (
+          <aside
+            aria-label="Primary"
+            className="hidden border-e border-border bg-surface-raised p-4 lg:block"
+            data-slot="app-frame-navigation"
+          >
+            {navigation}
+          </aside>
+        ) : null}
+        <main className="min-w-0 p-4 sm:p-6" data-slot="app-frame-content">
+          {children}
+        </main>
+        {inspector ? (
+          <aside
+            aria-label="Inspector"
+            className="hidden border-s border-border bg-surface-raised p-5 xl:block"
+            data-slot="app-frame-inspector"
+          >
+            {inspector}
+          </aside>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/packages/ui/src/avatar.tsx

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

package/packages/ui/src/badge-group.tsx

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

package/packages/ui/src/badge.tsx

@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export const badgeVariants = cva(
+  'inline-flex w-fit shrink-0 items-center gap-1.5 rounded-pill border px-2.5 py-1 text-xs font-medium leading-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3.5',
+  {
+    variants: {
+      variant: {
+        default: 'border-accent/30 bg-accent/10 text-accent',
+        outline: 'border-border bg-transparent text-foreground',
+        secondary: 'border-transparent bg-muted text-foreground',
+        destructive: 'border-destructive/30 bg-destructive/10 text-destructive',
+        info: 'border-info/30 bg-info/10 text-info',
+        success: 'border-success/30 bg-success/10 text-success',
+        warning: 'border-warning/40 bg-warning/15 text-warning-foreground',
+        error: 'border-destructive/30 bg-destructive/10 text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.ComponentProps<'span'>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant }), className)} data-slot="badge" {...props} />
+  );
+}

package/packages/ui/src/banner.tsx

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

package/packages/ui/src/bidi.tsx

@@ -0,0 +1,80 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export function AutoDirectionText({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <span dir="auto" className={className}>
+      {children}
+    </span>
+  );
+}
+
+export function BidiText({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <bdi dir="auto" className={className}>
+      {children}
+    </bdi>
+  );
+}
+
+export function TechnicalValue({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <bdi
+      className={cn(
+        'rounded-sm border border-border bg-muted px-1 py-0.5 font-mono text-[0.9em] text-foreground',
+        className,
+      )}
+      data-slot="technical-value"
+      dir="ltr"
+    >
+      {children}
+    </bdi>
+  );
+}
+
+export function LocalizedNumber({
+  value,
+  locale,
+  options,
+}: {
+  value: number;
+  locale: string;
+  options?: Intl.NumberFormatOptions;
+}) {
+  return <span>{new Intl.NumberFormat(locale, options).format(value)}</span>;
+}
+
+export function LocalizedDate({
+  value,
+  locale,
+  options,
+}: {
+  value: Date | string | number;
+  locale: string;
+  options?: Intl.DateTimeFormatOptions;
+}) {
+  return (
+    <time dateTime={new Date(value).toISOString()}>
+      {new Intl.DateTimeFormat(locale, options).format(new Date(value))}
+    </time>
+  );
+}

package/packages/ui/src/blog-index-page.tsx

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

package/packages/ui/src/blog-post-page.tsx

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

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

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

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

@@ -0,0 +1,60 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface BottomNavigationItem {
+  id?: string;
+  href: string;
+  label: string;
+  current?: boolean;
+  badge?: React.ReactNode;
+  icon?: React.ReactNode;
+}
+
+export interface BottomNavigationProps extends Omit<React.ComponentProps<'nav'>, 'children'> {
+  label: string;
+  items: readonly BottomNavigationItem[];
+}
+
+export function BottomNavigation({ label, items, className, ...props }: BottomNavigationProps) {
+  return (
+    <nav
+      aria-label={label}
+      className={cn(
+        'flex w-full items-stretch justify-around border-t border-border bg-surface-raised pb-[env(safe-area-inset-bottom)] md:hidden',
+        className,
+      )}
+      data-slot="bottom-navigation"
+      {...props}
+    >
+      {items.map((item, index) => (
+        <a
+          aria-current={item.current ? 'page' : undefined}
+          className={cn(
+            'relative flex min-w-16 flex-col items-center gap-1 px-3 py-2 text-xs leading-normal no-underline',
+            item.current ? 'font-medium text-foreground' : 'text-muted-foreground',
+          )}
+          data-current={item.current || undefined}
+          data-slot="bottom-navigation-item"
+          href={item.href}
+          key={item.id ?? `${item.href}-${index}`}
+        >
+          {item.icon ? (
+            <span aria-hidden="true" className="[&_svg:not([class*=size-])]:size-5">
+              {item.icon}
+            </span>
+          ) : null}
+          <span>{item.label}</span>
+          {item.badge ? (
+            <span
+              className="absolute -top-0.5 end-[calc(50%-1.75rem)] rounded-full bg-accent px-1.5 py-0.5 text-[0.625rem] font-medium leading-none text-accent-foreground tabular-nums"
+              data-slot="bottom-navigation-badge"
+            >
+              {item.badge}
+            </span>
+          ) : null}
+        </a>
+      ))}
+    </nav>
+  );
+}

package/packages/ui/src/button-group.tsx

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

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { Button } from './button';
+
+test('Button preserves native, busy, disabled, and ref contracts', async () => {
+  const onClick = vi.fn();
+  const ref = React.createRef<HTMLButtonElement>();
+  const screen = await render(
+    <Button ref={ref} loading onClick={onClick}>
+      Save
+    </Button>,
+  );
+
+  const button = screen.getByRole('button', { name: 'Save' });
+  await expect.element(button).toHaveAttribute('type', 'button');
+  await expect.element(button).toHaveAttribute('data-slot', 'button');
+  await expect.element(button).toHaveAttribute('aria-busy', 'true');
+  await expect.element(button).toBeDisabled();
+  expect(ref.current).toBe(button.element());
+});
+
+test('a disabled polymorphic Button cannot navigate or receive focus', async () => {
+  const onClick = vi.fn();
+  const screen = await render(
+    <Button disabled onClick={onClick} render={<a href="#danger" />}>
+      Continue
+    </Button>,
+  );
+
+  const link = screen.getByRole('button', { name: 'Continue' });
+  await expect.element(link).toHaveAttribute('aria-disabled', 'true');
+  await expect.element(link).toHaveAttribute('tabindex', '-1');
+  await link.click({ force: true });
+  expect(onClick).not.toHaveBeenCalled();
+  expect(window.location.hash).not.toBe('#danger');
+});

package/packages/ui/src/button.tsx

@@ -0,0 +1,81 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+import { isValidElement } from 'react';
+
+import { cn } from './lib/cn';
+import { Spinner } from './spinner';
+
+export const buttonVariants = cva(
+  'relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border font-medium outline-none transition-[background-color,border-color,color,box-shadow] duration-(--noe-motion-duration-fast) ease-standard after:pointer-events-none pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[loading]:select-none data-[loading]:text-transparent [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+  {
+    variants: {
+      variant: {
+        primary: 'border-accent bg-accent text-accent-foreground hover:bg-accent-hover',
+        secondary: 'border-border bg-surface-raised text-foreground hover:bg-muted',
+        outline: 'border-border bg-transparent text-foreground hover:bg-muted',
+        ghost: 'border-transparent bg-transparent text-foreground hover:bg-muted',
+        quiet: 'border-transparent bg-transparent text-foreground hover:bg-muted',
+        destructive:
+          'border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      },
+      size: {
+        sm: 'h-(--noe-control-height-sm) px-3 text-sm',
+        md: 'h-(--noe-control-height-md) px-4 text-sm',
+        lg: 'h-(--noe-control-height-lg) px-5 text-base',
+        icon: 'size-(--noe-control-height-md)',
+      },
+    },
+    defaultVariants: {
+      variant: 'secondary',
+      size: 'md',
+    },
+  },
+);
+
+export interface ButtonProps extends React.ComponentProps<typeof ButtonPrimitive> {
+  variant?: VariantProps<typeof buttonVariants>['variant'];
+  size?: VariantProps<typeof buttonVariants>['size'];
+  loading?: boolean;
+}
+
+export function Button({
+  className,
+  variant,
+  size,
+  render,
+  ref,
+  children,
+  loading = false,
+  disabled: disabledProp,
+  nativeButton,
+  type,
+  ...props
+}: ButtonProps): React.ReactElement {
+  const disabled = Boolean(loading || disabledProp);
+  const resolvesToAnchor = isValidElement(render) && render.type === 'a';
+  return (
+    <ButtonPrimitive
+      aria-busy={loading || undefined}
+      aria-disabled={disabled || undefined}
+      className={cn(buttonVariants({ className, size, variant }))}
+      data-loading={loading ? '' : undefined}
+      data-slot="button"
+      disabled={disabled}
+      nativeButton={nativeButton ?? !resolvesToAnchor}
+      ref={ref}
+      render={render}
+      type={render ? undefined : (type ?? 'button')}
+      {...props}
+    >
+      <span>{children}</span>
+      {loading ? (
+        <Spinner
+          aria-hidden="true"
+          className="pointer-events-none absolute text-current"
+          data-slot="button-loading-indicator"
+        />
+      ) : null}
+    </ButtonPrimitive>
+  );
+}