arcway 0.1.0

package/client/ui/direction.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Direction } from 'radix-ui';
+function DirectionProvider({ dir, direction, children }) {
+  return (
+    <Direction.DirectionProvider dir={direction ?? dir}>{children}</Direction.DirectionProvider>
+  );
+}
+const useDirection = Direction.useDirection;
+export { DirectionProvider, useDirection };

package/client/ui/drawer.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+import { cn } from './lib/utils.js';
+function Drawer({ ...props }) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+function DrawerTrigger({ ...props }) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+function DrawerPortal({ ...props }) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+function DrawerClose({ ...props }) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+function DrawerOverlay({ className, ...props }) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn('cn-drawer-overlay fixed inset-0 z-50', className)}
+      {...props}
+    />
+  );
+}
+function DrawerContent({ className, children, ...props }) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn('cn-drawer-content group/drawer-content fixed z-50', className)}
+        {...props}
+      >
+        <div className="cn-drawer-handle mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+function DrawerHeader({ className, ...props }) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn('cn-drawer-header flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('cn-drawer-footer mt-auto flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+function DrawerTitle({ className, ...props }) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('cn-drawer-title', className)}
+      {...props}
+    />
+  );
+}
+function DrawerDescription({ className, ...props }) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('cn-drawer-description', className)}
+      {...props}
+    />
+  );
+}
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+};

package/client/ui/dropdown-menu.jsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+import { CheckIcon, ChevronRightIcon } from 'lucide-react';
+function DropdownMenu({ ...props }) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+function DropdownMenuPortal({ ...props }) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+function DropdownMenuTrigger({ ...props }) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+function DropdownMenuContent({ className, align = 'start', sideOffset = 4, ...props }) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn(
+          'cn-dropdown-menu-content cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+function DropdownMenuGroup({ ...props }) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        'cn-dropdown-menu-item group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        'cn-dropdown-menu-checkbox-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="cn-dropdown-menu-item-indicator pointer-events-none"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+function DropdownMenuRadioGroup({ ...props }) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        'cn-dropdown-menu-radio-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className="cn-dropdown-menu-item-indicator pointer-events-none"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn('cn-dropdown-menu-label', className)}
+      {...props}
+    />
+  );
+}
+function DropdownMenuSeparator({ className, ...props }) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('cn-dropdown-menu-separator', className)}
+      {...props}
+    />
+  );
+}
+function DropdownMenuShortcut({ className, ...props }) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn('cn-dropdown-menu-shortcut', className)}
+      {...props}
+    />
+  );
+}
+function DropdownMenuSub({ ...props }) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'cn-dropdown-menu-sub-trigger flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+function DropdownMenuSubContent({ className, ...props }) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'cn-dropdown-menu-sub-content cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

package/client/ui/dropdown-menu.stories.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from './dropdown-menu.jsx';
+import { Button } from './button.jsx';
+const meta = {
+  title: 'UI/DropdownMenu',
+  component: DropdownMenu,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button>Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <DropdownMenuItem>Logout</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('button', { name: 'Open Menu' });
+    await expect(trigger).toBeInTheDocument();
+  },
+};
+export { Default, stdin_default as default };

package/client/ui/empty.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from './lib/utils.js';
+function Empty({ className, ...props }) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        'cn-empty flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function EmptyHeader({ className, ...props }) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn('cn-empty-header flex max-w-sm flex-col items-center', className)}
+      {...props}
+    />
+  );
+}
+const emptyMediaVariants = cva(
+  'cn-empty-media flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'cn-empty-media-default',
+        icon: 'cn-empty-media-icon',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+function EmptyMedia({ className, variant = 'default', ...props }) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+function EmptyTitle({ className, ...props }) {
+  return <div data-slot="empty-title" className={cn('cn-empty-title', className)} {...props} />;
+}
+function EmptyDescription({ className, ...props }) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        'cn-empty-description text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function EmptyContent({ className, ...props }) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        'cn-empty-content flex w-full max-w-sm min-w-0 flex-col items-center text-balance',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/client/ui/empty.stories.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { expect } from 'storybook/test';
+import {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+} from './empty.jsx';
+const meta = {
+  title: 'UI/Empty',
+  component: Empty,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Empty>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <svg
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+          </svg>
+        </EmptyMedia>
+        <EmptyTitle>No items found</EmptyTitle>
+        <EmptyDescription>Get started by creating your first item.</EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  ),
+  play: async ({ canvasElement }) => {
+    const empty = canvasElement.querySelector('[data-slot="empty"]');
+    await expect(empty).toBeInTheDocument();
+    const title = canvasElement.querySelector('[data-slot="empty-title"]');
+    await expect(title).toBeInTheDocument();
+    await expect(title.textContent).toBe('No items found');
+    const desc = canvasElement.querySelector('[data-slot="empty-description"]');
+    await expect(desc.textContent).toBe('Get started by creating your first item.');
+  },
+};
+const WithContent = {
+  render: () => (
+    <Empty>
+      <EmptyHeader>
+        <EmptyTitle>Empty state</EmptyTitle>
+        <EmptyDescription>Nothing here yet.</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <p>Additional content goes here.</p>
+      </EmptyContent>
+    </Empty>
+  ),
+  play: async ({ canvasElement }) => {
+    const content = canvasElement.querySelector('[data-slot="empty-content"]');
+    await expect(content).toBeInTheDocument();
+  },
+};
+export { Default, WithContent, stdin_default as default };

package/client/ui/field.jsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import { useMemo } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from './lib/utils.js';
+import { Label } from './label.jsx';
+import { Separator } from './separator.jsx';
+function FieldSet({ className, ...props }) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn('cn-field-set flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+function FieldLegend({ className, variant = 'legend', ...props }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn('cn-field-legend', className)}
+      {...props}
+    />
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        'cn-field-group group/field-group @container/field-group flex w-full flex-col',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+const fieldVariants = cva('cn-field group/field flex w-full', {
+  variants: {
+    orientation: {
+      vertical: 'cn-field-orientation-vertical flex-col *:w-full [&>.sr-only]:w-auto',
+      horizontal:
+        'cn-field-orientation-horizontal flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+      responsive:
+        'cn-field-orientation-responsive flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+});
+function Field({ className, orientation = 'vertical', ...props }) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+function FieldContent({ className, ...props }) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        'cn-field-content group/field-content flex flex-1 flex-col leading-snug',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function FieldLabel({ className, ...props }) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        'cn-field-label group/field-label peer/field-label flex w-fit leading-snug',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn('cn-field-title flex w-fit items-center leading-snug', className)}
+      {...props}
+    />
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        'cn-field-description leading-normal font-normal group-has-data-horizontal/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function FieldSeparator({ children, className, ...props }) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn('cn-field-separator relative', className)}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="cn-field-separator-content bg-background relative mx-auto block w-fit"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+function FieldError({ className, children, errors, ...props }) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+      </ul>
+    );
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn('cn-field-error font-normal', className)}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+};