@hexdspace/react 0.1.7 → 0.1.8

package/dist/css/base-theme.css

@@ -95,11 +95,6 @@
     --color-warning: var(--warning);
     --color-danger: var(--danger);
 
-    --color-info-soft: var(--info-soft);
-    --color-success-soft: var(--success-soft);
-    --color-warning-soft: var(--warning-soft);
-    --color-danger-soft: var(--danger-soft);
-
     --color-on-info: var(--on-info);
     --color-on-success: var(--on-success);
     --color-on-warning: var(--on-warning);

package/dist/css/entry.css

@@ -1,2 +1,3 @@
 @import "./base-theme.css";
 @import "tailwindcss";
+@config "../../../../tailwind.config.mjs";

package/dist/css/primitive.css

@@ -19,6 +19,11 @@
     --shape-radius-50: 1.5rem; /* 24px */
     --shape-radius-pill: 999px;
 
+    /* Motion */
+    --motion-fast: 0.1s;
+    --motion-med: 0.16s;
+    --motion-slow: 0.24s;
+
     /* Neutral ramp */
     --ink-10: oklch(0.92 0.043 258);
     --ink-20: oklch(0.84 0.043 258);
@@ -34,15 +39,15 @@
     /* Accent */
     /* Accent (cool mint green) */
     --accent-10:  oklch(0.93  0.028 160);
-    --accent-20:  oklch(0.90  0.038 160);
-    --accent-30:  oklch(0.87  0.052 160);
-    --accent-40:  oklch(0.84  0.068 160);
-    --accent-50:  oklch(0.80  0.085 160);
-    --accent-60:  oklch(0.74  0.105 160);
-    --accent-70:  oklch(0.66  0.125 160);
-    --accent-80:  oklch(0.58  0.135 160);
-    --accent-90:  oklch(0.50  0.125 160);
-    --accent-100: oklch(0.42  0.105 160);
+    --accent-20:  oklch(0.87  0.052 160);
+    --accent-30:  oklch(0.84  0.068 160);
+    --accent-40:  oklch(0.80  0.085 160);
+    --accent-50:  oklch(0.74  0.105 160);
+    --accent-60:  oklch(0.66  0.125 160);
+    --accent-70:  oklch(0.58  0.135 160);
+    --accent-80:  oklch(0.48  0.125 160);
+    --accent-90: oklch(0.42  0.105 160);
+    --accent-100: oklch(0.36  0.105 160);
 
     /* Brand ramp */
     --brand-10:  oklch(0.97 0.020 250);

package/dist/css/semantic.css

@@ -19,14 +19,16 @@
     --divider: color-mix(in oklab, var(--border), transparent 55%);
 
     /* Brand + accent roles */
-    --brand: var(--brand-70);
-    --brand-strong: var(--brand-90);
+    --brand: var(--brand-60);
+    --brand-strong: var(--brand-80);
+    --brand-contrast: var(--brand-90);
 
-    --accent: var(--accent-70);
-    --accent-strong: var(--accent-80);
+    --accent: var(--accent-50);
+    --accent-strong: var(--accent-70);
+    --accent-contrast: var(--accent-80);
 
     /* UI roles */
-    --link: var(--accent);
+    --link: var(--accent-contrast);
     --link-hover: color-mix(in oklab, var(--link), white 14%);
     --focus: var(--brand);
     --focus-ring: 0 0 0 3px color-mix(in oklab, var(--focus), transparent 60%);
@@ -37,10 +39,10 @@
     --warning: var(--warning-60);
     --danger: var(--danger-60);
 
-    --info-soft: color-mix(in oklab, var(--info), var(--bg) 85%);
-    --success-soft: color-mix(in oklab, var(--success), var(--bg) 85%);
-    --warning-soft: color-mix(in oklab, var(--warning), var(--bg) 85%);
-    --danger-soft: color-mix(in oklab, var(--danger), var(--bg) 85%);
+    --info-contrast: var(--info-90);
+    --success-contrast: var(--success-80);
+    --warning-contrast: var(--warning-90);
+    --danger-contrast: var(--danger-80);
 
     /* On-colors */
     --on-info: oklch(0.16 0 0);
