noecosystem-design 0.1.0

package/packages/ui/src/index.ts

@@ -0,0 +1,110 @@
+export * from './about-page';
+export * from './alert';
+export * from './app-frame';
+export * from './avatar';
+export * from './badge';
+export * from './badge-group';
+export * from './banner';
+export * from './bidi';
+export * from './blog-index-page';
+export * from './blog-post-page';
+export * from './blog-section';
+export * from './bottom-navigation';
+export * from './button';
+export * from './button-group';
+export * from './calendar';
+export * from './card';
+export * from './careers-section';
+export * from './carousel';
+export * from './checkbox';
+export * from './cinematic/index';
+export * from './code';
+export * from './color-picker';
+export * from './command-menu';
+export * from './contact-page';
+export * from './contact-section';
+export * from './content-divider';
+export * from './content-section';
+export * from './context-menu';
+export * from './credit-card';
+export * from './cta-section';
+export * from './data-list';
+export * from './date-picker';
+export * from './dialog';
+export * from './direction';
+export * from './drawer';
+export * from './dropdown';
+export * from './email-template';
+export * from './empty-state';
+export * from './error-state';
+export * from './fab';
+export * from './faq-page';
+export * from './faq-section';
+export * from './feature-section';
+export * from './featured-icon';
+export * from './field';
+export * from './file-uploader';
+export * from './footer';
+export * from './forgot-password-page';
+export * from './gradient-picker';
+export * from './header-navigation';
+export * from './hero-header';
+export * from './illustration';
+export * from './image-picker';
+export * from './informational-page-01';
+export * from './informational-page-02';
+export * from './inline-cta';
+export * from './input';
+export * from './landing-page';
+export * from './legal-page';
+export * from './login-page';
+export * from './marketing-404-page';
+export * from './marketing-header';
+export * from './menu';
+export * from './messaging';
+export * from './metrics-section';
+export * from './mobile-screen';
+export * from './multi-select';
+export * from './newsletter';
+export * from './not-found';
+export * from './notification';
+export * from './page-header';
+export * from './pricing-page';
+export * from './pricing-section';
+export * from './progress-indicator';
+export * from './progress-steps';
+export * from './qr-code';
+export * from './radio-group';
+export * from './rating';
+export * from './rich-text-editor';
+export * from './section-footer';
+export * from './section-header';
+export * from './select';
+export * from './settings-01';
+export * from './settings-02';
+export * from './settings-page';
+export * from './sidebar-navigation';
+export * from './sign-in-form';
+export * from './sign-up-page';
+export * from './skeleton';
+export * from './slider';
+export * from './social-button';
+export * from './social-proof';
+export * from './spinner';
+export * from './store-button';
+export * from './tabs';
+export * from './tags';
+export * from './team-page';
+export * from './team-section';
+export * from './testimonial-section';
+export * from './textarea';
+export * from './theme-provider';
+export * from './theme-toggle';
+export * from './toggle';
+export * from './tooltip';
+export * from './tree-view';
+export * from './utility-button';
+export * from './utils';
+export * from './verification-code';
+export * from './verification-page';
+export * from './video-player';

package/packages/ui/src/informational-page-01.tsx

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

package/packages/ui/src/informational-page-02.tsx

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

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

@@ -0,0 +1,29 @@
+import { ChevronIcon } from '@noe/icons';
+import type * as React from 'react';
+import { cn } from './lib/cn';
+
+export interface InlineCtaProps extends React.ComponentProps<'a'> {
+  /** Visual variant */
+  variant?: 'primary' | 'secondary';
+}
+
+/**
+ * InlineCta — inline call to action link with trailing logical chevron, tokenized.
+ * Distinct from Button (block) and CTA Section (marketing block); use inline within prose.
+ */
+export function InlineCta({ className, variant = 'primary', children, ...props }: InlineCtaProps) {
+  return (
+    <a
+      className={cn(
+        'inline-flex items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring',
+        variant === 'primary' ? 'text-accent' : 'text-foreground',
+        className,
+      )}
+      data-slot="inline-cta"
+      {...props}
+    >
+      <span>{children}</span>
+      <ChevronIcon direction="forward" className="size-4 shrink-0" />
+    </a>
+  );
+}

package/packages/ui/src/input.tsx

