@xenosystem/components 0.3.0 → 0.3.1

package/dist/auth/index.d.ts

@@ -122,12 +122,6 @@ declare function OrDivider({ children }: {
     children?: string;
 }): react.JSX.Element;
 
-/**
- * `EmailDisclosure` — the divider that is a BUTTON. On the origin page the email/password form starts
- * collapsed because it is the minority path (most people press a provider), so the "or continue with
- * email" rule opens it. A real button with `aria-expanded`/`aria-controls`, never a styled span, so it is
- * keyboard-reachable and announced as what it is.
- */
 interface EmailDisclosureProps {
     open: boolean;
     onToggle: () => void;

package/dist/auth/index.js

@@ -1,4 +1,5 @@
 // src/auth/styles.ts
+import { useInsertionEffect } from "react";
 var STYLE_ID = "xeno-components-auth";
 var CSS = `
 .xc-auth{position:absolute;inset:0;display:flex;background:var(--xeno-canvas);color:var(--xeno-text);font-family:var(--xeno-font-sans);-webkit-font-smoothing:antialiased;overflow:hidden}
@@ -45,7 +46,7 @@ var CSS = `
 .xc-cred__mode{width:100%}
 .xc-cred__collapse{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--xeno-dur-entrance) var(--xeno-ease),opacity var(--xeno-dur-entrance) var(--xeno-ease)}
 .xc-cred__collapse[data-open=false]{grid-template-rows:0fr;opacity:0}
-.xc-cred__collapse > *{overflow:hidden;min-height:0}
+.xc-cred__collapseIn{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:24px}
 .xc-cred__fields{display:flex;flex-direction:column;gap:16px}
 .xc-cred__labelRow{display:flex;justify-content:space-between;align-items:baseline}
 .xc-cred__labelRow a{font-size:12px;color:var(--xeno-muted);text-decoration:none}
@@ -84,6 +85,11 @@ function ensureAuthStyles() {
   style.textContent = CSS;
   document.head.appendChild(style);
 }
+function useAuthStyles() {
+  useInsertionEffect(() => {
+    ensureAuthStyles();
+  }, []);
+}
 
 // src/auth/XenoMark.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -99,6 +105,7 @@ function XenoMark() {
 // src/auth/AuthHero.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function AuthHero({ headline, lead, stats, imageSrc, compact }) {
+  useAuthStyles();
   return /* @__PURE__ */ jsxs2("div", { className: "xc-hero", "data-xc": "auth-hero", children: [
     imageSrc && /* @__PURE__ */ jsx2("img", { className: "xc-hero__img", src: imageSrc, alt: "", draggable: false }),
     /* @__PURE__ */ jsxs2("div", { className: "xc-hero__in", children: [
@@ -128,6 +135,7 @@ import { useEffect, useState } from "react";
 import { Button } from "@xenosystem/elements-react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SignInForm({ tag, title, body, actions, note, warning, identity, animate = true, phase }) {
+  useAuthStyles();
   const [visible, setVisible] = useState(!animate);
   useEffect(() => {
     if (!animate) return;
@@ -191,6 +199,7 @@ var L = {
   signup: "Sign Up"
 };
 function CredentialForm({ mode, onModeChange, values, onChange, errors = {}, submitting = false, onSubmit, title, body, before, after, labels, passwordRules, passwordAside, open = true, id = "xc-credential-fields" }) {
+  useAuthStyles();
   const [showPassword, setShowPassword] = useState3(false);
   const [passwordFocused, setPasswordFocused] = useState3(false);
   const showRules = mode === "signup" && !!passwordRules?.length && (passwordFocused || values.password.length > 0);
@@ -217,35 +226,37 @@ function CredentialForm({ mode, onModeChange, values, onChange, errors = {}, sub
       }
     ),
     before,
-    /* @__PURE__ */ jsx5("div", { className: "xc-cred__collapse", "data-open": open, id, "aria-hidden": !open, children: /* @__PURE__ */ jsxs5("div", { className: "xc-cred__fields", children: [
-      /* @__PURE__ */ jsx5("div", { className: "xc-cred__reveal", "data-open": mode === "signup", "aria-hidden": mode !== "signup", children: /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
-        /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.name }),
-        /* @__PURE__ */ jsx5(TextInput, { size: "lg", value: values.name, onChange: set("name"), placeholder: "Your name", autoComplete: "name", tabIndex: mode === "signup" && open ? 0 : -1, "aria-invalid": !!errors.name, "data-field": "name" }),
-        errors.name && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.name })
-      ] }) }),
-      /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
-        /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.email }),
-        /* @__PURE__ */ jsx5(TextInput, { size: "lg", type: "email", value: values.email, onChange: set("email"), placeholder: "you@example.com", autoComplete: "email", required: true, tabIndex: open ? 0 : -1, "aria-invalid": !!errors.email, "data-field": "email" }),
-        errors.email && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.email })
-      ] }),
-      /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
-        /* @__PURE__ */ jsxs5("span", { className: "xc-cred__labelRow", children: [
-          /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.password }),
-          passwordAside
+    /* @__PURE__ */ jsx5("div", { className: "xc-cred__collapse", "data-open": open, id, "aria-hidden": !open, children: /* @__PURE__ */ jsxs5("div", { className: "xc-cred__collapseIn", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "xc-cred__fields", children: [
+        /* @__PURE__ */ jsx5("div", { className: "xc-cred__reveal", "data-open": mode === "signup", "aria-hidden": mode !== "signup", children: /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
+          /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.name }),
+          /* @__PURE__ */ jsx5(TextInput, { size: "lg", value: values.name, onChange: set("name"), placeholder: "Your name", autoComplete: "name", tabIndex: mode === "signup" && open ? 0 : -1, "aria-invalid": !!errors.name, "data-field": "name" }),
+          errors.name && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.name })
+        ] }) }),
+        /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
+          /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.email }),
+          /* @__PURE__ */ jsx5(TextInput, { size: "lg", type: "email", value: values.email, onChange: set("email"), placeholder: "you@example.com", autoComplete: "email", required: true, tabIndex: open ? 0 : -1, "aria-invalid": !!errors.email, "data-field": "email" }),
+          errors.email && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.email })
         ] }),
