@m3000/market 0.0.1

package/src/stories/Separator.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "@/components/primitives/Separator";
+
+const meta: Meta<typeof Separator> = {
+  title: "Primitives/Separator",
+  component: Separator,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    color: {
+      control: "select",
+      options: ["default", "subtle"],
+    },
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+    },
+    label: {
+      control: "text",
+    },
+  },
+};
+
+export default meta;
+
+export const Horizontal: StoryObj<typeof Separator> = {
+  render: () => (
+    <div className="w-64">
+      <p className="text-foreground">Content above</p>
+      <Separator className="my-4" />
+      <p className="text-foreground">Content below</p>
+    </div>
+  ),
+};
+
+export const Vertical: StoryObj<typeof Separator> = {
+  render: () => (
+    <div className="flex h-8 items-center gap-4">
+      <span className="text-foreground">Left</span>
+      <Separator orientation="vertical" className="h-full" />
+      <span className="text-foreground">Right</span>
+    </div>
+  ),
+};
+
+export const DefaultColor: StoryObj<typeof Separator> = {
+  render: () => (
+    <div className="w-64">
+      <p className="mb-2 text-sm text-muted-foreground">Default color</p>
+      <Separator color="default" />
+    </div>
+  ),
+};
+
+export const SubtleColor: StoryObj<typeof Separator> = {
+  render: () => (
+    <div className="w-64">
+      <p className="mb-2 text-sm text-muted-foreground">Subtle color</p>
+      <Separator color="subtle" />
+    </div>
+  ),
+};
+
+export const AllVariants: StoryObj<typeof Separator> = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">
+          Horizontal - Default
+        </p>
+        <div className="w-64">
+          <Separator color="default" orientation="horizontal" />
+        </div>
+      </div>
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">
+          Horizontal - Subtle
+        </p>
+        <div className="w-64">
+          <Separator color="subtle" orientation="horizontal" />
+        </div>
+      </div>
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">Vertical - Default</p>
+        <div className="flex h-16 items-center gap-4">
+          <span className="text-foreground">A</span>
+          <Separator
+            color="default"
+            orientation="vertical"
+            className="h-full"
+          />
+          <span className="text-foreground">B</span>
+          <Separator
+            color="default"
+            orientation="vertical"
+            className="h-full"
+          />
+          <span className="text-foreground">C</span>
+        </div>
+      </div>
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">Vertical - Subtle</p>
+        <div className="flex h-16 items-center gap-4">
+          <span className="text-foreground">A</span>
+          <Separator color="subtle" orientation="vertical" className="h-full" />
+          <span className="text-foreground">B</span>
+          <Separator color="subtle" orientation="vertical" className="h-full" />
+          <span className="text-foreground">C</span>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const InCard: StoryObj<typeof Separator> = {
+  render: () => (
+    <div className="w-80 rounded-lg border border-border bg-background p-4">
+      <h3 className="font-medium text-foreground">Card Title</h3>
+      <p className="mt-1 text-sm text-muted-foreground">
+        Some description text
+      </p>
+      <Separator className="my-4" />
+      <div className="flex justify-between text-sm">
+        <span className="text-muted-foreground">Price</span>
+        <span className="text-foreground">0.5 ETH</span>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex justify-between text-sm">
+        <span className="text-muted-foreground">Status</span>
+        <span className="text-success">Active</span>
+      </div>
+    </div>
+  ),
+};
+
+export const WithLabel: StoryObj<typeof Separator> = {
+  render: () => (
+    <div className="w-80">
+      <p className="text-foreground">Content above</p>
+      <Separator label="Section" className="my-2" />
+      <p className="text-foreground">Content below</p>
+    </div>
+  ),
+};
+
+export const WithLabelSubtle: StoryObj<typeof Separator> = {
+  render: () => (
+    <div className="w-80">
+      <p className="text-foreground">Content above</p>
+      <Separator label="Group A" color="subtle" className="my-2" />
+      <p className="text-foreground">Content below</p>
+    </div>
+  ),
+};
+
+export const VerticalWithLabel: StoryObj<typeof Separator> = {
+  render: () => (
+    <div className="flex h-32 items-center">
+      <span className="text-foreground">Left</span>
+      <Separator orientation="vertical" label="A" className="mx-2 h-full" />
+      <span className="text-foreground">Right</span>
+    </div>
+  ),
+};
+
+export const LabelsInCard: StoryObj<typeof Separator> = {
+  render: () => (
+    <div className="w-80 rounded-lg border border-border bg-background p-4">
+      <h3 className="font-medium text-foreground">Transaction Details</h3>
+      <Separator label="From" className="my-2" />
+      <div className="flex justify-between text-sm">
+        <span className="text-muted-foreground">Address</span>
+        <span className="text-foreground">0x1234...5678</span>
+      </div>
+      <Separator label="To" className="my-2" />
+      <div className="flex justify-between text-sm">
+        <span className="text-muted-foreground">Address</span>
+        <span className="text-foreground">0xabcd...efgh</span>
+      </div>
+      <Separator label="Amount" color="subtle" className="my-2" />
+      <div className="flex justify-between text-sm">
+        <span className="text-muted-foreground">Value</span>
+        <span className="text-foreground">1.5 ETH</span>
+      </div>
+    </div>
+  ),
+};

