@hexdspace/react 0.0.26 → 0.1.0

package/dist/css/component.css

@@ -72,7 +72,7 @@
 @layer components {
     .card {
         background: var(--surface-2);
-        border: 1px solid color-mix(in oklab, var(--border), transparent 45%);
+        border: 1px solid color-mix(in oklab, var(--border), transparent 80%);
         border-radius: var(--radius-card);
         box-shadow: var(--shadow-elevated);
     }
@@ -115,32 +115,60 @@
 
 @layer utilities {
     .brand-gradient {
-        background: linear-gradient(90deg, var(--accent-strong) 0%, var(--accent) 30%);
+        background: linear-gradient(90deg, var(--brand-strong) 0%, var(--brand) 30%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
     }
 
     .btn {
-        @apply state-layer inline-flex items-center justify-center gap-2 px-3.5 py-2.5
-        text-sm font-medium select-none cursor-pointer
-        transition-[background,color,box-shadow,transform] duration-150;
+        @apply  inline-flex items-center justify-center gap-2 leading-none
+        state-layer text-sm font-medium select-none cursor-pointer;
         position: relative;
         border-radius: var(--radius-btn);
         box-shadow: var(--shadow-10);
+        transition-property: background-color, color, box-shadow, transform;
+        transition-duration: 150ms;
+        transition-timing-function: ease;
+    }
+
+    .btn.shadow-none {
+        box-shadow: none;
     }
 
     .btn:disabled, .btn.disabled {
         opacity: 0.5;
         pointer-events: none;
+        cursor: not-allowed;
     }
 
     .btn-primary {
-        background: var(--accent);
+        background: var(--brand);
         color: var(--text-inverted);
     }
 
     .btn-secondary {
         border: 1px solid var(--border);
+        background: var(--surface-2);
+    }
+
+    .btn-success {
+        background: var(--success);
+        color: var(--on-success);
+    }
+
+    .btn-info {
+        background: var(--info);
+        color: var(--on-info);
+    }
+
+    .btn-warning {
+        background: var(--warning);
+        color: var(--on-warning);
+    }
+
+    .btn-danger {
+        background: var(--danger);
+        color: var(--on-danger);
     }
 
     :root .prose code {

package/dist/css/semantic.css

@@ -4,8 +4,8 @@
 :root {
     /* Surfaces */
     --bg: var(--ink-10);
-    --surface-1: color-mix(in oklab, var(--ink-10), black 12%);
-    --surface-2: color-mix(in oklab, var(--ink-10), black 8%);
+    --surface-1: color-mix(in oklab, var(--ink-10), black 8%);
+    --surface-2: color-mix(in oklab, var(--ink-10), black 6%);
     --surface-3: color-mix(in oklab, var(--ink-10), black 4%);
 
     /* Typography */

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { QueryClient, QueryKey } from '@tanstack/react-query';
 import { ResultOk, ResultError, AsyncResult, Result } from '@hexdspace/util';
-import * as react from 'react';
-import react__default, { CSSProperties, Dispatch, ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { CSSProperties, Dispatch, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 
 type NotificationVariant = 'success' | 'warning' | 'error' | 'info';
 declare const DEFAULT_NOTIFICATION_CHANNEL = "app.notifications";
@@ -120,7 +122,7 @@ type NotificationHostProps = {
     isDark?: () => boolean;
     theme?: ToastTheme;
 };
-declare const NotificationHost: react__default.FC<NotificationHostProps>;
+declare const NotificationHost: React__default.FC<NotificationHostProps>;
 
 type InstructionContext = {
     queryClient: QueryClient;
@@ -255,7 +257,7 @@ interface LogoutUser {
 }
 
 interface RegisterUser {
-    execute(email: string, password: string): AsyncResult<Error, GenericResponse>;
+    execute(email: string, password: string, attributes?: Record<string, string>): AsyncResult<Error, GenericResponse>;
 }
 
 interface GetAuthenticatedUser {
@@ -265,7 +267,7 @@ interface GetAuthenticatedUser {
 interface AuthProvider$1 {
     getAuthenticatedUser(): AsyncResult<Error, User | null>;
     login(email: string, password: string): AsyncResult<Error, User>;
-    register(email: string, password: string): AsyncResult<Error, GenericResponse>;
+    register(email: string, password: string, attributes?: Record<string, string>): AsyncResult<Error, GenericResponse>;
     logout(): AsyncResult<Error, null>;
 }
 
@@ -277,7 +279,7 @@ declare class AuthController {
     constructor(loginUser: LoginUser, logoutUser: LogoutUser, registerUser: RegisterUser, getAuthenticatedUser: GetAuthenticatedUser);
     login(email: string, password: string): AsyncResult<Error, User>;
     logout(): AsyncResult<Error, null>;
-    register(email: string, password: string): AsyncResult<Error, {
+    register(email: string, password: string, attributes?: Record<string, string>): AsyncResult<Error, {
         message: string;
     }>;
     getCurrentUser(): AsyncResult<Error, User | null>;
@@ -311,7 +313,7 @@ declare function useAuth(): AuthState;
 declare function useAuthActions(): {
     login: (email: string, password: string) => Promise<Result<Error, User>>;
     logout: () => void;
-    register: (email: string, password: string) => Promise<Result<Error, {
+    register: (email: string, password: string, attributes?: Record<string, string>) => Promise<Result<Error, {
         message: string;
     }>>;
 };
@@ -337,13 +339,13 @@ type AuthAction = {
 
 declare function useAuthDispatch(): Dispatch<AuthAction>;
 
-declare const AuthStateCtx: react.Context<AuthState | null>;
-declare const AuthDispatchCtx: react.Context<Dispatch<AuthAction> | null>;
+declare const AuthStateCtx: React.Context<AuthState | null>;
+declare const AuthDispatchCtx: React.Context<Dispatch<AuthAction> | null>;
 declare function AuthProvider({ children }: {
     readonly children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-declare const AuthControllerCtx: react.Context<AuthController | null>;
+declare const AuthControllerCtx: React.Context<AuthController | null>;
 type AuthControllerProviderProps = {
     readonly children: ReactNode;
     readonly controller: AuthController;
@@ -355,11 +357,11 @@ interface InputProps {
     label: string;
     type: string;
     value: string;
-    onChange: (e: react__default.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
     placeholder: string;
     className?: string;
 }
-declare const AuthFormInputField: react__default.FC<InputProps>;
+declare const AuthFormInputField: React__default.FC<InputProps>;
 
 type RequireAuthProps = {
     guarded?: ReactNode;
@@ -397,4 +399,19 @@ declare class MockAuthHttpClient extends MockHttpClient {
     private registerAuthRoutes;
 }
 
-export { AuthController, AuthControllerCtx, type AuthControllerDeps, AuthControllerProvider, AuthDispatchCtx, AuthFormInputField, AuthProvider, type AuthState, AuthStateCtx, type CacheInstruction, type CustomInstruction, DEFAULT_NOTIFICATION_CHANNEL, type ErrorResponse, type GenericResponse, type HttpClient, HttpError, type HttpMethod, type HttpResponse, type Instruction, type InstructionContext, MockAuthHttpClient, MockHttpClient, type MutationFn, type Notification, type NotificationAction, NotificationHost, type NotificationInstruction, type NotificationVariant, NotifierController, type OnSuccessFn, type OptimisticSnapshot, type OptimisticUpdateFn, RedirectIfAuthed, type RedirectIfAuthedProps, type RequestConfig, RequireAuth, type RequireAuthProps, type ResolvedToastTheme, type ResponsiveMutation, type ToastActionTheme, type ToastTheme, type ToastTransition, type ToastifyCSSVars, type UIFail, type UIOk, type UIResult, type User, authController, controllerFactory, createAuthController, httpClient as fetchHttpClient, notifierController, resolveToastTheme, ui, useAuth, useAuthActions, useAuthController, useAuthDispatch, useAuthedUser, useResponsiveMutation };
+declare const buttonVariants: (props?: ({
+    variant?: "success" | "warning" | "info" | "link" | "primary" | "secondary" | "outline" | "ghost" | "danger" | null | undefined;
+    size?: "icon" | "sm" | "md" | "lg" | null | undefined;
+    chrome?: "push" | "flat" | "inset" | "soft" | "glass" | "glow" | "hairline" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    loading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { AuthController, AuthControllerCtx, type AuthControllerDeps, AuthControllerProvider, AuthDispatchCtx, AuthFormInputField, AuthProvider, type AuthState, AuthStateCtx, Button, type ButtonProps, type CacheInstruction, type CustomInstruction, DEFAULT_NOTIFICATION_CHANNEL, type ErrorResponse, type GenericResponse, type HttpClient, HttpError, type HttpMethod, type HttpResponse, type Instruction, type InstructionContext, MockAuthHttpClient, MockHttpClient, type MutationFn, type Notification, type NotificationAction, NotificationHost, type NotificationInstruction, type NotificationVariant, NotifierController, type OnSuccessFn, type OptimisticSnapshot, type OptimisticUpdateFn, RedirectIfAuthed, type RedirectIfAuthedProps, type RequestConfig, RequireAuth, type RequireAuthProps, type ResolvedToastTheme, type ResponsiveMutation, type ToastActionTheme, type ToastTheme, type ToastTransition, type ToastifyCSSVars, type UIFail, type UIOk, type UIResult, type User, authController, controllerFactory, createAuthController, httpClient as fetchHttpClient, notifierController, resolveToastTheme, ui, useAuth, useAuthActions, useAuthController, useAuthDispatch, useAuthedUser, useResponsiveMutation };

package/dist/index.js

@@ -638,9 +638,12 @@ var HttpCookieAuthProvider = class {
       }
     }
   }
-  async register(email, password) {
+  async register(email, password, attributes) {
     try {
-      const res = await this.httpClient.post("/auth/register", { email, password });
+      const res = await this.httpClient.post(
+        "/auth/register",
+        { email, password, ...attributes ?? {} }
+      );
       return ok2(res.data);
     } catch (err) {
       if (err instanceof Error) {
@@ -692,8 +695,8 @@ var RegisterUserUseCase = class {
   constructor(authProvider) {
     this.authProvider = authProvider;
   }
-  execute(email, password) {
-    return this.authProvider.register(email, password);
+  execute(email, password, attributes) {
+    return this.authProvider.register(email, password, attributes);
   }
 };
 
@@ -721,8 +724,8 @@ var AuthController = class {
   async logout() {
     return this.logoutUser.execute();
   }
-  async register(email, password) {
-    return this.registerUser.execute(email, password);
+  async register(email, password, attributes) {
+    return this.registerUser.execute(email, password, attributes);
   }
   async getCurrentUser() {
     return this.getAuthenticatedUser.execute();
@@ -856,9 +859,9 @@ function useAuthActions() {
   const logout = useCallback2(() => {
     authController2.logout().then(() => dispatch({ type: "LOGOUT" }));
   }, [dispatch, authController2]);
-  const register = useCallback2(async (email, password) => {
+  const register = useCallback2(async (email, password, attributes) => {
     dispatch({ type: "REQUEST" });
-    const res = await authController2.register(email, password);
+    const res = await authController2.register(email, password, attributes);
     dispatchRegisterResult(res, dispatch);
     return res;
   }, [dispatch, authController2]);
@@ -1047,6 +1050,215 @@ var MockAuthHttpClient = class extends MockHttpClient {
     });
   }
 };
+
+// src/ui/components/Button.tsx
+import * as React3 from "react";
+import { Slot } from "radix-ui";
+import { cva } from "class-variance-authority";
+
+// src/ui/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/components/Button.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var pushChrome = cn(
+  "!border-b-[4px]",
+  "!transition-all",
+  "!duration-100",
+  "ease-out",
+  "!shadow-[0_2px_4px_rgba(0,0,0,0.28),0_8px_16px_rgba(0,0,0,0.14)]",
+  "hover:!shadow-[0_3px_6px_rgba(0,0,0,0.30),0_12px_22px_rgba(0,0,0,0.18)]",
+  "hover:-translate-y-[2px]",
+  "active:translate-y-[1px]"
+);
+var softChrome = cn(
+  "border",
+  "!border-[color:color-mix(in_oklab,var(--border),transparent_20%)]",
+  "!shadow-[0_1px_0_rgba(255,255,255,0.65)_inset,0_3px_8px_rgba(0,0,0,0.14)]"
+);
+var insetChrome = cn(
+  "border",
+  "!border-[color:color-mix(in_oklab,var(--border),transparent_35%)]",
+  "!shadow-[inset_0_2px_6px_rgba(0,0,0,0.18)]"
+);
+var glassChrome = cn(
+  "!backdrop-blur-[6px]",
+  "!border",
+  "!shadow-[0_8px_18px_rgba(0,0,0,0.12)]"
+);
+var glowChrome = cn(
+  "!border",
+  "!shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_40%),0_6px_16px_color-mix(in_oklab,var(--border),transparent_70%)]",
+  "hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_25%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]"
+);
+var hairlineChrome = cn(
+  "!border",
+  "!border-[color:color-mix(in_oklab,var(--border),transparent_60%)]",
+  "!bg-transparent",
+  "!font-thin",
+  "!shadow-none"
+);
+var buttonVariants = cva("btn", {
+  variants: {
+    variant: {
+      primary: "btn-primary",
+      secondary: "btn-secondary text-[var(--text-1)]",
+      outline: "bg-transparent text-[var(--text-1)] border border-[var(--border)] shadow-none",
+      ghost: "bg-transparent text-[var(--text-1)] shadow-none",
+      success: "btn-success",
+      info: "btn-info",
+      warning: "btn-warning",
+      danger: "btn-danger",
+      link: "bg-transparent p-0 h-auto shadow-none text-[var(--link)] hover:underline hover:text-[var(--link-hover)]"
+    },
+    size: {
+      sm: "px-3 py-1.5",
+      md: "px-3.5 py-2.5 !text-base",
+      lg: "px-4.5 py-3 !text-base",
+      icon: "h-10 w-10 p-0"
+    },
+    chrome: {
+      flat: "",
+      push: pushChrome,
+      soft: softChrome,
+      inset: insetChrome,
+      glass: glassChrome,
+      glow: glowChrome,
+      hairline: hairlineChrome
+    },
+    fullWidth: { true: "w-full", false: "" }
+  },
+  compoundVariants: [
+    { variant: "ghost", className: "!border-0" },
+    { variant: "link", className: "!border-0" },
+    { chrome: "soft", className: "!text-[var(--text-1)]" },
+    { chrome: "glass", className: "!text-[var(--text-1)]" },
+    { chrome: "push", variant: "primary", className: "border-b-[color:var(--brand-90)]" },
+    { chrome: "push", variant: "secondary", className: "border-b-[color:color-mix(in oklab, var(--border), transparent 50%)]" },
+    { chrome: "push", variant: "outline", className: "border-b-[color:color-mix(in oklab, var(--border), transparent 50%)]" },
+    { chrome: "push", variant: "ghost", className: "border-b-transparent !shadow-none" },
+    { chrome: "push", variant: "success", className: "border-b-[color:var(--success-80)]" },
+    { chrome: "push", variant: "info", className: "border-b-[color:var(--info-80)]" },
+    { chrome: "push", variant: "warning", className: "border-b-[color:var(--warning-80)]" },
+    { chrome: "push", variant: "danger", className: "border-b-[color:var(--danger-80)]" },
+    { chrome: "push", variant: "link", className: "border-b-0 !shadow-none" },
+    { chrome: "soft", variant: "primary", className: cn("!bg-[color:color-mix(in_oklab,var(--brand),transparent_70%)]", "!border-[color:color-mix(in_oklab,var(--brand),transparent_55%)]", "!shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--brand),transparent_70%)]") },
+    { chrome: "soft", variant: "secondary", className: cn("!bg-[color:color-mix(in_oklab,var(--surface-2),transparent_25%)]", "!border-[color:color-mix(in_oklab,var(--border),transparent_15%)]", "!shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--border),transparent_70%)]") },
+    { chrome: "soft", variant: "outline", className: cn("!border-[color:color-mix(in_oklab,var(--border),transparent_15%)]", "!shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--border),transparent_70%)]") },
+    { chrome: "soft", variant: "ghost", className: "!shadow-[0_3px_8px_color-mix(in_oklab,var(--border),transparent_75%)]" },
+    { chrome: "soft", variant: "success", className: cn("!bg-[color:color-mix(in_oklab,var(--success),transparent_70%)]", "!border-[color:color-mix(in_oklab,var(--success),transparent_55%)]", "!shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--success),transparent_70%)]") },
+    { chrome: "soft", variant: "info", className: cn("!bg-[color:color-mix(in_oklab,var(--info),transparent_70%)]", "!border-[color:color-mix(in_oklab,var(--info),transparent_55%)]", "!shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--info),transparent_70%)]") },
+    { chrome: "soft", variant: "warning", className: cn("!bg-[color:color-mix(in_oklab,var(--warning),transparent_70%)]", "!border-[color:color-mix(in_oklab,var(--warning),transparent_55%)]", "!shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--warning),transparent_70%)]") },
+    { chrome: "soft", variant: "danger", className: cn("!bg-[color:color-mix(in_oklab,var(--danger),transparent_70%)]", "!border-[color:color-mix(in_oklab,var(--danger),transparent_55%)]", "!shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--danger),transparent_70%)]") },
+    { chrome: "soft", variant: "link", className: cn("!text-[var(--link)]", "!shadow-[0_3px_8px_color-mix(in_oklab,var(--link),transparent_75%)]") },
+    { chrome: "glass", variant: "primary", className: cn("!bg-[color:color-mix(in_oklab,var(--brand),transparent_65%)]", "!border-[var(--brand)]") },
+    { chrome: "glass", variant: "secondary", className: cn("!bg-[color:color-mix(in_oklab,var(--surface-2),transparent_35%)]", "!border-[color:color-mix(in_oklab,var(--border),transparent_70%)]") },
+    { chrome: "glass", variant: "outline", className: "" },
+    { chrome: "glass", variant: "ghost", className: "" },
+    { chrome: "glass", variant: "success", className: cn("!bg-[color:color-mix(in_oklab,var(--success),transparent_65%)]", "!border-[var(--success)]") },
+    { chrome: "glass", variant: "info", className: cn("!bg-[color:color-mix(in_oklab,var(--info),transparent_65%)]", "!border-[var(--info)]") },
+    { chrome: "glass", variant: "warning", className: cn("!bg-[color:color-mix(in_oklab,var(--warning),transparent_65%)]", "!border-[var(--warning)]") },
+    { chrome: "glass", variant: "danger", className: cn("!bg-[color:color-mix(in_oklab,var(--danger),transparent_65%)]", "!border-[var(--danger)]") },
+    { chrome: "glass", variant: "link", className: "!text-[var(--link)]" },
+    { chrome: "glow", variant: "primary", className: cn("!border-[var(--brand)]", "!shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--brand),transparent_55%)]", "hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--brand),transparent_40%)]", "dark:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--brand),transparent_70%)]", "dark:hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--brand),transparent_55%)]") },
+    { chrome: "glow", variant: "secondary", className: cn("!border-[color:color-mix(in_oklab,var(--border),transparent_20%)]", "!shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]", "hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_15%),0_14px_34px_color-mix(in_oklab,var(--border),transparent_45%)]", "dark:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--border),transparent_75%)]", "dark:hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_12px_30px_color-mix(in_oklab,var(--border),transparent_60%)]") },
+    { chrome: "glow", variant: "outline", className: cn("!border-[color:color-mix(in_oklab,var(--border),transparent_20%)]", "!shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]", "hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_15%),0_14px_34px_color-mix(in_oklab,var(--border),transparent_45%)]", "dark:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--border),transparent_75%)]", "dark:hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_12px_30px_color-mix(in_oklab,var(--border),transparent_60%)]") },
+    { chrome: "glow", variant: "ghost", className: "!shadow-none !border-transparent" },
+    { chrome: "glow", variant: "success", className: cn("!border-[var(--success)]", "!shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--success),transparent_55%)]", "hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--success),transparent_40%)]", "dark:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--success),transparent_70%)]", "dark:hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--success),transparent_55%)]") },
+    { chrome: "glow", variant: "info", className: cn("!border-[var(--info)]", "!shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--info),transparent_55%)]", "hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--info),transparent_40%)]", "dark:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--info),transparent_70%)]", "dark:hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--info),transparent_55%)]") },
+    { chrome: "glow", variant: "warning", className: cn("!border-[var(--warning)]", "!shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--warning),transparent_55%)]", "hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--warning),transparent_40%)]", "dark:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--warning),transparent_70%)]", "dark:hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--warning),transparent_55%)]") },
+    { chrome: "glow", variant: "danger", className: cn("!border-[var(--danger)]", "!shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--danger),transparent_55%)]", "hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--danger),transparent_40%)]", "dark:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--danger),transparent_70%)]", "dark:hover:!shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--danger),transparent_55%)]") },
+    { chrome: "glow", variant: "link", className: "!text-[var(--link)] !shadow-none !border-transparent" },
+    { chrome: "hairline", variant: "primary", className: "!border-[color:color-mix(in_oklab,var(--brand),transparent_20%)] !text-[var(--brand)]" },
+    { chrome: "hairline", variant: "secondary", className: "!border-[color:color-mix(in_oklab,var(--border),transparent_20%)] !text-[var(--text-1)]" },
+    { chrome: "hairline", variant: "outline", className: "!border-[color:color-mix(in_oklab,var(--border),transparent_20%)] !text-[var(--text-1)]" },
+    { chrome: "hairline", variant: "ghost", className: "!border-transparent !text-[var(--text-1)]" },
+    { chrome: "hairline", variant: "success", className: "!border-[color:color-mix(in_oklab,var(--success),transparent_20%)] !text-[var(--success)]" },
+    { chrome: "hairline", variant: "info", className: "!border-[color:color-mix(in_oklab,var(--info),transparent_20%)] !text-[var(--info)]" },
+    { chrome: "hairline", variant: "warning", className: "!border-[color:color-mix(in_oklab,var(--warning),transparent_20%)] !text-[var(--warning)]" },
+    { chrome: "hairline", variant: "danger", className: "!border-[color:color-mix(in_oklab,var(--danger),transparent_20%)] !text-[var(--danger)]" },
+    { chrome: "hairline", variant: "link", className: "!text-[var(--link)] !border-transparent" }
+  ],
+  defaultVariants: { variant: "primary", size: "md", chrome: "flat", fullWidth: false }
+});
+var Button = React3.forwardRef(
+  ({
+    asChild = false,
+    variant,
+    size,
+    chrome,
+    fullWidth,
+    className,
+    loading = false,
+    disabled,
+    leftIcon,
+    rightIcon,
+    children,
+    onClick,
+    type,
+    ...props
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    const classes = cn(buttonVariants({ variant, size, chrome, fullWidth }), className);
+    const hasText = React3.Children.count(children) > 0;
+    const content = /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      loading ? /* @__PURE__ */ jsx7(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: [
+            "inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent",
+            hasText ? "mr-2" : ""
+          ].join(" ")
+        }
+      ) : leftIcon,
+      hasText ? /* @__PURE__ */ jsx7("span", { children }) : null,
+      hasText ? rightIcon : null
+    ] });
+    if (asChild) {
+      return /* @__PURE__ */ jsx7(
+        Slot.Root,
+        {
+          ref,
+          className: classes,
+          "aria-disabled": isDisabled || void 0,
+          "aria-busy": loading || void 0,
+          "data-loading": loading ? "" : void 0,
+          tabIndex: isDisabled ? -1 : void 0,
+          onClick: (e) => {
+            if (isDisabled) {
+              e.preventDefault?.();
+              e.stopPropagation?.();
+              return;
+            }
+            onClick?.(e);
+          },
+          ...props,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx7(
+      "button",
+      {
+        ref,
+        type: type ?? "button",
+        className: classes,
+        disabled: isDisabled,
+        "aria-busy": loading || void 0,
+        "data-loading": loading ? "" : void 0,
+        onClick,
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 export {
   AuthController,
   AuthControllerCtx,
@@ -1055,6 +1267,7 @@ export {
   AuthFormInputField,
   AuthProvider,
   AuthStateCtx,
+  Button,
   DEFAULT_NOTIFICATION_CHANNEL,
   HttpError,
   MockAuthHttpClient,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.0.26",
+  "version": "0.1.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,29 +27,53 @@
     "access": "public"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.90.11",
-    "lucide-react": "^0.555.0",
-    "react-router-dom": "^7.10.1",
-    "react-toastify": "^11.0.5",
-    "tailwind-scrollbar": "^4.0.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0",
     "uuid": "^13.0.0",
     "@hexdspace/util": "0.0.25"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.90.11",
-    "react": "^19.2.0"
+    "lucide-react": "^0.555.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-router-dom": "^7.10.1",
+    "react-toastify": "^11.0.5"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-onboarding": "^10.1.10",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
+    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-query": "^5.90.11",
     "@types/react": "^19.2.7",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.22",
+    "lucide-react": "^0.555.0",
+    "playwright": "^1.57.0",
     "postcss": "^8.5.6",
-    "react": "^19.2.0",
-    "tailwindcss": "^4.1.17"
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-router-dom": "^7.10.1",
+    "react-toastify": "^11.0.5",
+    "storybook": "^10.1.10",
+    "tailwind-scrollbar": "^4.0.2",
+    "tailwindcss": "^4.1.17",
+    "vite": "^7.2.4"
   },
   "scripts": {
     "build": "tsup src/index.ts --dts --format esm --clean && pnpm run build:css",
-    "build:css": "mkdir -p dist/css && cp -R src/feature/theme/css/* dist/css/",
-    "test": "vitest"
+    "build:css": "mkdir -p dist/css && cp -R src/ui/theme/css/* dist/css/ && tailwindcss -i src/ui/theme/css/base-theme.css -o dist/css/base-theme.css --config tailwind.config.mjs",
+    "test": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }