arcway 0.1.0

package/client/ui/alert-dialog.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+import { Button } from './button.jsx';
+function AlertDialog({ ...props }) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+function AlertDialogTrigger({ ...props }) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+function AlertDialogPortal({ ...props }) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+function AlertDialogOverlay({ className, ...props }) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn('cn-alert-dialog-overlay fixed inset-0 z-50', className)}
+      {...props}
+    />
+  );
+}
+function AlertDialogContent({ className, size = 'default', ...props }) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          'cn-alert-dialog-content group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+function AlertDialogHeader({ className, ...props }) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('cn-alert-dialog-header', className)}
+      {...props}
+    />
+  );
+}
+function AlertDialogFooter({ className, ...props }) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'cn-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function AlertDialogMedia({ className, ...props }) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn('cn-alert-dialog-media', className)}
+      {...props}
+    />
+  );
+}
+function AlertDialogTitle({ className, ...props }) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('cn-alert-dialog-title', className)}
+      {...props}
+    />
+  );
+}
+function AlertDialogDescription({ className, ...props }) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('cn-alert-dialog-description', className)}
+      {...props}
+    />
+  );
+}
+function AlertDialogAction({ className, variant = 'default', size = 'default', ...props }) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn('cn-alert-dialog-action', className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+function AlertDialogCancel({ className, variant = 'outline', size = 'default', ...props }) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn('cn-alert-dialog-cancel', className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/client/ui/alert-dialog.stories.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from './alert-dialog.jsx';
+import { Button } from './button.jsx';
+const meta = {
+  title: 'UI/AlertDialog',
+  component: AlertDialog,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Delete Item</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('button', { name: 'Delete Item' });
+    await expect(trigger).toBeInTheDocument();
+  },
+};
+export { Default, stdin_default as default };

package/client/ui/alert.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from './lib/utils.js';
+const alertVariants = cva('cn-alert w-full relative group/alert', {
+  variants: {
+    variant: {
+      default: 'cn-alert-variant-default',
+      destructive: 'cn-alert-variant-destructive',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+function Alert({ className, variant, ...props }) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'cn-alert-title [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function AlertDescription({ className, ...props }) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'cn-alert-description [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function AlertAction({ className, ...props }) {
+  return <div data-slot="alert-action" className={cn('cn-alert-action', className)} {...props} />;
+}
+export { Alert, AlertAction, AlertDescription, AlertTitle };

package/client/ui/alert.stories.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { Alert, AlertTitle, AlertDescription } from './alert.jsx';
+const meta = {
+  title: 'UI/Alert',
+  component: Alert,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Alert>
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
+    </Alert>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Heads up!')).toBeInTheDocument();
+    const alert = canvasElement.querySelector('[data-slot="alert"]');
+    await expect(alert).toBeInTheDocument();
+  },
+};
+const Destructive = {
+  render: () => (
+    <Alert variant="destructive">
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>Something went wrong. Please try again.</AlertDescription>
+    </Alert>
+  ),
+};
+export { Default, Destructive, stdin_default as default };

package/client/ui/app-shell.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { createContext, useContext, useState, useCallback } from 'react';
+const AppShellContext = createContext(null);
+function useAppShell() {
+  const ctx = useContext(AppShellContext);
+  if (!ctx) throw new Error('useAppShell must be used within an AppShell');
+  return ctx;
+}
+function AppShell({ children, defaultCollapsed = false, defaultPanelOpen = false }) {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultCollapsed);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [panelOpen, setPanelOpen] = useState(defaultPanelOpen);
+  const toggleSidebar = useCallback(() => setSidebarCollapsed((prev) => !prev), []);
+  const toggleMobile = useCallback(() => setMobileOpen((prev) => !prev), []);
+  const togglePanel = useCallback(() => setPanelOpen((prev) => !prev), []);
+  return (
+    <AppShellContext.Provider
+      value={{
+        sidebarCollapsed,
+        setSidebarCollapsed,
+        toggleSidebar,
+        mobileOpen,
+        setMobileOpen,
+        toggleMobile,
+        panelOpen,
+        setPanelOpen,
+        togglePanel,
+      }}
+    >
+      <div
+        data-shell
+        className="@container/shell relative flex h-screen w-full overflow-hidden bg-background text-foreground"
+      >
+        {children}
+      </div>
+    </AppShellContext.Provider>
+  );
+}
+export { AppShell, AppShellContext, useAppShell };

package/client/ui/app-shell.stories.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { AppShell, useAppShell } from './app-shell.jsx';
+const meta = {
+  title: 'UI/AppShell',
+  component: AppShell,
+};
+var stdin_default = meta;
+function SidebarToggle() {
+  const { sidebarCollapsed, toggleSidebar } = useAppShell();
+  return (
+    <button onClick={toggleSidebar}>
+      {sidebarCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
+    </button>
+  );
+}
+function PanelToggle() {
+  const { panelOpen, togglePanel } = useAppShell();
+  return <button onClick={togglePanel}>{panelOpen ? 'Close Panel' : 'Open Panel'}</button>;
+}
+const Default = {
+  render: () => (
+    <AppShell>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '1rem' }}>
+        <SidebarToggle />
+        <PanelToggle />
+        <p>Main content area</p>
+      </div>
+    </AppShell>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Collapse Sidebar')).toBeInTheDocument();
+    await expect(canvas.getByText('Open Panel')).toBeInTheDocument();
+    await expect(canvas.getByText('Main content area')).toBeInTheDocument();
+  },
+};
+const DefaultCollapsed = {
+  render: () => (
+    <AppShell defaultCollapsed>
+      <div style={{ padding: '1rem' }}>
+        <SidebarToggle />
+      </div>
+    </AppShell>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Expand Sidebar')).toBeInTheDocument();
+  },
+};
+export { Default, DefaultCollapsed, stdin_default as default };

package/client/ui/aspect-ratio.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AspectRatio as AspectRatioPrimitive } from 'radix-ui';
+function AspectRatio({ ...props }) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+export { AspectRatio };

package/client/ui/aspect-ratio.stories.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { expect } from 'storybook/test';
+import { AspectRatio } from './aspect-ratio.jsx';
+const meta = {
+  title: 'UI/AspectRatio',
+  component: AspectRatio,
+};
+var stdin_default = meta;
+const Default = {
+  args: {
+    ratio: 16 / 9,
+    children: (
+      <div
+        style={{
+          background: '#e2e8f0',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        16:9
+      </div>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const el = canvasElement.querySelector('[data-slot="aspect-ratio"]');
+    await expect(el).toBeInTheDocument();
+  },
+};
+const Square = {
+  args: {
+    ratio: 1,
+    children: (
+      <div
+        style={{
+          background: '#e2e8f0',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        1:1
+      </div>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 200 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const el = canvasElement.querySelector('[data-slot="aspect-ratio"]');
+    await expect(el).toBeInTheDocument();
+  },
+};
+export { Default, Square, stdin_default as default };

package/client/ui/avatar.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+function Avatar({ className, size = 'default', ...props }) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        'cn-avatar after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function AvatarImage({ className, ...props }) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('cn-avatar-image aspect-square size-full object-cover', className)}
+      {...props}
+    />
+  );
+}
+function AvatarFallback({ className, ...props }) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'cn-avatar-fallback flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function AvatarBadge({ className, ...props }) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        'cn-avatar-badge absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
+        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function AvatarGroup({ className, ...props }) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        'cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function AvatarGroupCount({ className, ...props }) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        'cn-avatar-group-count ring-background relative flex shrink-0 items-center justify-center ring-2',
+        '',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/client/ui/avatar.stories.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { expect } from 'storybook/test';
+import { Avatar, AvatarImage, AvatarFallback } from './avatar.jsx';
+const meta = {
+  title: 'UI/Avatar',
+  component: Avatar,
+  argTypes: {
+    size: { control: 'select', options: ['default', 'sm', 'lg'] },
+  },
+};
+var stdin_default = meta;
+const WithFallback = {
+  render: (args) => (
+    <Avatar {...args}>
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+  play: async ({ canvasElement }) => {
+    const avatar = canvasElement.querySelector('[data-slot="avatar"]');
+    await expect(avatar).toBeInTheDocument();
+    const fallback = canvasElement.querySelector('[data-slot="avatar-fallback"]');
+    await expect(fallback).toBeInTheDocument();
+    await expect(fallback.textContent).toBe('JD');
+  },
+};
+const WithImage = {
+  render: (args) => (
+    <Avatar {...args}>
+      <AvatarImage src="https://github.com/shadcn.png" alt="User" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+  play: async ({ canvasElement }) => {
+    const avatar = canvasElement.querySelector('[data-slot="avatar"]');
+    await expect(avatar).toBeInTheDocument();
+  },
+};
+const Small = {
+  args: { size: 'sm' },
+  render: (args) => (
+    <Avatar {...args}>
+      <AvatarFallback>S</AvatarFallback>
+    </Avatar>
+  ),
+  play: async ({ canvasElement }) => {
+    const avatar = canvasElement.querySelector('[data-slot="avatar"]');
+    await expect(avatar.getAttribute('data-size')).toBe('sm');
+  },
+};
+const Large = {
+  args: { size: 'lg' },
+  render: (args) => (
+    <Avatar {...args}>
+      <AvatarFallback>LG</AvatarFallback>
+    </Avatar>
+  ),
+  play: async ({ canvasElement }) => {
+    const avatar = canvasElement.querySelector('[data-slot="avatar"]');
+    await expect(avatar.getAttribute('data-size')).toBe('lg');
+  },
+};
+export { Large, Small, WithFallback, WithImage, stdin_default as default };

package/client/ui/badge.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { cn } from './lib/utils.js';
+const badgeVariants = cva(
+  'cn-badge inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge',
+  {
+    variants: {
+      variant: {
+        default: 'cn-badge-variant-default',
+        secondary: 'cn-badge-variant-secondary',
+        destructive: 'cn-badge-variant-destructive',
+        outline: 'cn-badge-variant-outline',
+        ghost: 'cn-badge-variant-ghost',
+        link: 'cn-badge-variant-link',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+function Badge({ className, variant = 'default', asChild = false, ...props }) {
+  const Comp = asChild ? Slot.Root : 'span';
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+export { Badge, badgeVariants };

package/client/ui/badge.stories.js

@@ -0,0 +1,32 @@
+import { expect, within } from 'storybook/test';
+import { Badge } from './badge.jsx';
+const meta = {
+  title: 'UI/Badge',
+  component: Badge,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'secondary', 'destructive', 'outline'],
+    },
+  },
+};
+var stdin_default = meta;
+const Default = {
+  args: { children: 'Badge' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const badge = canvas.getByText('Badge');
+    await expect(badge).toBeInTheDocument();
+    await expect(badge.dataset.slot).toBe('badge');
+  },
+};
+const Secondary = {
+  args: { children: 'Secondary', variant: 'secondary' },
+};
+const Destructive = {
+  args: { children: 'Destructive', variant: 'destructive' },
+};
+const Outline = {
+  args: { children: 'Outline', variant: 'outline' },
+};
+export { Default, Destructive, Outline, Secondary, stdin_default as default };