@@ -0,0 +1,44 @@
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+
+export type InputProps = Omit<
+  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,
+  'size' | 'type'
+> & {
+  size?: InputSize;
+  type?: React.HTMLInputTypeAttribute;
+};
+
+export function Input({ className, dir, size = 'md', type, ...props }: InputProps) {
+  const technical = ['email', 'url', 'tel', 'number'].includes(type ?? '');
+
+  return (
+    <span
+      className={cn(
+        'relative inline-flex w-full rounded-md border border-border bg-background transition-[border-color,box-shadow] duration-(--noe-motion-duration-fast) ease-standard has-focus-visible:border-accent has-focus-visible:ring-2 has-focus-visible:ring-focus-ring has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 has-disabled:cursor-not-allowed has-disabled:opacity-50',
+        className,
+      )}
+      data-size={size}
+      data-slot="input-control"
+    >
+      <InputPrimitive
+        className={cn(
+          'w-full min-w-0 rounded-[inherit] bg-transparent px-3 text-foreground outline-none placeholder:text-muted-foreground',
+          size === 'sm' && 'h-(--noe-control-height-sm) text-sm',
+          size === 'md' && 'h-(--noe-control-height-md) text-sm',
+          size === 'lg' && 'h-(--noe-control-height-lg) text-base',
+          type === 'file' &&
+            'text-muted-foreground file:me-3 file:border-0 file:bg-transparent file:font-medium file:text-foreground',
+        )}
+        data-slot="input"
+        dir={technical ? 'ltr' : (dir ?? 'auto')}
+        type={type}
+        {...props}
+      />
+    </span>
+  );
+}

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

