@peerbots/core 0.1.0

package/src/ui/Icon.stories.tsx

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Icon, IconName } from "./Icon";
+import { Text } from "./Typography";
+
+const meta: Meta<typeof Icon> = {
+  title: "UI/Icon",
+  component: Icon,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "xl"],
+    },
+    name: {
+      control: "select",
+      options: [
+        "arrowDown",
+        "arrowDownToLine",
+        "arrowDownTray",
+        "arrowPath",
+        "arrowRightOnRectangle",
+        "arrowUp",
+        "arrowUpFromLine",
+        "arrowUpTray",
+        "arrowsPointingIn",
+        "arrowsPointingOut",
+        "arrowsRightLeft",
+        "arrowsUpDown",
+        "check",
+        "checkCircle",
+        "chevronDownSmall",
+        "chevronDownTable",
+        "chevronRight",
+        "chevronUpSmall",
+        "chevronUpTable",
+        "clipboard",
+        "close",
+        "cloudArrowUp",
+        "code",
+        "document",
+        "edit",
+        "envelope",
+        "exclamationCircle",
+        "exclamationTriangle",
+        "export",
+        "externalLink",
+        "eye",
+        "folder",
+        "google",
+        "home",
+        "import",
+        "lock",
+        "lockClosed",
+        "magnifyingGlassPlus",
+        "megaphone",
+        "minus",
+        "pencilSquare",
+        "pencilSquareContinued",
+        "play",
+        "plus",
+        "questionMarkCircle",
+        "search",
+        "shoppingCart",
+        "speakerWave",
+        "squares",
+        "tableCells",
+        "userCircle",
+        "x",
+        "xCircle",
+        "zap",
+      ],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Icon>;
+
+const CheckPath = <path d="M20 6 9 17l-5-5" />;
+const XPath = <path d="M18 6 6 18M6 6l12 12" />;
+
+export const Default: Story = {
+  args: {
+    children: CheckPath,
+    className: "text-green-500",
+  },
+};
+
+export const NamedIcons: Story = {
+  render: () => (
+    <div className="grid grid-cols-6 gap-4 p-4">
+      {[
+        "arrowDown",
+        "arrowDownToLine",
+        "arrowDownTray",
+        "arrowPath",
+        "arrowRightOnRectangle",
+        "arrowUp",
+        "arrowUpFromLine",
+        "arrowUpTray",
+        "arrowsPointingIn",
+        "arrowsPointingOut",
+        "arrowsRightLeft",
+        "arrowsUpDown",
+        "check",
+        "checkCircle",
+        "chevronDownSmall",
+        "chevronDownTable",
+        "chevronRight",
+        "chevronUpSmall",
+        "chevronUpTable",
+        "clipboard",
+        "close",
+        "cloudArrowUp",
+        "code",
+        "document",
+        "edit",
+        "envelope",
+        "exclamationCircle",
+        "exclamationTriangle",
+        "export",
+        "externalLink",
+        "eye",
+        "folder",
+        "google",
+        "home",
+        "import",
+        "lock",
+        "lockClosed",
+        "magnifyingGlassPlus",
+        "megaphone",
+        "minus",
+        "pencilSquare",
+        "pencilSquareContinued",
+        "play",
+        "plus",
+        "questionMarkCircle",
+        "search",
+        "shoppingCart",
+        "speakerWave",
+        "squares",
+        "tableCells",
+        "userCircle",
+        "x",
+        "xCircle",
+        "zap",
+      ].map((name) => (
+        <div key={name} className="flex flex-col items-center">
+          <Icon name={name as IconName} />
+          <Text variant="small">{name}</Text>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-12 p-4">
+      <div className="space-y-4">
+        <Text variant="small" className="font-bold underline uppercase">
+          Different Sizes
+        </Text>
+        <div className="flex items-end gap-4">
+          <Icon size="sm">{CheckPath}</Icon>
+          <Icon size="md">{CheckPath}</Icon>
+          <Icon size="lg">{CheckPath}</Icon>
+          <Icon size="xl">{CheckPath}</Icon>
+        </div>
+      </div>
+      <div className="space-y-4">
+        <Text variant="small" className="font-bold underline uppercase">
+          Different Content & Colors
+        </Text>
+        <div className="flex gap-4">
+          <Icon className="text-red-500">{XPath}</Icon>
+          <Icon className="text-primary">{CheckPath}</Icon>
+        </div>
+      </div>
+      <div className="space-y-4">
+        <Text variant="small" className="font-bold underline uppercase">
+          Using Named Icons
+        </Text>
+        <div className="flex gap-4">
+          <Icon name="check" className="text-green-500" />
+          <Icon name="x" className="text-red-500" />
+          <Icon name="plus" className="text-blue-500" />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/Icon.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { cn } from "./utils";
+import { IconName, icons } from "./IconRegistry";
+
+export type { IconName };
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: "sm" | "md" | "lg" | "xl";
+  name?: IconName;
+}
+
+export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ className, size = "md", name, children, ...props }, ref) => {
+    const sizes = {
+      sm: "w-3 h-3",
+      md: "w-4 h-4",
+      lg: "w-6 h-6",
+      xl: "w-8 h-8",
+    };
+
+    const iconContent = name ? icons[name] : children;
+
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn(sizes[size], "inline-block", className)}
+        {...props}
+      >
+        {iconContent}
+      </svg>
+    );
+  },
+);
+
+Icon.displayName = "Icon";

