ralfy-ui 1.0.0

package/README.md

@@ -0,0 +1,95 @@
+# Ralfy-UI
+
+A design system extracted from a production React application, built to demonstrate how token-driven component architecture reduces engineering time and eliminates design-to-code drift.
+
+> **Live Storybook:** [Browse Components on Chromatic](https://69983a8349303a08fb1562fd-xrtnonxtkh.chromatic.com/)
+
+## Why This Exists
+
+This design system was extracted from [Ralfy](https://github.com/pavlelucic), a LinkedIn feed management tool built as a solo developer using Claude Code. The extraction process demonstrates a code-first philosophy: tokens and components are the source of truth, Figma mirrors them.
+
+**The business case:** When UI patterns live only in Figma or only in a developer's head, every new screen requires re-interpretation. This system eliminates that overhead — a new engineer can build a compliant screen by importing components and reading CLAUDE.md, without studying a 50-page style guide.
+
+## Token Architecture
+
+```
+Tier 1: Primitive     →  blue-600, gray-100, red-500
+         (raw values, used for Figma import)
+
+Tier 2: Semantic      →  primary, muted, destructive
+         (role-based, used in all components)
+```
+
+- **Format:** OKLch (perceptually uniform, CSS Color Level 4, Tailwind v4 native)
+- **Modes:** Light + Dark (CSS custom properties swap under `.dark` class)
+- **Mapping:** `@theme inline` block bridges CSS variables → Tailwind utility classes
+
+See: [Token Architecture Deep Dive](docs/token-architecture.md)
+
+## Components
+
+| Component | Type | Key Features |
+|-----------|------|-------------|
+| **Button** | Presentational | 4 variants, 3 sizes, loading state, `asChild` polymorphism |
+| **Input** | Controlled | Label, helper text, error state, icon, `aria-describedby` |
+| **Card** | Compound | Card + Header + Title + Description + Content + Footer |
+| **Badge** | Presentational | 5 semantic variants (success, warning, error, info, neutral) |
+| **Avatar** | Presentational | Image/initials/fallback, 3 sizes, online/offline status |
+| **Toggle** | Controlled | Radix Switch, keyboard accessible, label association |
+
+All components use `React.forwardRef`, accept `className` for customization, and use only design tokens — zero hardcoded values.
+
+## Quick Start
+
+```bash
+git clone https://github.com/pavlelucic/ralfy-ui.git
+cd ralfy-ui
+pnpm install
+pnpm storybook    # Open Storybook on port 6006
+pnpm dev           # Vite dev server on port 5173
+pnpm test:run      # Run all tests
+pnpm typecheck     # TypeScript check
+```
+
+## AI-Ready
+
+This design system includes a `CLAUDE.md` file — a machine-readable specification that enables AI tools (like Claude Code) to generate compliant UI code automatically.
+
+**What this means in practice:** When an AI reads CLAUDE.md before generating code, it uses the correct tokens, imports, and component APIs without manual review. This eliminates a category of "fix the AI output" work.
+
+See: [AI Workflow Documentation](docs/ai-workflow.md)
+
+## Design Decisions
+
+| Decision | Rationale |
+|----------|-----------|
+| **OKLch over hex/HSL** | Perceptually uniform steps, better dark mode, Tailwind v4 native |
+| **Radix UI primitives** | Battle-tested accessibility (keyboard, ARIA, focus management) without custom implementation |
+| **Storybook over Styleguidist** | Richer addon ecosystem (a11y, visual regression via Chromatic), better docs generation |
+| **cva + cn pattern** | Type-safe variants with className composition — the emerging standard for Tailwind components |
+| **2-tier tokens (not 3)** | Component-level tokens add indirection without value at this scale |
+| **Compound Card pattern** | Flexible composition over rigid prop drilling — aligns with Kit's component needs |
+
+## Tech Stack
+
+| Technology | Version | Purpose |
+|-----------|---------|---------|
+| React | 19 | UI framework |
+| TypeScript | 5.9 | Type safety |
+| Vite | 7 | Build tool |
+| Tailwind CSS | 4 | Utility-first styling |
+| Radix UI | Latest | Accessible primitives |
+| Storybook | 10 | Component documentation |
+| Vitest | 4 | Testing |
+| Testing Library | Latest | Component testing |
+| cva | 0.7 | Variant management |
+
+## Documentation
+
+- [Case Study](docs/case-study.md) — Full portfolio case study
+- [Token Architecture](docs/token-architecture.md) — Deep dive on token decisions
+- [AI Workflow](docs/ai-workflow.md) — AI-assisted design-to-code documentation
+
+## License
+
+MIT

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,24 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type AvatarProps = {
+    src?: string;
+    alt?: string;
+    fallback: string;
+    size?: 'sm' | 'md' | 'lg';
+    status?: 'online' | 'offline';
+    className?: string;
+} & VariantProps<typeof avatarVariants>;
+declare const Avatar: React.ForwardRefExoticComponent<{
+    src?: string;
+    alt?: string;
+    fallback: string;
+    size?: "sm" | "md" | "lg";
+    status?: "online" | "offline";
+    className?: string;
+} & VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+export { Avatar };

package/dist/components/Avatar/index.js

@@ -0,0 +1,71 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import * as f from "react";
+import * as a from "@radix-ui/react-avatar";
+import { cva as u } from "class-variance-authority";
+import { cn as o } from "../../lib/cn.js";
+const h = u("relative flex shrink-0 items-center justify-center", {
+  variants: {
+    size: {
+      sm: "h-8 w-8 text-xs",
+      md: "h-10 w-10 text-sm",
+      lg: "h-14 w-14 text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), g = {
+  sm: "h-2 w-2",
+  md: "h-2.5 w-2.5",
+  lg: "h-3 w-3"
+};
+function v({
+  status: t,
+  size: r = "md"
+}) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      "data-testid": "status-indicator",
+      "data-status": t,
+      className: o(
+        "absolute bottom-0 right-0 rounded-full ring-2 ring-background",
+        g[r],
+        t === "offline" && "bg-muted-foreground"
+      ),
+      style: t === "online" ? { backgroundColor: "oklch(0.64 0.17 155)" } : void 0
+    }
+  );
+}
+const x = f.forwardRef(
+  ({ src: t, alt: r, fallback: s, size: i = "md", status: l, className: m, ...d }, c) => /* @__PURE__ */ n("div", { ref: c, className: o("relative inline-flex", m), ...d, children: [
+    /* @__PURE__ */ n(
+      a.Root,
+      {
+        className: o(h({ size: i }), "overflow-hidden rounded-full"),
+        children: [
+          /* @__PURE__ */ e(
+            a.Image,
+            {
+              className: "h-full w-full object-cover",
+              src: t,
+              alt: r
+            }
+          ),
+          /* @__PURE__ */ e(
+            a.Fallback,
+            {
+              className: "flex h-full w-full items-center justify-center bg-muted text-muted-foreground font-medium",
+              children: s
+            }
+          )
+        ]
+      }
+    ),
+    l && /* @__PURE__ */ e(v, { status: l, size: i })
+  ] })
+);
+x.displayName = "Avatar";
+export {
+  x as Avatar
+};

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const badgeVariants: (props?: ({
+    variant?: "success" | "warning" | "error" | "info" | "neutral" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { Badge, badgeVariants };

package/dist/components/Badge/index.js

@@ -0,0 +1,40 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as o from "react";
+import { cva as i } from "class-variance-authority";
+import { cn as d } from "../../lib/cn.js";
+const c = i(
+  "inline-flex items-center rounded-full font-medium",
+  {
+    variants: {
+      variant: {
+        success: "bg-success text-success-foreground",
+        warning: "bg-warning text-warning-foreground",
+        error: "bg-destructive/10 text-destructive",
+        info: "bg-info text-info-foreground",
+        neutral: "bg-secondary text-secondary-foreground"
+      },
+      size: {
+        sm: "text-xs px-2 py-0.5",
+        md: "text-xs px-2.5 py-1"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "md"
+    }
+  }
+), f = o.forwardRef(
+  ({ className: e, variant: r, size: t, ...n }, a) => /* @__PURE__ */ s(
+    "span",
+    {
+      ref: a,
+      className: d(c({ variant: r, size: t }), e),
+      ...n
+    }
+  )
+);
+f.displayName = "Badge";
+export {
+  f as Badge,
+  c as badgeVariants
+};

package/dist/components/Button/index.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** When true, the button renders as its child element (e.g. an anchor tag). */
+    asChild?: boolean;
+    /** Shows a loading spinner and disables the button. */
+    loading?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/Button/index.js

@@ -0,0 +1,90 @@
+import { jsx as e, jsxs as i, Fragment as u } from "react/jsx-runtime";
+import * as l from "react";
+import { cva as p } from "class-variance-authority";
+import { Slot as f } from "@radix-ui/react-slot";
+import { cn as v } from "../../lib/cn.js";
+const g = p(
+  "inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs rounded-md",
+        md: "h-10 px-4 text-sm rounded-md",
+        lg: "h-12 px-6 text-base rounded-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function b() {
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      className: "h-4 w-4 animate-spin",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      "data-testid": "button-spinner",
+      children: [
+        /* @__PURE__ */ e(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+}
+const x = l.forwardRef(
+  ({
+    className: n,
+    variant: s,
+    size: a,
+    asChild: t = !1,
+    loading: r = !1,
+    disabled: c,
+    children: o,
+    ...d
+  }, m) => /* @__PURE__ */ e(
+    t ? f : "button",
+    {
+      className: v(g({ variant: s, size: a, className: n })),
+      ref: m,
+      disabled: c || r,
+      "aria-busy": r ? "true" : void 0,
+      ...d,
+      children: t ? o : /* @__PURE__ */ i(u, { children: [
+        r && /* @__PURE__ */ e(b, {}),
+        o
+      ] })
+    }
+  )
+);
+x.displayName = "Button";
+export {
+  x as Button,
+  g as buttonVariants
+};

package/dist/components/Card/index.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const Card: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "outlined" | "elevated" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/dist/components/Card/index.js

@@ -0,0 +1,79 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as t from "react";
+import { cva as n } from "class-variance-authority";
+import { cn as o } from "../../lib/cn.js";
+const i = n("", {
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground rounded-lg border border-border",
+      outlined: "bg-transparent text-card-foreground rounded-lg border-2 border-border",
+      elevated: "bg-card text-card-foreground rounded-lg border border-border shadow-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), l = t.forwardRef(
+  ({ className: r, variant: a, ...e }, s) => /* @__PURE__ */ d(
+    "div",
+    {
+      ref: s,
+      className: o(i({ variant: a }), r),
+      ...e
+    }
+  )
+);
+l.displayName = "Card";
+const c = t.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: e,
+    className: o("flex flex-col gap-1.5 p-6", r),
+    ...a
+  }
+));
+c.displayName = "CardHeader";
+const f = t.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ d(
+  "h3",
+  {
+    ref: e,
+    className: o("text-lg font-semibold leading-tight tracking-tight", r),
+    ...a
+  }
+));
+f.displayName = "CardTitle";
+const m = t.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ d(
+  "p",
+  {
+    ref: e,
+    className: o("text-sm text-muted-foreground", r),
+    ...a
+  }
+));
+m.displayName = "CardDescription";
+const p = t.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: e,
+    className: o("p-6 pt-0", r),
+    ...a
+  }
+));
+p.displayName = "CardContent";
+const g = t.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: e,
+    className: o("flex items-center p-6 pt-0", r),
+    ...a
+  }
+));
+g.displayName = "CardFooter";
+export {
+  l as Card,
+  p as CardContent,
+  m as CardDescription,
+  g as CardFooter,
+  c as CardHeader,
+  f as CardTitle
+};

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, };