@@ -0,0 +1,56 @@
+import type * as React from 'react';
+import { HeroHeader } from './hero-header';
+import { cn } from './lib/cn';
+import { MarketingHeader } from './marketing-header';
+
+export interface LandingPageProps extends React.ComponentProps<'div'> {
+  header?: React.ReactNode;
+  hero?: React.ReactNode;
+  sections?: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+/**
+ * LandingPage — marketing landing composition, composes MarketingHeader, HeroHeader and sections.
+ * Sections are passed as children; no hidden page-specific primitives.
+ */
+export function LandingPage({
+  header,
+  hero,
+  sections,
+  footer,
+  className,
+  ...props
+}: LandingPageProps) {
+  return (
+    <div
+      className={cn('flex w-full flex-col bg-background text-foreground', className)}
+      data-slot="landing-page"
+      {...props}
+    >
+      {header ?? (
+        <MarketingHeader brand={<span className="font-heading font-semibold">NOEcosystem</span>} />
+      )}
+      {hero ?? (
+        <HeroHeader
+          eyebrow="NOECOSYSTEM"
+          title="Shared foundations. Connected experiences."
+          description="A shared digital foundation for connected products."
+        />
+      )}
+      {sections ? (
+        <div className="flex flex-col" data-slot="landing-page-sections">
+          {sections}
+        </div>
+      ) : null}
+      {footer ? (
+        <footer
+          className="border-t border-border px-6 py-8 text-sm text-muted-foreground"
+          data-slot="landing-page-footer"
+        >
+          {footer}
+        </footer>
+      ) : null}
+    </div>
+  );
+}

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

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

package/packages/ui/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/packages/ui/src/lib/i18n-messages.ts

@@ -0,0 +1,40 @@
+// Re-export canonical helper but keep inline copy for registry installability
+// Canonical source is @noe/i18n/src/translate.ts; this file mirrors it for consumers
+// who install via registry without the full monorepo. Parity is enforced by translate.test.ts.
+const en = {
+  'calendar.previousMonth': 'Previous month',
+  'calendar.nextMonth': 'Next month',
+  'calendar.chooseDate': 'Choose date',
+  'datePicker.close': 'Close',
+  'datePicker.chooseDate': 'Choose date',
+  'datePicker.outOfRange': 'Date is out of range',
+  'datePicker.placeholder.gregory': 'YYYY-MM-DD',
+  'datePicker.placeholder.persian': 'YYYY/MM/DD',
+  'theme.toggle.light': 'Switch to light theme',
+  'theme.toggle.dark': 'Switch to dark theme',
+  'theme.preference.light': 'Light',
+  'theme.preference.dark': 'Dark',
+} as const;
+
+const fa = {
+  'calendar.previousMonth': 'ماه قبل',
+  'calendar.nextMonth': 'ماه بعد',
+  'calendar.chooseDate': 'انتخاب تاریخ',
+  'datePicker.close': 'بستن',
+  'datePicker.chooseDate': 'انتخاب تاریخ',
+  'datePicker.outOfRange': 'تاریخ خارج از محدوده است',
+  'datePicker.placeholder.gregory': 'YYYY-MM-DD',
+  'datePicker.placeholder.persian': '۱۴۰۳/۰۱/۰۱',
+  'theme.toggle.light': 'تغییر به حالت روشن',
+  'theme.toggle.dark': 'تغییر به حالت تیره',
+  'theme.preference.light': 'روشن',
+  'theme.preference.dark': 'تیره',
+} as const;
+
+type Key = keyof typeof en;
+export function t(locale: string | undefined, key: Key, fallback?: string): string {
+  const isFa = locale?.startsWith('fa');
+  const dict = isFa ? fa : en;
+  return (dict[key] as string) ?? fallback ?? (en[key] as string) ?? key;
+}
+export type MessageKey = Key;

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

@@ -0,0 +1,78 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface LoginPageProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+  /** Brand slot — logo or product name, rendered at logical start */
+  brand?: React.ReactNode;
+  /** Page title */
+  title: React.ReactNode;
+  /** Optional description below title */
+  description?: React.ReactNode;
+  /** Form composition — typically SignInForm */
+  form: React.ReactNode;
+  /** Footer slot — e.g., SSO note, links */
+  footer?: React.ReactNode;
+  /** Side illustration or marketing copy for wide screens */
+  aside?: React.ReactNode;
+}
+
+/**
+ * LoginPage — shared auth page composition.
+ * Composes branding, title, form and footer with responsive two-column layout on desktop.
+ * No nested <main>; outer is <section aria-label>. AppFrame owns primary landmark.
+ */
+export function LoginPage({
+  brand,
+  title,
+  description,
+  form,
+  footer,
+  aside,
+  className,
+  ...props
+}: LoginPageProps) {
+  return (
+    <section
+      aria-label={typeof title === 'string' ? title : 'Sign in'}
+      className={cn(
+        'flex min-h-[calc(100dvh-4rem)] w-full items-center justify-center bg-background p-4 sm:p-6',
+        className,
+      )}
+      data-slot="login-page"
+      {...props}
+    >
+      <div className="flex w-full max-w-5xl flex-col gap-8 rounded-xl border border-border bg-surface-raised shadow-raised md:flex-row">
+        <div className="flex flex-1 flex-col gap-6 p-8 sm:p-10">
+          {brand ? (
+            <div className="flex items-center" data-slot="login-page-brand">
+              {brand}
+            </div>
+          ) : null}
+          <div className="flex flex-col gap-1.5 text-start">
+            <h1 className="m-0 font-heading text-2xl font-semibold tracking-tight text-foreground">
+              {title}
+            </h1>
+            {description ? (
+              <p className="m-0 text-sm leading-normal text-muted-foreground">{description}</p>
+            ) : null}
+          </div>
+          <div data-slot="login-page-form">{form}</div>
+          {footer ? (
+            <div className="pt-2 text-xs text-muted-foreground" data-slot="login-page-footer">
+              {footer}
+            </div>
+          ) : null}
+        </div>
+        {aside ? (
+          <div
+            className="hidden flex-1 items-center justify-center border-s border-border bg-surface p-8 md:flex"
+            data-slot="login-page-aside"
+          >
+            {aside}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/packages/ui/src/marketing-404-page.tsx

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

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

@@ -0,0 +1,53 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface MarketingHeaderProps extends React.ComponentProps<'header'> {
+  brand?: React.ReactNode;
+  links?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+/**
+ * MarketingHeader — top marketing header, distinct from application HeaderNavigation.
+ * Content-driven, responsive, uses logical gap.
+ */
+export function MarketingHeader({
+  brand,
+  links,
+  actions,
+  className,
+  ...props
+}: MarketingHeaderProps) {
+  return (
+    <header
+      className={cn(
+        'flex w-full items-center justify-between gap-4 border-b border-border bg-background px-6 py-4',
+        className,
+      )}
+      data-slot="marketing-header"
+      {...props}
+    >
+      <div className="flex items-center gap-6">
+        {brand ? (
+          <div className="shrink-0" data-slot="marketing-header-brand">
+            {brand}
+          </div>
+        ) : null}
+        {links ? (
+          <nav
+            className="hidden items-center gap-4 text-sm text-muted-foreground md:flex"
+            data-slot="marketing-header-links"
+          >
+            {links}
+          </nav>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className="flex items-center gap-2" data-slot="marketing-header-actions">
+          {actions}
+        </div>
+      ) : null}
+    </header>
+  );
+}