@@ -49,8 +51,8 @@
     --on-danger: oklch(0.16 0 0);
 
     /* Interaction tokens */
-    --surface-hover: color-mix(in oklab, var(--surface-1), black 10%);
-    --surface-active: color-mix(in oklab, var(--surface-1), black 12%);
+    --surface-hover: color-mix(in oklab, var(--surface-1), black 2%);
+    --surface-active: color-mix(in oklab, var(--surface-1), black 4%);
 
     /* Overlay */
     --overlay: oklch(0.16 0 0 / 0.40);
@@ -88,13 +90,15 @@
     --border: var(--ink-40);
     --divider: color-mix(in oklab, var(--border), transparent 40%);
 
-    --brand: var(--brand-50);
-    --brand-strong: var(--brand-40);
+    --brand: var(--brand-80);
+    --brand-strong: var(--brand-100);
+    --brand-contrast: var(--brand-50);
 
-    --accent: var(--accent-70);
-    --accent-strong: var(--accent-60);
+    --accent: var(--accent-80);
+    --accent-strong: var(--accent-100);
+    --accent-contrast: var(--accent-50);
 
-    --link: var(--accent);
+    --link: var(--accent-contrast);
     --link-hover: color-mix(in oklab, var(--link), white 18%);
     --focus: var(--brand);
     --focus-ring: 0 0 0 3px color-mix(in oklab, var(--focus), transparent 60%);
@@ -104,6 +108,11 @@
     --warning: var(--warning-60);
     --danger: var(--danger-60);
 
+    --info-contrast: var(--info-50);
+    --success-contrast: var(--success-50);
+    --warning-contrast: var(--warning-50);
+    --danger-contrast: var(--danger-50);
+
     --surface-hover: color-mix(in oklab, var(--surface-1), white 6%);
     --surface-active: color-mix(in oklab, var(--surface-1), white 8%);
 
@@ -118,3 +127,7 @@
     --disabled-bg: color-mix(in oklab, var(--surface-2), transparent 35%);
     --disabled-border: color-mix(in oklab, var(--border), transparent 55%);
 }
+
+@media (prefers-reduced-motion: reduce) {
+    transition-duration: 1ms; animation-duration: 1ms;
+}

package/dist/index.d.ts

@@ -352,17 +352,6 @@ type AuthControllerProviderProps = {
 };
 declare function AuthControllerProvider({ children, controller }: AuthControllerProviderProps): react_jsx_runtime.JSX.Element;
 
-interface InputProps {
-    id: string;
-    label: string;
-    type: string;
-    value: string;
-    onChange: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
-    placeholder: string;
-    className?: string;
-}
-declare const AuthFormInputField: React__default.FC<InputProps>;
-
 type RequireAuthProps = {
     guarded?: ReactNode;
     loadingPlaceholder?: ReactNode;
@@ -411,7 +400,54 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     loading?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
+    reserveLeftIcon?: boolean;
+    reserveRightIcon?: boolean;
 }
 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 };