-        /* @__PURE__ */ jsxs5("span", { className: "xc-cred__pw", children: [
-          /* @__PURE__ */ jsx5(TextInput, { size: "lg", type: showPassword ? "text" : "password", value: values.password, onChange: set("password"), onFocus: () => setPasswordFocused(true), onBlur: () => setPasswordFocused(false), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: mode === "signup" ? "new-password" : "current-password", required: true, "aria-invalid": !!errors.password, "data-field": "password" }),
-          /* @__PURE__ */ jsx5(Button2, { type: "button", variant: "ghost", size: "sm", className: "xc-cred__eye", onClick: () => setShowPassword((v) => !v), "aria-label": showPassword ? "Hide password" : "Show password", "aria-pressed": showPassword, children: showPassword ? "Hide" : "Show" })
-        ] }),
-        errors.password && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.password }),
-        passwordRules && /* @__PURE__ */ jsx5("ul", { className: "xc-cred__rules", "data-open": showRules, "aria-live": "polite", children: passwordRules.map((r, i) => /* @__PURE__ */ jsxs5("li", { className: "xc-cred__rule", "data-met": r.met, style: { transitionDelay: `${i * 60}ms` }, children: [
-          /* @__PURE__ */ jsx5("svg", { className: "xc-cred__ruleMark", viewBox: "0 0 16 16", "aria-hidden": "true", children: r.met ? /* @__PURE__ */ jsx5("path", { d: "M3.5 8.5l3 3 6-6", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }) : /* @__PURE__ */ jsx5("rect", { x: "4", y: "7.25", width: "8", height: "1.5", fill: "currentColor" }) }),
-          /* @__PURE__ */ jsx5("span", { children: r.label })
-        ] }, r.label)) })
-      ] })
+        /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
+          /* @__PURE__ */ jsxs5("span", { className: "xc-cred__labelRow", children: [
+            /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.password }),
+            passwordAside
+          ] }),
+          /* @__PURE__ */ jsxs5("span", { className: "xc-cred__pw", children: [
+            /* @__PURE__ */ jsx5(TextInput, { size: "lg", type: showPassword ? "text" : "password", value: values.password, onChange: set("password"), onFocus: () => setPasswordFocused(true), onBlur: () => setPasswordFocused(false), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", tabIndex: open ? 0 : -1, autoComplete: mode === "signup" ? "new-password" : "current-password", required: true, "aria-invalid": !!errors.password, "data-field": "password" }),
+            /* @__PURE__ */ jsx5(Button2, { type: "button", variant: "ghost", size: "sm", className: "xc-cred__eye", tabIndex: open ? 0 : -1, onClick: () => setShowPassword((v) => !v), "aria-label": showPassword ? "Hide password" : "Show password", "aria-pressed": showPassword, children: showPassword ? "Hide" : "Show" })
+          ] }),
+          errors.password && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.password }),
+          passwordRules && /* @__PURE__ */ jsx5("ul", { className: "xc-cred__rules", "data-open": showRules, "aria-live": "polite", children: passwordRules.map((r, i) => /* @__PURE__ */ jsxs5("li", { className: "xc-cred__rule", "data-met": r.met, style: { transitionDelay: `${i * 60}ms` }, children: [
+            /* @__PURE__ */ jsx5("svg", { className: "xc-cred__ruleMark", viewBox: "0 0 16 16", "aria-hidden": "true", children: r.met ? /* @__PURE__ */ jsx5("path", { d: "M3.5 8.5l3 3 6-6", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }) : /* @__PURE__ */ jsx5("rect", { x: "4", y: "7.25", width: "8", height: "1.5", fill: "currentColor" }) }),
+            /* @__PURE__ */ jsx5("span", { children: r.label })
+          ] }, r.label)) })
+        ] })
+      ] }),
+      errors.form && /* @__PURE__ */ jsx5("p", { className: "xc-form__warn", role: "alert", children: errors.form }),
+      /* @__PURE__ */ jsx5("div", { className: "xc-form__actions", children: /* @__PURE__ */ jsx5(Button2, { type: "submit", variant: "primary", size: "lg", busy: submitting, tabIndex: open ? 0 : -1, "data-intent": "submit", children: mode === "signin" ? t.submitSignIn : t.submitSignUp }) })
     ] }) }),
