@m3000/market 0.0.1

package/src/stories/Countdown.stories.tsx

@@ -0,0 +1,158 @@
+import { Meter } from "@base-ui/react/meter";
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Countdown } from "@/components/primitives/countdown";
+import { cn } from "@/lib";
+
+const meta: Meta<typeof Countdown> = {
+  title: "Primitives/Countdown",
+  component: Countdown,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex flex-col items-center gap-4 rounded-lg p-8">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    showWhenExpired: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+
+export const Live: StoryObj<typeof Countdown> = {
+  render: (args) => (
+    <Countdown {...args} to={new Date(Date.now() + 3600000 * 2 + 45000)} />
+  ),
+};
+
+export const ShortTime: StoryObj<typeof Countdown> = {
+  render: () => <Countdown to={new Date(Date.now() + 60000)} />,
+};
+
+export const DaysLeft: StoryObj<typeof Countdown> = {
+  render: () => <Countdown to={new Date(Date.now() + 86400000 * 5)} />,
+};
+
+export const ShowWhenExpired: StoryObj<typeof Countdown> = {
+  render: () => (
+    <Countdown to={new Date(Date.now() - 3600000)} showWhenExpired />
+  ),
+};
+
+export const CustomRender: StoryObj<typeof Countdown> = {
+  render: () => (
+    <Countdown to={new Date(Date.now() + 86400000)}>
+      {({ timeString }) => (
+        <span className="font-mono text-xl text-success">{timeString}</span>
+      )}
+    </Countdown>
+  ),
+};
+
+export const SemanticLabels: StoryObj<typeof Countdown> = {
+  decorators: [
+    (Story) => (
+      <div className="flex flex-col gap-6 rounded-lg p-8">
+        <Story />
+      </div>
+    ),
+  ],
+  render: () => (
+    <>
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-muted-foreground">Open:</span>
+        <Countdown to={new Date(Date.now() + 3600000)}>
+          {({ timeString, isExpired }) => (
+            <span className="font-mono text-base text-success">
+              {isExpired ? "Closed" : `Open - ${timeString} left`}
+            </span>
+          )}
+        </Countdown>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-muted-foreground">Upcoming:</span>
+        <Countdown to={new Date(Date.now() + 86400000 * 3)}>
+          {({ timeString, isExpired }) => (
+            <span className="font-mono text-base text-warning">
+              {isExpired ? "Live now!" : `Opens in ${timeString}`}
+            </span>
+          )}
+        </Countdown>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-muted-foreground">Closed:</span>
+        <Countdown to={new Date(Date.now() - 3600000)} showWhenExpired>
+          {({ timeString }) => (
+            <span className="font-mono text-base text-destructive">
+              Closed - {timeString} ago
+            </span>
+          )}
+        </Countdown>
+      </div>
+    </>
+  ),
+};
+
+export const LiveToClosed: StoryObj<typeof Countdown> = {
+  render: () => {
+    const [targetDate] = React.useState(() => new Date(Date.now() + 10000));
+
+    return (
+      <>
+        <p className="mb-2 text-sm text-muted-foreground">
+          Watch the transition (expires in ~10s):
+        </p>
+        <Countdown to={targetDate}>
+          {({ timeString, isExpired }) => (
+            <span
+              className={cn(
+                "font-mono text-xl transition-colors",
+                isExpired ? "text-destructive" : "text-success",
+              )}
+            >
+              {isExpired
+                ? `Closed - ${timeString} ago`
+                : `Live - ${timeString} left`}
+            </span>
+          )}
+        </Countdown>
+      </>
+    );
+  },
+};
+
+export const WithProgress: StoryObj<typeof Countdown> = {
+  render: () => (
+    <Countdown to={new Date(Date.now() + 60 * 1 * 1000)} stopOnExpired>
+      {({ timeString, remainingMs, isExpired }) => {
+        const total = 60 * 1 * 1000;
+        const progress = isExpired
+          ? 100
+          : ((total - (remainingMs ?? 0)) / total) * 100;
+
+        return (
+          <Meter.Root value={progress} className="w-full">
+            <div className="mb-1 flex justify-between gap-4 text-sm">
+              <Meter.Label className="text-muted-foreground">
+                Time remaining
+              </Meter.Label>
+              <span className="font-mono">{timeString}</span>
+            </div>
+            <Meter.Track className="h-2 overflow-hidden rounded-full bg-muted">
+              <Meter.Indicator className="h-full bg-success transition-all duration-1000" />
+            </Meter.Track>
+          </Meter.Root>
+        );
+      }}
+    </Countdown>
+  ),
+};

package/src/stories/Feedback.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Button, Feedback } from "@/components/primitives";
+
+const meta: Meta<typeof Button> = {
+  title: "Primitives/Feedback",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "tertiary", "ghost"],
+    },
+    size: {
+      control: "select",
+      options: ["default", "md"],
+    },
+    loading: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    active: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+
+export const Primary: StoryObj<typeof Button> = {
+  render() {
+    const [feedback, setFeedback] = useState<string | null>();
+    const handleClick = async () => {
+      setFeedback("feedback for 2000ms");
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      setFeedback(null);
+    };
+    return (
+      <Feedback.Root show={!!feedback}>
+        <Button onClick={handleClick}>Test</Button>
+        <Feedback.Content className="w-full">
+          <div className="bg-solid text-background-primary mt-0.5 rounded-md px-2 py-1 text-sm whitespace-nowrap">
+            {feedback}
+          </div>
+        </Feedback.Content>
+      </Feedback.Root>
+    );
+  },
+};
+
+export const ChainedFeedback: StoryObj<typeof Button> = {
+  render() {
+    const [message, setMessage] = useState<string | null>(null);
+
+    const handleClick = async () => {
+      setMessage("Waiting for confirmation...");
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      setMessage("Transaction confirmed!");
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      setMessage(null);
+    };
+
+    return (
+      <Feedback.Root show={!!message}>
+        <Button onClick={handleClick} loading={!!message}>
+          Submit Transaction
+        </Button>
+        <Feedback.Content className="w-full">
+          <div className="bg-solid text-background-primary mt-0.5 rounded-md px-2 py-1 text-sm whitespace-nowrap">
+            {message}
+          </div>
+        </Feedback.Content>
+      </Feedback.Root>
+    );
+  },
+};

