@m3000/market 0.0.1

package/src/stories/Tabs.stories.tsx

@@ -0,0 +1,215 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tab, Tabs, TabsList, TabsPanel } from "@/components/primitives/Tabs";
+
+const meta: Meta<typeof Tabs> = {
+  title: "Primitives/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    layout: {
+      control: "select",
+      options: ["default", "centered"],
+    },
+    variant: {
+      control: "select",
+      options: ["default", "underline"],
+    },
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Tabs> = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-96">
+      <TabsList>
+        <Tab value="tab1">Overview</Tab>
+        <Tab value="tab2">Activity</Tab>
+        <Tab value="tab3">Settings</Tab>
+      </TabsList>
+      <TabsPanel value="tab1" className="pt-4">
+        <p className="text-foreground">Overview content goes here.</p>
+      </TabsPanel>
+      <TabsPanel value="tab2" className="pt-4">
+        <p className="text-foreground">Activity content goes here.</p>
+      </TabsPanel>
+      <TabsPanel value="tab3" className="pt-4">
+        <p className="text-foreground">Settings content goes here.</p>
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+export const Underline: StoryObj<typeof Tabs> = {
+  render: () => (
+    <Tabs defaultValue="tab1" variant="underline" className="w-96">
+      <TabsList>
+        <Tab value="tab1">Overview</Tab>
+        <Tab value="tab2">Activity</Tab>
+        <Tab value="tab3">Settings</Tab>
+      </TabsList>
+      <TabsPanel value="tab1" className="pt-4">
+        <p className="text-foreground">
+          Overview content with underline indicator.
+        </p>
+      </TabsPanel>
+      <TabsPanel value="tab2" className="pt-4">
+        <p className="text-foreground">
+          Activity content with underline indicator.
+        </p>
+      </TabsPanel>
+      <TabsPanel value="tab3" className="pt-4">
+        <p className="text-foreground">
+          Settings content with underline indicator.
+        </p>
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+export const Centered: StoryObj<typeof Tabs> = {
+  render: () => (
+    <Tabs defaultValue="tab1" layout="centered" className="w-96">
+      <TabsList>
+        <Tab value="tab1">Bids</Tab>
+        <Tab value="tab2">Rankings</Tab>
+        <Tab value="tab3">Your Bids</Tab>
+      </TabsList>
+      <TabsPanel value="tab1" className="pt-4">
+        <p className="text-foreground">Bids content (centered layout).</p>
+      </TabsPanel>
+      <TabsPanel value="tab2" className="pt-4">
+        <p className="text-foreground">Rankings content (centered layout).</p>
+      </TabsPanel>
+      <TabsPanel value="tab3" className="pt-4">
+        <p className="text-foreground">Your Bids content (centered layout).</p>
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+export const CenteredUnderline: StoryObj<typeof Tabs> = {
+  render: () => (
+    <Tabs
+      defaultValue="tab1"
+      layout="centered"
+      variant="underline"
+      className="w-96"
+    >
+      <TabsList>
+        <Tab value="tab1">Bids</Tab>
+        <Tab value="tab2">Rankings</Tab>
+        <Tab value="tab3">Your Bids</Tab>
+      </TabsList>
+      <TabsPanel value="tab1" className="pt-4">
+        <p className="text-foreground">Bids content (centered + underline).</p>
+      </TabsPanel>
+      <TabsPanel value="tab2" className="pt-4">
+        <p className="text-foreground">
+          Rankings content (centered + underline).
+        </p>
+      </TabsPanel>
+      <TabsPanel value="tab3" className="pt-4">
+        <p className="text-foreground">
+          Your Bids content (centered + underline).
+        </p>
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+export const TwoTabs: StoryObj<typeof Tabs> = {
+  render: () => (
+    <Tabs defaultValue="details" variant="underline" className="w-80">
+      <TabsList>
+        <Tab value="details">Details</Tab>
+        <Tab value="history">History</Tab>
+      </TabsList>
+      <TabsPanel value="details" className="pt-4">
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Reserve Price</span>
+            <span className="text-foreground">0.01 ETH</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Editions</span>
+            <span className="text-foreground">20</span>
+          </div>
+        </div>
+      </TabsPanel>
+      <TabsPanel value="history" className="pt-4">
+        <p className="text-muted-foreground">No history yet.</p>
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+export const ManyTabs: StoryObj<typeof Tabs> = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-[600px]">
+      <TabsList>
+        <Tab value="tab1">Home</Tab>
+        <Tab value="tab2">Explore</Tab>
+        <Tab value="tab3">Collections</Tab>
+        <Tab value="tab4">Activity</Tab>
+        <Tab value="tab5">Profile</Tab>
+        <Tab value="tab6">Settings</Tab>
+      </TabsList>
+      <TabsPanel value="tab1" className="pt-4">
+        <p className="text-foreground">Home content</p>
+      </TabsPanel>
+      <TabsPanel value="tab2" className="pt-4">
+        <p className="text-foreground">Explore content</p>
+      </TabsPanel>
+      <TabsPanel value="tab3" className="pt-4">
+        <p className="text-foreground">Collections content</p>
+      </TabsPanel>
+      <TabsPanel value="tab4" className="pt-4">
+        <p className="text-foreground">Activity content</p>
+      </TabsPanel>
+      <TabsPanel value="tab5" className="pt-4">
+        <p className="text-foreground">Profile content</p>
+      </TabsPanel>
+      <TabsPanel value="tab6" className="pt-4">
+        <p className="text-foreground">Settings content</p>
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+export const InCard: StoryObj<typeof Tabs> = {
+  render: () => (
+    <div className="w-96 rounded-lg border border-border bg-background p-4">
+      <h3 className="mb-4 font-medium text-foreground">Auction Details</h3>
+      <Tabs defaultValue="info" variant="underline">
+        <TabsList>
+          <Tab value="info">Info</Tab>
+          <Tab value="bids">Bids</Tab>
+          <Tab value="rules">Rules</Tab>
+        </TabsList>
+        <TabsPanel value="info" className="pt-4">
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Status</span>
+              <span className="text-success">Live</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Time Left</span>
+              <span className="text-foreground">2h 30m</span>
+            </div>
+          </div>
+        </TabsPanel>
+        <TabsPanel value="bids" className="pt-4">
+          <p className="text-sm text-muted-foreground">25 bids placed</p>
+        </TabsPanel>
+        <TabsPanel value="rules" className="pt-4">
+          <p className="text-sm text-muted-foreground">
+            Top 20 bidders win and pay the lowest winning bid.
+          </p>
+        </TabsPanel>
+      </Tabs>
+    </div>
+  ),
+};

package/src/stories/Tag.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tag } from "@/components/primitives/Tag";
+
+const meta: Meta<typeof Tag> = {
+  title: "Primitives/Tag",
+  component: Tag,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["informative", "interactive"],
+    },
+  },
+};
+
+export default meta;
+
+export const Informative: StoryObj<typeof Tag> = {
+  args: {
+    children: "NFT",
+    type: "informative",
+  },
+};
+
+export const Interactive: StoryObj<typeof Tag> = {
+  render: () => (
+    <Tag type="interactive" onClick={() => console.log("Tag clicked")}>
+      Click me
+    </Tag>
+  ),
+};
+
+export const StatusTags: StoryObj<typeof Tag> = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Tag>Live</Tag>
+      <Tag>Upcoming</Tag>
+      <Tag>Closed</Tag>
+      <Tag>Sold Out</Tag>
+    </div>
+  ),
+};
+
+export const CategoryTags: StoryObj<typeof Tag> = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Tag>Art</Tag>
+      <Tag>Photography</Tag>
+      <Tag>Music</Tag>
+      <Tag>Collectibles</Tag>
+      <Tag>Gaming</Tag>
+    </div>
+  ),
+};
+
+export const InteractiveTags: StoryObj<typeof Tag> = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Tag type="interactive" onClick={() => console.log("Art")}>
+        Art
+      </Tag>
+      <Tag type="interactive" onClick={() => console.log("Photography")}>
+        Photography
+      </Tag>
+      <Tag type="interactive" onClick={() => console.log("Music")}>
+        Music
+      </Tag>
+      <Tag type="interactive" onClick={() => console.log("Collectibles")}>
+        Collectibles
+      </Tag>
+    </div>
+  ),
+};
+
+export const WithNumbers: StoryObj<typeof Tag> = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Tag>Edition #1</Tag>
+      <Tag>Rank #5</Tag>
+      <Tag>0.5 ETH</Tag>
+      <Tag>20 editions</Tag>
+    </div>
+  ),
+};
+
+export const InContext: StoryObj<typeof Tag> = {
+  render: () => (
+    <div className="w-80 rounded-lg border border-border bg-background p-4">
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium text-foreground">Auction #1234</h3>
+        <Tag>Live</Tag>
+      </div>
+      <p className="mt-2 text-sm text-muted-foreground">
+        A curated collection of digital art
+      </p>
+      <div className="mt-3 flex flex-wrap gap-1">
+        <Tag>Art</Tag>
+        <Tag>Digital</Tag>
+        <Tag>Limited</Tag>
+      </div>
+    </div>
+  ),
+};
+
+export const AllTypes: StoryObj<typeof Tag> = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">
+          Informative (default)
+        </p>
+        <div className="flex gap-2">
+          <Tag type="informative">Status</Tag>
+          <Tag type="informative">Category</Tag>
+          <Tag type="informative">Label</Tag>
+        </div>
+      </div>
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">
+          Interactive (clickable)
+        </p>
+        <div className="flex gap-2">
+          <Tag type="interactive" onClick={() => console.log("1")}>
+            Filter 1
+          </Tag>
+          <Tag type="interactive" onClick={() => console.log("2")}>
+            Filter 2
+          </Tag>
+          <Tag type="interactive" onClick={() => console.log("3")}>
+            Filter 3
+          </Tag>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/stories/Text.stories.tsx

