@luxfi/ui 7.4.6 → 7.4.8

package/dist/auth.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { WhiteLabel } from './white-label.js';
+
+/**
+ * The ONE callback route. Registered as `https://<host>/auth/callback` for
+ * every browser client in the fleet — never under `/api/`, never per app.
+ */
+declare const CALLBACK_PATH = "/auth/callback";
+/** What `handleCallback` hands back. Structural, so the SDK's types stay its own. */
+interface AuthResult {
+    readonly token: {
+        readonly accessToken: string;
+    };
+    readonly redirect: string;
+}
+/**
+ * Point `@hanzo/iam` at the issuer and client this HOST resolves to.
+ *
+ * Idempotent per config, browser-only, and safe to call from anywhere — which
+ * is the point: no ordering rule between a provider's effect and a child's.
+ */
+declare function configureAuth(wl: WhiteLabel): void;
+interface Auth {
+    /** Start the PKCE login. `redirect` is where to land afterwards. */
+    readonly signIn: (redirect?: string) => void;
+    /** RP-initiated logout + local token clear. */
+    readonly signOut: () => void;
+    /** Finish the login on the callback route. */
+    readonly complete: () => Promise<AuthResult>;
+    /** The host-resolved brand, issuer and client these verbs are bound to. */
+    readonly whiteLabel: WhiteLabel;
+}
+/**
+ * The three auth verbs, bound to the current host.
+ *
+ * Configuration happens during render, before any caller can use a verb, so a
+ * callback route works whether or not it sits under an `<AuthProvider>`.
+ */
+declare function useAuth(defaultRedirect?: string): Auth;
+interface AuthProviderProps {
+    readonly children: React.ReactNode;
+    /** Where a successful sign-in lands. Default `/`. */
+    readonly redirect?: string;
+    /**
+     * Anything the surface must tear down alongside the IAM session — the mirror
+     * of {@link AuthCallbackProps.onSignedIn}. A surface that mints its own
+     * downstream credential from the IAM token drops it here; the IAM session
+     * itself is never the app's to manage.
+     */
+    readonly onSignOut?: () => void;
+}
+/**
+ * `IdentityProvider` with the credential half filled in.
+ *
+ * A surface's root becomes `<AppProvider><AuthProvider>…` and nothing else —
+ * no `configureIam`, no `startLogin`, no per-app token keys.
+ */
+declare const AuthProvider: ({ children, redirect, onSignOut }: AuthProviderProps) => React.ReactElement;
+interface AuthCallbackProps {
+    /**
+     * Anything the surface must do with the fresh session before it navigates —
+     * e.g. the MPC dashboard mints its own API JWT from the IAM token. Throwing
+     * here does NOT fail the sign-in: the user is signed in, and a downstream
+     * service being unreachable is that service's problem to report.
+     */
+    readonly onSignedIn?: (result: AuthResult) => void | Promise<void>;
+    /** Router hop. Defaults to a full replace, which needs no router. */
+    readonly navigate?: (to: string) => void;
+    /** Where to go when the callback carried no stashed redirect. */
+    readonly fallback?: string;
+    /** Sign-in entry point offered after a failure. */
+    readonly retryPath?: string;
+}
+/**
+ * The ONE callback page body: verify state, exchange the code, go where the
+ * user was headed. Mount it at {@link CALLBACK_PATH}.
+ */
+declare const AuthCallback: ({ onSignedIn, navigate, fallback, retryPath, }: AuthCallbackProps) => React.ReactElement;
+
+export { type Auth, AuthCallback, type AuthCallbackProps, AuthProvider, type AuthProviderProps, type AuthResult, CALLBACK_PATH, configureAuth, useAuth };

package/dist/auth.js

