@sdods/ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,66 +1,104 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 
-interface Theme {
-    name: string;
-    colors: {
-        primary: string;
-        secondary: string;
-        accent: string;
-        background: string;
-        foreground: string;
-        muted: string;
-        border: string;
-        error: string;
-        success: string;
-        warning: string;
-    };
-    fonts: {
-        sans: string;
-        mono: string;
-    };
-    radii: {
-        sm: string;
-        md: string;
-        lg: string;
-        full: string;
-    };
-}
-declare const themes: Record<string, Theme>;
-interface ThemeProviderProps {
-    theme?: Theme | keyof typeof themes;
-    children: React.ReactNode;
-}
-declare function ThemeProvider({ theme, children }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-declare function useTheme(): Theme;
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
-    size?: 'sm' | 'md' | 'lg';
-    loading?: boolean;
+/**
+ * cn() - Class Name utility
+ * Combines clsx for conditional classes + tailwind-merge for conflict resolution
+ */
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: 'default' | 'elevated' | 'outlined';
-}
-declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Input Component
+ * Accessible text input with consistent styling
+ */
+
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    error?: string;
-    label?: string;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
-}
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-interface SpinnerProps {
-    size?: 'sm' | 'md' | 'lg';
+
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+
+/**
+ * Separator Component
+ * Visual divider via Radix
+ */
+
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Switch Component
+ * Accessible toggle switch via Radix
+ */
+
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Card Component
+ * Container for content with consistent styling
+ */
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): 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>>;
+
+interface GoogleOneTapProps {
+    clientId: string;
+    onSuccess?: (response: {
+        credential: string;
+    }) => void;
+    onError?: (error: Error) => void;
+    onDismiss?: () => void;
+    autoPrompt?: boolean;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
     className?: string;
 }
-declare function Spinner({ size, className }: SpinnerProps): react_jsx_runtime.JSX.Element;
-interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-    size?: 'sm' | 'md' | 'lg';
-    fallback?: string;
-}
-declare function Avatar({ size, fallback, src, alt, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+/**
+ * Manual One Tap UI (for when you want custom styling)
+ */
+declare function GoogleOneTapPrompt({ email, avatarUrl, onContinue, onDismiss, position, className, }: {
+    email: string;
+    avatarUrl?: string;
+    onContinue: () => void;
+    onDismiss: () => void;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
-export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Input, type InputProps, Spinner, type SpinnerProps, type Theme, ThemeProvider, type ThemeProviderProps, themes, useTheme };
+export { Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, GoogleOneTapPrompt as GoogleOneTap, GoogleOneTapPrompt, type GoogleOneTapProps, Input, type InputProps, Label, Separator, Switch, buttonVariants, cn };

package/dist/index.js

@@ -1,313 +1,314 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as React6 from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
 
-// src/index.tsx
-var index_exports = {};
-__export(index_exports, {
-  Avatar: () => Avatar,
-  Badge: () => Badge,
-  Button: () => Button,
-  Card: () => Card,
-  Input: () => Input,
-  Spinner: () => Spinner,
-  ThemeProvider: () => ThemeProvider,
-  themes: () => themes,
-  useTheme: () => useTheme
-});
-module.exports = __toCommonJS(index_exports);
-var React = __toESM(require("react"));
-var import_clsx = require("clsx");
-var import_jsx_runtime = require("react/jsx-runtime");
-var themes = {
-  yarlis: {
-    name: "yarlis",
-    colors: {
-      primary: "#316FA7",
-      secondary: "#7C3AED",
-      accent: "#06B6D4",
-      background: "#0F172A",
-      foreground: "#F8FAFC",
-      muted: "#64748B",
-      border: "#334155",
-      error: "#EF4444",
-      success: "#22C55E",
-      warning: "#F59E0B"
-    },
-    fonts: {
-      sans: "Inter, system-ui, sans-serif",
-      mono: "JetBrains Mono, monospace"
-    },
-    radii: {
-      sm: "0.25rem",
-      md: "0.5rem",
-      lg: "1rem",
-      full: "9999px"
-    }
-  },
-  light: {
-    name: "light",
-    colors: {
-      primary: "#2563EB",
-      secondary: "#7C3AED",
-      accent: "#06B6D4",
-      background: "#FFFFFF",
-      foreground: "#0F172A",
-      muted: "#64748B",
-      border: "#E2E8F0",
-      error: "#EF4444",
-      success: "#22C55E",
-      warning: "#F59E0B"
-    },
-    fonts: {
-      sans: "Inter, system-ui, sans-serif",
-      mono: "JetBrains Mono, monospace"
+// src/lib/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
     },
-    radii: {
-      sm: "0.25rem",
-      md: "0.5rem",
-      lg: "1rem",
-      full: "9999px"
+    defaultVariants: {
+      variant: "default",
+      size: "default"
     }
   }
-};
-var ThemeContext = React.createContext(themes.yarlis);
-function ThemeProvider({ theme = "yarlis", children }) {
-  const resolvedTheme = typeof theme === "string" ? themes[theme] : theme;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: resolvedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      style: {
-        "--color-primary": resolvedTheme.colors.primary,
-        "--color-secondary": resolvedTheme.colors.secondary,
-        "--color-accent": resolvedTheme.colors.accent,
-        "--color-background": resolvedTheme.colors.background,
-        "--color-foreground": resolvedTheme.colors.foreground,
-        "--color-muted": resolvedTheme.colors.muted,
-        "--color-border": resolvedTheme.colors.border,
-        "--color-error": resolvedTheme.colors.error,
-        "--color-success": resolvedTheme.colors.success,
-        "--color-warning": resolvedTheme.colors.warning,
-        "--font-sans": resolvedTheme.fonts.sans,
-        "--font-mono": resolvedTheme.fonts.mono,
-        "--radius-sm": resolvedTheme.radii.sm,
-        "--radius-md": resolvedTheme.radii.md,
-        "--radius-lg": resolvedTheme.radii.lg,
-        "--radius-full": resolvedTheme.radii.full
-      },
-      children
-    }
-  ) });
-}
-function useTheme() {
-  return React.useContext(ThemeContext);
-}
-var Button = React.forwardRef(
-  ({ variant = "primary", size = "md", loading, className, children, disabled, ...props }, ref) => {
-    const baseStyles = "inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none";
-    const variants = {
-      primary: "bg-[var(--color-primary)] text-white hover:opacity-90 focus:ring-[var(--color-primary)]",
-      secondary: "bg-[var(--color-secondary)] text-white hover:opacity-90 focus:ring-[var(--color-secondary)]",
-      outline: "border border-[var(--color-border)] bg-transparent hover:bg-[var(--color-muted)]/10",
-      ghost: "bg-transparent hover:bg-[var(--color-muted)]/10",
-      destructive: "bg-[var(--color-error)] text-white hover:opacity-90 focus:ring-[var(--color-error)]"
-    };
-    const sizes = {
-      sm: "h-8 px-3 text-sm rounded-[var(--radius-sm)]",
-      md: "h-10 px-4 text-base rounded-[var(--radius-md)]",
-      lg: "h-12 px-6 text-lg rounded-[var(--radius-md)]"
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "button",
+);
+var Button = React6.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
       {
+        className: cn(buttonVariants({ variant, size, className })),
         ref,
-        className: (0, import_clsx.clsx)(baseStyles, variants[variant], sizes[size], className),
-        disabled: disabled || loading,
-        ...props,
-        children: [
-          loading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", fill: "none", viewBox: "0 0 24 24", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
-          ] }),
-          children
-        ]
+        ...props
       }
     );
   }
 );
 Button.displayName = "Button";
