arcway 0.1.0

package/client/ui/main-content.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+function MainContentHeader({ children }) {
+  return (
+    <header
+      data-main-header
+      className="flex h-14 shrink-0 items-center border-b border-border px-4"
+    >
+      {children}
+    </header>
+  );
+}
+function MainContentBody({ children }) {
+  return (
+    <div data-main-body className="flex-1 overflow-y-auto">
+      {children}
+    </div>
+  );
+}
+function MainContentRoot({ children }) {
+  return (
+    <main data-main className="@container/main flex flex-1 flex-col overflow-hidden bg-background">
+      {children}
+    </main>
+  );
+}
+const MainContent = Object.assign(MainContentRoot, {
+  Header: MainContentHeader,
+  Body: MainContentBody,
+});
+export { MainContent };

package/client/ui/menubar.jsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { Menubar as MenubarPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+import { CheckIcon, ChevronRightIcon } from 'lucide-react';
+function Menubar({ className, ...props }) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn('cn-menubar flex items-center', className)}
+      {...props}
+    />
+  );
+}
+function MenubarMenu({ ...props }) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
+}
+function MenubarGroup({ ...props }) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
+}
+function MenubarPortal({ ...props }) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
+}
+function MenubarRadioGroup({ ...props }) {
+  return <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />;
+}
+function MenubarTrigger({ className, ...props }) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn('cn-menubar-trigger flex items-center outline-hidden select-none', className)}
+      {...props}
+    />
+  );
+}
+function MenubarContent({
+  className,
+  align = 'start',
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          'cn-menubar-content cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  );
+}
+function MenubarItem({ className, inset, variant = 'default', ...props }) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        'cn-menubar-item group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function MenubarCheckboxItem({ className, children, checked, inset, ...props }) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        'cn-menubar-checkbox-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="cn-menubar-checkbox-item-indicator pointer-events-none absolute flex items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  );
+}
+function MenubarRadioItem({ className, children, inset, ...props }) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        'cn-menubar-radio-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    >
+      <span className="cn-menubar-radio-item-indicator pointer-events-none absolute flex items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  );
+}
+function MenubarLabel({ className, inset, ...props }) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn('cn-menubar-label', className)}
+      {...props}
+    />
+  );
+}
+function MenubarSeparator({ className, ...props }) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn('cn-menubar-separator -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+function MenubarShortcut({ className, ...props }) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn('cn-menubar-shortcut ml-auto', className)}
+      {...props}
+    />
+  );
+}
+function MenubarSub({ ...props }) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+function MenubarSubTrigger({ className, inset, children, ...props }) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'cn-menubar-sub-trigger flex cursor-default items-center outline-none select-none',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto size-4" />
+    </MenubarPrimitive.SubTrigger>
+  );
+}
+function MenubarSubContent({ className, ...props }) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        'cn-menubar-sub-content cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+};

package/client/ui/menubar.stories.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+} from './menubar.jsx';
+const meta = {
+  title: 'UI/Menubar',
+  component: Menubar,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>New File</MenubarItem>
+          <MenubarItem>Open</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Exit</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Undo</MenubarItem>
+          <MenubarItem>Redo</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('File')).toBeInTheDocument();
+    await expect(canvas.getByText('Edit')).toBeInTheDocument();
+  },
+};
+export { Default, stdin_default as default };

package/client/ui/native-select.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { cn } from './lib/utils.js';
+import { ChevronDownIcon } from 'lucide-react';
+function NativeSelect({ className, size = 'default', ...props }) {
+  return (
+    <div
+      className={cn(
+        'cn-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50',
+        className,
+      )}
+      data-slot="native-select-wrapper"
+      data-size={size}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="cn-native-select outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
+        {...props}
+      />
+      <ChevronDownIcon
+        className="cn-native-select-icon pointer-events-none absolute select-none"
+        aria-hidden="true"
+        data-slot="native-select-icon"
+      />
+    </div>
+  );
+}
+function NativeSelectOption({ ...props }) {
+  return <option data-slot="native-select-option" {...props} />;
+}
+function NativeSelectOptGroup({ className, ...props }) {
+  return <optgroup data-slot="native-select-optgroup" className={cn(className)} {...props} />;
+}
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/client/ui/native-select.stories.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { NativeSelect, NativeSelectOption, NativeSelectOptGroup } from './native-select.jsx';
+const meta = {
+  title: 'UI/NativeSelect',
+  component: NativeSelect,
+};
+var stdin_default = meta;
+const Default = {
+  render: (args) => (
+    <NativeSelect {...args}>
+      <NativeSelectOption value="">Select...</NativeSelectOption>
+      <NativeSelectOption value="apple">Apple</NativeSelectOption>
+      <NativeSelectOption value="banana">Banana</NativeSelectOption>
+      <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
+    </NativeSelect>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const select = canvas.getByRole('combobox');
+    await expect(select).toBeInTheDocument();
+    await expect(select.dataset.slot).toBe('native-select');
+  },
+};
+const WithOptGroups = {
+  render: () => (
+    <NativeSelect>
+      <NativeSelectOptGroup label="Fruits">
+        <NativeSelectOption value="apple">Apple</NativeSelectOption>
+        <NativeSelectOption value="banana">Banana</NativeSelectOption>
+      </NativeSelectOptGroup>
+      <NativeSelectOptGroup label="Vegetables">
+        <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
+      </NativeSelectOptGroup>
+    </NativeSelect>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const options = canvas.getAllByRole('option');
+    await expect(options.length).toBeGreaterThanOrEqual(3);
+  },
+};
+const SmallSize = {
+  render: () => (
+    <NativeSelect size="sm">
+      <NativeSelectOption value="a">Small A</NativeSelectOption>
+      <NativeSelectOption value="b">Small B</NativeSelectOption>
+    </NativeSelect>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const select = canvas.getByRole('combobox');
+    await expect(select.dataset.size).toBe('sm');
+  },
+};
+const Disabled = {
+  render: () => (
+    <NativeSelect disabled>
+      <NativeSelectOption value="a">Disabled</NativeSelectOption>
+    </NativeSelect>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('combobox')).toBeDisabled();
+  },
+};
+export { Default, Disabled, SmallSize, WithOptGroups, stdin_default as default };