package/dist/components/Dialog/index.js

@@ -0,0 +1,108 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as r from "react";
+import * as e from "@radix-ui/react-dialog";
+import { cn as i } from "../../lib/cn.js";
+const y = e.Root, N = e.Trigger, h = e.Close, n = r.forwardRef(({ className: o, ...a }, s) => /* @__PURE__ */ t(
+  e.Overlay,
+  {
+    ref: s,
+    className: i(
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      o
+    ),
+    ...a
+  }
+));
+n.displayName = e.Overlay.displayName;
+const c = r.forwardRef(({ className: o, children: a, ...s }, d) => /* @__PURE__ */ l(e.Portal, { children: [
+  /* @__PURE__ */ t(n, {}),
+  /* @__PURE__ */ l(
+    e.Content,
+    {
+      ref: d,
+      className: i(
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border border-border bg-background p-6 shadow-lg rounded-lg",
+        o
+      ),
+      ...s,
+      children: [
+        a,
+        /* @__PURE__ */ l(e.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", children: [
+          /* @__PURE__ */ l(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ t("path", { d: "M18 6 6 18" }),
+                /* @__PURE__ */ t("path", { d: "m6 6 12 12" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ t("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+c.displayName = e.Content.displayName;
+const m = ({
+  className: o,
+  ...a
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: i("flex flex-col gap-1.5 text-center sm:text-left", o),
+    ...a
+  }
+);
+m.displayName = "DialogHeader";
+const g = ({
+  className: o,
+  ...a
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: i(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2",
+      o
+    ),
+    ...a
+  }
+);
+g.displayName = "DialogFooter";
+const f = r.forwardRef(({ className: o, ...a }, s) => /* @__PURE__ */ t(
+  e.Title,
+  {
+    ref: s,
+    className: i("text-lg font-semibold leading-tight", o),
+    ...a
+  }
+));
+f.displayName = e.Title.displayName;
+const p = r.forwardRef(({ className: o, ...a }, s) => /* @__PURE__ */ t(
+  e.Description,
+  {
+    ref: s,
+    className: i("text-sm text-muted-foreground", o),
+    ...a
+  }
+));
+p.displayName = e.Description.displayName;
+export {
+  y as Dialog,
+  h as DialogClose,
+  c as DialogContent,
+  p as DialogDescription,
+  g as DialogFooter,
+  m as DialogHeader,
+  f as DialogTitle,
+  N as DialogTrigger
+};

package/dist/components/Input/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {
+    label?: string;
+    helperText?: string;
+    errorMessage?: string;
+    icon?: React.ReactNode;
+    className?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/Input/index.js

@@ -0,0 +1,61 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as b } from "../../lib/cn.js";
+const g = s.forwardRef(
+  ({
+    label: r,
+    helperText: i,
+    errorMessage: t,
+    icon: n,
+    disabled: o,
+    type: l,
+    className: u,
+    id: m,
+    ...f
+  }, p) => {
+    const x = s.useId(), d = m ?? x, c = `${d}-error`;
+    return /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+      r && /* @__PURE__ */ e(
+        "label",
+        {
+          htmlFor: d,
+          className: "text-sm font-medium text-foreground",
+          children: r
+        }
+      ),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: b(
+            "flex items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+            t && "border-destructive",
+            o && "cursor-not-allowed opacity-50",
+            u
+          ),
+          children: [
+            n && /* @__PURE__ */ e("span", { className: "mr-2 text-muted-foreground", children: n }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                ref: p,
+                id: d,
+                type: l,
+                disabled: o,
+                "aria-describedby": t ? c : void 0,
+                "aria-invalid": t ? !0 : void 0,
+                className: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                ...f
+              }
+            )
+          ]
+        }
+      ),
+      t && /* @__PURE__ */ e("p", { id: c, className: "text-xs text-destructive", children: t }),
+      i && !t && /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: i })
+    ] });
+  }
+);
+g.displayName = "Input";
+export {
+  g as Input
+};

package/dist/components/Toggle/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+export interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    id?: string;
+    className?: string;
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export { Toggle };