-var Card = React.forwardRef(
-  ({ variant = "default", className, children, ...props }, ref) => {
-    const variants = {
-      default: "bg-[var(--color-background)] border border-[var(--color-border)]",
-      elevated: "bg-[var(--color-background)] shadow-lg",
-      outlined: "bg-transparent border-2 border-[var(--color-border)]"
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
+var Input = React6.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
       {
-        ref,
-        className: (0, import_clsx.clsx)(
-          "rounded-[var(--radius-lg)] p-6",
-          variants[variant],
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
-        ...props,
-        children
+        ref,
+        ...props
       }
     );
   }
 );
-Card.displayName = "Card";
-var Input = React.forwardRef(
-  ({ error, label, className, id, ...props }, ref) => {
-    const inputId = id || React.useId();
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: inputId, className: "text-sm font-medium text-[var(--color-foreground)]", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "input",
-        {
-          ref,
-          id: inputId,
-          className: (0, import_clsx.clsx)(
-            "h-10 px-3 rounded-[var(--radius-md)] border bg-[var(--color-background)] text-[var(--color-foreground)]",
-            "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]",
-            error ? "border-[var(--color-error)]" : "border-[var(--color-border)]",
-            className
-          ),
-          ...props
-        }
-      ),
-      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-[var(--color-error)]", children: error })
-    ] });
+Input.displayName = "Input";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
   }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+var Separator = React6.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
 );
