@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

package/client/ui/Icons.stories.tsx

@@ -93,7 +93,7 @@ import {
 } from "../components/icons/achievement-badges";
 
 const meta = {
-  title: "Review/Icons",
+  title: "Components/Icons",
   tags: ["autodocs"],
   parameters: {
     layout: "padded",

package/client/ui/Input.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from "../components/ui/button";
 import { Search, Copy } from "lucide-react";
 
 const meta = {
-  title: "Review/Input",
+  title: "Components/Input",
   component: Input,
   tags: ["autodocs"],
   parameters: {

package/client/ui/InputOTP/InputOTP.stories.tsx

@@ -8,7 +8,7 @@ import {
 import { useState } from "react";
 
 const meta = {
-  title: "UI/InputOTP",
+  title: "Draft/InputOTP",
   component: InputOTP,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Label.stories.tsx

@@ -4,7 +4,7 @@ import { Input } from "../components/ui/input";
 import { Textarea } from "../components/ui/textarea";
 
 const meta = {
-  title: "Review/Label",
+  title: "Components/Label",
   component: Label,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Layout/Center.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Center, VStack } from "../../components/ui/layout";
+import { Card } from "../../components/ui/card";
+import { Text } from "../../components/ui/typography";
+import { DemoBox, LAYOUT_DOCS_RULE } from "./demo";
+import { hiddenArgs, spaceControl } from "./controls";
+
+const meta = {
+  title: "Components/Layout/Center",
+  component: Center,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Centers children on one or both axes. Use for empty states, login cards, and spinners.",
+          "",
+          LAYOUT_DOCS_RULE,
+          "",
+          "```tsx",
+          `import { Center } from "@syscore/ui-library"`,
+          "",
+          '<Center axis="both" height={320}>',
+          "  <EmptyState />",
+          "</Center>",
+          "```",
+          "",
+          "Set `height` when centering vertically — Center needs a defined height to center within.",
+          "",
+          "| `axis` | Effect |",
+          "|--------|--------|",
+          "| `both` (default) | Horizontal and vertical |",
+          "| `horizontal` | `justify-content: center` only |",
+          "| `vertical` | `align-items: center` only |",
+          "",
+          "`isInline` swaps `display: flex` for `inline-flex` so the box hugs its content instead of filling the row.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    ...hiddenArgs,
+    axis: {
+      control: "inline-radio",
+      options: ["both", "horizontal", "vertical"],
+    },
+    padding: spaceControl,
+    isInline: { control: "boolean" },
+  },
+  args: {
+    axis: "both",
+    height: 240,
+  },
+} satisfies Meta<typeof Center>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Center {...args} className="sb-outline">
+      <DemoBox label="Centered" />
+    </Center>
+  ),
+};
+
+export const Horizontal: Story = {
+  args: { axis: "horizontal", height: 120 },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Horizontal only — the child sits at the top, centred left to right.",
+      },
+    },
+  },
+  render: (args) => (
+    <Center {...args} className="sb-outline">
+      <DemoBox label="Horizontal only" />
+    </Center>
+  ),
+};
+
+export const CenteredCard: Story = {
+  name: "Centered card",
+  args: { axis: "both", height: 320, padding: "xl" },
+  render: (args) => (
+    <Center {...args}>
+      <Card variant="outlined">
+        <VStack gap="xs" align="center" maxWidth={320}>
+          <Text variant="heading-xxsmall">Sign in</Text>
+          <Text variant="body-small">
+            Use Center for empty and auth screens.
+          </Text>
+        </VStack>
+      </Card>
+    </Center>
+  ),
+};