package/client/ui/navigation-menu.jsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+import { ChevronDownIcon } from 'lucide-react';
+function NavigationMenu({ className, children, viewport = true, ...props }) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        'cn-navigation-menu group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+function NavigationMenuList({ className, ...props }) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        'cn-navigation-menu-list group flex flex-1 list-none items-center justify-center',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function NavigationMenuItem({ className, ...props }) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn('cn-navigation-menu-item relative', className)}
+      {...props}
+    />
+  );
+}
+const navigationMenuTriggerStyle = cva(
+  'cn-navigation-menu-trigger group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none',
+);
+function NavigationMenuTrigger({ className, children, ...props }) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children} <ChevronDownIcon className="cn-navigation-menu-trigger-icon" aria-hidden="true" />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+function NavigationMenuContent({ className, ...props }) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        'cn-navigation-menu-content top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function NavigationMenuViewport({ className, ...props }) {
+  return (
+    <div
+      className={cn(
+        'cn-navigation-menu-viewport-wrapper absolute top-full left-0 isolate z-50 flex justify-center',
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          'cn-navigation-menu-viewport origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden md:w-(--radix-navigation-menu-viewport-width)',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+function NavigationMenuLink({ className, ...props }) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn('cn-navigation-menu-link', className)}
+      {...props}
+    />
+  );
+}
+function NavigationMenuIndicator({ className, ...props }) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        'cn-navigation-menu-indicator top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="cn-navigation-menu-indicator-arrow relative top-[60%] h-2 w-2 rotate-45" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+} from './navigation-menu.jsx';
+const meta = {
+  title: 'UI/NavigationMenu',
+  component: NavigationMenu,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div style={{ padding: '1rem', width: '200px' }}>
+              <NavigationMenuLink href="#">Introduction</NavigationMenuLink>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div style={{ padding: '1rem', width: '200px' }}>
+              <NavigationMenuLink href="#">Overview</NavigationMenuLink>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Getting Started')).toBeInTheDocument();
+    await expect(canvas.getByText('Components')).toBeInTheDocument();
+  },
+};
+export { Default, stdin_default as default };

package/client/ui/pagination.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { cn } from './lib/utils.js';
+import { Button } from './button.jsx';
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
+function Pagination({ className, ...props }) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn('cn-pagination mx-auto flex w-full justify-center', className)}
+      {...props}
+    />
+  );
+}
+function PaginationContent({ className, ...props }) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn('cn-pagination-content flex items-center', className)}
+      {...props}
+    />
+  );
+}
+function PaginationItem({ ...props }) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+function PaginationLink({ className, isActive, size = 'icon', ...props }) {
+  return (
+    <Button
+      asChild
+      variant={isActive ? 'outline' : 'ghost'}
+      size={size}
+      className={cn('cn-pagination-link', className)}
+    >
+      <a
+        aria-current={isActive ? 'page' : void 0}
+        data-slot="pagination-link"
+        data-active={isActive}
+        {...props}
+      />
+    </Button>
+  );
+}
+function PaginationPrevious({ className, text = 'Previous', ...props }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn('cn-pagination-previous', className)}
+      {...props}
+    >
+      <ChevronLeftIcon data-icon="inline-start" className="cn-rtl-flip" />
+      <span className="cn-pagination-previous-text hidden sm:block">{text}</span>
+    </PaginationLink>
+  );
+}
+function PaginationNext({ className, text = 'Next', ...props }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn('cn-pagination-next', className)}
+      {...props}
+    >
+      <span className="cn-pagination-next-text hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" className="cn-rtl-flip" />
+    </PaginationLink>
+  );
+}
+function PaginationEllipsis({ className, ...props }) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn('cn-pagination-ellipsis flex items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};

package/client/ui/pagination.stories.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationLink,
+  PaginationEllipsis,
+} from './pagination.jsx';
+const meta = {
+  title: 'UI/Pagination',
+  component: Pagination,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            1
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">2</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const nav = canvas.getByRole('navigation', { name: 'pagination' });
+    await expect(nav).toBeInTheDocument();
+    await expect(canvas.getByLabelText('Go to previous page')).toBeInTheDocument();
+    await expect(canvas.getByLabelText('Go to next page')).toBeInTheDocument();
+  },
+};
+export { Default, stdin_default as default };