-Input.displayName = "Input";
-var Badge = React.forwardRef(
-  ({ variant = "default", className, ...props }, ref) => {
-    const variants = {
-      default: "bg-[var(--color-muted)]/20 text-[var(--color-foreground)]",
-      primary: "bg-[var(--color-primary)]/20 text-[var(--color-primary)]",
-      success: "bg-[var(--color-success)]/20 text-[var(--color-success)]",
-      warning: "bg-[var(--color-warning)]/20 text-[var(--color-warning)]",
-      error: "bg-[var(--color-error)]/20 text-[var(--color-error)]"
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "span",
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+var Switch = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
       {
-        ref,
-        className: (0, import_clsx.clsx)(
-          "inline-flex items-center px-2 py-1 text-xs font-medium rounded-[var(--radius-full)]",
-          variants[variant],
-          className
-        ),
-        ...props
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
       }
-    );
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+var Card = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn("text-2xl font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.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 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
   }
 );
-Badge.displayName = "Badge";
-function Spinner({ size = "md", className }) {
-  const sizes = {
-    sm: "h-4 w-4",
-    md: "h-8 w-8",
-    lg: "h-12 w-12"
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+function GoogleOneTapPrompt({
+  email,
+  avatarUrl,
+  onContinue,
+  onDismiss,
+  position = "top-right",
+  className
+}) {
+  const positionClasses = {
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4",
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "svg",
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      className: (0, import_clsx.clsx)("animate-spin text-[var(--color-primary)]", sizes[size], className),
-      fill: "none",
-      viewBox: "0 0 24 24",
+      className: cn(
+        "fixed z-50 w-80 bg-background border rounded-lg shadow-2xl p-4 animate-in slide-in-from-right-5 fade-in-0",
+        positionClasses[position],
+        className
+      ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "circle",
+        /* @__PURE__ */ jsx(
+          "button",
           {
-            className: "opacity-25",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeWidth: "4"
+            onClick: onDismiss,
+            className: "absolute top-2 right-2 p-1 text-muted-foreground hover:text-foreground rounded-full hover:bg-accent transition-colors",
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", children: [
+            /* @__PURE__ */ jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }),
+            /* @__PURE__ */ jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
+            /* @__PURE__ */ jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }),
+            /* @__PURE__ */ jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Sign in with Google" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 bg-accent/50 rounded-lg mb-3", children: [
+          avatarUrl ? /* @__PURE__ */ jsx("img", { src: avatarUrl, alt: "", className: "w-10 h-10 rounded-full" }) : /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-medium", children: email.charAt(0).toUpperCase() }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-medium truncate", children: email }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
           {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            onClick: onContinue,
+            className: "w-full py-2.5 px-4 bg-primary text-primary-foreground rounded-md font-medium hover:bg-primary/90 transition-colors",
+            children: [
+              "Continue as ",
+              email.split("@")[0]
+            ]
           }
-        )
-      ]
-    }
-  );
-}
-function Avatar({ size = "md", fallback, src, alt, className, ...props }) {
-  const [error, setError] = React.useState(false);
-  const sizes = {
-    sm: "h-8 w-8 text-xs",
-    md: "h-10 w-10 text-sm",
-    lg: "h-16 w-16 text-lg"
-  };
-  if (error || !src) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: (0, import_clsx.clsx)(
-          "flex items-center justify-center rounded-[var(--radius-full)] bg-[var(--color-primary)] text-white font-medium",
-          sizes[size],
-          className
         ),
-        children: fallback || alt?.charAt(0).toUpperCase() || "?"
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "img",
-    {
-      src,
-      alt,
-      onError: () => setError(true),
-      className: (0, import_clsx.clsx)("rounded-[var(--radius-full)] object-cover", sizes[size], className),
-      ...props
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-3 leading-relaxed", children: "To create your account, Google will share your name, email address, and profile picture." })
+      ]
     }
   );
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Avatar,
-  Badge,
-  Button,
-  Card,
-  Input,
-  Spinner,
-  ThemeProvider,
-  themes,
-  useTheme
-});
+
+export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, GoogleOneTapPrompt as GoogleOneTap, GoogleOneTapPrompt, Input, Label, Separator, Switch, buttonVariants, cn };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts","../src/components/primitives/button.tsx","../src/components/primitives/input.tsx","../src/components/primitives/label.tsx","../src/components/primitives/separator.tsx","../src/components/primitives/switch.tsx","../src/components/primitives/card.tsx","../src/components/primitives/dialog.tsx","../src/components/patterns/google-one-tap.tsx"],"names":["React","React2","jsx","cva","React3","React4","React5","React7","jsxs","X"],"mappings":";;;;;;;;;;;;;AAOO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACAA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,mUAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,wDAAA;AAAA,QACT,WAAA,EAAa,oEAAA;AAAA,QACb,OAAA,EAAS,gFAAA;AAAA,QACT,SAAA,EAAW,8DAAA;AAAA,QACX,KAAA,EAAO,8CAAA;AAAA,QACP,IAAA,EAAM;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,gBAAA;AAAA,QACT,EAAA,EAAI,qBAAA;AAAA,QACJ,EAAA,EAAI,sBAAA;AAAA,QACJ,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAQA,IAAM,MAAA,GAAeA,MAAA,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,UAAU,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAChE,IAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,QAAA;AAC9B,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,QAC1D,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AC5CrB,IAAM,KAAA,GAAcC,MAAA,CAAA,UAAA;AAAA,EAClB,CAAC,EAAE,SAAA,EAAW,MAAM,GAAG,KAAA,IAAS,GAAA,KAAQ;AACtC,IAAA,uBACEC,GAAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,mXAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,KAAA,CAAM,WAAA,GAAc,OAAA;ACfpB,IAAM,aAAA,GAAgBC,GAAAA;AAAA,EACpB;AACF,CAAA;AAEA,IAAM,KAAA,GAAcC,kBAIlB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BF,GAAAA;AAAA,EAAgB,cAAA,CAAA,IAAA;AAAA,EAAf;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,aAAA,EAAc,EAAG,SAAS,CAAA;AAAA,IACvC,GAAG;AAAA;AACN,CACD;AACD,KAAA,CAAM,cAA6B,cAAA,CAAA,IAAA,CAAK,WAAA;AChBxC,IAAM,SAAA,GAAkBG,MAAA,CAAA,UAAA;AAAA,EAItB,CACE,EAAE,SAAA,EAAW,WAAA,GAAc,YAAA,EAAc,UAAA,GAAa,IAAA,EAAM,GAAG,KAAA,EAAM,EACrE,GAAA,qBAEAH,GAAAA;AAAA,IAAoB,kBAAA,CAAA,IAAA;AAAA,IAAnB;AAAA,MACC,GAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,oBAAA;AAAA,QACA,WAAA,KAAgB,eAAe,gBAAA,GAAmB,gBAAA;AAAA,QAClD;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AACA,SAAA,CAAU,cAAiC,kBAAA,CAAA,IAAA,CAAK,WAAA;ACrBhD,IAAM,MAAA,GAAeI,kBAGnB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BJ,GAAAA;AAAA,EAAkB,gBAAA,CAAA,IAAA;AAAA,EAAjB;AAAA,IACC,SAAA,EAAW,EAAA;AAAA,MACT,oXAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAA,kBAAAA,GAAAA;AAAA,MAAkB,gBAAA,CAAA,KAAA;AAAA,MAAjB;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT;AAAA;AACF;AAAA;AACF;AACF,CACD;AACD,MAAA,CAAO,cAA+B,gBAAA,CAAA,IAAA,CAAK,WAAA;ACpB3C,IAAM,IAAA,GAAa,kBAGjB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BA,GAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,IAAA,CAAK,WAAA,GAAc,MAAA;AAEnB,IAAM,UAAA,GAAmB,kBAGvB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BA,GAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AACD,UAAA,CAAW,WAAA,GAAc,YAAA;AAEzB,IAAM,SAAA,GAAkB,kBAGtB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BA,GAAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,oDAAA,EAAsD,SAAS,CAAA;AAAA,IAC5E,GAAG;AAAA;AACN,CACD;AACD,SAAA,CAAU,WAAA,GAAc,WAAA;AAExB,IAAM,eAAA,GAAwB,kBAG5B,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BA,GAAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AACD,eAAA,CAAgB,WAAA,GAAc,iBAAA;AAE9B,IAAM,WAAA,GAAoB,kBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1BA,IAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAW,EAAA,CAAG,UAAA,EAAY,SAAS,CAAA,EAAI,GAAG,OAAO,CACjE;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAE1B,IAAM,UAAA,GAAmB,kBAGvB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BA,GAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,4BAAA,EAA8B,SAAS,CAAA;AAAA,IACpD,GAAG;AAAA;AACN,CACD;AACD,UAAA,CAAW,WAAA,GAAc,YAAA;ACnEzB,IAAM,MAAA,GAAyB,eAAA,CAAA;AAC/B,IAAM,aAAA,GAAgC,eAAA,CAAA;AACtC,IAAM,YAAA,GAA+B,eAAA,CAAA;AACrC,IAAM,WAAA,GAA8B,eAAA,CAAA;AAEpC,IAAM,aAAA,GAAsBK,kBAG1B,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BL,GAAAA;AAAA,EAAiB,eAAA,CAAA,OAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,wJAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,aAAA,CAAc,cAA8B,eAAA,CAAA,OAAA,CAAQ,WAAA;AAEpD,IAAM,aAAA,GAAsBK,MAAA,CAAA,UAAA,CAG1B,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACpC,IAAA,CAAC,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,kBAAAL,IAAC,aAAA,EAAA,EAAc,CAAA;AAAA,kBACf,IAAA;AAAA,IAAiB,eAAA,CAAA,OAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,6fAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,IAAA,CAAiB,eAAA,CAAA,KAAA,EAAhB,EAAsB,SAAA,EAAU,+QAAA,EAC/B,QAAA,EAAA;AAAA,0BAAAA,GAAAA,CAAC,CAAA,EAAA,EAAE,SAAA,EAAU,SAAA,EAAU,CAAA;AAAA,0BACvBA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAU,QAAA,EAAA,OAAA,EAAK;AAAA,SAAA,EACjC;AAAA;AAAA;AAAA;AACF,CAAA,EACF,CACD;AACD,aAAA,CAAc,cAA8B,eAAA,CAAA,OAAA,CAAQ,WAAA;AAEpD,IAAM,eAAe,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACEA,GAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,SAAA,EAAW,EAAA,CAAG,oDAAA,EAAsD,SAAS,CAAA;AAAA,IAC5E,GAAG;AAAA;AACN;AAEF,YAAA,CAAa,WAAA,GAAc,cAAA;AAE3B,IAAM,eAAe,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACEA,GAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,SAAA,EAAW,EAAA,CAAG,+DAAA,EAAiE,SAAS,CAAA;AAAA,IACvF,GAAG;AAAA;AACN;AAEF,YAAA,CAAa,WAAA,GAAc,cAAA;AAE3B,IAAM,WAAA,GAAoBK,kBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BL,GAAAA;AAAA,EAAiB,eAAA,CAAA,KAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,IAC3E,GAAG;AAAA;AACN,CACD;AACD,WAAA,CAAY,cAA8B,eAAA,CAAA,KAAA,CAAM,WAAA;AAEhD,IAAM,iBAAA,GAA0BK,kBAG9B,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BL,GAAAA;AAAA,EAAiB,eAAA,CAAA,WAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AACD,iBAAA,CAAkB,cAA8B,eAAA,CAAA,WAAA,CAAY,WAAA;AC7ErD,SAAS,kBAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW,WAAA;AAAA,EACX;AACF,CAAA,EAOG;AACD,EAAA,MAAM,eAAA,GAAkB;AAAA,IACtB,WAAA,EAAa,eAAA;AAAA,IACb,UAAA,EAAY,cAAA;AAAA,IACZ,cAAA,EAAgB,kBAAA;AAAA,IAChB,aAAA,EAAe;AAAA,GACjB;AAEA,EAAA,uBACEM,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,2GAAA;AAAA,QACA,gBAAgB,QAAQ,CAAA;AAAA,QACxB;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAN,GAAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,SAAA;AAAA,YACT,SAAA,EAAU,uHAAA;AAAA,YACV,YAAA,EAAW,SAAA;AAAA,YAEX,QAAA,kBAAAA,GAAAA,CAACO,CAAAA,EAAA,EAAE,WAAU,SAAA,EAAU;AAAA;AAAA,SACzB;AAAA,wBAEAD,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EACb,QAAA,EAAA;AAAA,0BAAAA,IAAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAY,WAAU,SAAA,EACjC,QAAA,EAAA;AAAA,4BAAAN,GAAAA,CAAC,MAAA,EAAA,EAAK,IAAA,EAAK,SAAA,EAAU,GAAE,yHAAA,EAAyH,CAAA;AAAA,4BAChJA,GAAAA,CAAC,MAAA,EAAA,EAAK,IAAA,EAAK,SAAA,EAAU,GAAE,uIAAA,EAAuI,CAAA;AAAA,4BAC9JA,GAAAA,CAAC,MAAA,EAAA,EAAK,IAAA,EAAK,SAAA,EAAU,GAAE,+HAAA,EAA+H,CAAA;AAAA,4BACtJA,GAAAA,CAAC,MAAA,EAAA,EAAK,IAAA,EAAK,SAAA,EAAU,GAAE,qIAAA,EAAqI;AAAA,WAAA,EAC9J,CAAA;AAAA,0BACAA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iCAAgC,QAAA,EAAA,qBAAA,EAAmB;AAAA,SAAA,EACrE,CAAA;AAAA,wBAEAM,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0DAAA,EACZ,QAAA,EAAA;AAAA,UAAA,SAAA,mBACCN,IAAC,KAAA,EAAA,EAAI,GAAA,EAAK,WAAW,GAAA,EAAI,EAAA,EAAG,WAAU,wBAAA,EAAyB,CAAA,mBAE/DA,GAAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wGAAA,EACZ,QAAA,EAAA,KAAA,CAAM,OAAO,CAAC,CAAA,CAAE,aAAY,EAC/B,CAAA;AAAA,0BAEFA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,kBAAAA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAAgC,QAAA,EAAA,KAAA,EAAM,CAAA,EACvD;AAAA,SAAA,EACF,CAAA;AAAA,wBAEAM,IAAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,UAAA;AAAA,YACT,SAAA,EAAU,oHAAA;AAAA,YACX,QAAA,EAAA;AAAA,cAAA,cAAA;AAAA,cACc,KAAA,CAAM,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC;AAAA;AAAA;AAAA,SACjC;AAAA,wBAEAN,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,sDAAqD,QAAA,EAAA,0FAAA,EAElE;AAAA;AAAA;AAAA,GACF;AAEJ","file":"index.js","sourcesContent":["/**\n * cn() - Class Name utility\n * Combines clsx for conditional classes + tailwind-merge for conflict resolution\n */\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Button Component\n * Accessible button with variants via CVA\n */\nimport * as React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/cn';\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button';\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n","/**\n * Input Component\n * Accessible text input with consistent styling\n */\nimport * as React from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nInput.displayName = 'Input';\n\nexport { Input };\n","/**\n * Label Component\n * Accessible form label via Radix\n */\nimport * as React from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/cn';\n\nconst labelVariants = cva(\n  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n);\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n  />\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n","/**\n * Separator Component\n * Visual divider via Radix\n */\nimport * as React from 'react';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport { cn } from '../../lib/cn';\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = 'horizontal', decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        'shrink-0 bg-border',\n        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nSeparator.displayName = SeparatorPrimitive.Root.displayName;\n\nexport { Separator };\n","/**\n * Switch Component\n * Accessible toggle switch via Radix\n */\nimport * as React from 'react';\nimport * as SwitchPrimitives from '@radix-ui/react-switch';\nimport { cn } from '../../lib/cn';\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n      className\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'\n      )}\n    />\n  </SwitchPrimitives.Root>\n));\nSwitch.displayName = SwitchPrimitives.Root.displayName;\n\nexport { Switch };\n","/**\n * Card Component\n * Container for content with consistent styling\n */\nimport * as React from 'react';\nimport { cn } from '../../lib/cn';\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'rounded-lg border bg-card text-card-foreground shadow-sm',\n      className\n    )}\n    {...props}\n  />\n));\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col space-y-1.5 p-6', className)}\n    {...props}\n  />\n));\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn('text-2xl font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n));\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nCardDescription.displayName = 'CardDescription';\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />\n));\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center p-6 pt-0', className)}\n    {...props}\n  />\n));\nCardFooter.displayName = 'CardFooter';\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };\n","/**\n * Dialog Component\n * Accessible modal dialog via Radix\n */\nimport * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { X } from 'lucide-react';\nimport { cn } from '../../lib/cn';\n\nconst Dialog = DialogPrimitive.Root;\nconst DialogTrigger = DialogPrimitive.Trigger;\nconst DialogPortal = DialogPrimitive.Portal;\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.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 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}\n    {...props}\n  />\n);\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}\n    {...props}\n  />\n);\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n","/**\n * Google One Tap Pattern\n * Floating login prompt in corner (like Mailchimp)\n */\nimport { cn } from '../../lib/cn';\nimport { X } from 'lucide-react';\n\nexport interface GoogleOneTapProps {\n  clientId: string;\n  onSuccess?: (response: { credential: string }) => void;\n  onError?: (error: Error) => void;\n  onDismiss?: () => void;\n  autoPrompt?: boolean;\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n  className?: string;\n}\n\n/**\n * Manual One Tap UI (for when you want custom styling)\n */\nexport function GoogleOneTapPrompt({\n  email,\n  avatarUrl,\n  onContinue,\n  onDismiss,\n  position = 'top-right',\n  className,\n}: {\n  email: string;\n  avatarUrl?: string;\n  onContinue: () => void;\n  onDismiss: () => void;\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n  className?: string;\n}) {\n  const positionClasses = {\n    'top-right': 'top-4 right-4',\n    'top-left': 'top-4 left-4',\n    'bottom-right': 'bottom-4 right-4',\n    'bottom-left': 'bottom-4 left-4',\n  };\n\n  return (\n    <div\n      className={cn(\n        'fixed z-50 w-80 bg-background border rounded-lg shadow-2xl p-4 animate-in slide-in-from-right-5 fade-in-0',\n        positionClasses[position],\n        className\n      )}\n    >\n      <button\n        onClick={onDismiss}\n        className=\"absolute top-2 right-2 p-1 text-muted-foreground hover:text-foreground rounded-full hover:bg-accent transition-colors\"\n        aria-label=\"Dismiss\"\n      >\n        <X className=\"h-4 w-4\" />\n      </button>\n\n      <div className=\"flex items-center gap-2 mb-3\">\n        <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\">\n          <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"/>\n          <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"/>\n          <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"/>\n          <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"/>\n        </svg>\n        <span className=\"text-sm text-muted-foreground\">Sign in with Google</span>\n      </div>\n\n      <div className=\"flex items-center gap-3 p-3 bg-accent/50 rounded-lg mb-3\">\n        {avatarUrl ? (\n          <img src={avatarUrl} alt=\"\" className=\"w-10 h-10 rounded-full\" />\n        ) : (\n          <div className=\"w-10 h-10 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-medium\">\n            {email.charAt(0).toUpperCase()}\n          </div>\n        )}\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"text-sm font-medium truncate\">{email}</div>\n        </div>\n      </div>\n\n      <button\n        onClick={onContinue}\n        className=\"w-full py-2.5 px-4 bg-primary text-primary-foreground rounded-md font-medium hover:bg-primary/90 transition-colors\"\n      >\n        Continue as {email.split('@')[0]}\n      </button>\n\n      <p className=\"text-xs text-muted-foreground mt-3 leading-relaxed\">\n        To create your account, Google will share your name, email address, and profile picture.\n      </p>\n    </div>\n  );\n}\n\nexport { GoogleOneTapPrompt as GoogleOneTap };\n"]}