package/src/stories/FramedImage.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "@/components";
+import { FramedImage } from "@/components/primitives/framed-image";
+
+// Classical painting from Wikimedia Commons (public domain)
+const ARTWORK_URL =
+  "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/1665_Girl_with_a_Pearl_Earring.jpg/1920px-1665_Girl_with_a_Pearl_Earring.jpg";
+
+const meta: Meta<typeof FramedImage> = {
+  title: "Primitives/FramedImage",
+  component: FramedImage,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FramedImage>;
+
+export const Editorial: Story = {
+  render: () => (
+    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
+      <article className="flex w-full max-w-md flex-col gap-4">
+        <div>
+          <h1 className="text-2xl font-semibold">Girl with a Pearl Earring</h1>
+          <h2 className="text-lg text-muted-foreground">Johannes Vermeer</h2>
+        </div>
+        <div className="h-100">
+          <FramedImage src={ARTWORK_URL} alt="Girl with a Pearl Earring" />
+        </div>
+        <p className="leading-relaxed text-muted-foreground">
+          A unique digital artwork exploring the intersection of color and form.
+          Click the image to open a morphing dialog preview.
+        </p>
+        <div className="flex items-center justify-between border-t border-border pt-4">
+          <div>
+            <p className="text-sm text-muted-foreground">Current bid</p>
+            <p className="text-xl font-semibold">0.85 ETH</p>
+          </div>
+          <Button type="button">Place bid</Button>
+        </div>
+      </article>
+    </div>
+  ),
+};

package/src/stories/MorphDialog.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Button, MorphDialog } from "@/components";
+
+// Classical painting from Wikimedia Commons (public domain)
+const ARTWORK_URL =
+  "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/1665_Girl_with_a_Pearl_Earring.jpg/1920px-1665_Girl_with_a_Pearl_Earring.jpg";
+
+const meta: Meta<typeof MorphDialog> = {
+  title: "Primitives/MorphDialog",
+  component: MorphDialog,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MorphDialog>;
+
+export const Uncontrolled: Story = {
+  render: () => (
+    <div className="flex min-h-screen items-center justify-center bg-background p-8">
+      <MorphDialog
+        popupAriaLabel="Expanded artwork preview"
+        trigger={
+          <div className="overflow-hidden rounded-xl border border-border bg-accent shadow-sm">
+            {/* biome-ignore lint/performance/noImgElement: Storybook does not use next/image. */}
+            <img
+              src={ARTWORK_URL}
+              alt="Girl with a Pearl Earring"
+              className="block h-[22rem] w-[16rem] object-cover"
+            />
+          </div>
+        }
+        content={
+          <div className="overflow-hidden rounded-2xl border border-border bg-background shadow-2xl">
+            {/* biome-ignore lint/performance/noImgElement: Storybook does not use next/image. */}
+            <img
+              src={ARTWORK_URL}
+              alt="Girl with a Pearl Earring"
+              className="block max-h-[85vh] w-auto object-contain"
+            />
+          </div>
+        }
+      />
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center gap-6 bg-background p-8">
+        <Button type="button" color="secondary" onClick={() => setOpen(true)}>
+          Open preview
+        </Button>
+        <MorphDialog
+          open={open}
+          onOpenChange={setOpen}
+          popupAriaLabel="Expanded artwork preview"
+          trigger={
+            <div className="overflow-hidden rounded-xl border border-border bg-accent shadow-sm">
+              {/* biome-ignore lint/performance/noImgElement: Storybook does not use next/image. */}
+              <img
+                src={ARTWORK_URL}
+                alt="Girl with a Pearl Earring"
+                className="block h-[18rem] w-[13rem] object-cover"
+              />
+            </div>
+          }
+          content={
+            <div className="overflow-hidden rounded-2xl border border-border bg-background shadow-2xl">
+              {/* biome-ignore lint/performance/noImgElement: Storybook does not use next/image. */}
+              <img
+                src={ARTWORK_URL}
+                alt="Girl with a Pearl Earring"
+                className="block max-h-[85vh] w-auto object-contain"
+              />
+            </div>
+          }
+        />
+      </div>
+    );
+  },
+};