package/client/ui/Layout/Columns.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Columns } from "../../components/ui/layout";
+import { DemoBox, LAYOUT_DOCS_RULE } from "./demo";
+import { hiddenArgs, spaceControl } from "./controls";
+
+const meta = {
+  title: "Components/Layout/Columns",
+  component: Columns,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Two-column grid with **unequal** widths — a sidebar beside content, or a 1:2 split. For equal columns use `Grid`; for a whole page shell use `Layout` + `LayoutPanel`.",
+          "",
+          LAYOUT_DOCS_RULE,
+          "",
+          "```tsx",
+          `import { Columns } from "@syscore/ui-library"`,
+          "",
+          '<Columns preset="sidebar" gap="xl" collapse="md">',
+          "  <Nav />",
+          "  <Main />",
+          "</Columns>",
+          "```",
+          "",
+          "| `preset` | Template |",
+          "|----------|----------|",
+          "| `sidebar` | panel width + rest |",
+          "| `sidebar-right` | rest + panel width |",
+          "| `wide-sidebar` / `narrow-sidebar` | wide / narrow panel width + rest |",
+          "| `split` (default) | `1fr 1fr` |",
+          "| `1-2` `2-1` `1-3` `3-1` | proportional splits |",
+          "",
+          "Sidebar presets read the same `--layout-panel-width-*` variables as `LayoutPanel`, so a sidebar here and a panel there stay the same width.",
+          "",
+          "`collapse` picks the breakpoint below which the columns stack into one.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    ...hiddenArgs,
+    preset: {
+      control: "select",
+      options: [
+        "sidebar",
+        "sidebar-right",
+        "wide-sidebar",
+        "narrow-sidebar",
+        "split",
+        "1-2",
+        "2-1",
+        "1-3",
+        "3-1",
+      ],
+    },
+    collapse: {
+      control: "inline-radio",
+      options: [undefined, "sm", "md", "lg"],
+    },
+    gap: spaceControl,
+    rowGap: spaceControl,
+    columnGap: spaceControl,
+    template: { control: "text" },
+  },
+  args: {
+    preset: "sidebar",
+    gap: "xl",
+    collapse: "md",
+  },
+} satisfies Meta<typeof Columns>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Sidebar",
+  render: (args) => (
+    <Columns {...args}>
+      <DemoBox label="Sidebar" tall />
+      <DemoBox label="Content" tall />
+    </Columns>
+  ),
+};
+
+export const Split: Story = {
+  args: { preset: "split" },
+  parameters: {
+    docs: { description: { story: "Two equal halves." } },
+  },
+  render: (args) => (
+    <Columns {...args}>
+      <DemoBox label="Left" tall />
+      <DemoBox label="Right" tall />
+    </Columns>
+  ),
+};
+
+export const Proportional: Story = {
+  args: { preset: "1-3" },
+  parameters: {
+    docs: {
+      description: {
+        story: "`1-3` gives the second column three times the width.",
+      },
+    },
+  },
+  render: (args) => (
+    <Columns {...args}>
+      <DemoBox label="1fr" tall />
+      <DemoBox label="3fr" tall />
+    </Columns>
+  ),
+};
+
+export const CustomTemplate: Story = {
+  name: "Custom template",
+  args: { preset: undefined, template: "1fr 2fr 1fr" },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`template` accepts any `grid-template-columns` value and overrides `preset`. Reach for it only when no preset fits — a literal here is a value the design system can no longer change.",
+      },
+    },
+  },
+  render: (args) => (
+    <Columns {...args}>
+      <DemoBox label="1fr" />
+      <DemoBox label="2fr" />
+      <DemoBox label="1fr" />
+    </Columns>
+  ),
+};

package/client/ui/Layout/Container.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Container, VStack } from "../../components/ui/layout";
+import { Text } from "../../components/ui/typography";
+import { DemoBox, LAYOUT_DOCS_RULE } from "./demo";
+import { hiddenArgs } from "./controls";
+
+const meta = {
+  title: "Components/Layout/Container",
+  component: Container,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: [
+          "Max-width wrapper that centers a page column. Inside a `Layout`, prefer `contentWidth` on `Layout` — this is for pages that are not built on the shell.",
+          "",
+          LAYOUT_DOCS_RULE,
+          "",
+          "```tsx",
+          `import { Container } from "@syscore/ui-library"`,
+          "",
+          '<Container size="lg">',
+          "  <Article />",
+          "</Container>",
+          "```",
+          "",
+          "| `size` | Max width |",
+          "|--------|-----------|",
+          "| `sm` | 640px |",
+          "| `md` | 768px |",
+          "| `lg` | 1024px |",
+          "| `xl` (default) | 1280px |",
+          "| `2xl` | 1536px |",
+          "| `full` | 100% |",
+          "",
+          "`center` (default on) applies the auto margins; `padded` (default on) adds the responsive side gutter.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    ...hiddenArgs,
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "xl", "2xl", "full"],
+    },
+    center: { control: "boolean" },
+    padded: { control: "boolean" },
+  },
+  args: { size: "lg", center: true, padded: true },
+} satisfies Meta<typeof Container>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Container {...args}>
+      <VStack gap="md">
+        <Text variant="heading-xsmall">Contained column</Text>
+        <DemoBox label="Container child" tall />
+      </VStack>
+    </Container>
+  ),
+};
+
+export const Sizes: Story = {
+  name: "All sizes",
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          "Each step against the same viewport. Widen the canvas to separate them.",
+      },
+    },
+  },
+  render: () => (
+    <VStack gap="sm" width="100%">
+      {(["sm", "md", "lg", "xl", "2xl"] as const).map((size) => (
+        <Container key={size} size={size}>
+          <DemoBox label={`size="${size}"`} />
+        </Container>
+      ))}
+    </VStack>
+  ),
+};
+
+export const Unpadded: Story = {
+  args: { padded: false },
+  parameters: {
+    docs: {
+      description: {
+        story: "Turn `padded` off when the child brings its own inset.",
+      },
+    },
+  },
+  render: (args) => (
+    <Container {...args}>
+      <DemoBox label="No side gutter" tall />
+    </Container>
+  ),
+};