package/src/ui/IconRegistry.tsx

@@ -0,0 +1,189 @@
+import React from "react";
+
+/**
+ * Raw path data for icons, useful for non-React contexts (like PixiJS Graphics.svg)
+ */
+export const iconPaths = {
+  check: "M20 6 9 17l-5-5",
+  x: "M18 6 6 18M6 6l12 12",
+  edit: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125",
+  close: "M6 18L18 6M6 6l12 12",
+  plus: "M12 4.5v15m7.5-7.5h-15",
+  arrowDown: "M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3", // Points DOWN
+  arrowUp: "M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18", // Points UP
+  clipboard:
+    "M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75",
+  cloudArrowUp:
+    "M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z",
+  arrowDownToLine: "M9 12l3 3m0 0 3-3m-3 3V2.25",
+  folder:
+    "M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15",
+  arrowUpFromLine:
+    "M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15",
+  squares:
+    "M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z",
+  tableCells:
+    "M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5",
+  arrowsRightLeft:
+    "M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5",
+  document:
+    "M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z",
+  externalLink:
+    "M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25",
+  lock: "M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z",
+  shoppingCart:
+    "M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z",
+  minus: "M5 12h14",
+  pencilSquare:
+    "M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z",
+  pencilSquareContinued:
+    "M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z",
+  chevronUpSmall: "M4.5 15.75l7.5-7.5 7.5 7.5", // Points UP
+  chevronDownSmall: "M19.5 8.25l-7.5 7.5-7.5-7.5", // Points DOWN
+  chevronUpTable: "M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18", // Points UP
+  chevronDownTable: "M15.75 17.25 12 21m0 0-3.75-3.75M12 21V3", // Points DOWN
+  speakerWave:
+    "M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z",
+  zap: "m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z",
+  code: "M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5",
+  questionMarkCircle:
+    "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z",
+  search:
+    "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z",
+  exclamationCircle:
+    "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
+  exclamationTriangle:
+    "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
+  checkCircle:
+    "M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z",
+  megaphone:
+    "M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46",
+  xCircle:
+    "m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
+  arrowsPointingIn:
+    "M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25",
+  arrowsPointingOut:
+    "M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15",
+  arrowPath:
+    "M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3",
+  arrowUturnLeft: "M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3",
+  magnifyingGlassPlus:
+    "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6",
+  arrowsUpDown:
+    "M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5",
+  envelope:
+    "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",
+  lockClosed:
+    "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z",
+  userCircle:
+    "M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z",
+  arrowRightOnRectangle:
+    "M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9",
+  chevronRight: "m8.25 4.5 7.5 7.5-7.5 7.5",
+  arrowDownTray:
+    "M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3",
+  arrowUpTray:
+    "M3 7.5V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25V7.5m-4.5 4.5L12 7.5m0 0L7.5 12m4.5-4.5v13.5",
+  import:
+    "M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15M9 12l3 3m0 0 3-3m-3 3V2.25",
+  export:
+    "M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15",
+  home: "m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25",
+  play: "M5 3l14 9-14 9V3z",
+};
+
+/**
+ * Icons that are complex React nodes
+ */
+export const complexIcons = {
+  eye: (
+    <>
+      <path d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+      <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+    </>
+  ),
+  google: (
+    <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
+      <path
+        fill="#4285F4"
+        stroke="none"
+        d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
+      />
+      <path
+        fill="#34A853"
+        stroke="none"
+        d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
+      />
+      <path
+        fill="#FBBC05"
+        stroke="none"
+        d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
+      />
+      <path
+        fill="#EA4335"
+        stroke="none"
+        d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
+      />
+    </g>
+  ),
+} as const;
+
+export type IconName = keyof typeof iconPaths | keyof typeof complexIcons;
+
+export const icons: Record<IconName, React.ReactNode> = {
+  check: <path d={iconPaths.check} />,
+  x: <path d={iconPaths.x} />,
+  edit: <path d={iconPaths.edit} />,
+  close: <path d={iconPaths.close} />,
+  plus: <path d={iconPaths.plus} />,
+  arrowDown: <path d={iconPaths.arrowDown} />,
+  arrowUp: <path d={iconPaths.arrowUp} />,
+  clipboard: <path d={iconPaths.clipboard} />,
+  cloudArrowUp: <path d={iconPaths.cloudArrowUp} />,
+  arrowDownToLine: <path d={iconPaths.arrowDownToLine} />,
+  folder: <path d={iconPaths.folder} />,
+  arrowUpFromLine: <path d={iconPaths.arrowUpFromLine} />,
+  arrowRightOnRectangle: <path d={iconPaths.arrowRightOnRectangle} />,
+  squares: <path d={iconPaths.squares} />,
+  tableCells: <path d={iconPaths.tableCells} />,
+  arrowsRightLeft: <path d={iconPaths.arrowsRightLeft} />,
+  document: <path d={iconPaths.document} />,
+  externalLink: <path d={iconPaths.externalLink} />,
+  lock: <path d={iconPaths.lock} />,
+  shoppingCart: <path d={iconPaths.shoppingCart} />,
+  minus: <path d={iconPaths.minus} />,
+  pencilSquare: <path d={iconPaths.pencilSquare} />,
+  pencilSquareContinued: <path d={iconPaths.pencilSquareContinued} />,
+  chevronDownSmall: <path d={iconPaths.chevronDownSmall} />,
+  chevronUpSmall: <path d={iconPaths.chevronUpSmall} />,
+  chevronDownTable: <path d={iconPaths.chevronDownTable} />,
+  chevronUpTable: <path d={iconPaths.chevronUpTable} />,
+  speakerWave: <path d={iconPaths.speakerWave} />,
+  zap: <path d={iconPaths.zap} />,
+  code: <path d={iconPaths.code} />,
+  questionMarkCircle: <path d={iconPaths.questionMarkCircle} />,
+  search: <path d={iconPaths.search} />,
+  exclamationCircle: <path d={iconPaths.exclamationCircle} />,
+  exclamationTriangle: <path d={iconPaths.exclamationTriangle} />,
+  checkCircle: <path d={iconPaths.checkCircle} />,
+  megaphone: <path d={iconPaths.megaphone} />,
+  xCircle: <path d={iconPaths.xCircle} />,
+  arrowsPointingIn: <path d={iconPaths.arrowsPointingIn} />,
+  arrowsPointingOut: <path d={iconPaths.arrowsPointingOut} />,
+  arrowPath: <path d={iconPaths.arrowPath} />,
+  arrowUturnLeft: <path d={iconPaths.arrowUturnLeft} />,
+  magnifyingGlassPlus: <path d={iconPaths.magnifyingGlassPlus} />,
+  arrowsUpDown: <path d={iconPaths.arrowsUpDown} />,
+  envelope: <path d={iconPaths.envelope} />,
+  lockClosed: <path d={iconPaths.lockClosed} />,
+  userCircle: <path d={iconPaths.userCircle} />,
+  chevronRight: <path d={iconPaths.chevronRight} />,
+  arrowDownTray: <path d={iconPaths.arrowDownTray} />,
+  arrowUpTray: <path d={iconPaths.arrowUpTray} />,
+  import: <path d={iconPaths.import} />,
+  export: <path d={iconPaths.export} />,
+  home: <path d={iconPaths.home} />,
+  play: <path d={iconPaths.play} />,
+  eye: complexIcons.eye,
+  google: complexIcons.google,
+};

