@xenosystem/components 0.2.1 → 0.3.1

package/dist/auth/index.d.ts

@@ -91,10 +91,23 @@ interface CredentialFormProps {
     before?: ReactNode;
     /** Rendered under the submit — "Forgot password?", terms, the other-mode link. */
     after?: ReactNode;
+    /** Live password rules (sign-up): shown while the field is focused or partly filled — never before,
+     *  a list of things you have failed before you typed is a telling-off for a crime not yet committed. */
+    passwordRules?: {
+        label: string;
+        met: boolean;
+    }[];
+    /** Rendered beside the password label — the page's "Forgot?" link on sign-in. */
+    passwordAside?: ReactNode;
+    /** When false, the fields collapse (0fr grid) and leave the accessibility tree; the page's disclosure
+     *  controls it. Default open. */
+    open?: boolean;
+    /** id for the collapsible region (matched by `EmailDisclosure.controls`). */
+    id?: string;
     /** Copy overrides; defaults are the platform page's. */
     labels?: Partial<Record<'name' | 'email' | 'password' | 'submitSignIn' | 'submitSignUp' | 'signin' | 'signup', string>>;
 }
-declare function CredentialForm({ mode, onModeChange, values, onChange, errors, submitting, onSubmit, title, body, before, after, labels }: CredentialFormProps): react.JSX.Element;
+declare function CredentialForm({ mode, onModeChange, values, onChange, errors, submitting, onSubmit, title, body, before, after, labels, passwordRules, passwordAside, open, id }: CredentialFormProps): react.JSX.Element;
 
 type SocialProvider = 'google' | 'github' | 'x';
 interface SocialSignInProps {
@@ -109,6 +122,16 @@ declare function OrDivider({ children }: {
     children?: string;
 }): react.JSX.Element;
 
+interface EmailDisclosureProps {
+    open: boolean;
+    onToggle: () => void;
+    /** id of the form region it controls. */
+    controls: string;
+    openLabel?: string;
+    closedLabel?: string;
+}
+declare function EmailDisclosure({ open, onToggle, controls, openLabel, closedLabel }: EmailDisclosureProps): react.JSX.Element;
+
 declare const STATES: {
     id: string;
     props: SignInFormProps;
@@ -120,4 +143,4 @@ declare const CREDENTIAL_STATES: {
     props: CredentialStateProps;
 }[];
 
-export { AuthDoor, type AuthDoorProps, AuthHero, type AuthHeroProps, type AuthHeroStat, CREDENTIAL_STATES, type CredentialErrors, CredentialForm, type CredentialFormProps, type CredentialMode, type CredentialValues, LicencePlate, OrDivider, STATES, type SignInAction, SignInForm, type SignInFormProps, type SocialProvider, SocialSignIn, type SocialSignInProps, XenoMark, ensureAuthStyles };
+export { AuthDoor, type AuthDoorProps, AuthHero, type AuthHeroProps, type AuthHeroStat, CREDENTIAL_STATES, type CredentialErrors, CredentialForm, type CredentialFormProps, type CredentialMode, type CredentialValues, EmailDisclosure, type EmailDisclosureProps, LicencePlate, OrDivider, STATES, type SignInAction, SignInForm, type SignInFormProps, type SocialProvider, SocialSignIn, type SocialSignInProps, XenoMark, ensureAuthStyles };

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}
@@ -43,7 +44,23 @@ var CSS = `
 .xc-cred{width:100%;max-width:400px;display:flex;flex-direction:column;gap:24px}
 .xc-cred__head .xc-form__h2{font-size:30px}
 .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__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}
+.xc-cred__labelRow a:hover{color:var(--xeno-text)}
+.xc-cred__rules{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--xeno-dur-entrance) var(--xeno-ease),opacity var(--xeno-dur-entrance) var(--xeno-ease)}
+.xc-cred__rules[data-open=true]{grid-template-rows:1fr;opacity:1;margin-top:10px}
+.xc-cred__rules > li{overflow:hidden;min-height:0}
+.xc-cred__rule{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--xeno-muted);transition:color var(--xeno-dur-fast) var(--xeno-ease)}
+.xc-cred__rule[data-met=true]{color:var(--xeno-text)}
+.xc-cred__ruleMark{width:14px;height:14px;flex:none}
+.xc-or__btn{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
+.xc-or__btn:hover{color:var(--xeno-text)}
+.xc-or__caret{width:12px;height:12px;transition:transform var(--xeno-dur-fast) var(--xeno-ease)}
+.xc-or__caret[data-open=true]{transform:rotate(180deg)}
 .xc-cred__reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--xeno-dur-entrance) var(--xeno-ease),opacity var(--xeno-dur-entrance) var(--xeno-ease)}
 .xc-cred__reveal[data-open=true]{grid-template-rows:1fr;opacity:1}
 .xc-cred__reveal > *{overflow:hidden;min-height:0}
@@ -68,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";
@@ -83,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: [
@@ -112,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;
@@ -174,8 +198,11 @@ var L = {
   signin: "Sign In",
   signup: "Sign Up"
 };
-function CredentialForm({ mode, onModeChange, values, onChange, errors = {}, submitting = false, onSubmit, title, body, before, after, labels }) {
+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);
   const t = { ...L, ...labels };
   const set = (k) => (e) => onChange({ ...values, [k]: e.target.value });
   const submit = (e) => {
@@ -199,28 +226,37 @@ function CredentialForm({ mode, onModeChange, values, onChange, errors = {}, sub
       }
     ),
     before,
-    /* @__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" ? 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, "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__ */ jsx5("span", { className: "xc-cred__label", children: t.password }),
-        /* @__PURE__ */ jsxs5("span", { className: "xc-cred__pw", children: [
-          /* @__PURE__ */ jsx5(TextInput, { size: "lg", type: showPassword ? "text" : "password", value: values.password, onChange: set("password"), 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" })
+    /* @__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 })
         ] }),
-        errors.password && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.password })
-      ] })
-    ] }),
-    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 }) }),
+        /* @__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 }) })
+    ] }) }),
     after && /* @__PURE__ */ jsx5("div", { className: "xc-cred__after", children: after })
   ] });
 }
@@ -240,15 +276,27 @@ 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" }) })
+  ] }) });
+}
+
 // src/auth/states.ts
 var STATES = [
   { id: "sign-in", props: { title: "Welcome back", body: "Sign in to your XENO account to use XENO Canvas.", actions: [{ id: "signIn", label: "Sign in to XENO", variant: "primary" }], note: "Your browser opens at xenostudio.ai, where you can continue with Google, GitHub or email. XENO Canvas never sees your password.", animate: false } },
@@ -265,6 +313,8 @@ var CREDENTIAL_STATES = [
   { id: "filled", props: { mode: "signin", values: { name: "", email: "you@example.com", password: "hunter22" }, title: "Welcome back", body: "Enter your credentials to access your account" } },
   { id: "errors", props: { mode: "signup", values: { name: "", email: "not-an-email", password: "123" }, errors: { name: "Please enter your full name", email: "Please enter a valid email address", password: "Password must be at least 6 characters" }, title: "Get started", body: "Create your account and start creating" } },
   { id: "submitting", props: { mode: "signin", values: { name: "", email: "you@example.com", password: "hunter22" }, submitting: true, title: "Welcome back", body: "Enter your credentials to access your account" } },
+  { id: "rules", props: { mode: "signup", values: { name: "Ada", email: "ada@example.com", password: "abcdefgh1" }, passwordRules: [{ label: "Minimum 8 letters", met: true }, { label: "At least one number", met: true }, { label: "At least one special character", met: false }], title: "Get started", body: "Create your account and start creating" } },
+  { id: "collapsed", props: { mode: "signin", values: empty, open: false, title: "Welcome back", body: "Enter your credentials to access your account" } },
   { id: "rejected", props: { mode: "signin", values: { name: "", email: "you@example.com", password: "hunter22" }, errors: { form: "Invalid email or password." }, title: "Welcome back", body: "Enter your credentials to access your account" } }
 ];
 export {
@@ -272,6 +322,7 @@ export {
   AuthHero,
   CREDENTIAL_STATES,
   CredentialForm,
+  EmailDisclosure,
   LicencePlate,
   OrDivider,
   STATES,

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.2.1";
+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.2.1";
+var COMPONENTS_VERSION = "0.3.1";
 export {
   COMPONENTS_VERSION
 };

package/package.json

@@ -1,19 +1,29 @@
 {
   "name": "@xenosystem/components",
-  "version": "0.2.1",
+  "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",
   "sideEffects": false,
   "exports": {
-    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
-    "./auth": { "types": "./dist/auth/index.d.ts", "import": "./dist/auth/index.js" }
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./auth": {
+      "types": "./dist/auth/index.d.ts",
+      "import": "./dist/auth/index.js"
+    }
   },
-  "files": ["dist", "README.md"],
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "prepublishOnly": "node scripts/verify-dist.mjs"
   },
   "peerDependencies": {
     "@xenosystem/elements-react": ">=0.0.1",
@@ -31,5 +41,7 @@
     "typescript": "^5.4.0",
     "vitest": "^4.1.0"
   },
-  "publishConfig": { "access": "public" }
+  "publishConfig": {
+    "access": "public"
+  }
 }