arcway 0.1.0

package/client/ui/input-group.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from './lib/utils.js';
+import { Button } from './button.jsx';
+import { Input } from './input.jsx';
+import { Textarea } from './textarea.jsx';
+function InputGroup({ className, ...props }) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        'group/input-group cn-input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+const inputGroupAddonVariants = cva(
+  'cn-input-group-addon flex cursor-text items-center justify-center select-none',
+  {
+    variants: {
+      align: {
+        'inline-start': 'cn-input-group-addon-align-inline-start order-first',
+        'inline-end': 'cn-input-group-addon-align-inline-end order-last',
+        'block-start': 'cn-input-group-addon-align-block-start order-first w-full justify-start',
+        'block-end': 'cn-input-group-addon-align-block-end order-last w-full justify-start',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+);
+function InputGroupAddon({ className, align = 'inline-start', ...props }) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if (e.target.closest('button')) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+const inputGroupButtonVariants = cva('cn-input-group-button shadow-none flex items-center', {
+  variants: {
+    size: {
+      xs: 'cn-input-group-button-size-xs',
+      sm: 'cn-input-group-button-size-sm',
+      'icon-xs': 'cn-input-group-button-size-icon-xs',
+      'icon-sm': 'cn-input-group-button-size-icon-sm',
+    },
+  },
+  defaultVariants: {
+    size: 'xs',
+  },
+});
+function InputGroupButton({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return (
+    <span
+      className={cn('cn-input-group-text flex items-center [&_svg]:pointer-events-none', className)}
+      {...props}
+    />
+  );
+}
+function InputGroupInput({ className, ...props }) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn('cn-input-group-input flex-1', className)}
+      {...props}
+    />
+  );
+}
+function InputGroupTextarea({ className, ...props }) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn('cn-input-group-textarea flex-1 resize-none', className)}
+      {...props}
+    />
+  );
+}
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+};

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { SearchIcon, MailIcon } from 'lucide-react';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+} from './input-group.jsx';
+const meta = {
+  title: 'UI/InputGroup',
+  component: InputGroup,
+};
+var stdin_default = meta;
+const WithAddon = {
+  render: () => (
+    <InputGroup>
+      <InputGroupAddon align="inline-start">
+        <InputGroupText>
+          <SearchIcon className="size-4" />
+        </InputGroupText>
+      </InputGroupAddon>
+      <InputGroupInput placeholder="Search..." />
+    </InputGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const group = canvasElement.querySelector('[data-slot="input-group"]');
+    await expect(group).toBeInTheDocument();
+    await expect(canvas.getByPlaceholderText('Search...')).toBeInTheDocument();
+  },
+};
+const WithButton = {
+  render: () => (
+    <InputGroup>
+      <InputGroupInput placeholder="Email" />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton>
+          <MailIcon className="size-4" />
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('button')).toBeInTheDocument();
+    await expect(canvas.getByPlaceholderText('Email')).toBeInTheDocument();
+  },
+};
+const WithTextAddon = {
+  render: () => (
+    <InputGroup>
+      <InputGroupAddon align="inline-start">
+        <InputGroupText>https://</InputGroupText>
+      </InputGroupAddon>
+      <InputGroupInput placeholder="example.com" />
+    </InputGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('https://')).toBeInTheDocument();
+  },
+};
+export { WithAddon, WithButton, WithTextAddon, stdin_default as default };

package/client/ui/input-otp.jsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { cn } from './lib/utils.js';
+import { MinusIcon } from 'lucide-react';
+function InputOTP({ className, containerClassName, ...props }) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'cn-input-otp flex items-center has-disabled:opacity-50',
+        containerClassName,
+      )}
+      spellCheck={false}
+      className={cn('cn-input-otp-input disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  );
+}
+function InputOTPGroup({ className, ...props }) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn('cn-input-otp-group flex items-center', className)}
+      {...props}
+    />
+  );
+}
+function InputOTPSlot({ index, className, ...props }) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'cn-input-otp-slot relative flex items-center justify-center data-[active=true]:z-10',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="cn-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="cn-input-otp-caret-line" />
+        </div>
+      )}
+    </div>
+  );
+}
+function InputOTPSeparator({ ...props }) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="cn-input-otp-separator flex items-center"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon />
+    </div>
+  );
+}
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/client/ui/input.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { cn } from './lib/utils.js';
+function Input({ className, type, ...props }) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'cn-input file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export { Input };

package/client/ui/input.stories.js

@@ -0,0 +1,27 @@
+import { expect, within } from 'storybook/test';
+import { Input } from './input.jsx';
+const meta = {
+  title: 'UI/Input',
+  component: Input,
+};
+var stdin_default = meta;
+const Default = {
+  args: { placeholder: 'Enter text...' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByPlaceholderText('Enter text...');
+    await expect(input).toBeInTheDocument();
+    await expect(input.dataset.slot).toBe('input');
+  },
+};
+const WithType = {
+  args: { type: 'email', placeholder: 'Email address' },
+};
+const Disabled = {
+  args: { placeholder: 'Disabled', disabled: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByPlaceholderText('Disabled')).toBeDisabled();
+  },
+};
+export { Default, Disabled, WithType, stdin_default as default };

package/client/ui/item.jsx