package/client/ui/Layout/FormLayout.stories.tsx

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormLayout, HStack, VStack } from "../../components/ui/layout";
+import { ButtonV01 } from "../../components/ui/button-v01";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import { Textarea } from "../../components/ui/textarea";
+import { LAYOUT_DOCS_RULE } from "./demo";
+import { hiddenArgs, spaceControl } from "./controls";
+
+const meta = {
+  title: "Components/Layout/FormLayout",
+  component: FormLayout,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Arranges form fields. Layout only — wrap in a `<form>` for submit.",
+          "",
+          LAYOUT_DOCS_RULE,
+          "",
+          "```tsx",
+          `import { FormLayout } from "@syscore/ui-library"`,
+          "",
+          "<FormLayout>",
+          "  <Label>Name</Label>",
+          "  <Input />",
+          "</FormLayout>",
+          "```",
+          "",
+          "| `direction` | Effect |",
+          "|-------------|--------|",
+          "| `vertical` (default) | Fields stack top to bottom |",
+          "| `horizontal` | Equal-width columns |",
+          "| `horizontal-labels` | Label left, control right (stacks below 480px) |",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    ...hiddenArgs,
+    direction: {
+      control: "inline-radio",
+      options: ["vertical", "horizontal", "horizontal-labels"],
+    },
+    gap: spaceControl,
+  },
+  args: {
+    direction: "vertical",
+    maxWidth: 480,
+    width: "100%",
+  },
+} satisfies Meta<typeof FormLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Vertical",
+  render: (args) => (
+    <FormLayout {...args}>
+      <VStack gap="xs">
+        <Label>Project name</Label>
+        <Input placeholder="My project" />
+      </VStack>
+      <VStack gap="xs">
+        <Label>Description</Label>
+        <Textarea placeholder="Describe your project" />
+      </VStack>
+      <HStack gap="sm" justify="end">
+        <ButtonV01
+          typeVariant="utility"
+          appearance="solid"
+          hierarchy="secondary"
+          size="medium"
+        >
+          Cancel
+        </ButtonV01>
+        <ButtonV01
+          typeVariant="utility"
+          appearance="solid"
+          context="confirm"
+          size="medium"
+        >
+          Create
+        </ButtonV01>
+      </HStack>
+    </FormLayout>
+  ),
+};
+
+export const Horizontal: Story = {
+  args: { maxWidth: 640 },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Pair related fields (first + last name). Nest inside a vertical FormLayout for the rest of the form.",
+      },
+    },
+  },
+  render: (args) => (
+    <FormLayout {...args}>
+      <FormLayout direction="horizontal">
+        <VStack gap="xs">
+          <Label>First name</Label>
+          <Input placeholder="Ada" />
+        </VStack>
+        <VStack gap="xs">
+          <Label>Last name</Label>
+          <Input placeholder="Lovelace" />
+        </VStack>
+      </FormLayout>
+      <VStack gap="xs">
+        <Label>Email</Label>
+        <Input placeholder="ada@example.com" />
+      </VStack>
+    </FormLayout>
+  ),
+};
+
+export const HorizontalLabels: Story = {
+  name: "Horizontal labels",
+  args: { direction: "horizontal-labels", maxWidth: 560 },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Settings-style: label on the left, control on the right. Pass Label then Input as siblings.",
+      },
+    },
+  },
+  render: (args) => (
+    <FormLayout {...args}>
+      <Label>Name</Label>
+      <Input placeholder="Ada Lovelace" />
+      <Label>Email</Label>
+      <Input placeholder="ada@example.com" />
+      <Label>Role</Label>
+      <Input placeholder="Engineer" />
+    </FormLayout>
+  ),
+};

