noecosystem-design 0.1.0

package/packages/ui/src/qr-code.tsx

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

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

@@ -0,0 +1,26 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export function RadioGroup({ className, children, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role="radiogroup"
+      className={cn('flex flex-col gap-2', className)}
+      data-slot="radio-group"
+      {...props}
+    >
+      {children ?? 'RadioGroup'}
+    </div>
+  );
+}
+export function Radio({
+  className,
+  label,
+  ...props
+}: React.ComponentProps<'input'> & { label?: string }) {
+  return (
+    <label className={cn('flex items-center gap-2 text-sm', className)}>
+      <input type="radio" className="size-4" {...props} />
+      <span>{label ?? 'Radio'}</span>
+    </label>
+  );
+}

package/packages/ui/src/rating.tsx

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

package/packages/ui/src/rich-text-editor.tsx

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export function RichTextEditor({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('rounded-md border border-border bg-surface-raised', className)}
+      data-slot="rich-text-editor"
+      {...props}
+    >
+      <div className="border-b border-border p-2 text-xs text-muted-foreground">
+        Toolbar — lazy-loaded heavy editor
+      </div>
+      <div className="min-h-24 p-3 text-sm">
+        Rich text content — RTL and list formatting supported.
+      </div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,37 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface SectionHeaderProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+export function SectionHeader({
+  className,
+  title,
+  description,
+  actions,
+  ...props
+}: SectionHeaderProps) {
+  return (
+    <div
+      className={cn('flex flex-wrap items-end justify-between gap-x-6 gap-y-2', className)}
+      data-slot="section-header"
+      {...props}
+    >
+      <div className="flex min-w-0 flex-col gap-0.5 text-start">
+        <h2 className="m-0 font-heading text-base font-semibold leading-snug tracking-tight text-foreground">
+          {title}
+        </h2>
+        {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>
+  );
+}

package/packages/ui/src/select.tsx

@@ -0,0 +1,27 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export function Select({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'select'> & { 'aria-label'?: string }) {
+  const ariaLabel = (props as { 'aria-label'?: string })['aria-label'] ?? 'Select';
+  return (
+    <select
+      aria-label={ariaLabel}
+      className={cn(
+        'rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-focus-ring',
+        className,
+      )}
+      data-slot="select"
+      {...props}
+    >
+      {children ?? (
+        <>
+          <option>Option 1</option>
+          <option>Option 2</option>
+        </>
+      )}
+    </select>
+  );
+}

package/packages/ui/src/settings-01.tsx

@@ -0,0 +1,49 @@
+import type * as React from 'react';
+import { Button } from './button';
+import { Field } from './field';
+import { Input } from './input';
+import { SectionHeader } from './section-header';
+import { SettingsPage } from './settings-page';
+import { SidebarNavigation } from './sidebar-navigation';
+
+export function Settings01(
+  props: Omit<React.ComponentProps<typeof SettingsPage>, 'label' | 'children'>,
+) {
+  return (
+    <SettingsPage
+      label="Settings 01 — workspace profile"
+      navigation={
+        <SidebarNavigation
+          label="Settings"
+          sections={[
+            {
+              id: 'general',
+              items: [
+                { href: '#general', label: 'General', current: true },
+                { href: '#members', label: 'Members' },
+              ],
+            },
+          ]}
+        />
+      }
+      saveBar={
+        <>
+          <Button variant="quiet" size="sm">
+            Cancel
+          </Button>
+          <Button variant="primary" size="sm">
+            Save
+          </Button>
+        </>
+      }
+      {...props}
+    >
+      <section className="flex max-w-xl flex-col gap-4">
+        <SectionHeader title="Workspace profile" description="Visible to collaborators." />
+        <Field label="Workspace name">
+          <Input defaultValue="acme-production" />
+        </Field>
+      </section>
+    </SettingsPage>
+  );
+}

package/packages/ui/src/settings-02.tsx

@@ -0,0 +1,58 @@
+import type * as React from 'react';
+import { Button } from './button';
+import { Field } from './field';
+import { Input } from './input';
+import { SectionHeader } from './section-header';
+import { SettingsPage } from './settings-page';
+import { SidebarNavigation } from './sidebar-navigation';
+import { Textarea } from './textarea';
+
+export function Settings02(
+  props: Omit<React.ComponentProps<typeof SettingsPage>, 'label' | 'children'>,
+) {
+  return (
+    <SettingsPage
+      label="Settings 02 — team and billing"
+      navigation={
+        <SidebarNavigation
+          label="Settings"
+          sections={[
+            {
+              id: 'team',
+              items: [
+                { href: '#team', label: 'Team', current: true },
+                { href: '#billing', label: 'Billing' },
+              ],
+            },
+            {
+              id: 'danger',
+              label: 'Danger',
+              items: [{ href: '#delete', label: 'Delete workspace' }],
+            },
+          ]}
+        />
+      }
+      saveBar={
+        <>
+          <Button variant="quiet" size="sm">
+            Cancel
+          </Button>
+          <Button variant="primary" size="sm">
+            Update
+          </Button>
+        </>
+      }
+      {...props}
+    >
+      <section className="flex max-w-xl flex-col gap-6">
+        <SectionHeader title="Team settings" description="Manage members and permissions." />
+        <Field label="Invite email" description="An invite will be sent.">
+          <Input placeholder="name@acme.com" type="email" />
+        </Field>
+        <Field label="Workspace description">
+          <Textarea placeholder="Describe this workspace…" />
+        </Field>
+      </section>
+    </SettingsPage>
+  );
+}

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

@@ -0,0 +1,62 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface SettingsPageProps extends React.ComponentProps<'div'> {
+  label: string;
+  navigation?: React.ReactNode;
+  saveBar?: React.ReactNode;
+  children: React.ReactNode;
+  /**
+   * Landmark ownership: application shell (AppFrame) owns the primary <main>.
+   * SettingsPage defaults to a non-main landmark (div with region semantics) to avoid nested <main> violations.
+   * Pass `as="main"` only when this page is the top-level landmark (standalone, no AppFrame).
+   */
+  as?: 'div' | 'section' | 'main';
+}
+
+export function SettingsPage({
+  label,
+  navigation,
+  saveBar,
+  children,
+  className,
+  as: Tag = 'div',
+  ...props
+}: SettingsPageProps) {
+  const ContentTag = Tag === 'main' ? 'main' : 'div';
+  return (
+    <section
+      aria-label={label}
+      className={cn('flex w-full min-w-0 flex-col', className)}
+      data-slot="settings-page"
+      {...props}
+    >
+      <div className="flex flex-col gap-8 md:flex-row md:gap-12">
+        {navigation ? (
+          <aside
+            aria-label="Settings sections"
+            className="shrink-0 md:w-56"
+            data-slot="settings-page-navigation"
+          >
+            {navigation}
+          </aside>
+        ) : null}
+        <ContentTag
+          className="flex min-w-0 flex-1 flex-col gap-10 pb-6"
+          data-slot="settings-page-content"
+        >
+          {children}
+        </ContentTag>
+      </div>
+      {saveBar ? (
+        <div
+          className="sticky bottom-0 -mx-4 mt-2 flex items-center justify-end gap-2 border-t border-border bg-surface-raised px-4 py-3 sm:-mx-6 sm:px-6"
+          data-slot="settings-page-save-bar"
+        >
+          {saveBar}
+        </div>
+      ) : null}
+    </section>
+  );
+}

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

@@ -0,0 +1,77 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface SidebarNavigationItem {
+  id?: string;
+  href: string;
+  label: React.ReactNode;
+  current?: boolean;
+  badge?: React.ReactNode;
+}
+
+export interface SidebarNavigationSection {
+  id: string;
+  label?: React.ReactNode;
+  items: readonly SidebarNavigationItem[];
+}
+
+export interface SidebarNavigationProps extends Omit<React.ComponentProps<'nav'>, 'children'> {
+  label: string;
+  sections: readonly SidebarNavigationSection[];
+}
+
+export function SidebarNavigation({
+  label,
+  sections,
+  className,
+  ...props
+}: SidebarNavigationProps) {
+  return (
+    <nav
+      aria-label={label}
+      className={cn('flex w-full flex-col gap-6', className)}
+      data-slot="sidebar-navigation"
+      {...props}
+    >
+      {sections.map((section) => (
+        <div key={section.id} className="flex flex-col gap-1">
+          {section.label ? (
+            <p
+              className="m-0 px-3 pb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+              id={`sidebar-section-${section.id}`}
+            >
+              {section.label}
+            </p>
+          ) : null}
+          <ul
+            aria-labelledby={section.label ? `sidebar-section-${section.id}` : undefined}
+            className="m-0 flex list-none flex-col gap-0.5 p-0"
+          >
+            {section.items.map((item, index) => (
+              <li key={item.id ?? `${item.href}-${index}`}>
+                <a
+                  aria-current={item.current ? 'page' : undefined}
+                  className={cn(
+                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm leading-normal no-underline hover:bg-surface-sunken/60',
+                    item.current
+                      ? 'bg-surface-sunken font-medium text-foreground'
+                      : 'text-muted-foreground',
+                  )}
+                  data-current={item.current || undefined}
+                  data-slot="sidebar-navigation-item"
+                  href={item.href}
+                >
+                  <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                  {item.badge ? (
+                    <span className="ms-auto shrink-0 text-xs tabular-nums">{item.badge}</span>
+                  ) : null}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </nav>
+  );
+}

package/packages/ui/src/sign-in-form.tsx

@@ -0,0 +1,60 @@
+import type * as React from 'react';
+import { Button } from './button';
+import { Field } from './field';
+import { Input } from './input';
+import { cn } from './lib/cn';
+
+export interface SignInFormLabels {
+  heading: React.ReactNode;
+  emailLabel: React.ReactNode;
+  passwordLabel: React.ReactNode;
+  submitLabel: string;
+}
+
+export interface SignInFormProps extends Omit<React.ComponentProps<'form'>, 'title'> {
+  labels: SignInFormLabels;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+  pending?: boolean;
+  onSubmit?: React.FormEventHandler<HTMLFormElement>;
+}
+
+export function SignInForm({
+  labels,
+  description,
+  footer,
+  pending = false,
+  className,
+  ...props
+}: SignInFormProps) {
+  return (
+    <form
+      className={cn('flex w-full max-w-sm flex-col gap-5', className)}
+      data-slot="sign-in-form"
+      {...props}
+    >
+      <div className="flex flex-col gap-1 text-start">
+        <h1 className="m-0 font-heading text-xl font-semibold leading-snug tracking-tight text-foreground">
+          {labels.heading}
+        </h1>
+        {description ? (
+          <p className="m-0 text-sm leading-normal text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+      <Field label={labels.emailLabel}>
+        <Input autoComplete="email" name="email" required type="email" />
+      </Field>
+      <Field label={labels.passwordLabel}>
+        <Input autoComplete="current-password" name="password" required type="password" />
+      </Field>
+      <Button aria-busy={pending || undefined} loading={pending} type="submit" variant="primary">
+        {labels.submitLabel}
+      </Button>
+      {footer ? (
+        <div className="flex flex-wrap items-center justify-between gap-2 text-sm text-muted-foreground">
+          {footer}
+        </div>
+      ) : null}
+    </form>
+  );
+}

package/packages/ui/src/sign-up-page.tsx

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

package/packages/ui/src/skeleton.tsx

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn('animate-pulse rounded-md bg-muted motion-reduce:animate-none', className)}
+      data-slot="skeleton"
+      {...props}
+    />
+  );
+}

package/packages/ui/src/slider.tsx

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export function Slider({
+  className,
+  ...props
+}: React.ComponentProps<'div'> & { 'aria-label'?: string }) {
+  const ariaLabel = (props as { 'aria-label'?: string })['aria-label'] ?? 'Slider';
+  return (
+    <div className={cn('flex items-center gap-2', className)} data-slot="slider" {...props}>
+      <input type="range" aria-label={ariaLabel} className="w-full" />
+    </div>
+  );
+}

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

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

package/packages/ui/src/social-proof.tsx

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

package/packages/ui/src/spinner.tsx

@@ -0,0 +1,26 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      aria-label={props['aria-label'] ?? undefined}
+      className={cn('size-4 animate-spin motion-reduce:animate-none', className)}
+      data-slot="spinner"
+      fill="none"
+      role={props['aria-label'] ? 'status' : undefined}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="3" />
+      <path
+        className="opacity-90"
+        d="M21 12a9 9 0 0 0-9-9"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="3"
+      />
+    </svg>
+  );
+}

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

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

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

@@ -0,0 +1,33 @@
+import { expect, test } from 'vitest';
+import { userEvent } from 'vitest/browser';
+import { render } from 'vitest-browser-react';
+
+import { DirectionProvider } from './direction';
+import { Tabs, TabsList, TabsPanel, TabsTab } from './tabs';
+
+test('Tabs exposes compound panels and follows RTL keyboard direction', async () => {
+  const screen = await render(
+    <DirectionProvider direction="rtl">
+      <Tabs defaultValue="account">
+        <TabsList activateOnFocus aria-label="تنظیمات">
+          <TabsTab value="account">حساب</TabsTab>
+          <TabsTab value="team">تیم</TabsTab>
+        </TabsList>
+        <TabsPanel value="account">تنظیمات حساب</TabsPanel>
+        <TabsPanel value="team">تنظیمات تیم</TabsPanel>
+      </Tabs>
+    </DirectionProvider>,
+  );
+
+  const accountTab = screen.getByRole('tab', { name: 'حساب' });
+  const teamTab = screen.getByRole('tab', { name: 'تیم' });
+  await expect.element(accountTab).toHaveAttribute('aria-selected', 'true');
+  await expect.element(screen.getByRole('tabpanel')).toHaveTextContent('تنظیمات حساب');
+
+  accountTab.element().focus();
+  await userEvent.keyboard('{ArrowLeft}');
+
+  await expect.element(teamTab).toHaveFocus();
+  await expect.element(teamTab).toHaveAttribute('aria-selected', 'true');
+  await expect.element(screen.getByRole('tabpanel')).toHaveTextContent('تنظیمات تیم');
+});