arcway 0.1.0

package/client/ui/breadcrumb.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Slot } from 'radix-ui';
+import { cn } from './lib/utils.js';
+import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
+function Breadcrumb({ className, ...props }) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn('cn-breadcrumb', className)}
+      {...props}
+    />
+  );
+}
+function BreadcrumbList({ className, ...props }) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn('cn-breadcrumb-list flex flex-wrap items-center wrap-break-word', className)}
+      {...props}
+    />
+  );
+}
+function BreadcrumbItem({ className, ...props }) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('cn-breadcrumb-item inline-flex items-center', className)}
+      {...props}
+    />
+  );
+}
+function BreadcrumbLink({ asChild, className, ...props }) {
+  const Comp = asChild ? Slot.Root : 'a';
+  return (
+    <Comp data-slot="breadcrumb-link" className={cn('cn-breadcrumb-link', className)} {...props} />
+  );
+}
+function BreadcrumbPage({ className, ...props }) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('cn-breadcrumb-page', className)}
+      {...props}
+    />
+  );
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('cn-breadcrumb-separator', className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon className="cn-rtl-flip" />}
+    </li>
+  );
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('cn-breadcrumb-ellipsis flex items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};

package/client/ui/breadcrumb.stories.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+  BreadcrumbPage,
+} from './breadcrumb.jsx';
+const meta = {
+  title: 'UI/Breadcrumb',
+  component: Breadcrumb,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Products</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Current Page</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Home')).toBeInTheDocument();
+    await expect(canvas.getByText('Products')).toBeInTheDocument();
+    const current = canvas.getByText('Current Page');
+    await expect(current).toBeInTheDocument();
+    await expect(current).toHaveAttribute('aria-current', 'page');
+  },
+};
+export { Default, stdin_default as default };