package/client/ui/Layout/Grid.stories.tsx

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Grid } from "../../components/ui/layout";
+import { Card } from "../../components/ui/card";
+import { Text } from "../../components/ui/typography";
+import { DemoBox, LAYOUT_DOCS_RULE } from "./demo";
+import { hiddenArgs, spaceControl } from "./controls";
+
+const meta = {
+  title: "Components/Layout/Grid",
+  component: Grid,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Equal-width CSS grid. Use for cards, galleries, and metric rows.",
+          "",
+          LAYOUT_DOCS_RULE,
+          "",
+          "```tsx",
+          `import { Grid } from "@syscore/ui-library"`,
+          "",
+          '<Grid columns={3} gap="xl">',
+          "  <Card />",
+          "  <Card />",
+          "  <Card />",
+          "</Grid>",
+          "```",
+          "",
+          "| `columns` | Effect |",
+          "|-----------|--------|",
+          "| `3` | Always three columns, mobile included |",
+          "| `{ minWidth: 280 }` | Auto-fills as many columns as fit — no breakpoint props |",
+          "",
+          "Unequal widths (sidebar + main) belong on `Columns`, or on `Layout` + `LayoutPanel` for a page shell.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    ...hiddenArgs,
+    columns: { control: "select", options: [1, 2, 3, 4, 6, 12] },
+    gap: spaceControl,
+    rowGap: spaceControl,
+    columnGap: spaceControl,
+    align: {
+      control: "select",
+      options: ["start", "center", "end", "stretch"],
+    },
+    justify: {
+      control: "select",
+      options: ["start", "center", "end", "stretch"],
+    },
+  },
+  args: {
+    columns: 3,
+    gap: "md",
+    width: "100%",
+  },
+} satisfies Meta<typeof Grid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Three columns",
+  render: (args) => (
+    <Grid {...args}>
+      {["1", "2", "3", "4", "5", "6"].map((n) => (
+        <DemoBox key={n} label={n} tall />
+      ))}
+    </Grid>
+  ),
+};
+
+export const TwoColumns: Story = {
+  name: "Two columns",
+  args: { columns: 2 },
+  render: (args) => (
+    <Grid {...args}>
+      {["One", "Two", "Three", "Four"].map((n) => (
+        <DemoBox key={n} label={n} tall />
+      ))}
+    </Grid>
+  ),
+};
+
+export const FourColumns: Story = {
+  name: "Four columns",
+  args: { columns: 4 },
+  render: (args) => (
+    <Grid {...args}>
+      {["Q1", "Q2", "Q3", "Q4"].map((n) => (
+        <DemoBox key={n} label={n} />
+      ))}
+    </Grid>
+  ),
+};
+
+export const Fluid: Story = {
+  name: "Fluid min width",
+  args: { columns: { minWidth: 200 } },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Columns reflow from available width. Not a breakpoint table — resize the canvas.",
+      },
+    },
+  },
+  render: (args) => (
+    <Grid {...args}>
+      {["A", "B", "C", "D", "E", "F"].map((n) => (
+        <DemoBox key={n} label={n} tall />
+      ))}
+    </Grid>
+  ),
+};
+
+export const UnevenGaps: Story = {
+  name: "Row and column gap",
+  args: { columns: 3, rowGap: "2xl", columnGap: "xs" },
+  parameters: {
+    docs: {
+      description: {
+        story: "`rowGap` and `columnGap` override `gap` on one axis.",
+      },
+    },
+  },
+  render: (args) => (
+    <Grid {...args}>
+      {["1", "2", "3", "4", "5", "6"].map((n) => (
+        <DemoBox key={n} label={n} />
+      ))}
+    </Grid>
+  ),
+};
+
+export const EqualWidthCards: Story = {
+  name: "Equal-width cards",
+  args: { columns: 4, gap: "md" },
+  render: (args) => (
+    <Grid {...args}>
+      {[
+        { label: "Total projects", value: "2,847" },
+        { label: "Compliance score", value: "94%" },
+        { label: "Open issues", value: "18" },
+        { label: "Active users", value: "1,204" },
+      ].map((item) => (
+        <Card key={item.label} variant="outlined">
+          <Text variant="overline-small">{item.label}</Text>
+          <Text variant="number-large">{item.value}</Text>
+        </Card>
+      ))}
+    </Grid>
+  ),
+};