package/src/stories/Skeleton.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "@/components/primitives/Skeleton";
+import { Text } from "@/components/primitives/Text";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Primitives/Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+export const Basic: StoryObj<typeof Skeleton> = {
+  render: () => <Skeleton className="h-4 w-32" />,
+};
+
+export const TextLine: StoryObj<typeof Skeleton> = {
+  render: () => (
+    <div className="w-64 space-y-2">
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-4 w-1/2" />
+    </div>
+  ),
+};
+
+export const Avatar: StoryObj<typeof Skeleton> = {
+  render: () => <Skeleton className="size-12 rounded-full" />,
+};
+
+export const Card: StoryObj<typeof Skeleton> = {
+  render: () => (
+    <div className="w-80 rounded-lg border border-border bg-background p-4">
+      <div className="flex items-center gap-3">
+        <Skeleton className="size-10 rounded-full" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-3 w-16" />
+        </div>
+      </div>
+      <div className="mt-4 space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-2/3" />
+      </div>
+    </div>
+  ),
+};
+
+export const BidCard: StoryObj<typeof Skeleton> = {
+  render: () => (
+    <div className="w-80 rounded-lg border border-border bg-muted p-4">
+      <div className="flex items-start justify-between gap-2">
+        <Skeleton className="h-4 w-16" />
+        <Skeleton className="h-4 w-24" />
+      </div>
+      <div className="mt-3 flex justify-between">
+        <Skeleton className="h-5 w-20" />
+        <div className="flex items-center gap-2">
+          <Skeleton className="size-4 rounded-full" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+      </div>
+      <Skeleton className="mt-4 h-9 w-full rounded-md" />
+    </div>
+  ),
+};
+
+export const TableRow: StoryObj<typeof Skeleton> = {
+  render: () => (
+    <div className="w-96">
+      {[1, 2, 3].map((i) => (
+        <div
+          key={i}
+          className="flex items-center justify-between border-b border-border px-4 py-3"
+        >
+          <div className="flex items-center gap-3">
+            <Skeleton className="h-4 w-6" />
+            <Skeleton className="size-6 rounded-full" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-4 w-16" />
+            <Skeleton className="h-3 w-10" />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const WithText: StoryObj<typeof Skeleton> = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">
+          Skeleton wrapping text content
+        </p>
+        <Text render={<p />} size="3">
+          <Skeleton>This text is hidden but defines width</Skeleton>
+        </Text>
+      </div>
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">
+          Skeleton with placeholder text
+        </p>
+        <Text render={<p />} size="2">
+          <Skeleton>0.00420 ETH</Skeleton>
+        </Text>
+      </div>
+    </div>
+  ),
+};
+
+export const Sizes: StoryObj<typeof Skeleton> = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div>
+        <p className="mb-2 text-xs text-muted-foreground">Small (h-3)</p>
+        <Skeleton className="h-3 w-24" />
+      </div>
+      <div>
+        <p className="mb-2 text-xs text-muted-foreground">Default (h-4)</p>
+        <Skeleton className="h-4 w-32" />
+      </div>
+      <div>
+        <p className="mb-2 text-xs text-muted-foreground">Medium (h-6)</p>
+        <Skeleton className="h-6 w-40" />
+      </div>
+      <div>
+        <p className="mb-2 text-xs text-muted-foreground">Large (h-10)</p>
+        <Skeleton className="h-10 w-48" />
+      </div>
+    </div>
+  ),
+};

package/src/stories/SteppedInput.stories.tsx

@@ -0,0 +1,321 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import {
+  CursorGrowIcon,
+  SteppedInput,
+} from "@/components/primitives/SteppedInput";
+
+const meta: Meta<typeof SteppedInput.Root> = {
+  title: "Primitives/SteppedInput",
+  component: SteppedInput.Root,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex flex-col items-center gap-4 rounded-lg p-8">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Basic: StoryObj<typeof SteppedInput.Root> = {
+  render: () => {
+    const [value, setValue] = React.useState(BigInt(100));
+    const getTickSize = () => BigInt(10);
+
+    return (
+      <SteppedInput.Root
+        value={value}
+        onChange={setValue}
+        getTickSize={getTickSize}
+      >
+        <SteppedInput.Group>
+          <SteppedInput.Decrement />
+          <SteppedInput.ScrubArea>
+            <SteppedInput.ScrubAreaCursor>
+              <CursorGrowIcon />
+            </SteppedInput.ScrubAreaCursor>
+            <SteppedInput.Input />
+          </SteppedInput.ScrubArea>
+          <SteppedInput.Increment />
+        </SteppedInput.Group>
+      </SteppedInput.Root>
+    );
+  },
+};
+
+export const WithMinMax: StoryObj<typeof SteppedInput.Root> = {
+  render: () => {
+    const [value, setValue] = React.useState(BigInt(50));
+    const getTickSize = () => BigInt(5);
+
+    return (
+      <div className="flex flex-col gap-2">
+        <span className="text-text-tertiary text-xs">Min 0, Max 100</span>
+        <SteppedInput.Root
+          value={value}
+          onChange={setValue}
+          min={BigInt(0)}
+          max={BigInt(100)}
+          getTickSize={getTickSize}
+        >
+          <SteppedInput.Group>
+            <SteppedInput.Decrement />
+            <SteppedInput.ScrubArea>
+              <SteppedInput.ScrubAreaCursor>
+                <CursorGrowIcon />
+              </SteppedInput.ScrubAreaCursor>
+              <SteppedInput.Input />
+            </SteppedInput.ScrubArea>
+            <SteppedInput.Increment />
+          </SteppedInput.Group>
+        </SteppedInput.Root>
+      </div>
+    );
+  },
+};
+
+export const DynamicStepSize: StoryObj<typeof SteppedInput.Root> = {
+  render: () => {
+    const [value, setValue] = React.useState(BigInt(1000));
+    const getTickSize = (currentValue: bigint) => {
+      if (currentValue < BigInt(100)) return BigInt(1);
+      if (currentValue < BigInt(1000)) return BigInt(10);
+      return BigInt(100);
+    };
+
+    return (
+      <SteppedInput.Root
+        value={value}
+        onChange={setValue}
+        getTickSize={getTickSize}
+      >
+        <div className="flex flex-col gap-2">
+          <span className="text-text-tertiary text-xs">
+            Step size changes based on value (1, 10, or 100)
+          </span>
+          <SteppedInput.Group>
+            <SteppedInput.Decrement />
+            <SteppedInput.ScrubArea>
+              <SteppedInput.ScrubAreaCursor>
+                <CursorGrowIcon />
+              </SteppedInput.ScrubAreaCursor>
+              <SteppedInput.Input />
+            </SteppedInput.ScrubArea>
+            <SteppedInput.Increment />
+          </SteppedInput.Group>
+        </div>
+      </SteppedInput.Root>
+    );
+  },
+};
+
+export const Disabled: StoryObj<typeof SteppedInput.Root> = {
+  render: () => {
+    const [value, setValue] = React.useState(BigInt(500));
+    const getTickSize = () => BigInt(50);
+
+    return (
+      <SteppedInput.Root
+        value={value}
+        onChange={setValue}
+        getTickSize={getTickSize}
+        disabled
+      >
+        <SteppedInput.Group>
+          <SteppedInput.Decrement />
+          <SteppedInput.ScrubArea>
+            <SteppedInput.ScrubAreaCursor>
+              <CursorGrowIcon />
+            </SteppedInput.ScrubAreaCursor>
+            <SteppedInput.Input />
+          </SteppedInput.ScrubArea>
+          <SteppedInput.Increment />
+        </SteppedInput.Group>
+      </SteppedInput.Root>
+    );
+  },
+};
+
+const WEI_PER_ETH = BigInt(10 ** 18);
+
+export const EthereumPrice: StoryObj<typeof SteppedInput.Root> = {
+  render: () => {
+    const [value, setValue] = React.useState(
+      (BigInt(245) * WEI_PER_ETH) / BigInt(10),
+    );
+    const getTickSize = () => WEI_PER_ETH / BigInt(100);
+
+    return (
+      <div className="flex flex-col gap-2">
+        <span className="text-text-tertiary text-xs">
+          Amount (in base units)
+        </span>
+        <SteppedInput.Root
+          value={value}
+          onChange={setValue}
+          min={WEI_PER_ETH / BigInt(10)}
+          max={WEI_PER_ETH * BigInt(100)}
+          getTickSize={getTickSize}
+          decimals={18}
+        >
+          <SteppedInput.Group>
+            <SteppedInput.Decrement />
+            <SteppedInput.ScrubArea>
+              <SteppedInput.ScrubAreaCursor>
+                <CursorGrowIcon />
+              </SteppedInput.ScrubAreaCursor>
+              <SteppedInput.Input />
+            </SteppedInput.ScrubArea>
+            <SteppedInput.Increment />
+          </SteppedInput.Group>
+        </SteppedInput.Root>
+      </div>
+    );
+  },
+};
+
+export const CustomValueDisplay: StoryObj<typeof SteppedInput.Root> = {
+  render: () => {
+    const [value, setValue] = React.useState(
+      (BigInt(150) * WEI_PER_ETH) / BigInt(10),
+    );
+    const getTickSize = () => WEI_PER_ETH / BigInt(100);
+
+    return (
+      <SteppedInput.Root
+        value={value}
+        onChange={setValue}
+        min={WEI_PER_ETH / BigInt(10)}
+        max={WEI_PER_ETH * BigInt(100)}
+        getTickSize={getTickSize}
+        decimals={18}
+      >
+        <SteppedInput.Group>
+          <SteppedInput.Decrement />
+
+          <SteppedInput.ScrubArea>
+            <SteppedInput.ScrubAreaCursor>
+              <CursorGrowIcon />
+            </SteppedInput.ScrubAreaCursor>
+            <SteppedInput.Value>
+              {({ inputValue }) => (
+                <span className="font-mono text-success">
+                  {inputValue.toFixed(4)}
+                </span>
+              )}
+            </SteppedInput.Value>
+          </SteppedInput.ScrubArea>
+          <SteppedInput.Increment />
+        </SteppedInput.Group>
+      </SteppedInput.Root>
+    );
+  },
+};
+
+export const SnapToTick: StoryObj<typeof SteppedInput.Root> = {
+  render: () => {
+    // Demonstrate snapToTick with different rounding modes
+    // Using cents: tick size is $10 (1000 cents)
+    const [valueUp, setValueUp] = React.useState(BigInt(1050)); // $10.50 -> snaps to $20
+    const [valueDown, setValueDown] = React.useState(BigInt(1050)); // $10.50 -> snaps to $10
+    const [valueNearest, setValueNearest] = React.useState(BigInt(1050)); // $10.50 -> snaps to $10
+
+    const getTickSize = () => BigInt(1000); // $10 in cents
+    return (
+      <div className="flex flex-col gap-6">
+        <div className="text-sm text-muted-foreground">
+          Tick size: $10. Try dragging to see values snap to the grid.
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <span className="text-sm font-medium">
+            snapToTick=&quot;up&quot; (always round up)
+          </span>
+          <span className="text-xs text-muted-foreground">
+            Current: ${(Number(valueUp) / 100).toFixed(2)}
+          </span>
+          <SteppedInput.Root
+            value={valueUp}
+            onChange={setValueUp}
+            min={BigInt(1000)}
+            getTickSize={getTickSize}
+            decimals={2}
+            snapToTick="up"
+          >
+            <SteppedInput.Group>
+              <SteppedInput.Decrement />
+              <SteppedInput.ScrubArea>
+                <SteppedInput.ScrubAreaCursor>
+                  <CursorGrowIcon />
+                </SteppedInput.ScrubAreaCursor>
+                <SteppedInput.Input />
+              </SteppedInput.ScrubArea>
+              <SteppedInput.Increment />
+            </SteppedInput.Group>
+          </SteppedInput.Root>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <span className="text-sm font-medium">
+            snapToTick=&quot;down&quot; (always round down)
+          </span>
+          <span className="text-xs text-muted-foreground">
+            Current: ${(Number(valueDown) / 100).toFixed(2)}
+          </span>
+          <SteppedInput.Root
+            value={valueDown}
+            onChange={setValueDown}
+            min={BigInt(1000)}
+            getTickSize={getTickSize}
+            decimals={2}
+            snapToTick="down"
+          >
+            <SteppedInput.Group>
+              <SteppedInput.Decrement />
+              <SteppedInput.ScrubArea>
+                <SteppedInput.ScrubAreaCursor>
+                  <CursorGrowIcon />
+                </SteppedInput.ScrubAreaCursor>
+                <SteppedInput.Input />
+              </SteppedInput.ScrubArea>
+              <SteppedInput.Increment />
+            </SteppedInput.Group>
+          </SteppedInput.Root>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <span className="text-sm font-medium">
+            snapToTick=&quot;nearest&quot; (round to nearest)
+          </span>
+          <span className="text-xs text-muted-foreground">
+            Current: ${(Number(valueNearest) / 100).toFixed(2)}
+          </span>
+          <SteppedInput.Root
+            value={valueNearest}
+            onChange={setValueNearest}
+            min={BigInt(1000)}
+            getTickSize={getTickSize}
+            decimals={2}
+            snapToTick="nearest"
+          >
+            <SteppedInput.Group>
+              <SteppedInput.Decrement />
+              <SteppedInput.ScrubArea>
+                <SteppedInput.ScrubAreaCursor>
+                  <CursorGrowIcon />
+                </SteppedInput.ScrubAreaCursor>
+                <SteppedInput.Input />
+              </SteppedInput.ScrubArea>
+              <SteppedInput.Increment />
+            </SteppedInput.Group>
+          </SteppedInput.Root>
+        </div>
+      </div>
+    );
+  },
+};