@@ -0,0 +1,245 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Text } from "@/components/primitives/Text";
+
+const meta: Meta<typeof Text> = {
+  title: "Primitives/Text",
+  component: Text,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+    },
+    weight: {
+      control: "select",
+      options: ["regular", "medium", "semibold"],
+    },
+    color: {
+      control: "select",
+      options: [
+        "primary",
+        "secondary",
+        "tertiary",
+        "disabled",
+        "current",
+        "success",
+        "error",
+      ],
+    },
+    align: {
+      control: "select",
+      options: ["left", "center", "right"],
+    },
+    tabularNums: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Text> = {
+  args: {
+    children: "Default text",
+  },
+};
+
+export const Sizes: StoryObj<typeof Text> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Text size="1">Size 1 - Smallest text</Text>
+      <Text size="2">Size 2 - Default text</Text>
+      <Text size="3">Size 3 - Slightly larger</Text>
+      <Text size="4">Size 4 - Medium text</Text>
+      <Text size="5">Size 5 - Large text</Text>
+      <Text size="6">Size 6 - Extra large</Text>
+      <Text size="7">Size 7 - Heading</Text>
+      <Text size="8">Size 8 - Display</Text>
+      <Text size="9">Size 9 - Hero</Text>
+    </div>
+  ),
+};
+
+export const Weights: StoryObj<typeof Text> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Text weight="regular">Regular weight (default)</Text>
+      <Text weight="medium">Medium weight</Text>
+      <Text weight="semibold">Semibold weight</Text>
+    </div>
+  ),
+};
+
+export const Colors: StoryObj<typeof Text> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Text color="primary">Primary color (default)</Text>
+      <Text color="secondary">Secondary color</Text>
+      <Text color="tertiary">Tertiary color</Text>
+      <Text color="disabled">Disabled color</Text>
+      <Text color="success">Success color</Text>
+      <Text color="error">Error color</Text>
+    </div>
+  ),
+};
+
+export const Alignment: StoryObj<typeof Text> = {
+  render: () => (
+    <div className="flex w-64 flex-col gap-2 border border-border p-2">
+      <Text align="left">Left aligned text</Text>
+      <Text align="center">Center aligned text</Text>
+      <Text align="right">Right aligned text</Text>
+    </div>
+  ),
+};
+
+export const TabularNumbers: StoryObj<typeof Text> = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <div>
+        <p className="mb-1 text-xs text-muted-foreground">
+          Without tabular nums:
+        </p>
+        <div className="flex flex-col">
+          <Text>0.001 ETH</Text>
+          <Text>0.111 ETH</Text>
+          <Text>1.234 ETH</Text>
+        </div>
+      </div>
+      <div>
+        <p className="mb-1 text-xs text-muted-foreground">With tabular nums:</p>
+        <div className="flex flex-col">
+          <Text tabularNums>0.001 ETH</Text>
+          <Text tabularNums>0.111 ETH</Text>
+          <Text tabularNums>1.234 ETH</Text>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const AsHeading: StoryObj<typeof Text> = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Text as="h1" size="8" weight="semibold" aria-label="Heading level 1">
+        Heading 1
+      </Text>
+      <Text as="h2" size="7" weight="semibold" aria-label="Heading level 2">
+        Heading 2
+      </Text>
+      <Text as="h3" size="6" weight="medium" aria-label="Heading level 3">
+        Heading 3
+      </Text>
+      <Text as="h4" size="5" weight="medium" aria-label="Heading level 4">
+        Heading 4
+      </Text>
+      <Text render={<p />} size="2">
+        Paragraph text that follows the headings.
+      </Text>
+    </div>
+  ),
+};
+
+export const AsParagraph: StoryObj<typeof Text> = {
+  render: () => (
+    <div className="max-w-md">
+      <Text render={<p />} size="2" color="primary">
+        This is a paragraph of text rendered using the Text component. It
+        supports multiple sizes, weights, and colors. The text automatically
+        wraps and maintains proper line height for readability.
+      </Text>
+    </div>
+  ),
+};
+
+export const PriceDisplay: StoryObj<typeof Text> = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-baseline gap-2">
+        <Text size="5" weight="semibold" tabularNums>
+          0.500
+        </Text>
+        <Text size="3" color="secondary">
+          ETH
+        </Text>
+      </div>
+      <div className="flex items-center gap-2">
+        <Text size="2" color="success" tabularNums>
+          +12.5%
+        </Text>
+        <Text size="1" color="tertiary">
+          24h change
+        </Text>
+      </div>
+      <div className="flex items-center gap-2">
+        <Text size="2" color="error" tabularNums>
+          -5.2%
+        </Text>
+        <Text size="1" color="tertiary">
+          7d change
+        </Text>
+      </div>
+    </div>
+  ),
+};
+
+export const AuctionInfo: StoryObj<typeof Text> = {
+  render: () => (
+    <div className="w-80 rounded-lg border border-border bg-background p-4">
+      <Text as="h3" size="4" weight="medium" aria-label="Auction title">
+        Ranked Auction #42
+      </Text>
+      <Text render={<p />} size="2" color="secondary" className="mt-1">
+        Bid on one of 20 curated editions. Top 20 bidders win and pay the lowest
+        winning bid.
+      </Text>
+      <div className="mt-4 space-y-2">
+        <div className="flex justify-between">
+          <Text size="2" color="tertiary">
+            Reserve Price
+          </Text>
+          <Text size="2" weight="medium" tabularNums>
+            0.01 ETH
+          </Text>
+        </div>
+        <div className="flex justify-between">
+          <Text size="2" color="tertiary">
+            Current Floor
+          </Text>
+          <Text size="2" weight="medium" tabularNums>
+            0.05 ETH
+          </Text>
+        </div>
+        <div className="flex justify-between">
+          <Text size="2" color="tertiary">
+            Status
+          </Text>
+          <Text size="2" color="success" weight="medium">
+            Live
+          </Text>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const AllCombinations: StoryObj<typeof Text> = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-4">
+      {(["regular", "medium", "semibold"] as const).map((weight) => (
+        <div key={weight} className="space-y-2">
+          <p className="text-xs text-muted-foreground capitalize">{weight}</p>
+          {(["primary", "secondary", "success", "error"] as const).map(
+            (color) => (
+              <Text key={color} weight={weight} color={color} size="2">
+                {color}
+              </Text>
+            ),
+          )}
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/styles/globals.css

@@ -0,0 +1,39 @@
+html,
+body {
+  -webkit-font-smoothing: antialiased;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
+kbd {
+  display: inline-flex;
+  min-width: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
+  border-bottom-color: color-mix(
+    in srgb,
+    var(--color-input) 92%,
+    var(--color-border)
+  );
+  border-radius: 0.45rem;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-background) 92%, var(--color-muted)) 0%,
+    color-mix(in srgb, var(--color-muted) 82%, var(--color-background)) 100%
+  );
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--color-white) 65%, transparent),
+    0 1px 0 color-mix(in srgb, var(--color-border) 55%, transparent),
+    0 2px 6px color-mix(in srgb, var(--color-black) 6%, transparent);
+  padding: 0.125rem 0.375rem;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--color-foreground);
+  white-space: nowrap;
+  vertical-align: middle;
+}

package/src/styles/index.css

@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "./utility.css";
+@import "./theme/index.css";
+@import "./globals.css";

package/src/styles/theme/animation.css

@@ -0,0 +1,11 @@
+@theme {
+  --animate-gradient-loader: gradient-loader 2s infinite ease-out forwards;
+  @keyframes gradient-loader {
+    0% {
+      background-position: 0 100%;
+    }
+    100% {
+      background-position: -200% 100%;
+    }
+  }
+}