package/client/ui/button-group.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { cn } from './lib/utils.js';
+import { Separator } from './separator.jsx';
+const buttonGroupVariants = cva(
+  "cn-button-group flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 ",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          'cn-button-group-orientation-horizontal [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+        vertical:
+          'cn-button-group-orientation-vertical flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+function ButtonGroup({ className, orientation, ...props }) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+function ButtonGroupText({ className, asChild = false, ...props }) {
+  const Comp = asChild ? Slot.Root : 'div';
+  return (
+    <Comp
+      className={cn(
+        'cn-button-group-text flex items-center [&_svg]:pointer-events-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        'cn-button-group-separator relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/client/ui/button-group.stories.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator } from './button-group.jsx';
+import { Button } from './button.jsx';
+const meta = {
+  title: 'UI/ButtonGroup',
+  component: ButtonGroup,
+};
+var stdin_default = meta;
+const Horizontal = {
+  render: () => (
+    <ButtonGroup orientation="horizontal">
+      <Button variant="outline">Left</Button>
+      <Button variant="outline">Center</Button>
+      <Button variant="outline">Right</Button>
+    </ButtonGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const group = canvas.getByRole('group');
+    await expect(group).toBeInTheDocument();
+    await expect(group.dataset.slot).toBe('button-group');
+    await expect(group.dataset.orientation).toBe('horizontal');
+    const buttons = canvas.getAllByRole('button');
+    await expect(buttons).toHaveLength(3);
+  },
+};
+const Vertical = {
+  render: () => (
+    <ButtonGroup orientation="vertical">
+      <Button variant="outline">Top</Button>
+      <Button variant="outline">Middle</Button>
+      <Button variant="outline">Bottom</Button>
+    </ButtonGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const group = canvas.getByRole('group');
+    await expect(group.dataset.orientation).toBe('vertical');
+  },
+};
+const WithSeparator = {
+  render: () => (
+    <ButtonGroup orientation="horizontal">
+      <Button variant="outline">Save</Button>
+      <ButtonGroupSeparator />
+      <Button variant="outline">Cancel</Button>
+    </ButtonGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const sep = canvasElement.querySelector('[data-slot="button-group-separator"]');
+    await expect(sep).toBeInTheDocument();
+  },
+};
+const WithText = {
+  render: () => (
+    <ButtonGroup orientation="horizontal">
+      <ButtonGroupText>Label:</ButtonGroupText>
+      <Button variant="outline">Action</Button>
+    </ButtonGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Label:')).toBeInTheDocument();
+  },
+};
+export { Horizontal, Vertical, WithSeparator, WithText, stdin_default as default };

package/client/ui/button.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { cn } from './lib/utils.js';
+const buttonVariants = cva(
+  'cn-button inline-flex items-center justify-center whitespace-nowrap  transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none',
+  {
+    variants: {
+      variant: {
+        default: 'cn-button-variant-default',
+        outline: 'cn-button-variant-outline',
+        secondary: 'cn-button-variant-secondary',
+        ghost: 'cn-button-variant-ghost',
+        destructive: 'cn-button-variant-destructive',
+        link: 'cn-button-variant-link',
+      },
+      size: {
+        default: 'cn-button-size-default',
+        xs: 'cn-button-size-xs',
+        sm: 'cn-button-size-sm',
+        lg: 'cn-button-size-lg',
+        icon: 'cn-button-size-icon',
+        'icon-xs': 'cn-button-size-icon-xs',
+        'icon-sm': 'cn-button-size-icon-sm',
+        'icon-lg': 'cn-button-size-icon-lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+  const Comp = asChild ? Slot.Root : 'button';
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+export { Button, buttonVariants };

package/client/ui/button.stories.js

@@ -0,0 +1,72 @@
+import { expect, within } from 'storybook/test';
+import { Button } from './button.jsx';
+const meta = {
+  title: 'UI/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'outline', 'secondary', 'ghost', 'destructive', 'link'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'xs', 'sm', 'lg', 'icon'],
+    },
+  },
+};
+var stdin_default = meta;
+const Default = {
+  args: { children: 'Button' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole('button', { name: 'Button' });
+    await expect(btn).toBeInTheDocument();
+    await expect(btn.dataset.slot).toBe('button');
+  },
+};
+const Outline = {
+  args: { children: 'Outline', variant: 'outline' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole('button', { name: 'Outline' });
+    await expect(btn.dataset.variant).toBe('outline');
+  },
+};
+const Secondary = {
+  args: { children: 'Secondary', variant: 'secondary' },
+};
+const Ghost = {
+  args: { children: 'Ghost', variant: 'ghost' },
+};
+const Destructive = {
+  args: { children: 'Destructive', variant: 'destructive' },
+};
+const Link = {
+  args: { children: 'Link', variant: 'link' },
+};
+const Small = {
+  args: { children: 'Small', size: 'sm' },
+};
+const Large = {
+  args: { children: 'Large', size: 'lg' },
+};
+const Disabled = {
+  args: { children: 'Disabled', disabled: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole('button', { name: 'Disabled' });
+    await expect(btn).toBeDisabled();
+  },
+};
+export {
+  Default,
+  Destructive,
+  Disabled,
+  Ghost,
+  Large,
+  Link,
+  Outline,
+  Secondary,
+  Small,
+  stdin_default as default,
+};

package/client/ui/calendar.jsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { DayPicker, getDefaultClassNames } from 'react-day-picker';
+import { cn } from './lib/utils.js';
+import { Button, buttonVariants } from './button.jsx';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  locale,
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'cn-calendar bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        nav: cn(
+          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative cn-calendar-dropdown-root rounded-(--cell-radius)',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
+        week_number: cn(
+          'text-[0.8rem] select-none text-muted-foreground',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none',
+          props.showWeekNumber
+            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
+            : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn(
+          'rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate',
+          defaultClassNames.range_end,
+        ),
+        today: cn(
+          'bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className: className2, rootRef, ...props2 }) => {
+          return <div data-slot="calendar" ref={rootRef} className={cn(className2)} {...props2} />;
+        },
+        Chevron: ({ className: className2, orientation, ...props2 }) => {
+          if (orientation === 'left') {
+            return <ChevronLeftIcon className={cn('cn-rtl-flip size-4', className2)} {...props2} />;
+          }
+          if (orientation === 'right') {
+            return (
+              <ChevronRightIcon className={cn('cn-rtl-flip size-4', className2)} {...props2} />
+            );
+          }
+          return <ChevronDownIcon className={cn('size-4', className2)} {...props2} />;
+        },
+        DayButton: ({ ...props2 }) => <CalendarDayButton locale={locale} {...props2} />,
+        WeekNumber: ({ children, ...props2 }) => {
+          return (
+            <td {...props2}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'cn-calendar-day-button data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export { Calendar, CalendarDayButton };

package/client/ui/card.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { cn } from './lib/utils.js';
+function Card({ className, size = 'default', ...props }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn('cn-card group/card flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+function CardHeader({ className, ...props }) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        'cn-card-header group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function CardTitle({ className, ...props }) {
+  return <div data-slot="card-title" className={cn('cn-card-title', className)} {...props} />;
+}
+function CardDescription({ className, ...props }) {
+  return (
+    <div data-slot="card-description" className={cn('cn-card-description', className)} {...props} />
+  );
+}
+function CardAction({ className, ...props }) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function CardContent({ className, ...props }) {
+  return <div data-slot="card-content" className={cn('cn-card-content', className)} {...props} />;
+}
+function CardFooter({ className, ...props }) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('cn-card-footer flex items-center', className)}
+      {...props}
+    />
+  );
+}
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/client/ui/card.stories.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card.jsx';
+import { Button } from './button.jsx';
+const meta = {
+  title: 'UI/Card',
+  component: Card,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Card className="w-80">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description text.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card body content goes here.</p>
+      </CardContent>
+      <CardFooter>
+        <Button>Action</Button>
+      </CardFooter>
+    </Card>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const card = canvasElement.querySelector('[data-slot="card"]');
+    await expect(card).toBeInTheDocument();
+    await expect(canvas.getByText('Card Title')).toBeInTheDocument();
+    await expect(canvas.getByText('Card description text.')).toBeInTheDocument();
+  },
+};
+export { Default, stdin_default as default };