-    errors.form && /* @__PURE__ */ jsx5("p", { className: "xc-form__warn", role: "alert", children: errors.form }),
-    /* @__PURE__ */ jsx5("div", { className: "xc-form__actions", children: /* @__PURE__ */ jsx5(Button2, { type: "submit", variant: "primary", size: "lg", busy: submitting, "data-intent": "submit", children: mode === "signin" ? t.submitSignIn : t.submitSignUp }) }),
     after && /* @__PURE__ */ jsx5("div", { className: "xc-cred__after", children: after })
   ] });
 }
@@ -265,18 +276,21 @@ function Mark({ p }) {
   return /* @__PURE__ */ jsx6("svg", { className: "xc-social__mark", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) });
 }
 function SocialSignIn({ providers = ["google", "github", "x"], onSelect, disabled }) {
+  useAuthStyles();
   return /* @__PURE__ */ jsx6("div", { className: "xc-social", "data-xc": "social-sign-in", role: "group", "aria-label": "Continue with", children: providers.map((p) => /* @__PURE__ */ jsx6(Button3, { variant: "quiet", size: "lg", disabled, onClick: () => onSelect(p), "aria-label": `Continue with ${NAMES[p]}`, "data-provider": p, children: /* @__PURE__ */ jsx6(Mark, { p }) }, p)) });
 }
 
 // src/auth/OrDivider.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 function OrDivider({ children = "or continue with email" }) {
+  useAuthStyles();
   return /* @__PURE__ */ jsx7("div", { className: "xc-or", role: "separator", "aria-label": children, children: /* @__PURE__ */ jsx7("span", { className: "xc-or__label", children }) });
 }
 
 // src/auth/EmailDisclosure.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function EmailDisclosure({ open, onToggle, controls, openLabel = "hide email sign-in", closedLabel = "or continue with email" }) {
+  useAuthStyles();
   return /* @__PURE__ */ jsx8("div", { className: "xc-or", "data-xc": "email-disclosure", children: /* @__PURE__ */ jsxs7("button", { type: "button", className: "xc-or__label xc-or__btn", onClick: onToggle, "aria-expanded": open, "aria-controls": controls, children: [
     open ? openLabel : closedLabel,
     /* @__PURE__ */ jsx8("svg", { className: "xc-or__caret", "data-open": open, viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx8("path", { d: "M4 6l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) })

package/dist/index.d.ts

@@ -3,6 +3,6 @@
  * Families are subpaths: `@xenosystem/components/auth`, `/navigation`, `/feedback`, `/data`.
  * This root re-exports nothing on purpose: import the family you use, so a bundle carries only it.
  */
-declare const COMPONENTS_VERSION = "0.3.0";
+declare const COMPONENTS_VERSION = "0.3.1";
 
 export { COMPONENTS_VERSION };

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-var COMPONENTS_VERSION = "0.3.0";
+var COMPONENTS_VERSION = "0.3.1";
 export {
   COMPONENTS_VERSION
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/components",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "XENO Components — rung 2 of the front ladder: molecules composed from @xenosystem/elements, with no host contract. Families as subpaths: /auth, /navigation, /feedback, /data.",
   "license": "UNLICENSED",
   "type": "module",