arcway 0.1.0

package/client/ui/switch.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Switch as SwitchPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+function Switch({ className, size = 'default', ...props }) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        'cn-switch peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="cn-switch-thumb pointer-events-none block ring-0 transition-transform"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+export { Switch };

package/client/ui/switch.stories.js

@@ -0,0 +1,44 @@
+import { expect, within } from 'storybook/test';
+import { Switch } from './switch.jsx';
+const meta = {
+  title: 'UI/Switch',
+  component: Switch,
+  argTypes: {
+    size: { control: 'select', options: ['default', 'sm'] },
+  },
+};
+var stdin_default = meta;
+const Default = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const sw = canvas.getByRole('switch');
+    await expect(sw).toBeInTheDocument();
+    await expect(sw.dataset.slot).toBe('switch');
+    await expect(sw.dataset.state).toBe('unchecked');
+  },
+};
+const Checked = {
+  args: { defaultChecked: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const sw = canvas.getByRole('switch');
+    await expect(sw.dataset.state).toBe('checked');
+  },
+};
+const Disabled = {
+  args: { disabled: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const sw = canvas.getByRole('switch');
+    await expect(sw).toBeDisabled();
+  },
+};
+const Small = {
+  args: { size: 'sm' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const sw = canvas.getByRole('switch');
+    await expect(sw.dataset.size).toBe('sm');
+  },
+};
+export { Checked, Default, Disabled, Small, stdin_default as default };

package/client/ui/table.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { cn } from './lib/utils.js';
+function Table({ className, ...props }) {
+  return (
+    <div data-slot="table-container" className="cn-table-container">
+      <table data-slot="table" className={cn('cn-table', className)} {...props} />
+    </div>
+  );
+}
+function TableHeader({ className, ...props }) {
+  return <thead data-slot="table-header" className={cn('cn-table-header', className)} {...props} />;
+}
+function TableBody({ className, ...props }) {
+  return <tbody data-slot="table-body" className={cn('cn-table-body', className)} {...props} />;
+}
+function TableFooter({ className, ...props }) {
+  return <tfoot data-slot="table-footer" className={cn('cn-table-footer', className)} {...props} />;
+}
+function TableRow({ className, ...props }) {
+  return <tr data-slot="table-row" className={cn('cn-table-row', className)} {...props} />;
+}
+function TableHead({ className, ...props }) {
+  return <th data-slot="table-head" className={cn('cn-table-head', className)} {...props} />;
+}
+function TableCell({ className, ...props }) {
+  return <td data-slot="table-cell" className={cn('cn-table-cell', className)} {...props} />;
+}
+function TableCaption({ className, ...props }) {
+  return (
+    <caption data-slot="table-caption" className={cn('cn-table-caption', className)} {...props} />
+  );
+}
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/client/ui/table.stories.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from './table.jsx';
+const meta = {
+  title: 'UI/Table',
+  component: Table,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>Alice</TableCell>
+          <TableCell>alice@example.com</TableCell>
+          <TableCell>Admin</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Bob</TableCell>
+          <TableCell>bob@example.com</TableCell>
+          <TableCell>User</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Name')).toBeInTheDocument();
+    await expect(canvas.getByText('Alice')).toBeInTheDocument();
+    await expect(canvas.getByText('Bob')).toBeInTheDocument();
+    const rows = canvas.getAllByRole('row');
+    await expect(rows.length).toBe(3);
+  },
+};
+export { Default, stdin_default as default };

package/client/ui/tabs.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { Tabs as TabsPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+function Tabs({ className, orientation = 'horizontal', ...props }) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn('cn-tabs group/tabs flex data-horizontal:flex-col', className)}
+      {...props}
+    />
+  );
+}
+const tabsListVariants = cva(
+  'cn-tabs-list group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col',
+  {
+    variants: {
+      variant: {
+        default: 'cn-tabs-list-variant-default bg-muted',
+        line: 'cn-tabs-list-variant-line gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+function TabsList({ className, variant = 'default', ...props }) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        'cn-tabs-trigger focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+        'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function TabsContent({ className, ...props }) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('cn-tabs-content flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

package/client/ui/tabs.stories.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs.jsx';
+const meta = {
+  title: 'UI/Tabs',
+  component: Tabs,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Tabs defaultValue="tab1">
+      <TabsList>
+        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">Content for tab 1</TabsContent>
+      <TabsContent value="tab2">Content for tab 2</TabsContent>
+    </Tabs>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tab1 = canvas.getByRole('tab', { name: 'Tab 1' });
+    await expect(tab1).toBeInTheDocument();
+    await expect(tab1).toHaveAttribute('data-state', 'active');
+    await expect(canvas.getByText('Content for tab 1')).toBeInTheDocument();
+  },
+};
+const LineVariant = {
+  render: () => (
+    <Tabs defaultValue="a">
+      <TabsList variant="line">
+        <TabsTrigger value="a">Alpha</TabsTrigger>
+        <TabsTrigger value="b">Beta</TabsTrigger>
+      </TabsList>
+      <TabsContent value="a">Alpha content</TabsContent>
+      <TabsContent value="b">Beta content</TabsContent>
+    </Tabs>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tabs = canvas.getAllByRole('tab');
+    await expect(tabs.length).toBe(2);
+  },
+};
+export { Default, LineVariant, stdin_default as default };

package/client/ui/textarea.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { cn } from './lib/utils.js';
+function Textarea({ className, ...props }) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'cn-textarea placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export { Textarea };

package/client/ui/textarea.stories.js

@@ -0,0 +1,33 @@
+import { expect, within } from 'storybook/test';
+import { Textarea } from './textarea.jsx';
+const meta = {
+  title: 'UI/Textarea',
+  component: Textarea,
+};
+var stdin_default = meta;
+const Default = {
+  args: { placeholder: 'Type your message...' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByPlaceholderText('Type your message...');
+    await expect(textarea).toBeInTheDocument();
+    await expect(textarea.dataset.slot).toBe('textarea');
+  },
+};
+const Disabled = {
+  args: { placeholder: 'Disabled', disabled: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByPlaceholderText('Disabled');
+    await expect(textarea).toBeDisabled();
+  },
+};
+const WithValue = {
+  args: { defaultValue: 'Hello world' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await expect(textarea).toHaveValue('Hello world');
+  },
+};
+export { Default, Disabled, WithValue, stdin_default as default };