@@ -0,0 +1,155 @@
+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';
+function ItemGroup({ className, ...props }) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn('cn-item-group group/item-group flex w-full flex-col', className)}
+      {...props}
+    />
+  );
+}
+function ItemSeparator({ className, ...props }) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn('cn-item-separator', className)}
+      {...props}
+    />
+  );
+}
+const itemVariants = cva(
+  'cn-item w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'cn-item-variant-default',
+        outline: 'cn-item-variant-outline',
+        muted: 'cn-item-variant-muted',
+      },
+      size: {
+        default: 'cn-item-size-default',
+        sm: 'cn-item-size-sm',
+        xs: 'cn-item-size-xs',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+function Item({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+  const Comp = asChild ? Slot.Root : 'div';
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+const itemMediaVariants = cva(
+  'cn-item-media flex shrink-0 items-center justify-center [&_svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'cn-item-media-variant-default',
+        icon: 'cn-item-media-variant-icon',
+        image: 'cn-item-media-variant-image',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+function ItemMedia({ className, variant = 'default', ...props }) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+function ItemContent({ className, ...props }) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        'cn-item-content flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn('cn-item-title line-clamp-1 flex w-fit items-center', className)}
+      {...props}
+    />
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'cn-item-description [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function ItemActions({ className, ...props }) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn('cn-item-actions flex items-center', className)}
+      {...props}
+    />
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn('cn-item-header flex basis-full items-center justify-between', className)}
+      {...props}
+    />
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn('cn-item-footer flex basis-full items-center justify-between', className)}
+      {...props}
+    />
+  );
+}
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+};

package/client/ui/item.stories.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { UserIcon } from 'lucide-react';
+import {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemTitle,
+  ItemDescription,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+} from './item.jsx';
+import { Button } from './button.jsx';
+const meta = {
+  title: 'UI/Item',
+  component: Item,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Item>
+      <ItemMedia variant="icon">
+        <UserIcon className="size-4" />
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>John Doe</ItemTitle>
+        <ItemDescription>Software Engineer</ItemDescription>
+      </ItemContent>
+    </Item>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const item = canvasElement.querySelector('[data-slot="item"]');
+    await expect(item).toBeInTheDocument();
+    await expect(canvas.getByText('John Doe')).toBeInTheDocument();
+    await expect(canvas.getByText('Software Engineer')).toBeInTheDocument();
+  },
+};
+const WithActions = {
+  render: () => (
+    <Item>
+      <ItemContent>
+        <ItemTitle>Task Item</ItemTitle>
+        <ItemDescription>Complete this task</ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <Button size="sm" variant="outline">
+          Edit
+        </Button>
+      </ItemActions>
+    </Item>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
+  },
+};
+const GroupWithSeparators = {
+  render: () => (
+    <ItemGroup>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Item 1</ItemTitle>
+        </ItemContent>
+      </Item>
+      <ItemSeparator />
+      <Item>
+        <ItemContent>
+          <ItemTitle>Item 2</ItemTitle>
+        </ItemContent>
+      </Item>
+      <ItemSeparator />
+      <Item>
+        <ItemContent>
+          <ItemTitle>Item 3</ItemTitle>
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const list = canvas.getByRole('list');
+    await expect(list).toBeInTheDocument();
+    await expect(canvas.getByText('Item 1')).toBeInTheDocument();
+    await expect(canvas.getByText('Item 2')).toBeInTheDocument();
+    await expect(canvas.getByText('Item 3')).toBeInTheDocument();
+  },
+};
+const Variants = {
+  render: () => (
+    <ItemGroup>
+      <Item variant="default">
+        <ItemContent>
+          <ItemTitle>Default</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Outline</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Muted</ItemTitle>
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const items = canvasElement.querySelectorAll('[data-slot="item"]');
+    await expect(items).toHaveLength(3);
+    await expect(items[0].getAttribute('data-variant')).toBe('default');
+    await expect(items[1].getAttribute('data-variant')).toBe('outline');
+    await expect(items[2].getAttribute('data-variant')).toBe('muted');
+  },
+};
+export { Default, GroupWithSeparators, Variants, WithActions, stdin_default as default };

package/client/ui/kbd.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { cn } from './lib/utils.js';
+function Kbd({ className, ...props }) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        'cn-kbd pointer-events-none inline-flex items-center justify-center select-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function KbdGroup({ className, ...props }) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn('cn-kbd-group inline-flex items-center', className)}
+      {...props}
+    />
+  );
+}
+export { Kbd, KbdGroup };

package/client/ui/kbd.stories.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { Kbd, KbdGroup } from './kbd.jsx';
+const meta = {
+  title: 'UI/Kbd',
+  component: Kbd,
+};
+var stdin_default = meta;
+const Default = {
+  args: { children: 'K' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const kbd = canvas.getByText('K');
+    await expect(kbd).toBeInTheDocument();
+    await expect(kbd.dataset.slot).toBe('kbd');
+  },
+};
+const Group = {
+  render: () => (
+    <KbdGroup>
+      <Kbd>Ctrl</Kbd>
+      <Kbd>K</Kbd>
+    </KbdGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const group = canvasElement.querySelector('[data-slot="kbd-group"]');
+    await expect(group).toBeInTheDocument();
+    const keys = canvasElement.querySelectorAll('[data-slot="kbd"]');
+    await expect(keys.length).toBe(2);
+  },
+};
+export { Default, Group, stdin_default as default };

package/client/ui/label.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Label as LabelPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+function Label({ className, ...props }) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'cn-label flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export { Label };

package/client/ui/label.stories.js

@@ -0,0 +1,25 @@
+import { expect, within } from 'storybook/test';
+import { Label } from './label.jsx';
+const meta = {
+  title: 'UI/Label',
+  component: Label,
+};
+var stdin_default = meta;
+const Default = {
+  args: { children: 'Email address' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const label = canvas.getByText('Email address');
+    await expect(label).toBeInTheDocument();
+    await expect(label.dataset.slot).toBe('label');
+  },
+};
+const WithHtmlFor = {
+  args: { children: 'Username', htmlFor: 'username' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const label = canvas.getByText('Username');
+    await expect(label).toHaveAttribute('for', 'username');
+  },
+};
+export { Default, WithHtmlFor, stdin_default as default };

package/client/ui/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export { cn };