package/src/stories/Price.stories.tsx

@@ -0,0 +1,292 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Price } from "@/components/primitives";
+
+const meta: Meta<typeof Price> = {
+  title: "Primitives/Price",
+  component: Price,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex flex-col items-center gap-4 p-8">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Basic: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Price value={12345} decimals={2} />
+      <span className="text-xs text-muted-foreground">
+        12345 smallest units (2 decimals) → 123.45
+      </span>
+    </div>
+  ),
+};
+
+export const WithSymbolSuffix: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Price value={500000000000000000n} decimals={18} maxDecimals={4}>
+        <Price.Value /> <Price.Symbol>ETH</Price.Symbol>
+      </Price>
+      <span className="text-xs text-muted-foreground">0.5 ETH (suffix)</span>
+    </div>
+  ),
+};
+
+export const WithSymbolPrefix: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Price value={12345} decimals={2}>
+        <Price.Symbol>$</Price.Symbol>
+        <Price.Value />
+      </Price>
+      <span className="text-xs text-muted-foreground">$123.45 (prefix)</span>
+    </div>
+  ),
+};
+
+export const EthLarge: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Price value={2450000000000000000n} decimals={18} maxDecimals={4}>
+        <Price.Value /> <Price.Symbol>ETH</Price.Symbol>
+      </Price>
+      <span className="text-xs text-muted-foreground">2.45 ETH</span>
+    </div>
+  ),
+};
+
+export const Usdc: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Price value={15000000} decimals={6} maxDecimals={2}>
+        <Price.Value /> <Price.Symbol>USDC</Price.Symbol>
+      </Price>
+      <span className="text-xs text-muted-foreground">
+        15 USDC (6 decimals)
+      </span>
+    </div>
+  ),
+};
+
+export const DecimalOnly: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Price value={1000000} decimals={6} />
+      <span className="text-xs text-muted-foreground">No symbol: 1</span>
+    </div>
+  ),
+};
+
+export const FractionalEth: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Price value={420000000000000n} decimals={18} maxDecimals={6}>
+        <Price.Value /> <Price.Symbol>ETH</Price.Symbol>
+      </Price>
+      <span className="text-xs text-muted-foreground">
+        0.00042 ETH (very small)
+      </span>
+    </div>
+  ),
+};
+
+export const StringInput: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Price value="9876543210" decimals={9} maxDecimals={4}>
+        <Price.Value /> <Price.Symbol>ETH</Price.Symbol>
+      </Price>
+      <span className="text-xs text-muted-foreground">
+        String input: 9.8766 ETH (ceiled)
+      </span>
+    </div>
+  ),
+};
+
+export const MaxDecimals: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <Price value={123456789n} decimals={9}>
+          <Price.Value /> <Price.Symbol>ETH</Price.Symbol>
+        </Price>
+        <span className="text-xs text-muted-foreground">
+          Full precision: 0.123456789 ETH
+        </span>
+      </div>
+      <div className="flex flex-col gap-1">
+        <Price value={123456789n} decimals={9} maxDecimals={4}>
+          <Price.Value /> <Price.Symbol>ETH</Price.Symbol>
+        </Price>
+        <span className="text-xs text-muted-foreground">
+          maxDecimals=4: 0.1235 ETH (ceiled)
+        </span>
+      </div>
+      <div className="flex flex-col gap-1">
+        <Price value={123456789n} decimals={9} maxDecimals={2}>
+          <Price.Value /> <Price.Symbol>ETH</Price.Symbol>
+        </Price>
+        <span className="text-xs text-muted-foreground">
+          maxDecimals=2: 0.13 ETH (ceiled)
+        </span>
+      </div>
+    </div>
+  ),
+};
+
+export const Abbreviation: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <Price value={1500000n} decimals={2} abbreviate>
+          <Price.Symbol>$</Price.Symbol>
+          <Price.Value />
+        </Price>
+        <span className="text-xs text-muted-foreground">$15K</span>
+      </div>
+      <div className="flex flex-col gap-1">
+        <Price value={250000000n} decimals={2} abbreviate>
+          <Price.Symbol>$</Price.Symbol>
+          <Price.Value />
+        </Price>
+        <span className="text-xs text-muted-foreground">$2.5M</span>
+      </div>
+      <div className="flex flex-col gap-1">
+        <Price
+          value={2500000000000000000000n}
+          decimals={18}
+          abbreviate
+          maxDecimals={1}
+        >
+          <Price.Value /> <Price.Symbol>ETH</Price.Symbol>
+        </Price>
+        <span className="text-xs text-muted-foreground">2.5K ETH</span>
+      </div>
+      <div className="flex flex-col gap-1">
+        <Price value={50} decimals={2} abbreviate>
+          <Price.Symbol>$</Price.Symbol>
+          <Price.Value />
+        </Price>
+        <span className="text-xs text-muted-foreground">
+          $0.5 (too small to abbreviate)
+        </span>
+      </div>
+    </div>
+  ),
+};
+
+export const StyledSymbol: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Price value={500000000000000000n} decimals={18} maxDecimals={4}>
+        <Price.Value />{" "}
+        <Price.Symbol className="text-muted-foreground">ETH</Price.Symbol>
+      </Price>
+      <span className="text-xs text-muted-foreground">
+        Symbol with custom styling
+      </span>
+    </div>
+  ),
+};
+
+export const ZeroValue: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Price value={0n} decimals={18}>
+        <Price.Value /> <Price.Symbol>ETH</Price.Symbol>
+      </Price>
+      <span className="text-xs text-muted-foreground">Zero: 0 ETH</span>
+    </div>
+  ),
+};
+
+export const Locales: StoryObj<typeof Price> = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-1">
+        <span className="text-sm font-medium">Default (no locale)</span>
+        <Price value={123456789n} decimals={2} maxDecimals={2}>
+          <Price.Symbol>$</Price.Symbol>
+          <Price.Value />
+        </Price>
+        <span className="text-xs text-muted-foreground">$1234567.89</span>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <span className="text-sm font-medium">English (en-US)</span>
+        <Price value={123456789n} decimals={2} maxDecimals={2}>
+          <Price.Symbol>$</Price.Symbol>
+          <Price.Value locale="en-US" />
+        </Price>
+        <span className="text-xs text-muted-foreground">$1,234,567.89</span>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <span className="text-sm font-medium">German (de-DE)</span>
+        <Price value={123456789n} decimals={2} maxDecimals={2}>
+          <Price.Value locale="de-DE" /> <Price.Symbol>EUR</Price.Symbol>
+        </Price>
+        <span className="text-xs text-muted-foreground">1.234.567,89 EUR</span>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <span className="text-sm font-medium">French (fr-FR)</span>
+        <Price value={123456789n} decimals={2} maxDecimals={2}>
+          <Price.Value locale="fr-FR" /> <Price.Symbol>EUR</Price.Symbol>
+        </Price>
+        <span className="text-xs text-muted-foreground">
+          1 234 567,89 EUR (thin space grouping)
+        </span>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <span className="text-sm font-medium">Japanese (ja-JP)</span>
+        <Price value={123456789n} decimals={2} maxDecimals={2}>
+          <Price.Symbol>¥</Price.Symbol>
+          <Price.Value locale="ja-JP" />
+        </Price>
+        <span className="text-xs text-muted-foreground">¥1,234,567.89</span>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <span className="text-sm font-medium">Swiss German (de-CH)</span>
+        <Price value={123456789n} decimals={2} maxDecimals={2}>
+          <Price.Symbol>CHF </Price.Symbol>
+          <Price.Value locale="de-CH" />
+        </Price>
+        <span className="text-xs text-muted-foreground">
+          CHF 1'234'567.89 (apostrophe grouping)
+        </span>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <span className="text-sm font-medium">Indian (en-IN)</span>
+        <Price value={123456789n} decimals={2} maxDecimals={2}>
+          <Price.Symbol>₹</Price.Symbol>
+          <Price.Value locale="en-IN" />
+        </Price>
+        <span className="text-xs text-muted-foreground">
+          ₹12,34,567.89 (lakh grouping)
+        </span>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <span className="text-sm font-medium">
+          German + Abbreviation (de-DE)
+        </span>
+        <Price value={250000000n} decimals={2} abbreviate maxDecimals={1}>
+          <Price.Value locale="de-DE" /> <Price.Symbol>EUR</Price.Symbol>
+        </Price>
+        <span className="text-xs text-muted-foreground">2,5M EUR</span>
+      </div>
+    </div>
+  ),
+};