package/package.json

@@ -1,49 +1,59 @@
 {
   "name": "@sdods/ui",
-  "version": "0.1.0",
-  "description": "React component library with theming",
+  "version": "0.2.0",
+  "description": "Portable, accessible UI components built on Radix + Tailwind",
+  "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
+      "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles": "./src/styles/ui.css"
   },
-  "files": [
-    "dist"
-  ],
   "sideEffects": [
-    "**/*.css"
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "src/styles"
   ],
   "scripts": {
-    "build": "tsup src/index.tsx --format cjs,esm --dts --external react",
-    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch --external react",
-    "test": "vitest",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist"
-  },
-  "dependencies": {
-    "@sdods/core": "workspace:*",
-    "clsx": "^2.1.0"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.1.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.468.0",
+    "tailwind-merge": "^2.6.0"
+  },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.4.0",
-    "vitest": "^2.0.0"
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.7.0"
   },
-  "keywords": ["sdods", "ui", "react", "components", "design-system"],
+  "keywords": ["ui", "components", "react", "radix", "tailwind", "accessible"],
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/styles/ui.css

@@ -0,0 +1,44 @@
+/**
+ * @sdods/ui Base Styles
+ * Minimal CSS that complements Tailwind
+ * Token references from @sdods/themes
+ */
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
+
+@layer utilities {
+  /* Touch manipulation for mobile */
+  .touch-manipulation {
+    touch-action: manipulation;
+  }
+}
+
+/* Animations for dialogs/modals */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes slideIn {
+  from { transform: translate(-50%, -48%) scale(0.95); }
+  to { transform: translate(-50%, -50%) scale(1); }
+}
+
+@keyframes slideOut {
+  from { transform: translate(-50%, -50%) scale(1); }
+  to { transform: translate(-50%, -48%) scale(0.95); }
+}

