@luxfi/ui 7.3.2 → 7.4.2

package/src/heading.tsx

@@ -1,3 +1,4 @@
+import { H1, H2, H3 } from '@hanzo/gui';
 import React from 'react';
 
 import { cn } from './utils';
@@ -9,7 +10,9 @@ export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
   size?: string;
 }
 
-const LEVEL_TAG = { '1': 'h1', '2': 'h2', '3': 'h3' } as const;
+// gui's heading primitives — real h1/h2/h3 on web, sized Text on native, both
+// inheriting the theme's heading font. The Lux type ramp stays in the classes.
+const LEVEL_TAG = { '1': H1, '2': H2, '3': H3 } as const;
 
 // base (mobile) + lg (desktop) responsive text styles per level
 //
@@ -26,18 +29,19 @@ const BASE_CLASSES = 'font-heading text-heading';
 
 export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   function Heading({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
-    const Tag = level ? LEVEL_TAG[level] : 'h2';
+    const Tag = level ? LEVEL_TAG[level] : H2;
     const levelClasses = level ? LEVEL_CLASSES[level] : undefined;
-    const mergedStyle = mb !== undefined
-      ? { ...styleProp, marginBottom: typeof mb === 'number' ? `${ mb * 4 }px` : mb }
-      : styleProp;
+    const mergedStyle = mb !== undefined ?
+      { ...styleProp, marginBottom: typeof mb === 'number' ? `${ mb * 4 }px` : mb } :
+      styleProp;
 
     return (
       <Tag
-        ref={ ref }
+        ref={ ref as never }
+        unstyled
         className={ cn(BASE_CLASSES, levelClasses, className) }
-        style={ mergedStyle }
-        { ...rest }
+        style={ mergedStyle as never }
+        { ...(rest as object) }
       />
     );
   },

package/src/iam.ts

@@ -0,0 +1,170 @@
+// Hanzo IAM read surface — the ONE identity source every Lux surface reads.
+//
+// Who am I, which orgs am I in, which projects does this org have. Every
+// surface needs those three answers and every surface had grown its own way to
+// get them (a hardcoded ORGS table here, a bespoke token store there, a
+// per-app `/branding` map somewhere else). They are IAM's answers, so they are
+// read from IAM.
+//
+// The endpoints are the Casdoor-compat verbs IAM opens to a registered browser
+// origin (see hanzoai/iam internal/cors: get-account, get-organizations,
+// get-organization, get-users, get-organization-projects). CORS decides which
+// ORIGIN may read; the bearer decides WHO — a caller only ever sees what its
+// own principal could already see, so there is nothing to gate here.
+//
+// VALUES ONLY: no React, no storage policy, no redirect. `fetch` is the single
+// effect, and the base URL comes from the host-resolved white-label, so this
+// module is identical on the server, in the browser and in a test.
+
+import { resolveWhiteLabel, type WhiteLabel } from './white-label';
+
+/** A signed-in principal, as IAM describes it. */
+export interface IamAccount {
+  readonly owner: string;
+  readonly name: string;
+  readonly displayName?: string;
+  readonly email?: string;
+  readonly avatar?: string;
+  readonly isAdmin?: boolean;
+}
+
+/** An organization the principal can see. */
+export interface IamOrg {
+  readonly owner: string;
+  readonly name: string;
+  readonly displayName?: string;
+  readonly logo?: string;
+}
+
+/** A project inside an organization (IAM's Org → Workspace → Project tier). */
+export interface IamProject {
+  readonly owner: string;
+  readonly name: string;
+  readonly displayName?: string;
+  readonly organization?: string;
+  readonly workspace?: string;
+  readonly isDefault?: boolean;
+}
+
+/** IAM's response envelope. `data2` carries the total for paged reads. */
+interface Envelope<T> {
+  readonly status?: string;
+  readonly msg?: string;
+  readonly data?: T;
+  readonly data2?: unknown;
+}
+
+/**
+ * A refusal from IAM, carrying enough to tell "not signed in" apart from
+ * "signed in, and the answer is genuinely empty" — the distinction a switcher
+ * has to render honestly.
+ */
+export class IamError extends Error {
+  readonly status: number;
+  readonly unauthenticated: boolean;
+  constructor(message: string, status: number, unauthenticated: boolean) {
+    super(message);
+    this.name = 'IamError';
+    this.status = status;
+    this.unauthenticated = unauthenticated;
+  }
+}
+
+/** IAM answers 401, or 200 with a sign-in message. Both mean "no session". */
+const SIGNED_OUT = /please sign in|authentication required|unauthorized/i;
+
+function isSignedOut(status: number, msg: string): boolean {
+  return status === 401 || status === 403 || SIGNED_OUT.test(msg);
+}
+
+/** The IAM API root for a host — `lux.cloud` → `https://lux.id/v1/iam`. */
+export function iamBase(host?: string | null | WhiteLabel): string {
+  const wl = typeof host === 'object' && host !== null ? host : resolveWhiteLabel(host as string | null | undefined);
+  return `${ wl.issuer }/v1/iam`;
+}
+
+/** How a read reaches IAM: where, and with whose bearer. */
+export interface IamCall {
+  readonly base: string;
+  readonly token?: string | null;
+  readonly signal?: AbortSignal;
+}
+
+async function read<T>(call: IamCall, verb: string, params: Record<string, string | number>): Promise<T> {
+  const url = new URL(`${ call.base }/${ verb }`);
+  for (const [ k, v ] of Object.entries(params)) url.searchParams.set(k, String(v));
+
+  let res: Response;
+  try {
+    res = await fetch(url.toString(), {
+      method: 'GET',
+      // The bearer is the whole credential. IAM does not allow credentialed
+      // CORS, so sending cookies would only get the response blocked.
+      headers: call.token ? { Authorization: `Bearer ${ call.token }` } : {},
+      signal: call.signal,
+    });
+  } catch (e) {
+    // A network/CORS failure is NOT "no orgs" — say so, so the caller can show
+    // an error instead of an empty switcher.
+    throw new IamError(e instanceof Error ? e.message : 'IAM unreachable', 0, false);
+  }
+
+  const body = (await res.json().catch(() => ({}))) as Envelope<T>;
+  const msg = typeof body.msg === 'string' ? body.msg : '';
+  if (!res.ok || body.status === 'error') {
+    throw new IamError(msg || `IAM ${ verb } failed (${ res.status })`, res.status, isSignedOut(res.status, msg));
+  }
+  return body.data as T;
+}
+
+/** Rows per page for the org list — small first paint, more on demand. */
+export const IAM_PAGE_SIZE = 20;
+
+export const iam = {
+  /** The signed-in principal, or null when there is no session. */
+  async account(call: IamCall): Promise<IamAccount | null> {
+    try {
+      const data = await read<IamAccount | null>(call, 'get-account', {});
+      return data && data.name ? data : null;
+    } catch (e) {
+      if (e instanceof IamError && e.unauthenticated) return null;
+      throw e;
+    }
+  },
+
+  /**
+   * One page of the orgs the principal can see. IAM scopes the read to the
+   * caller's authority, so a normal member gets their own org and a super
+   * admin gets the tenant list — the page never has to decide.
+   */
+  async organizations(call: IamCall, page = 0, query = '', pageSize = IAM_PAGE_SIZE): Promise<Array<IamOrg>> {
+    const params: Record<string, string | number> = {
+      owner: 'admin', // IAM orgs live under the reserved `admin` owner
+      p: page + 1, // the backend page is 1-based
+      pageSize,
+      sortField: 'name',
+      sortOrder: 'ascending',
+    };
+    const q = query.trim();
+    if (q) {
+      params.field = 'name';
+      params.value = q;
+    }
+    return (await read<Array<IamOrg> | null>(call, 'get-organizations', params)) ?? [];
+  },
+
+  /** One organization by name. */
+  async organization(call: IamCall, name: string): Promise<IamOrg | null> {
+    return (await read<IamOrg | null>(call, 'get-organization', { id: `admin/${ name }` })) ?? null;
+  },
+
+  /** Members of an organization. */
+  async users(call: IamCall, org: string): Promise<Array<IamAccount>> {
+    return (await read<Array<IamAccount> | null>(call, 'get-users', { owner: org })) ?? [];
+  },
+
+  /** The organization's projects — IAM keys this read by `organization`. */
+  async projects(call: IamCall, org: string): Promise<Array<IamProject>> {
+    return (await read<Array<IamProject> | null>(call, 'get-organization-projects', { organization: org })) ?? [];
+  },
+};

package/src/icon-button.tsx

@@ -1,4 +1,4 @@
-import { styled, View } from '@hanzogui/core';
+import { styled, View } from '@hanzo/gui';
 import * as React from 'react';
 
 import { Skeleton } from './skeleton';

package/src/icons.ts

@@ -0,0 +1,18 @@
+// The Lux icon set — one set, one import path.
+//
+// Lucide, exactly as @hanzo/gui standardises on it. @hanzo/gui ships the same
+// drawings twice, once per runtime — `@hanzogui/lucide-icons-2` for React
+// Native, `lucide-react` for the DOM — and the geometry is identical
+// path-for-path, so this is one set and not two. Lux surfaces are DOM, so the
+// DOM delivery is what `@luxfi/ui/icons` hands them.
+//
+//   import { Box, Zap, Info } from '@luxfi/ui/icons';
+//
+// The theming is the set's own contract, and it is why nothing here wraps it:
+// every Lucide glyph is a 24x24, 2px, round-cap outline stroked in
+// `currentColor`, so it takes the colour of the text it sits next to and stays
+// monochrome by construction. Size it with `className="size-4"`, colour it by
+// colouring its container — never by reaching for a different drawing.
+//
+// A second icon package inside a Lux surface is a bug, not a preference.
+export * from 'lucide-react';

package/src/identity.tsx

@@ -0,0 +1,318 @@
+'use client';
+
+import * as React from 'react';
+
+import {
+  iam,
+  iamBase,
+  IamError,
+  type IamAccount,
+  type IamOrg,
+  type IamProject,
+} from './iam';
+import { useWhiteLabel } from './provider';
+import type { WhiteLabel } from './white-label';
+
+// Who is signed in, and what are they acting as.
+//
+// One context, read by every piece of chrome. Identity and org membership come
+// from IAM (see ./iam); brand, theme, issuer and IAM client come from the host
+// (see ./white-label). Nothing here is configured per deployment.
+//
+// The state is FOUR values, not a boolean, because a switcher renders each of
+// them differently and conflating them is how an app ends up showing an empty
+// account menu to a signed-out visitor:
+//
+//   loading    — the answer is on its way
+//   anonymous  — nobody is signed in; offer sign-in, never an empty list
+//   ready      — signed in; the lists are the real lists (possibly empty)
+//   error      — IAM could not be read; say so, never render "no organizations"
+
+export type IdentityStatus = 'loading' | 'anonymous' | 'ready' | 'error';
+
+/**
+ * How the chrome gets a bearer and moves the user in and out of a session.
+ *
+ * Credentials are `@hanzo/iam`'s job, not the design system's — so this is the
+ * seam, and a surface using the SDK supplies only the two verbs:
+ *
+ *   auth={{ signIn: () => void startLogin(), signOut: () => void logout() }}
+ *
+ * The bearer itself needs no wiring: the default reads the SDK's own token
+ * store, so there is exactly one token and one refresh timer per surface.
+ */
+export interface IdentityAuth {
+  /** The IAM access token. Defaults to the `@hanzo/iam` SDK's token store. */
+  readonly token?: () => string | null | Promise<string | null>;
+  /** Start a sign-in. */
+  readonly signIn?: () => void;
+  /** End the session. */
+  readonly signOut?: () => void;
+}
+
+export interface Identity {
+  readonly status: IdentityStatus;
+  /** The signed-in principal, or null. */
+  readonly account: IamAccount | null;
+  /** Organizations the principal can act in. */
+  readonly orgs: ReadonlyArray<IamOrg>;
+  /** The organization the surface is currently scoped to, or null. */
+  readonly org: IamOrg | null;
+  /** Projects in the current organization. */
+  readonly projects: ReadonlyArray<IamProject>;
+  /** The project the surface is currently scoped to, or null. */
+  readonly project: IamProject | null;
+  /** Why the reads failed, when status is 'error'. */
+  readonly error: string | null;
+  /** Host-resolved brand, theme, issuer and IAM client. */
+  readonly whiteLabel: WhiteLabel;
+  readonly setOrg: (name: string) => void;
+  readonly setProject: (name: string) => void;
+  readonly signIn: () => void;
+  readonly signOut: () => void;
+  readonly reload: () => void;
+}
+
+// --- The default auth: the @hanzo/iam SDK's own token store -----------------
+// `@hanzo/iam/browser` keeps its PKCE tokens under `hanzo_iam_*`. Reading that
+// key IS the integration — no second SDK instance, no duplicated refresh
+// timer, and a surface already using @hanzo/iam needs no wiring at all.
+const IAM_TOKEN_KEY = 'hanzo_iam_access_token';
+
+function storedToken(): string | null {
+  if (typeof window === 'undefined') return null;
+  for (const store of [ window.sessionStorage, window.localStorage ]) {
+    try {
+      const t = store.getItem(IAM_TOKEN_KEY);
+      if (t) return t;
+    } catch {
+      // Storage disabled (private mode / sandboxed frame) — treat as signed out.
+    }
+  }
+  return null;
+}
+
+function clearStoredTokens(): void {
+  if (typeof window === 'undefined') return;
+  for (const store of [ window.sessionStorage, window.localStorage ]) {
+    try {
+      for (const k of [ 'access_token', 'refresh_token', 'id_token', 'expires_at' ]) {
+        store.removeItem(`hanzo_iam_${ k }`);
+      }
+    } catch {
+      // Nothing to clear.
+    }
+  }
+}
+
+const defaultAuth: IdentityAuth = {};
+
+// --- Scope persistence ------------------------------------------------------
+// Which org/project the user last acted in, per host, so a reload does not
+// silently move them somewhere else.
+const scopeKey = (host: string, kind: string) => `lux-ui:${ kind }:${ host }`;
+
+function readScope(host: string, kind: string): string | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    return window.localStorage.getItem(scopeKey(host, kind));
+  } catch {
+    return null;
+  }
+}
+
+function writeScope(host: string, kind: string, value: string): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(scopeKey(host, kind), value);
+  } catch {
+    // Selection stays live in-session; it just will not survive a reload.
+  }
+}
+
+const IdentityContext = React.createContext<Identity | null>(null);
+
+export interface IdentityProviderProps {
+  readonly children: React.ReactNode;
+  /** Bearer + sign-in/out. Defaults to the `@hanzo/iam` token store. */
+  readonly auth?: IdentityAuth;
+  /** Where sign-in goes when `auth.signIn` is not supplied. */
+  readonly loginPath?: string;
+}
+
+export const IdentityProvider = ({
+  children,
+  auth = defaultAuth,
+  loginPath = '/login',
+}: IdentityProviderProps): React.ReactElement => {
+  const whiteLabel = useWhiteLabel();
+  const base = React.useMemo(() => iamBase(whiteLabel), [ whiteLabel ]);
+
+  const [ status, setStatus ] = React.useState<IdentityStatus>('loading');
+  const [ account, setAccount ] = React.useState<IamAccount | null>(null);
+  const [ orgs, setOrgs ] = React.useState<ReadonlyArray<IamOrg>>([]);
+  const [ projects, setProjects ] = React.useState<ReadonlyArray<IamProject>>([]);
+  const [ error, setError ] = React.useState<string | null>(null);
+  const [ orgName, setOrgName ] = React.useState<string | null>(null);
+  const [ projectName, setProjectName ] = React.useState<string | null>(null);
+  const [ epoch, setEpoch ] = React.useState(0);
+
+  // Identity + org membership.
+  React.useEffect(() => {
+    const ac = new AbortController();
+    let live = true;
+    void (async () => {
+      const token = await (auth.token ?? storedToken)();
+      if (!live) return;
+      if (!token) {
+        setStatus('anonymous');
+        setAccount(null);
+        setOrgs([]);
+        return;
+      }
+      const call = { base, token, signal: ac.signal };
+      try {
+        const me = await iam.account(call);
+        if (!live) return;
+        if (!me) {
+          setStatus('anonymous');
+          setAccount(null);
+          setOrgs([]);
+          return;
+        }
+        setAccount(me);
+        // A member who cannot list the tenant table still has their OWN org:
+        // fall back to the one the account names rather than showing nothing.
+        const rows = await iam.organizations(call).catch((e: unknown) => {
+          if (e instanceof IamError && !e.unauthenticated) return [ { owner: 'admin', name: me.owner } ];
+          throw e;
+        });
+        if (!live) return;
+        setOrgs(rows);
+        setStatus('ready');
+        setError(null);
+      } catch (e) {
+        if (!live || ac.signal.aborted) return;
+        if (e instanceof IamError && e.unauthenticated) {
+          setStatus('anonymous');
+          setAccount(null);
+          setOrgs([]);
+          return;
+        }
+        setStatus('error');
+        setError(e instanceof Error ? e.message : 'Could not reach IAM.');
+      }
+    })();
+    return () => {
+      live = false;
+      ac.abort();
+    };
+  }, [ base, auth, epoch ]);
+
+  // The org the surface is scoped to: the persisted choice when it is still
+  // one the user has, else the account's own org, else the first row.
+  const org = React.useMemo<IamOrg | null>(() => {
+    if (orgs.length === 0) return null;
+    const saved = orgName ?? readScope(whiteLabel.host, 'org');
+    return (
+      orgs.find((o) => o.name === saved) ??
+      orgs.find((o) => o.name === account?.owner) ??
+      orgs[0]
+    );
+  }, [ orgs, orgName, account, whiteLabel.host ]);
+
+  // Projects follow the org. A project read is allowed to fail without
+  // downgrading the whole identity — the org switcher still works.
+  React.useEffect(() => {
+    if (!org) {
+      setProjects([]);
+      return;
+    }
+    const ac = new AbortController();
+    let live = true;
+    void (async () => {
+      const token = await (auth.token ?? storedToken)();
+      if (!live || !token) return;
+      const rows = await iam
+        .projects({ base, token, signal: ac.signal }, org.name)
+        .catch(() => [] as Array<IamProject>);
+      if (live) setProjects(rows);
+    })();
+    return () => {
+      live = false;
+      ac.abort();
+    };
+  }, [ base, auth, org, epoch ]);
+
+  const project = React.useMemo<IamProject | null>(() => {
+    if (projects.length === 0) return null;
+    const saved = projectName ?? readScope(whiteLabel.host, 'project');
+    return (
+      projects.find((p) => p.name === saved) ??
+      projects.find((p) => p.isDefault) ??
+      projects[0]
+    );
+  }, [ projects, projectName, whiteLabel.host ]);
+
+  const value = React.useMemo<Identity>(() => ({
+    status,
+    account,
+    orgs,
+    org,
+    projects,
+    project,
+    error,
+    whiteLabel,
+    setOrg: (name: string) => {
+      writeScope(whiteLabel.host, 'org', name);
+      setOrgName(name);
+      setProjectName(null);
+    },
+    setProject: (name: string) => {
+      writeScope(whiteLabel.host, 'project', name);
+      setProjectName(name);
+    },
+    signIn: () => {
+      if (auth.signIn) return auth.signIn();
+      if (typeof window !== 'undefined') window.location.assign(loginPath);
+    },
+    signOut: () => {
+      if (auth.signOut) return auth.signOut();
+      clearStoredTokens();
+      if (typeof window !== 'undefined') window.location.assign(loginPath);
+    },
+    reload: () => setEpoch((n) => n + 1),
+  }), [ status, account, orgs, org, projects, project, error, whiteLabel, auth, loginPath ]);
+
+  return <IdentityContext.Provider value={ value }>{ children }</IdentityContext.Provider>;
+};
+
+/**
+ * The current identity.
+ *
+ * Outside an `<IdentityProvider>` this reports `anonymous` rather than
+ * throwing: chrome that renders before a surface has wired identity should
+ * offer sign-in, not crash the page.
+ */
+export function useIdentity(): Identity {
+  const ctx = React.useContext(IdentityContext);
+  const whiteLabel = useWhiteLabel();
+  const fallback = React.useMemo<Identity>(() => ({
+    status: 'anonymous',
+    account: null,
+    orgs: [],
+    org: null,
+    projects: [],
+    project: null,
+    error: null,
+    whiteLabel,
+    setOrg: () => undefined,
+    setProject: () => undefined,
+    signIn: () => {
+      if (typeof window !== 'undefined') window.location.assign('/login');
+    },
+    signOut: () => undefined,
+    reload: () => undefined,
+  }), [ whiteLabel ]);
+  return ctx ?? fallback;
+}

