noecosystem-design 0.1.0

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

@@ -0,0 +1,32 @@
+import { expect, test } from 'vitest';
+import { userEvent } from 'vitest/browser';
+import { render } from 'vitest-browser-react';
+
+import { Button } from './button';
+import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from './dialog';
+import { DirectionProvider } from './direction';
+
+test('Dialog propagates RTL into the portal and traps then restores focus', async () => {
+  const screen = await render(
+    <DirectionProvider direction="rtl">
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>باز کردن</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>تنظیمات</DialogTitle>
+          <DialogClose render={<Button variant="ghost" />}>بستن</DialogClose>
+        </DialogContent>
+      </Dialog>
+    </DirectionProvider>,
+  );
+
+  const trigger = screen.getByRole('button', { name: 'باز کردن' });
+  await trigger.click();
+
+  const dialog = screen.getByRole('dialog', { name: 'تنظیمات' });
+  await expect.element(dialog).toHaveAttribute('dir', 'rtl');
+  expect(dialog.element().contains(document.activeElement)).toBe(true);
+
+  await userEvent.keyboard('{Escape}');
+  await expect.element(dialog).not.toBeInTheDocument();
+  await expect.element(trigger).toHaveFocus();
+});

package/packages/ui/src/dialog.tsx

@@ -0,0 +1,144 @@
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import type * as React from 'react';
+import { useDirection } from './direction';
+import { cn } from './lib/cn';
+
+export interface LegacyDialogProps {
+  children: React.ReactNode;
+  description?: React.ReactNode;
+  onClose(): void;
+  open: boolean;
+  title: React.ReactNode;
+}
+
+function isLegacyDialogProps(
+  props: DialogPrimitive.Root.Props | LegacyDialogProps,
+): props is LegacyDialogProps {
+  return 'onClose' in props;
+}
+
+export function Dialog(props: DialogPrimitive.Root.Props | LegacyDialogProps) {
+  if (!isLegacyDialogProps(props)) return <DialogPrimitive.Root {...props} />;
+
+  const { children, description, onClose, open, title } = props;
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description ? <DialogDescription>{description}</DialogDescription> : null}
+        </DialogHeader>
+        <DialogPanel>{children}</DialogPanel>
+      </DialogContent>
+    </DialogPrimitive.Root>
+  );
+}
+
+export function DialogTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return (
+    <DialogPrimitive.Trigger className={cn(className)} data-slot="dialog-trigger" {...props} />
+  );
+}
+
+export interface DialogContentProps extends React.ComponentProps<typeof DialogPrimitive.Popup> {
+  portalProps?: React.ComponentProps<typeof DialogPrimitive.Portal>;
+}
+
+export function DialogContent({ className, children, portalProps, ...props }: DialogContentProps) {
+  const direction = useDirection();
+
+  return (
+    <DialogPrimitive.Portal {...portalProps}>
+      <DialogPrimitive.Backdrop
+        className="fixed inset-0 z-(--noe-z-index-overlay) bg-overlay transition-opacity duration-(--noe-motion-duration-normal) data-[ending-style]:opacity-0 data-[starting-style]:opacity-0"
+        data-slot="dialog-backdrop"
+      />
+      <DialogPrimitive.Viewport
+        className="fixed inset-0 z-(--noe-z-index-overlay) grid place-items-center overflow-y-auto p-4"
+        data-slot="dialog-viewport"
+        dir={direction}
+      >
+        <DialogPrimitive.Popup
+          className={cn(
+            'relative flex max-h-[calc(100dvh-var(--noe-space-8))] w-full max-w-(--noe-component-dialog-width) flex-col overflow-hidden rounded-lg border border-border bg-surface-raised text-foreground shadow-overlay outline-none transition-[opacity,transform] duration-(--noe-motion-duration-normal) ease-emphasized data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0',
+            className,
+          )}
+          data-slot="dialog-content"
+          dir={direction}
+          {...props}
+        >
+          {children}
+        </DialogPrimitive.Popup>
+      </DialogPrimitive.Viewport>
+    </DialogPrimitive.Portal>
+  );
+}
+
+export function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex flex-col gap-2 border-b border-border px-6 py-5', className)}
+      data-slot="dialog-header"
+      {...props}
+    />
+  );
+}
+
+export function DialogPanel({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-5', className)}
+      data-slot="dialog-panel"
+      {...props}
+    />
+  );
+}
+
+export function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col-reverse gap-2 border-t border-border bg-surface-sunken/50 px-6 py-4 sm:flex-row sm:justify-end',
+        className,
+      )}
+      data-slot="dialog-footer"
+      {...props}
+    />
+  );
+}
+
+export function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      className={cn('font-heading text-lg font-semibold leading-snug tracking-tight', className)}
+      data-slot="dialog-title"
+      {...props}
+    />
+  );
+}
+
+export function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      className={cn('text-sm leading-normal text-muted-foreground', className)}
+      data-slot="dialog-description"
+      {...props}
+    />
+  );
+}
+
+export function DialogClose({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close className={cn(className)} data-slot="dialog-close" {...props} />;
+}

package/packages/ui/src/direction.tsx

@@ -0,0 +1,46 @@
+import { DirectionProvider as BaseDirectionProvider } from '@base-ui/react/direction-provider';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+
+export type Direction = 'ltr' | 'rtl';
+const DirectionContext = React.createContext<Direction>('ltr');
+
+export function DirectionProvider({
+  direction,
+  children,
+}: {
+  direction: Direction;
+  children: React.ReactNode;
+}) {
+  return (
+    <DirectionContext.Provider value={direction}>
+      <BaseDirectionProvider direction={direction}>
+        <div data-noe-direction={direction} dir={direction}>
+          {children}
+        </div>
+      </BaseDirectionProvider>
+    </DirectionContext.Provider>
+  );
+}
+
+export function useDirection(): Direction {
+  return React.useContext(DirectionContext);
+}
+
+export function DirectionPortal({
+  children,
+  container,
+}: {
+  children: React.ReactNode;
+  container?: Element | DocumentFragment | null;
+}) {
+  const direction = useDirection();
+  if (typeof document === 'undefined') return null;
+  const target = container ?? document.body;
+  return createPortal(
+    <div dir={direction} data-noe-portal="true">
+      {children}
+    </div>,
+    target,
+  );
+}

package/packages/ui/src/drawer.tsx

@@ -0,0 +1,179 @@
+import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
+import * as React from 'react';
+
+import { useDirection } from './direction';
+import { cn } from './lib/cn';
+import { resolveLogicalSide } from './utils';
+
+type DrawerSide = 'start' | 'end';
+
+const DrawerStyleContext = React.createContext<DrawerSide>('end');
+
+export interface DrawerProps extends Omit<DrawerPrimitive.Root.Props, 'swipeDirection'> {
+  side?: 'start' | 'end';
+}
+
+export interface LegacyDrawerProps {
+  children: React.ReactNode;
+  closeLabel: string;
+  onClose(): void;
+  open: boolean;
+  side?: DrawerSide;
+  title: React.ReactNode;
+}
+
+function DrawerRoot({ side = 'end', ...props }: DrawerProps) {
+  const direction = useDirection();
+  const swipeDirection = resolveLogicalSide(side, direction) as 'left' | 'right';
+
+  return (
+    <DrawerStyleContext.Provider value={side}>
+      <DrawerPrimitive.Root swipeDirection={swipeDirection} {...props} />
+    </DrawerStyleContext.Provider>
+  );
+}
+
+function isLegacyDrawerProps(props: DrawerProps | LegacyDrawerProps): props is LegacyDrawerProps {
+  return 'onClose' in props;
+}
+
+export function Drawer(props: DrawerProps | LegacyDrawerProps) {
+  if (!isLegacyDrawerProps(props)) return <DrawerRoot {...props} />;
+
+  const { children, closeLabel, onClose, open, side, title } = props;
+  return (
+    <DrawerRoot
+      open={open}
+      onOpenChange={(nextOpen) => !nextOpen && onClose()}
+      side={side ?? 'end'}
+    >
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>{title}</DrawerTitle>
+          <DrawerClose aria-label={closeLabel} className="sr-only" />
+        </DrawerHeader>
+        <DrawerPanel>{children}</DrawerPanel>
+      </DrawerContent>
+    </DrawerRoot>
+  );
+}
+
+export function DrawerTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return (
+    <DrawerPrimitive.Trigger className={cn(className)} data-slot="drawer-trigger" {...props} />
+  );
+}
+
+export interface DrawerContentProps extends React.ComponentProps<typeof DrawerPrimitive.Popup> {
+  portalProps?: React.ComponentProps<typeof DrawerPrimitive.Portal>;
+}
+
+export function DrawerContent({ className, children, portalProps, ...props }: DrawerContentProps) {
+  const direction = useDirection();
+  const side = React.useContext(DrawerStyleContext);
+
+  return (
+    <DrawerPrimitive.Portal {...portalProps}>
+      <DrawerPrimitive.Backdrop
+        className="fixed inset-0 z-(--noe-z-index-overlay) bg-overlay transition-opacity duration-(--noe-motion-duration-normal) data-[ending-style]:opacity-0 data-[starting-style]:opacity-0"
+        data-slot="drawer-backdrop"
+      />
+      <DrawerPrimitive.Viewport
+        className="fixed inset-0 z-(--noe-z-index-overlay)"
+        data-slot="drawer-viewport"
+        dir={direction}
+      >
+        <DrawerPrimitive.Popup
+          className={cn(
+            'absolute inset-y-0 flex h-full w-[min(92vw,28rem)] flex-col overflow-hidden border-border bg-surface-raised text-foreground shadow-overlay outline-none transition-transform duration-(--noe-motion-duration-normal) ease-emphasized',
+            side === 'start' &&
+              'start-0 border-e data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full rtl:data-[ending-style]:translate-x-full rtl:data-[starting-style]:translate-x-full',
+            side === 'end' &&
+              'end-0 border-s data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full rtl:data-[ending-style]:-translate-x-full rtl:data-[starting-style]:-translate-x-full',
+            className,
+          )}
+          data-side={side}
+          data-slot="drawer-content"
+          dir={direction}
+          {...props}
+        >
+          {children}
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPrimitive.Portal>
+  );
+}
+
+export const DrawerPopup = DrawerContent;
+
+export function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex flex-col gap-2 border-b border-border px-6 py-5', className)}
+      data-slot="drawer-header"
+      {...props}
+    />
+  );
+}
+
+export function DrawerPanel({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPrimitive.Content
+      className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-5', className)}
+      data-slot="drawer-panel"
+      {...props}
+    />
+  );
+}
+
+export function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-2 border-t border-border bg-surface-sunken/50 px-6 py-4',
+        className,
+      )}
+      data-slot="drawer-footer"
+      {...props}
+    />
+  );
+}
+
+export function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      className={cn('font-heading text-lg font-semibold leading-snug tracking-tight', className)}
+      data-slot="drawer-title"
+      {...props}
+    />
+  );
+}
+
+export function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      className={cn('text-sm leading-normal text-muted-foreground', className)}
+      data-slot="drawer-description"
+      {...props}
+    />
+  );
+}
+
+export function DrawerClose({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close className={cn(className)} data-slot="drawer-close" {...props} />;
+}

package/packages/ui/src/dropdown.tsx

@@ -0,0 +1,200 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import type * as React from 'react';
+
+import { useDirection } from './direction';
+import { cn } from './lib/cn';
+
+// Dropdown — single-select disclosure using Menu primitive with logical placement.
+// Distinct from ContextMenu (right-click) and Select (form control); use for action lists.
+
+const dropdownPopupClassName =
+  '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 const Dropdown = MenuPrimitive.Root;
+export const DropdownSub = MenuPrimitive.SubmenuRoot;
+export const DropdownGroup = MenuPrimitive.Group;
+
+export function DropdownTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.Trigger>) {
+  return (
+    <MenuPrimitive.Trigger className={cn(className)} data-slot="dropdown-trigger" {...props} />
+  );
+}
+
+export interface DropdownContentProps extends React.ComponentProps<typeof MenuPrimitive.Popup> {
+  portalProps?: React.ComponentProps<typeof MenuPrimitive.Portal>;
+  positionerProps?: React.ComponentProps<typeof MenuPrimitive.Positioner>;
+}
+
+export function DropdownContent({
+  className,
+  children,
+  portalProps,
+  positionerProps,
+  ...props
+}: DropdownContentProps) {
+  const direction = useDirection();
+  return (
+    <MenuPrimitive.Portal {...portalProps}>
+      <MenuPrimitive.Positioner align="start" sideOffset={6} {...positionerProps}>
+        <MenuPrimitive.Popup
+          className={cn(dropdownPopupClassName, className)}
+          data-slot="dropdown-content"
+          dir={direction}
+          {...props}
+        >
+          {children}
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+export function DropdownSubContent({
+  className,
+  children,
+  portalProps,
+  positionerProps,
+  ...props
+}: DropdownContentProps) {
+  const direction = useDirection();
+  return (
+    <MenuPrimitive.Portal {...portalProps}>
+      <MenuPrimitive.Positioner align="start" side="inline-end" sideOffset={4} {...positionerProps}>
+        <MenuPrimitive.Popup
+          className={cn(dropdownPopupClassName, className)}
+          data-slot="dropdown-sub-content"
+          dir={direction}
+          {...props}
+        >
+          {children}
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const dropdownItemVariants = 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 DropdownItemProps extends React.ComponentProps<typeof MenuPrimitive.Item> {
+  variant?: VariantProps<typeof dropdownItemVariants>['variant'];
+}
+
+export function DropdownItem({ className, variant, ...props }: DropdownItemProps) {
+  return (
+    <MenuPrimitive.Item
+      className={cn(dropdownItemVariants({ variant }), className)}
+      data-slot="dropdown-item"
+      {...props}
+    />
+  );
+}
+export function DropdownCheckboxItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      className={cn(dropdownItemVariants(), 'ps-8', className)}
+      data-slot="dropdown-checkbox-item"
+      {...props}
+    />
+  );
+}
+export function DropdownCheckboxItemIndicator({
+  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="dropdown-checkbox-item-indicator"
+      {...props}
+    />
+  );
+}
+export function DropdownRadioItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.RadioItem>) {
+  return (
+    <MenuPrimitive.RadioItem
+      className={cn(dropdownItemVariants(), 'ps-8', className)}
+      data-slot="dropdown-radio-item"
+      {...props}
+    />
+  );
+}
+export function DropdownRadioItemIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.RadioItemIndicator>) {
+  return (
+    <MenuPrimitive.RadioItemIndicator
+      className={cn('absolute start-2 size-2 rounded-pill bg-current', className)}
+      data-slot="dropdown-radio-item-indicator"
+      {...props}
+    />
+  );
+}
+export function DropdownGroupLabel({
+  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="dropdown-group-label"
+      {...props}
+    />
+  );
+}
+export function DropdownSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.Separator>) {
+  return (
+    <MenuPrimitive.Separator
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      data-slot="dropdown-separator"
+      {...props}
+    />
+  );
+}
+export function DropdownShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn('ms-auto font-mono text-xs text-muted-foreground', className)}
+      data-slot="dropdown-shortcut"
+      dir="ltr"
+      {...props}
+    />
+  );
+}
+export function DropdownSubTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger>) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      className={cn(dropdownItemVariants(), className)}
+      data-slot="dropdown-sub-trigger"
+      {...props}
+    />
+  );
+}

package/packages/ui/src/email-template.tsx

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

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

@@ -0,0 +1,43 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export interface EmptyStateProps extends Omit<React.ComponentProps<'section'>, 'title'> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  media?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export function EmptyState({
+  className,
+  title,
+  description,
+  media,
+  action,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <section
+      className={cn(
+        'flex min-h-64 w-full flex-col items-center justify-center gap-6 rounded-lg border border-dashed border-border bg-surface-sunken/30 p-8 text-center',
+        className,
+      )}
+      data-slot="empty-state"
+      {...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-border bg-surface-raised text-muted-foreground [&_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>
+  );
+}