@@ -0,0 +1,456 @@
+"use client";
+import { configureIam, handleCallback, logout, startLogin } from '@hanzo/iam/browser';
+import * as React2 from 'react';
+import React2__default from 'react';
+import '@hanzo/gui';
+import { QueryClient } from '@tanstack/react-query';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/white-label.ts
+var LUX_BRAND = {
+  lux: "#7000FF",
+  zoo: "#6C5EFB",
+  hanzo: "#EA580C",
+  pars: "#1C3879"};
+var PARS_GOLD = "#C8A45C";
+var ORGS = {
+  lux: {
+    org: "lux",
+    name: "Lux",
+    domain: "lux.network",
+    iamDomain: "lux.id",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  zoo: {
+    org: "zoo",
+    name: "Zoo",
+    domain: "zoo.ngo",
+    // Zoo's issuer is `zoolabs.id` — the one row where it is not `<org>.id`,
+    // and the one every hand-rolled branding map gets wrong. `id.zoo.network`
+    // ANSWERS, which is why it keeps being copied around, but it is an alias:
+    // its own discovery document advertises
+    //   issuer                  https://zoolabs.id
+    //   authorization_endpoint  https://zoolabs.id/v1/iam/oauth/authorize
+    //   jwks_uri                https://zoolabs.id/v1/iam/.well-known/jwks
+    // so a client configured on the alias validates `iss` against a string the
+    // IdP never emits and rejects every token it is given — the exact shape of
+    // the lux.id outage. `zoo.id` is not an IdP at all (no discovery document).
+    iamDomain: "zoolabs.id",
+    accent: LUX_BRAND.zoo,
+    accentForeground: "#FFFFFF"
+  },
+  bootnode: {
+    org: "bootnode",
+    name: "Bootnode",
+    domain: "bootno.de",
+    iamDomain: "id.bootno.de",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  hanzo: {
+    org: "hanzo",
+    name: "Hanzo",
+    domain: "hanzo.ai",
+    iamDomain: "hanzo.id",
+    accent: LUX_BRAND.hanzo,
+    accentForeground: "#FFFFFF"
+  },
+  pars: {
+    org: "pars",
+    name: "Pars",
+    domain: "pars.id",
+    iamDomain: "pars.id",
+    accent: LUX_BRAND.pars,
+    accentForeground: PARS_GOLD
+  }
+};
+var DOMAIN_ORG = [
+  ["lux.network", "lux"],
+  ["lux.cloud", "lux"],
+  ["lux.id", "lux"],
+  ["lux.finance", "lux"],
+  ["lux.market", "lux"],
+  ["lux.exchange", "lux"],
+  ["zoo.ngo", "zoo"],
+  ["zoo.network", "zoo"],
+  ["zoo.cloud", "zoo"],
+  ["zoolabs.id", "zoo"],
+  ["hanzo.ai", "hanzo"],
+  ["hanzo.cloud", "hanzo"],
+  ["hanzo.id", "hanzo"],
+  ["pars.id", "pars", "app"],
+  ["pars.network", "pars", "app"],
+  ["parsdao.org", "pars", "app"],
+  ["bootno.de", "bootnode", "platform"]
+];
+var DEFAULT_ORG = "lux";
+function normalizeHost(host) {
+  const noPort = host.trim().toLowerCase().split(":")[0] ?? "";
+  return noPort.replace(/\.$/, "");
+}
+function isUnder(host, domain) {
+  return host === domain || host.endsWith(`.${domain}`);
+}
+function matchDomain(host) {
+  let best;
+  for (const entry of DOMAIN_ORG) {
+    if (isUnder(host, entry[0]) && (!best || entry[0].length > best[0].length)) {
+      best = entry;
+    }
+  }
+  return best;
+}
+function appSlug(host, domain, pinned) {
+  if (pinned) return pinned;
+  const sub = host === domain ? "" : host.slice(0, -(domain.length + 1));
+  const leftmost = sub.split(".")[0] ?? "";
+  if (leftmost && leftmost !== "www") return leftmost;
+  const label = domain.split(".")[0] ?? "";
+  const tld = domain.split(".").slice(1).join(".");
+  return tld.split(".")[0] || label;
+}
+function isLocal(host) {
+  return host === "localhost" || host.endsWith(".localhost") || host === "127.0.0.1" || host === "0.0.0.0" || host === "[::1]" || host.endsWith(".local");
+}
+function resolveWhiteLabel(host) {
+  const h = normalizeHost(host ?? "");
+  const match = h ? matchDomain(h) : void 0;
+  const org = match ? match[1] : DEFAULT_ORG;
+  const identity = ORGS[org];
+  const app = match ? appSlug(h, match[0], match[2]) : h && isLocal(h) ? "local" : "app";
+  return {
+    ...identity,
+    host: h,
+    app,
+    theme: `dark_${org}`,
+    issuer: `https://${identity.iamDomain}`,
+    clientId: `${org}-${app}`
+  };
+}
+
+// src/iam.ts
+var IamError = class extends Error {
+  constructor(message, status, unauthenticated) {
+    super(message);
+    this.name = "IamError";
+    this.status = status;
+    this.unauthenticated = unauthenticated;
+  }
+};
+var SIGNED_OUT = /please sign in|authentication required|unauthorized/i;
+function isSignedOut(status, msg) {
+  return status === 401 || SIGNED_OUT.test(msg);
+}
+function iamBase(host) {
+  const wl = typeof host === "object" && host !== null ? host : resolveWhiteLabel(host);
+  return `${wl.issuer}/v1/iam`;
+}
+async function read(call, verb, params) {
+  const url = new URL(`${call.base}/${verb}`);
+  for (const [k, v] of Object.entries(params)) url.searchParams.set(k, String(v));
+  let res;
+  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) {
+    throw new IamError(e instanceof Error ? e.message : "IAM unreachable", 0, false);
+  }
+  const body = await res.json().catch(() => ({}));
+  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;
+}
+var IAM_PAGE_SIZE = 20;
+var iam = {
+  /** The signed-in principal, or null when there is no session. */
+  async account(call) {
+    try {
+      const data = await read(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, page = 0, query = "", pageSize = IAM_PAGE_SIZE) {
+    const params = {
+      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(call, "get-organizations", params) ?? [];
+  },
+  /** One organization by name. */
+  async organization(call, name) {
+    return await read(call, "get-organization", { id: `admin/${name}` }) ?? null;
+  },
+  /** Members of an organization. */
+  async users(call, org) {
+    return await read(call, "get-users", { owner: org }) ?? [];
+  },
+  /** The organization's projects — IAM keys this read by `organization`. */
+  async projects(call, org) {
+    return await read(call, "get-organization-projects", { organization: org }) ?? [];
+  }
+};
+new QueryClient({
+  defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 3e4 } }
+});
+var WhiteLabelContext = React2__default.createContext(resolveWhiteLabel(""));
+var useWhiteLabel = () => React2__default.useContext(WhiteLabelContext);
+var IAM_TOKEN_KEY = "hanzo_iam_access_token";
+function storedToken() {
+  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 {
+    }
+  }
+  return null;
+}
+function clearStoredTokens() {
+  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 {
+    }
+  }
+}
+var defaultAuth = {};
+var scopeKey = (host, kind) => `lux-ui:${kind}:${host}`;
+function readScope(host, kind) {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage.getItem(scopeKey(host, kind));
+  } catch {
+    return null;
+  }
+}
+function writeScope(host, kind, value) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(scopeKey(host, kind), value);
+  } catch {
+  }
+}
+var IdentityContext = React2.createContext(null);
+var IdentityProvider = ({
+  children,
+  auth = defaultAuth,
+  loginPath = "/login"
+}) => {
+  const whiteLabel = useWhiteLabel();
+  const base = React2.useMemo(() => iamBase(whiteLabel), [whiteLabel]);
+  const [status, setStatus] = React2.useState("loading");
+  const [account, setAccount] = React2.useState(null);
+  const [orgs, setOrgs] = React2.useState([]);
+  const [projects, setProjects] = React2.useState([]);
+  const [error, setError] = React2.useState(null);
+  const [orgName, setOrgName] = React2.useState(null);
+  const [projectName, setProjectName] = React2.useState(null);
+  const [epoch, setEpoch] = React2.useState(0);
+  React2.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);
+        const rows = await iam.organizations(call).catch((e) => {
+          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]);
+  const org = React2.useMemo(() => {
+    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]);
+  React2.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(() => []);
+      if (live) setProjects(rows);
+    })();
+    return () => {
+      live = false;
+      ac.abort();
+    };
+  }, [base, auth, org, epoch]);
+  const project = React2.useMemo(() => {
+    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 = React2.useMemo(() => ({
+    status,
+    account,
+    orgs,
+    org,
+    projects,
+    project,
+    error,
+    whiteLabel,
+    setOrg: (name) => {
+      writeScope(whiteLabel.host, "org", name);
+      setOrgName(name);
+      setProjectName(null);
+    },
+    setProject: (name) => {
+      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 /* @__PURE__ */ jsx(IdentityContext.Provider, { value, children });
+};
+var CALLBACK_PATH = "/auth/callback";
+function configureAuth(wl) {
+  if (typeof window === "undefined") return;
+  configureIam({
+    issuer: wl.issuer,
+    clientId: wl.clientId,
+    // The SDK already defaults to `${origin}${CALLBACK_PATH}`; naming it here
+    // makes the fleet-wide invariant one readable, testable line instead of a
+    // default nobody can see.
+    redirect: `${window.location.origin}${CALLBACK_PATH}`
+  });
+}
+function useAuth(defaultRedirect = "/") {
+  const whiteLabel = useWhiteLabel();
+  configureAuth(whiteLabel);
+  return React2.useMemo(() => ({
+    signIn: (redirect = defaultRedirect) => void startLogin({ redirect }),
+    signOut: () => void logout(),
+    complete: () => handleCallback(),
+    whiteLabel
+  }), [whiteLabel, defaultRedirect]);
+}
+var AuthProvider = ({ children, redirect = "/", onSignOut }) => {
+  const auth = useAuth(redirect);
+  const identityAuth = React2.useMemo(() => ({
+    signIn: () => auth.signIn(redirect),
+    signOut: () => {
+      onSignOut?.();
+      auth.signOut();
+    }
+  }), [auth, redirect, onSignOut]);
+  return /* @__PURE__ */ jsx(IdentityProvider, { auth: identityAuth, children });
+};
+var AuthCallback = ({
+  onSignedIn,
+  navigate,
+  fallback = "/",
+  retryPath = "/login"
+}) => {
+  const auth = useAuth();
+  const [error, setError] = React2.useState(null);
+  React2.useEffect(() => {
+    let live = true;
+    void (async () => {
+      try {
+        const result = await auth.complete();
+        if (!live) return;
+        try {
+          await onSignedIn?.(result);
+        } catch {
+        }
+        if (!live) return;
+        const to = result.redirect || fallback;
+        if (navigate) navigate(to);
+        else window.location.replace(to);
+      } catch (e) {
+        if (live) setError(e instanceof Error ? e.message : "Authentication failed");
+      }
+    })();
+    return () => {
+      live = false;
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-[50vh] items-center justify-center px-4", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm text-center", children: error ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-lg font-semibold text-[var(--color-text-error)]", children: "Sign-in failed" }),
+    /* @__PURE__ */ jsx("p", { className: "mb-6 text-sm text-[var(--color-text-secondary)]", children: error }),
+    /* @__PURE__ */ jsx("a", { href: retryPath, className: "text-sm underline underline-offset-4", children: "Try again" })
+  ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: "Completing sign in\u2026" }) }) });
+};
+
+export { AuthCallback, AuthProvider, CALLBACK_PATH, configureAuth, useAuth };

package/dist/badge.cjs

@@ -146,11 +146,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React3__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -170,7 +166,7 @@ var Skeleton = React3__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -182,7 +178,7 @@ var Skeleton = React3__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -313,7 +309,7 @@ var Tooltip = React3__namespace.forwardRef(
             {
               ref: triggerRef,
               asChild: true,
-              ...isMobile ? { onPress: handleTriggerClick } : {},
+              ...isMobile ? { onClick: handleTriggerClick } : {},
               ...triggerProps,
               children
             }

package/dist/badge.js

@@ -125,11 +125,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React3.forwardRef(
   function Skeleton2(props, ref) {
@@ -149,7 +145,7 @@ var Skeleton = React3.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -161,7 +157,7 @@ var Skeleton = React3.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -292,7 +288,7 @@ var Tooltip = React3.forwardRef(
             {
               ref: triggerRef,
               asChild: true,
-              ...isMobile ? { onPress: handleTriggerClick } : {},
+              ...isMobile ? { onClick: handleTriggerClick } : {},
               ...triggerProps,
               children
             }

package/dist/button.cjs

@@ -145,11 +145,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React2__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -169,7 +165,7 @@ var Skeleton = React2__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -181,7 +177,7 @@ var Skeleton = React2__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/button.js

@@ -123,11 +123,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React2.forwardRef(
   function Skeleton2(props, ref) {
@@ -147,7 +143,7 @@ var Skeleton = React2.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -159,7 +155,7 @@ var Skeleton = React2.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children