package/dist/index.d.mts

@@ -1,66 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-interface Theme {
-    name: string;
-    colors: {
-        primary: string;
-        secondary: string;
-        accent: string;
-        background: string;
-        foreground: string;
-        muted: string;
-        border: string;
-        error: string;
-        success: string;
-        warning: string;
-    };
-    fonts: {
-        sans: string;
-        mono: string;
-    };
-    radii: {
-        sm: string;
-        md: string;
-        lg: string;
-        full: string;
-    };
-}
-declare const themes: Record<string, Theme>;
-interface ThemeProviderProps {
-    theme?: Theme | keyof typeof themes;
-    children: React.ReactNode;
-}
-declare function ThemeProvider({ theme, children }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-declare function useTheme(): Theme;
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
-    size?: 'sm' | 'md' | 'lg';
-    loading?: boolean;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: 'default' | 'elevated' | 'outlined';
-}
-declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    error?: string;
-    label?: string;
-}
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
-}
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-interface SpinnerProps {
-    size?: 'sm' | 'md' | 'lg';
-    className?: string;
-}
-declare function Spinner({ size, className }: SpinnerProps): react_jsx_runtime.JSX.Element;
-interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-    size?: 'sm' | 'md' | 'lg';
-    fallback?: string;
-}
-declare function Avatar({ size, fallback, src, alt, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
-
-export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Input, type InputProps, Spinner, type SpinnerProps, type Theme, ThemeProvider, type ThemeProviderProps, themes, useTheme };

package/dist/index.mjs

@@ -1,270 +0,0 @@
-// src/index.tsx
-import * as React from "react";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var themes = {
-  yarlis: {
-    name: "yarlis",
-    colors: {
-      primary: "#316FA7",
-      secondary: "#7C3AED",
-      accent: "#06B6D4",
-      background: "#0F172A",
-      foreground: "#F8FAFC",
-      muted: "#64748B",
-      border: "#334155",
-      error: "#EF4444",
-      success: "#22C55E",
-      warning: "#F59E0B"
-    },
-    fonts: {
-      sans: "Inter, system-ui, sans-serif",
-      mono: "JetBrains Mono, monospace"
-    },
-    radii: {
-      sm: "0.25rem",
-      md: "0.5rem",
-      lg: "1rem",
-      full: "9999px"
-    }
-  },
-  light: {
-    name: "light",
-    colors: {
-      primary: "#2563EB",
-      secondary: "#7C3AED",
-      accent: "#06B6D4",
-      background: "#FFFFFF",
-      foreground: "#0F172A",
-      muted: "#64748B",
-      border: "#E2E8F0",
-      error: "#EF4444",
-      success: "#22C55E",
-      warning: "#F59E0B"
-    },
-    fonts: {
-      sans: "Inter, system-ui, sans-serif",
-      mono: "JetBrains Mono, monospace"
-    },
-    radii: {
-      sm: "0.25rem",
-      md: "0.5rem",
-      lg: "1rem",
-      full: "9999px"
-    }
-  }
-};
-var ThemeContext = React.createContext(themes.yarlis);
-function ThemeProvider({ theme = "yarlis", children }) {
-  const resolvedTheme = typeof theme === "string" ? themes[theme] : theme;
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: resolvedTheme, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        "--color-primary": resolvedTheme.colors.primary,
-        "--color-secondary": resolvedTheme.colors.secondary,
-        "--color-accent": resolvedTheme.colors.accent,
-        "--color-background": resolvedTheme.colors.background,
-        "--color-foreground": resolvedTheme.colors.foreground,
-        "--color-muted": resolvedTheme.colors.muted,
-        "--color-border": resolvedTheme.colors.border,
-        "--color-error": resolvedTheme.colors.error,
-        "--color-success": resolvedTheme.colors.success,
-        "--color-warning": resolvedTheme.colors.warning,
-        "--font-sans": resolvedTheme.fonts.sans,
-        "--font-mono": resolvedTheme.fonts.mono,
-        "--radius-sm": resolvedTheme.radii.sm,
-        "--radius-md": resolvedTheme.radii.md,
-        "--radius-lg": resolvedTheme.radii.lg,
-        "--radius-full": resolvedTheme.radii.full
-      },
-      children
-    }
-  ) });
-}
-function useTheme() {
-  return React.useContext(ThemeContext);
-}
-var Button = React.forwardRef(
-  ({ variant = "primary", size = "md", loading, className, children, disabled, ...props }, ref) => {
-    const baseStyles = "inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none";
-    const variants = {
-      primary: "bg-[var(--color-primary)] text-white hover:opacity-90 focus:ring-[var(--color-primary)]",
-      secondary: "bg-[var(--color-secondary)] text-white hover:opacity-90 focus:ring-[var(--color-secondary)]",
-      outline: "border border-[var(--color-border)] bg-transparent hover:bg-[var(--color-muted)]/10",
-      ghost: "bg-transparent hover:bg-[var(--color-muted)]/10",
-      destructive: "bg-[var(--color-error)] text-white hover:opacity-90 focus:ring-[var(--color-error)]"
-    };
-    const sizes = {
-      sm: "h-8 px-3 text-sm rounded-[var(--radius-sm)]",
-      md: "h-10 px-4 text-base rounded-[var(--radius-md)]",
-      lg: "h-12 px-6 text-lg rounded-[var(--radius-md)]"
-    };
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref,
-        className: clsx(baseStyles, variants[variant], sizes[size], className),
-        disabled: disabled || loading,
-        ...props,
-        children: [
-          loading && /* @__PURE__ */ jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", fill: "none", viewBox: "0 0 24 24", children: [
-            /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-            /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
-          ] }),
-          children
-        ]
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var Card = React.forwardRef(
-  ({ variant = "default", className, children, ...props }, ref) => {
-    const variants = {
-      default: "bg-[var(--color-background)] border border-[var(--color-border)]",
-      elevated: "bg-[var(--color-background)] shadow-lg",
-      outlined: "bg-transparent border-2 border-[var(--color-border)]"
-    };
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: clsx(
-          "rounded-[var(--radius-lg)] p-6",
-          variants[variant],
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-Card.displayName = "Card";
-var Input = React.forwardRef(
-  ({ error, label, className, id, ...props }, ref) => {
-    const inputId = id || React.useId();
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-[var(--color-foreground)]", children: label }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          id: inputId,
-          className: clsx(
-            "h-10 px-3 rounded-[var(--radius-md)] border bg-[var(--color-background)] text-[var(--color-foreground)]",
-            "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]",
-            error ? "border-[var(--color-error)]" : "border-[var(--color-border)]",
-            className
-          ),
-          ...props
-        }
-      ),
-      error && /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--color-error)]", children: error })
-    ] });
-  }
-);
-Input.displayName = "Input";
-var Badge = React.forwardRef(
-  ({ variant = "default", className, ...props }, ref) => {
-    const variants = {
-      default: "bg-[var(--color-muted)]/20 text-[var(--color-foreground)]",
-      primary: "bg-[var(--color-primary)]/20 text-[var(--color-primary)]",
-      success: "bg-[var(--color-success)]/20 text-[var(--color-success)]",
-      warning: "bg-[var(--color-warning)]/20 text-[var(--color-warning)]",
-      error: "bg-[var(--color-error)]/20 text-[var(--color-error)]"
-    };
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ref,
-        className: clsx(
-          "inline-flex items-center px-2 py-1 text-xs font-medium rounded-[var(--radius-full)]",
-          variants[variant],
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-Badge.displayName = "Badge";
-function Spinner({ size = "md", className }) {
-  const sizes = {
-    sm: "h-4 w-4",
-    md: "h-8 w-8",
-    lg: "h-12 w-12"
-  };
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: clsx("animate-spin text-[var(--color-primary)]", sizes[size], className),
-      fill: "none",
-      viewBox: "0 0 24 24",
-      children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            className: "opacity-25",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeWidth: "4"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          }
-        )
-      ]
-    }
-  );
-}
-function Avatar({ size = "md", fallback, src, alt, className, ...props }) {
-  const [error, setError] = React.useState(false);
-  const sizes = {
-    sm: "h-8 w-8 text-xs",
-    md: "h-10 w-10 text-sm",
-    lg: "h-16 w-16 text-lg"
-  };
-  if (error || !src) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(
-          "flex items-center justify-center rounded-[var(--radius-full)] bg-[var(--color-primary)] text-white font-medium",
-          sizes[size],
-          className
-        ),
-        children: fallback || alt?.charAt(0).toUpperCase() || "?"
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src,
-      alt,
-      onError: () => setError(true),
-      className: clsx("rounded-[var(--radius-full)] object-cover", sizes[size], className),
-      ...props
-    }
-  );
-}
-export {
-  Avatar,
-  Badge,
-  Button,
-  Card,
-  Input,
-  Spinner,
-  ThemeProvider,
-  themes,
-  useTheme
-};