+type ControlLikeProps = {
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    "aria-describedby"?: string;
+};
+interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    error?: React.ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    id?: string;
+    children: React.ReactElement<ControlLikeProps>;
+}
+declare function Field({ label, hint, error, required, disabled, id, children, className, ...props }: FieldProps): react_jsx_runtime.JSX.Element;
+
+declare const controlShellVariants: (props?: ({
+    variant?: "outline" | "ghost" | "surface" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof controlShellVariants> {
+    invalid?: boolean;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    reserveLeftSlot?: boolean;
+    reserveRightSlot?: boolean;
+    inputClassName?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare const textareaShellVariants: (props?: ({
+    variant?: "outline" | "ghost" | "surface" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaShellVariants> {
+    invalid?: boolean;
+    textareaClassName?: string;
+    autoResize?: boolean;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { AuthController, AuthControllerCtx, type AuthControllerDeps, AuthControllerProvider, AuthDispatchCtx, AuthProvider, type AuthState, AuthStateCtx, Button, type ButtonProps, type CacheInstruction, type CustomInstruction, DEFAULT_NOTIFICATION_CHANNEL, type ErrorResponse, Field, type FieldProps, type GenericResponse, type HttpClient, HttpError, type HttpMethod, type HttpResponse, Input, type InputProps, 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, Textarea, type TextareaProps, 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

@@ -897,42 +897,9 @@ function useAuthedUser() {
   return auth.user;
 }
 
-// src/feature/auth/interface/web/react/AuthFormInputField.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var inputLabelStyles = {
-  display: "block",
-  fontSize: "small",
-  fontWeight: "bolder",
-  marginBottom: "4px"
-};
-var inputFieldStyles = {
-  display: "block",
-  width: "100%",
-  padding: "0.5rem 0.75rem"
-};
-var AuthFormInputField = ({ id, label, type, value, onChange, placeholder, className }) => {
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx5("label", { htmlFor: id, style: inputLabelStyles, children: label }),
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        id,
-        name: id,
-        type,
-        required: true,
-        value,
-        onChange,
-        className,
-        placeholder,
-        style: inputFieldStyles
-      }
-    )
-  ] });
-};
-
 // src/feature/auth/interface/web/react/auth-route-guards.tsx
 import { Navigate, Outlet, useLocation } from "react-router-dom";
-import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
 function RequireAuth({
   guarded,
   loadingPlaceholder,
@@ -943,18 +910,18 @@ function RequireAuth({
   const auth = useAuth();
   const location = useLocation();
   if (auth.status === "loading") {
-    return /* @__PURE__ */ jsx6(Fragment, { children: loadingPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: loadingPlaceholder ?? null });
   }
   if (auth.status === "error") {
-    return /* @__PURE__ */ jsx6(Fragment, { children: errorPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: errorPlaceholder ?? null });
   }
   if (auth.status === "unauthenticated") {
     if (unauthenticatedRedirectTo) {
-      return /* @__PURE__ */ jsx6(Navigate, { to: unauthenticatedRedirectTo, replace: true, state: { from: location } });
+      return /* @__PURE__ */ jsx5(Navigate, { to: unauthenticatedRedirectTo, replace: true, state: { from: location } });
     }
-    return /* @__PURE__ */ jsx6(Fragment, { children: unauthenticatedPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: unauthenticatedPlaceholder ?? null });
   }
-  return guarded ? /* @__PURE__ */ jsx6(Fragment, { children: guarded }) : /* @__PURE__ */ jsx6(Outlet, {});
+  return guarded ? /* @__PURE__ */ jsx5(Fragment, { children: guarded }) : /* @__PURE__ */ jsx5(Outlet, {});
 }
 function RedirectIfAuthed({
   redirectTo,
@@ -965,18 +932,18 @@ function RedirectIfAuthed({
 }) {
   const auth = useAuth();
   if (auth.status === "loading") {
-    return /* @__PURE__ */ jsx6(Fragment, { children: loadingPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: loadingPlaceholder ?? null });
   }
   if (auth.status === "error") {
-    return /* @__PURE__ */ jsx6(Fragment, { children: errorPlaceholder ?? loadingPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: errorPlaceholder ?? loadingPlaceholder ?? null });
   }
   if (auth.status === "authenticated") {
     if (redirectTo) {
-      return /* @__PURE__ */ jsx6(Navigate, { to: redirectTo, replace: true });
+      return /* @__PURE__ */ jsx5(Navigate, { to: redirectTo, replace: true });
     }
-    return /* @__PURE__ */ jsx6(Fragment, { children: authenticatedPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: authenticatedPlaceholder ?? null });
   }
-  return nonAuthedPlaceholder ? /* @__PURE__ */ jsx6(Fragment, { children: nonAuthedPlaceholder }) : /* @__PURE__ */ jsx6(Outlet, {});
+  return nonAuthedPlaceholder ? /* @__PURE__ */ jsx5(Fragment, { children: nonAuthedPlaceholder }) : /* @__PURE__ */ jsx5(Outlet, {});
 }
 
 // src/feature/auth/infra/mock-auth-http-client.ts
@@ -1064,23 +1031,22 @@ function cn(...inputs) {
 }
 
 // src/ui/components/Button.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonBase = cn(
   "relative isolate inline-flex items-center justify-center gap-2 leading-none text-sm font-medium select-none cursor-pointer",
   "rounded-[var(--radius-btn)]",
-  "transition-[background-color,color,box-shadow,transform] duration-150 ease",
+  "transition-[background-color,color,box-shadow,transform] duration-[var(--motion-med)] ease",
   "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]",
   "[--state-hover:color-mix(in_oklab,currentColor,transparent_92%)]",
   "[--state-active:color-mix(in_oklab,currentColor,transparent_86%)]",
-  "after:content-[''] after:absolute after:inset-0 after:rounded-[inherit] after:bg-[color:var(--state-hover)] after:opacity-0 after:pointer-events-none after:transition-opacity after:duration-100 after:ease",
-  "hover:after:opacity-100 active:after:bg-[color:var(--state-active)] active:after:opacity-100",
-  "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"
+  "after:content-[''] after:absolute after:inset-0 after:rounded-[inherit] after:bg-[color:var(--state-hover)] after:opacity-0 after:pointer-events-none after:transition-opacity after:duration-[var(--motion-fast)] after:ease",
+  "hover:after:opacity-100 active:after:bg-[color:var(--state-active)] active:after:opacity-100"
 );
 var flatChrome = cn();
 var pushChrome = cn(
   "border-b-[3px]",
   "transition-all",
-  "duration-100",
+  "duration-[var(--motion-fast)]",
   "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)]",
@@ -1091,7 +1057,7 @@ var softChrome = cn(
   "font-thin",
   "border",
   "border-[color:color-mix(in_oklab,var(--border),transparent_80%)]",
-  "shadow-[0_0_8px_2px_rgba(255,255,255,0.35)_inset,0_3px_8px_rgba(0,0,0,0.14)]"
+  "shadow-[0_0_2px_1px_rgba(255,255,255,0.35)_inset,0_2px_4px_rgba(0,0,0,0.14)]"
 );
 var insetChrome = cn(
   "border",
@@ -1099,7 +1065,7 @@ var insetChrome = cn(
   "shadow-[inset_0_2px_6px_rgba(0,0,0,0.18)]"
 );
 var glassChrome = cn(
-  "backdrop-blur-[6px]",
+  "backdrop-blur-[2px]",
   "border",
   "shadow-[0_8px_18px_rgba(0,0,0,0.12)]"
 );
@@ -1118,8 +1084,8 @@ var hairlineChrome = cn(
 var buttonVariants = cva(buttonBase, {
   variants: {
     variant: {
-      primary: "bg-[color:var(--brand)] text-[color:var(--text-inverted)]",
-      accent: "bg-[color:var(--accent)] text-[color:var(--text-inverted)]",
+      primary: "bg-[color:var(--brand)]",
+      accent: "bg-[color:var(--accent)]",
       secondary: "border border-[color:var(--border)] bg-[color:var(--surface-2)]",
       outline: "bg-transparent border border-[color:var(--border)] shadow-none",
       ghost: "bg-transparent shadow-none",
@@ -1151,26 +1117,26 @@ var buttonVariants = cva(buttonBase, {
     { variant: "link", className: "border-0" },
     { chrome: "soft", className: "text-[color:var(--text-1)]" },
     { chrome: "glass", className: "text-[color:var(--text-1)]" },
-    { chrome: "push", variant: "primary", className: "border-b-[color:var(--brand-90)]" },
-    { chrome: "push", variant: "accent", className: "border-b-[color:var(--accent-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: "primary", className: "border-b-[color:var(--brand-strong)]" },
+    { chrome: "push", variant: "accent", className: "border-b-[color:var(--accent-strong)]" },
+    { 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_85%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_color-mix(in_oklab,var(--brand),transparent_70%)]") },
-    { chrome: "soft", variant: "accent", className: cn("bg-[color:color-mix(in_oklab,var(--accent),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--accent),transparent_85%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_color-mix(in_oklab,var(--accent),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_45%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.1)_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_45%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.1)_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_75%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_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_75%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_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_75%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_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_75%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_color-mix(in_oklab,var(--danger),transparent_70%)]") },
-    { chrome: "soft", variant: "link", className: cn("text-[color:var(--link)]", "shadow-[0_3px_8px_color-mix(in_oklab,var(--link),transparent_75%)]") },
+    { 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_85%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--brand),transparent_70%)]") },
+    { chrome: "soft", variant: "accent", className: cn("bg-[color:color-mix(in_oklab,var(--accent),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--accent),transparent_85%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--accent),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_45%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.1)_inset,0_2px_4px_color-mix(in_oklab,var(--border),transparent_70%)]") },
+    { chrome: "soft", variant: "outline", className: cn("border-[color:color-mix(in_oklab,var(--border),transparent_45%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.1)_inset,0_2px_4px_color-mix(in_oklab,var(--border),transparent_70%)]") },
+    { chrome: "soft", variant: "ghost", className: "shadow-[0_2px_4px_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_75%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_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_75%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_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_75%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_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_75%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--danger),transparent_70%)]") },
+    { chrome: "soft", variant: "link", className: cn("text-[color:var(--link)]", "shadow-[0_2px_4px_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-[color:var(--brand)]") },
     { chrome: "glass", variant: "accent", className: cn("bg-[color:color-mix(in_oklab,var(--accent),transparent_65%)]", "border-[color:var(--accent)]") },
     { 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%)]") },
@@ -1191,19 +1157,21 @@ var buttonVariants = cva(buttonBase, {
     { chrome: "glow", variant: "warning", className: cn("border-[color: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-[color: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-[color:var(--link)] shadow-none border-transparent" },
-    { chrome: "hairline", variant: "primary", className: "border-[color:color-mix(in_oklab,var(--brand),transparent_20%)] text-[color:var(--brand)]" },
-    { chrome: "hairline", variant: "accent", className: "border-[color:color-mix(in_oklab,var(--accent),transparent_20%)] text-[color:var(--accent)]" },
+    { chrome: "hairline", variant: "primary", className: "border-[color:color-mix(in_oklab,var(--brand-contrast),transparent_20%)] text-[color:var(--brand-contrast)]" },
+    { chrome: "hairline", variant: "accent", className: "border-[color:color-mix(in_oklab,var(--accent-contrast),transparent_20%)] text-[color:var(--accent-contrast)]" },
     { chrome: "hairline", variant: "secondary", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[color:var(--text-1)]" },
     { chrome: "hairline", variant: "outline", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[color:var(--text-1)]" },
     { chrome: "hairline", variant: "ghost", className: "border-transparent text-[color:var(--text-1)]" },
-    { chrome: "hairline", variant: "success", className: "border-[color:color-mix(in_oklab,var(--success),transparent_20%)] text-[color:var(--success)]" },
-    { chrome: "hairline", variant: "info", className: "border-[color:color-mix(in_oklab,var(--info),transparent_20%)] text-[color:var(--info)]" },
-    { chrome: "hairline", variant: "warning", className: "border-[color:color-mix(in_oklab,var(--warning),transparent_20%)] text-[color:var(--warning)]" },
-    { chrome: "hairline", variant: "danger", className: "border-[color:color-mix(in_oklab,var(--danger),transparent_20%)] text-[color:var(--danger)]" },
+    { chrome: "hairline", variant: "success", className: "border-[color:color-mix(in_oklab,var(--success),transparent_20%)] text-[color:var(--success-contrast)]" },
+    { chrome: "hairline", variant: "info", className: "border-[color:color-mix(in_oklab,var(--info),transparent_20%)] text-[color:var(--info-contrast)]" },
+    { chrome: "hairline", variant: "warning", className: "border-[color:color-mix(in_oklab,var(--warning),transparent_20%)] text-[color:var(--warning-contrast)]" },
+    { chrome: "hairline", variant: "danger", className: "border-[color:color-mix(in_oklab,var(--danger),transparent_20%)] text-[color:var(--danger-contrast)]" },
     { chrome: "hairline", variant: "link", className: "text-[color:var(--link)] border-transparent" }
   ],
   defaultVariants: { variant: "primary", size: "md", chrome: "flat", fullWidth: false }
 });
+var iconSlotBase = cn("inline-flex items-center justify-center", "shrink-0");
+var iconSlotReserve = "min-w-4 min-h-4";
 var Button = React3.forwardRef(
   ({
     asChild = false,
@@ -1216,6 +1184,8 @@ var Button = React3.forwardRef(
     disabled,
     leftIcon,
     rightIcon,
+    reserveLeftIcon,
+    reserveRightIcon,
     children,
     onClick,
     type,
@@ -1227,19 +1197,19 @@ var Button = React3.forwardRef(
       isDisabled && "opacity-50 pointer-events-none cursor-not-allowed",
       className
     );
-    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"
-        }
-      ) : leftIcon,
-      children,
-      rightIcon
-    ] });
+    const showLeftSlot = Boolean(loading || leftIcon || reserveLeftIcon);
+    const showRightSlot = Boolean(rightIcon || reserveRightIcon);
+    const spinner = /* @__PURE__ */ jsx6(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+      }
+    );
+    const leftSlot = showLeftSlot ? /* @__PURE__ */ jsx6("span", { className: cn(iconSlotBase, reserveLeftIcon && iconSlotReserve), children: loading ? spinner : leftIcon }) : null;
+    const rightSlot = showRightSlot ? /* @__PURE__ */ jsx6("span", { className: cn(iconSlotBase, reserveRightIcon && iconSlotReserve), children: rightIcon }) : null;
     if (asChild) {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsxs2(
         Slot.Root,
         {
           ref,
@@ -1257,11 +1227,15 @@ var Button = React3.forwardRef(
             onClick?.(e);
           },
           ...props,
-          children: content
+          children: [
+            leftSlot,
+            /* @__PURE__ */ jsx6(Slot.Slottable, { children }),
+            rightSlot
+          ]
         }
       );
     }
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsxs2(
       "button",
       {
         ref,
@@ -1272,29 +1246,318 @@ var Button = React3.forwardRef(
         "data-loading": loading ? "" : void 0,
         onClick,
         ...props,
-        children: content
+        children: [
+          leftSlot,
+          children,
+          rightSlot
+        ]
       }
     );
   }
 );
 Button.displayName = "Button";
+
+// src/ui/components/Field.tsx
+import * as React5 from "react";
+
+// src/ui/components/Label.tsx
+import * as React4 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Label = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+    "label",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center gap-2 text-sm font-medium text-[color:var(--text-1)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Label.displayName = "Label";
+
+// src/ui/components/Field.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function Field({ label, hint, error, required, disabled, id, children, className, ...props }) {
+  const reactId = React5.useId();
+  const controlId = id ?? `field-${reactId}`;
+  const hintId = hint ? `${controlId}-hint` : void 0;
+  const errorId = error ? `${controlId}-error` : void 0;
+  const childInvalid = Boolean(children.props.invalid);
+  const invalid = Boolean(error) || childInvalid;
+  const describedByParts = [
+    children.props["aria-describedby"],
+    hintId,
+    errorId
+  ].filter(Boolean);
+  const ariaDescribedBy = describedByParts.length ? describedByParts.join(" ") : void 0;
+  const control = React5.cloneElement(children, {
+    id: controlId,
+    disabled: disabled ?? children.props.disabled,
+    required: required ?? children.props.required,
+    invalid,
+    "aria-describedby": ariaDescribedBy
+  });
+  return /* @__PURE__ */ jsxs3("div", { className: cn("grid gap-1.5", className), ...props, children: [
+    label ? /* @__PURE__ */ jsx8("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ jsxs3(Label, { htmlFor: controlId, children: [
+      label,
+      required ? /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-(--muted)", children: " * " }) : null
+    ] }) }) : null,
+    control,
+    error ? /* @__PURE__ */ jsx8(
+      "p",
+      {
+        id: errorId,
+        className: "text-xs leading-5 text-(--danger-contrast)",
+        role: "alert",
+        children: error
+      }
+    ) : hint ? /* @__PURE__ */ jsx8("p", { id: hintId, className: "text-xs leading-5 text-(--muted)", children: hint }) : null
+  ] });
+}
+
+// src/ui/components/Input.tsx
+import * as React6 from "react";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var controlShellBase = cn(
+  "relative inline-flex items-center gap-2",
+  "rounded-[var(--radius-input)]",
+  "border border-[color:color-mix(in_oklab,var(--border),transparent_55%)]",
+  "text-[color:var(--text-1)]",
+  "transition-[background-color,border-color,box-shadow] duration-[var(--motion-med)] ease",
+  "[--control-focus:var(--focus)]",
+  "focus-within:shadow-[0_0_0_3px_color-mix(in_oklab,var(--control-focus),transparent_60%)]",
+  "focus-within:border-[color:var(--control-focus)]",
+  "data-[invalid]:[--control-focus:var(--danger)]",
+  "data-[invalid]:border-[color:color-mix(in_oklab,var(--danger),transparent_20%)]",
+  "data-[disabled]:bg-[color:var(--disabled-bg)]",
+  "data-[disabled]:text-[color:var(--disabled-fg)]",
+  "data-[disabled]:border-[color:var(--disabled-border)]",
+  "data-[disabled]:cursor-not-allowed"
+);
+var controlShellVariants = cva2(controlShellBase, {
+  variants: {
+    variant: {
+      surface: cn(
+        "bg-[color:var(--surface-2)]",
+        "hover:bg-[color:var(--surface-hover)]"
+      ),
+      outline: cn(
+        "bg-transparent",
+        "hover:bg-[color:color-mix(in_oklab,var(--surface-2),transparent_40%)]",
+        "border-[color:color-mix(in_oklab,var(--border),transparent_35%)]"
+      ),
+      ghost: cn(
+        "bg-transparent",
+        "border-[color:transparent]",
+        "hover:bg-[color:color-mix(in_oklab,var(--surface-2),transparent_55%)]",
+        "focus-within:border-[color:color-mix(in_oklab,var(--border),transparent_35%)]"
+      )
+    },
+    size: {
+      sm: "h-8 px-3 text-sm [--input-slot-size:2rem]",
+      md: "h-10 px-3.5 text-sm [--input-slot-size:2.5rem]",
+      lg: "h-11 px-4 text-base [--input-slot-size:2.75rem]"
+    },
+    fullWidth: { true: "w-full", false: "w-auto" }
+  },
+  defaultVariants: { variant: "surface", size: "md", fullWidth: false }
+});
+var inputBase = cn(
+  "min-w-0 flex-1 bg-transparent",
+  "outline-none border-0 ring-0",
+  "placeholder:text-[color:color-mix(in_oklab,var(--muted),transparent_20%)]",
+  "disabled:cursor-not-allowed",
+  "read-only:cursor-default"
+);
+var slotBase = cn(
+  "inline-flex items-center justify-center",
+  "text-[color:var(--muted)]",
+  "data-[disabled]:text-[color:var(--disabled-fg)]"
+);
+var slotReserve = "min-w-[var(--input-slot-size)]";
+var Input = React6.forwardRef(
+  ({
+    variant,
+    size,
+    fullWidth,
+    invalid,
+    leftSlot,
+    rightSlot,
+    reserveLeftSlot,
+    reserveRightSlot,
+    className,
+    inputClassName,
+    disabled,
+    ...props
+  }, ref) => {
+    const isDisabled = Boolean(disabled);
+    const showLeftSlot = Boolean(leftSlot || reserveLeftSlot);
+    const showRightSlot = Boolean(rightSlot || reserveRightSlot);
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: cn(controlShellVariants({ variant, size, fullWidth }), className),
+        "data-invalid": invalid ? "" : void 0,
+        "data-disabled": isDisabled ? "" : void 0,
+        children: [
+          showLeftSlot ? /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: cn(slotBase, reserveLeftSlot && slotReserve),
+              "data-disabled": isDisabled ? "" : void 0,
+              children: leftSlot
+            }
+          ) : null,
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              ref,
+              disabled: isDisabled,
+              "aria-invalid": invalid || void 0,
+              className: cn(inputBase, inputClassName),
+              ...props
+            }
+          ),
+          showRightSlot ? /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: cn(slotBase, reserveRightSlot && slotReserve),
+              "data-disabled": isDisabled ? "" : void 0,
+              children: rightSlot
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/ui/components/Textarea.tsx
+import * as React7 from "react";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var controlShellBase2 = cn(
+  "relative inline-flex w-full",
+  "rounded-[var(--radius-input)]",
+  "border border-[color:color-mix(in_oklab,var(--border),transparent_55%)]",
+  "text-[color:var(--text-1)]",
+  "transition-[background-color,border-color,box-shadow] duration-[var(--motion-med)] ease",
+  "[--control-focus:var(--focus)]",
+  "focus-within:shadow-[0_0_0_3px_color-mix(in_oklab,var(--control-focus),transparent_60%)]",
+  "focus-within:border-[color:var(--control-focus)]",
+  "data-[invalid]:[--control-focus:var(--danger)]",
+  "data-[invalid]:border-[color:color-mix(in_oklab,var(--danger),transparent_20%)]",
+  "data-[disabled]:bg-[color:var(--disabled-bg)]",
+  "data-[disabled]:text-[color:var(--disabled-fg)]",
+  "data-[disabled]:border-[color:var(--disabled-border)]",
+  "data-[disabled]:cursor-not-allowed"
+);
+var textareaShellVariants = cva3(controlShellBase2, {
+  variants: {
+    variant: {
+      surface: cn(
+        "bg-[color:var(--surface-2)]",
+        "hover:bg-[color:var(--surface-hover)]"
+      ),
+      outline: cn(
+        "bg-transparent",
+        "hover:bg-[color:color-mix(in_oklab,var(--surface-2),transparent_40%)]",
+        "border-[color:color-mix(in_oklab,var(--border),transparent_35%)]"
+      ),
+      ghost: cn(
+        "bg-transparent",
+        "border-[color:transparent]",
+        "hover:bg-[color:color-mix(in_oklab,var(--surface-2),transparent_55%)]",
+        "focus-within:border-[color:color-mix(in_oklab,var(--border),transparent_35%)]"
+      )
+    },
+    size: {
+      sm: "p-3 text-sm",
+      md: "p-3.5 text-sm",
+      lg: "p-4 text-base"
+    },
+    fullWidth: { true: "w-full", false: "w-auto" }
+  },
+  defaultVariants: { variant: "surface", size: "md", fullWidth: true }
+});
+var textareaBase = cn(
+  "min-w-0 w-full bg-transparent",
+  "outline-none border-0 ring-0",
+  "resize-y",
+  "placeholder:text-[color:color-mix(in_oklab,var(--muted),transparent_20%)]",
+  "disabled:cursor-not-allowed",
+  "read-only:cursor-default"
+);
+var Textarea = React7.forwardRef(
+  ({
+    variant,
+    size,
+    fullWidth,
+    invalid,
+    className,
+    textareaClassName,
+    disabled,
+    autoResize,
+    onInput,
+    rows = 4,
+    ...props
+  }, ref) => {
+    const isDisabled = Boolean(disabled);
+    const handleInput = (e) => {
+      if (autoResize) {
+        const el = e.currentTarget;
+        el.style.height = "auto";
+        el.style.height = `${el.scrollHeight}px`;
+      }
+      onInput?.(e);
+    };
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: cn(textareaShellVariants({ variant, size, fullWidth }), className),
+        "data-invalid": invalid ? "" : void 0,
+        "data-disabled": isDisabled ? "" : void 0,
+        children: /* @__PURE__ */ jsx10(
+          "textarea",
+          {
+            ref,
+            disabled: isDisabled,
+            "aria-invalid": invalid || void 0,
+            className: cn(textareaBase, textareaClassName),
+            rows,
+            onInput: handleInput,
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
 export {
   AuthController,
   AuthControllerCtx,
   AuthControllerProvider,
   AuthDispatchCtx,
-  AuthFormInputField,
   AuthProvider,
   AuthStateCtx,
   Button,
   DEFAULT_NOTIFICATION_CHANNEL,
+  Field,
   HttpError,
+  Input,
   MockAuthHttpClient,
   MockHttpClient,
   NotificationHost,
   NotifierController,
   RedirectIfAuthed,
   RequireAuth,
+  Textarea,
   authController,
   controllerFactory,
   createAuthController,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,8 +52,7 @@
     "@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",
+    "@vitest/browser-playwright": "^4.0.16",
     "autoprefixer": "^10.4.22",
     "lucide-react": "^0.555.0",
     "playwright": "^1.57.0",