package/src/index.ts

@@ -1,5 +1,54 @@
-export { AppProvider } from './provider';
+export { AppProvider, useWhiteLabel } from './provider';
 export { cn } from './utils';
+export { useBelow, useIsNarrow, useIsTouch, NARROW_PX, TOUCH_PX } from './use-narrow';
+
+// Identity = IAM, never a per-app copy. `useIdentity()` is the ONE answer to
+// "who is signed in, which orgs, which projects", and the chrome below renders
+// it. See ./iam for the endpoints and ./identity for the four honest states.
+export { iam, iamBase, IamError, IAM_PAGE_SIZE } from './iam';
+export type { IamAccount, IamOrg, IamProject, IamCall } from './iam';
+export { IdentityProvider, useIdentity } from './identity';
+export type { Identity, IdentityAuth, IdentityStatus, IdentityProviderProps } from './identity';
+
+// The application chrome — ONE user switcher, ONE org switcher, ONE project
+// switcher, ONE settings menu, ONE nav. All four switchers are the same
+// `Switcher` mechanism over different values.
+export {
+  Switcher,
+  OrgSwitcher,
+  ProjectSwitcher,
+  UserMenu,
+  SettingsMenu,
+  AppNav,
+  initials,
+} from './chrome';
+export type {
+  ChromeItem,
+  SwitcherProps,
+  UserMenuProps,
+  SettingsMenuProps,
+  NavLink,
+  AppNavProps,
+} from './chrome';
+
+// White-label = a function of the Host header, never of the deployment. Brand,
+// gui theme row, OIDC issuer and IAM client id all come from here.
+// (The engine itself is at '@luxfi/ui/gui'; it is a separate entry because the
+// skin and the engine both define Button, Input, Switch, Select and friends.)
+export {
+  resolveWhiteLabel,
+  currentHost,
+  orgIdentity,
+  orgs,
+  DEFAULT_ORG,
+} from './white-label';
+export type { Org, OrgIdentity, WhiteLabel } from './white-label';
+
+// Lux gui config — the createGui() result (fed to GuiProvider) + the brand
+// child-theme rows. Exposed so app bundlers (Vite/Next SSR extraction) and
+// escape-hatch consumers can reach the resolved config and brand palette.
+export { default as guiConfig, config, luxThemes, LUX_BRAND, PARS_GOLD } from './lux.config';
+export type { Conf, LuxBrand } from './lux.config';
 
 export {
   AccordionRoot,

package/src/input.tsx

@@ -1,3 +1,4 @@
+import { Input as GuiInput } from '@hanzo/gui';
 import React from 'react';
 
 import { cn } from './utils';
@@ -34,15 +35,34 @@ type InputVariant = 'outline' | 'filled' | 'unstyled';
 export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
   readonly size?: InputSize;
   readonly variant?: InputVariant;
+  /**
+   * React-Native convention: called with the text value on every change. The gui
+   * Input raises it natively; on web we bridge it off `onChange`, so callers
+   * using EITHER API get updates on either platform.
+   */
+  readonly onChangeText?: (text: string) => void;
 }
 
+// gui's Input — a real `<input>` on web, a real TextInput on native (soft
+// keyboard, `returnKeyType`, autofill, IME) — wearing the Lux size/variant
+// classes. `size` stays the Lux scale and never reaches the primitive, whose
+// `size` is a gui SizeToken.
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ size = 'md', variant = 'outline', className, ...rest }, ref) => {
+  ({ size = 'md', variant = 'outline', className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>): void => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [ onChange, onChangeText ],
+    );
     return (
-      <input
-        ref={ ref }
+      <GuiInput
+        ref={ ref as never }
+        unstyled
         className={ cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className) }
-        { ...rest }
+        { ...(rest as object) }
+        onChange={ handleChange as never }
       />
     );
   },