package/src/ui/Input.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./Input";
+import { Heading, Text } from "./Typography";
+
+const meta: Meta<typeof Input> = {
+  title: "UI/Input",
+  component: Input,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter text...",
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8 p-4 max-w-sm">
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Input Styles
+        </Heading>
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <Text variant="small" className="font-bold">
+              With Placeholder
+            </Text>
+            <Input placeholder="Type here..." />
+          </div>
+          <div className="space-y-1">
+            <Text variant="small" className="font-bold">
+              With Value
+            </Text>
+            <Input defaultValue="Initial value" />
+          </div>
+          <div className="space-y-1">
+            <Text variant="small" className="font-bold">
+              Password Type
+            </Text>
+            <Input type="password" placeholder="Password..." />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          States
+        </Heading>
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <Text variant="small" className="font-bold">
+              Disabled
+            </Text>
+            <Input disabled defaultValue="Can't edit me" />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/Input.tsx

@@ -0,0 +1,43 @@
+import { Input as BaseInput } from "@base-ui/react";
+import React from "react";
+import { cn } from "./utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, leftIcon, rightIcon, id, ...props }, ref) => {
+    const inputClasses = cn(
+      "block w-full rounded-md border-0 px-1.5 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6 bg-primary/10 appearance-none",
+      leftIcon && "pl-10",
+      rightIcon && "pr-10",
+      className,
+    );
+
+    if (!leftIcon && !rightIcon) {
+      return (
+        <BaseInput ref={ref} id={id} className={inputClasses} {...props} />
+      );
+    }
+
+    return (
+      <div className="relative">
+        {leftIcon && (
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            <span className="text-gray-500 sm:text-sm">{leftIcon}</span>
+          </div>
+        )}
+        <BaseInput ref={ref} id={id} className={inputClasses} {...props} />
+        {rightIcon && (
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+            <span className="text-gray-500 sm:text-sm">{rightIcon}</span>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";

package/src/ui/Label.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label } from "./Label";
+import { Input } from "./Input";
+import { Text } from "./Typography";
+
+const meta: Meta<typeof Label> = {
+  title: "UI/Label",
+  component: Label,
+  tags: ["autodocs"],
+  args: {
+    children: "Label Text",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-12 p-4">
+      <div className="space-y-2">
+        <Text variant="small" className="font-bold underline uppercase">
+          With Tooltip
+        </Text>
+        <Label tooltip="Extra information here.">Hover the help icon</Label>
+      </div>
+      <div className="space-y-2">
+        <Text variant="small" className="font-bold underline uppercase">
+          With Associated Input
+        </Text>
+        <div className="space-y-1">
+          <Label htmlFor="v-input" tooltip="This is required">
+            Email Address
+          </Label>
+          <Input id="v-input" placeholder="user@example.com" />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/Label.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { cn } from "./utils";
+import { HelperTooltip } from "./Tooltip";
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  children: React.ReactNode;
+  tooltip?: string;
+  className?: string;
+}
+
+export function Label({ children, tooltip, className, ...props }: LabelProps) {
+  return (
+    <label
+      className={cn(
+        "relative block text-sm font-bold leading-6 text-gray-600 mb-1 group-focus-within:text-gray-800",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-1">
+        {children}
+        {tooltip && <HelperTooltip content={tooltip} />}
+      </div>
+    </label>
+  );
+}