feat: author the auth kit and password field as Layouts

docs/ui-usage.md

@@ -95,7 +95,7 @@ the shared fallback. This works with PathScale Fonts and application-owned font
 - **Color**: ColorPicker, ColorArea, ColorSlider, ColorSwatch(+Picker), ColorWheelFlower, ThemeColorPicker
 - **Overlays**: Modal, Drawer, Popover, Dropdown, Menu, Toast, Disclosure(+Group), Accordion
 - **Data**: Table (headless compound + hooks), plus primitives `useVirtualRows`, `useStreamingBuffer`, `useStreamingSubscription`
-- **Auth kit**: AuthForm, AuthCard, AuthFieldGroup, AuthSubmitButton, AuthFooterLinks, AuthPoweredBy, AuthErrorMessage, AuthSuccessMessage — thin Tailwind-utility wrappers composing Button/Card/fields
+- **Auth kit**: AuthForm, AuthCard, AuthFieldGroup, AuthSubmitButton, AuthFooterLinks, AuthPoweredBy, AuthErrorMessage, AuthSuccessMessage — Layouts composing Button/Card/fields. Their spacing, alignment and tone are recipe parameters (`gap`, `align`, `variant`), so a consumer asks for the presentation it wants rather than restating utility classes. AuthCard exposes `header`, `headings`, `title`, `description`, `branding`, `body` and `footer` as `data-slot` targets.
 - **Visual FX**: MetalBorder (WebGL liquid-metal border; presets `chromatic|silver|gold`, `kind="pill"|"circle"`, `glow`, `strength` 0-100, `theme="dark"|"light"|"auto"`), GlowCard (mouse-tracking glow), NoiseBackground (animated gradient blobs), ImmersiveLanding (full mini-app w/ PWA widgets), VideoPreview, LiveChat, ChatBubble, LanguageSwitcher
 
 Renames from old versions (see `docs/component-migration-map.md`): Loading→Spinner, DropdownSelect→Select, RadialProgress→ProgressCircle, RangeSlider→Slider, Progress→ProgressBar/ProgressCircle. ~40 components removed outright (Carousel, Rating, Steps, Stats, FileInput, …).

layouts.library.json

@@ -5,6 +5,7 @@
   "exports": [
     "Accordion", "AccordionContent", "AccordionIndicator", "AccordionItem", "AccordionRoot", "AccordionTrigger",
     "Alert", "AlertContent", "AlertDescription", "AlertIndicator", "AlertRoot", "AlertTitle",
+    "AuthCard", "AuthErrorMessage", "AuthFieldGroup", "AuthFooterLinks", "AuthForm", "AuthPoweredBy", "AuthSubmitButton", "AuthSuccessMessage",
     "Avatar", "AvatarFallback", "AvatarImage", "AvatarRoot",
     "Badge", "Breadcrumbs", "BreadcrumbsItem", "BreadcrumbsRoot",
     "Button", "ButtonGroup", "ButtonGroupRoot", "ButtonGroupSeparator",
@@ -26,7 +27,7 @@
     "MetalBorder", "Meter", "MeterFill", "MeterOutput", "MeterRoot", "MeterTrack",
     "Modal", "ModalBackdrop", "ModalBody", "ModalCloseTrigger", "ModalContent", "ModalFooter", "ModalHeader", "ModalHeading", "ModalIcon", "ModalRoot", "ModalTrigger",
     "Navbar", "NoiseBackground", "NumberField", "NumberFieldDecrementButton", "NumberFieldGroup", "NumberFieldIncrementButton", "NumberFieldInput", "NumberFieldRoot",
-    "Pagination", "Popover", "ProgressBar", "ProgressCircle", "Radio", "RadioGroup", "RangeCalendar", "ScrollShadow",
+    "Pagination", "PasswordField", "PasswordRequirements", "Popover", "ProgressBar", "ProgressCircle", "Radio", "RadioGroup", "RangeCalendar", "ScrollShadow",
     "SearchField", "SearchFieldClearButton", "SearchFieldGroup", "SearchFieldInput", "SearchFieldRoot", "SearchFieldSearchIcon",
     "Select", "Separator", "SizePicker", "Skeleton", "Slider", "Spinner", "Surface",
     "Table", "TableExpandToggle", "TableInlineConfirm", "TableMobileListView", "TableSortIcon", "TableVirtualSpacerRow",

src/components/auth-card/AuthCard.css

@@ -0,0 +1,44 @@
+@layer components {
+  .auth-card {
+    width: 100%;
+    max-width: 28rem;
+  }
+
+  .auth-card__body {
+    gap: 1.25rem;
+  }
+
+  .auth-card__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  .auth-card__headings {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .auth-card__title {
+    font-size: 1.25rem;
+    line-height: 1.25;
+    font-weight: 600;
+  }
+
+  .auth-card__description {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    opacity: 0.7;
+  }
+
+  .auth-card__branding {
+    flex-shrink: 0;
+  }
+
+  .auth-card__footer {
+    justify-content: flex-start;
+  }
+}

src/components/auth-card/AuthCard.layout.tsx

@@ -0,0 +1,53 @@
+import "./AuthCard.css";
+import { Show, type JSX } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import Card from "../card";
+import type { IComponentBaseProps } from "../types";
+import type { Layout } from "../../lib/layouts";
+import { authCard } from "./AuthCard.recipe";
+
+/* -------------------------------------------------------------------------------------------------
+ * Types
+ * -----------------------------------------------------------------------------------------------*/
+export type AuthCardProps = IComponentBaseProps & {
+  title?: JSX.Element;
+  description?: JSX.Element;
+  children: JSX.Element;
+  footer?: JSX.Element;
+  brandingSlot?: JSX.Element;
+  bodyClass?: string;
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AuthCard
+ *
+ * The header block is omitted entirely when it would be empty, so a card with
+ * only a form does not carry a stray flex row that contributes gap.
+ * -----------------------------------------------------------------------------------------------*/
+export const AuthCardLayout: Layout<typeof authCard, AuthCardProps> = () => (
+  <Card {...slot.root} variant="shadow">
+    <Card.Body {...slot.body} {...{ class: twMerge(slot.body.class, local.bodyClass) }}>
+      <Show when={local.title || local.description || local.brandingSlot}>
+        <div {...slot.header}>
+          <div {...slot.headings}>
+            <Show when={local.title}>
+              <h2 {...slot.title}>{local.title}</h2>
+            </Show>
+            <Show when={local.description}>
+              <p {...slot.description}>{local.description}</p>
+            </Show>
+          </div>
+          <Show when={local.brandingSlot}>
+            <div {...slot.branding}>{local.brandingSlot}</div>
+          </Show>
+        </div>
+      </Show>
+
+      {children}
+    </Card.Body>
+
+    <Show when={local.footer}>
+      <Card.Footer {...slot.footer}>{local.footer}</Card.Footer>
+    </Show>
+  </Card>
+);

src/components/auth-card/AuthCard.recipe.ts

@@ -0,0 +1,16 @@
+import { recipe } from "../../lib/layouts";
+
+export const authCard = recipe({
+  component: "auth-card",
+  element: "div",
+  slots: {
+    root: { base: "auth-card" },
+    body: { base: "auth-card__body" },
+    header: { base: "auth-card__header" },
+    headings: { base: "auth-card__headings" },
+    title: { base: "auth-card__title" },
+    description: { base: "auth-card__description" },
+    branding: { base: "auth-card__branding" },
+    footer: { base: "auth-card__footer" },
+  },
+});

src/components/auth-card/index.ts

@@ -1 +1,2 @@
-export { default as AuthCard, type AuthCardProps } from "./AuthCard";
+export { AuthCardLayout as default, AuthCardLayout as AuthCard } from "./AuthCard.generated";
+export type { AuthCardProps } from "./AuthCard.generated";

src/components/auth-error-message/AuthErrorMessage.css

@@ -0,0 +1,6 @@
+@layer components {
+  .auth-error-message {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}

src/components/auth-error-message/AuthErrorMessage.layout.tsx

@@ -0,0 +1,24 @@
+import "./AuthErrorMessage.css";
+import { Show, type JSX } from "solid-js";
+import Alert from "../alert";
+import type { IComponentBaseProps } from "../types";
+import type { Layout } from "../../lib/layouts";
+import { authErrorMessage } from "./AuthErrorMessage.recipe";
+
+/* -------------------------------------------------------------------------------------------------
+ * Types
+ * -----------------------------------------------------------------------------------------------*/
+export type AuthErrorMessageProps = IComponentBaseProps & {
+  message?: JSX.Element | string | null;
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AuthErrorMessage
+ * -----------------------------------------------------------------------------------------------*/
+export const AuthErrorMessageLayout: Layout<typeof authErrorMessage, AuthErrorMessageProps> = () => (
+  <Show when={local.message != null && local.message !== ""}>
+    <Alert {...slot.root} status="danger" role="alert">
+      {local.message}
+    </Alert>
+  </Show>
+);

src/components/auth-error-message/AuthErrorMessage.recipe.ts

@@ -0,0 +1,7 @@
+import { recipe } from "../../lib/layouts";
+
+export const authErrorMessage = recipe({
+  component: "auth-error-message",
+  element: "div",
+  slots: { root: { base: "auth-error-message" } },
+});

src/components/auth-error-message/index.ts

@@ -1 +1,5 @@
-export { default as AuthErrorMessage, type AuthErrorMessageProps } from "./AuthErrorMessage";
+export {
+  AuthErrorMessageLayout as default,
+  AuthErrorMessageLayout as AuthErrorMessage,
+} from "./AuthErrorMessage.generated";
+export type { AuthErrorMessageProps } from "./AuthErrorMessage.generated";

src/components/auth-field-group/AuthFieldGroup.css

@@ -0,0 +1,19 @@
+@layer components {
+  .auth-field-group {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .auth-field-group--sm {
+    gap: 0.75rem;
+  }
+
+  .auth-field-group--md {
+    gap: 1rem;
+  }
+
+  .auth-field-group--lg {
+    gap: 1.5rem;
+  }
+}

src/components/auth-field-group/AuthFieldGroup.layout.tsx

@@ -0,0 +1,23 @@
+import "./AuthFieldGroup.css";
+import type { JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import type { Layout } from "../../lib/layouts";
+import { authFieldGroup } from "./AuthFieldGroup.recipe";
+
+/* -------------------------------------------------------------------------------------------------
+ * Types
+ * -----------------------------------------------------------------------------------------------*/
+export type AuthFieldGroupGap = "sm" | "md" | "lg";
+
+export type AuthFieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> &
+  IComponentBaseProps & {
+    children: JSX.Element;
+    gap?: AuthFieldGroupGap;
+  };
+
+/* -------------------------------------------------------------------------------------------------
+ * AuthFieldGroup
+ * -----------------------------------------------------------------------------------------------*/
+export const AuthFieldGroupLayout: Layout<typeof authFieldGroup, AuthFieldGroupProps> = () => (
+  <div {...slot.root}>{children}</div>
+);

src/components/auth-field-group/AuthFieldGroup.recipe.ts

@@ -0,0 +1,15 @@
+import { recipe } from "../../lib/layouts";
+
+export const authFieldGroup = recipe({
+  component: "auth-field-group",
+  element: "div",
+  slots: { root: { base: "auth-field-group" } },
+  props: {
+    gap: {
+      sm: "auth-field-group--sm",
+      md: "auth-field-group--md",
+      lg: "auth-field-group--lg",
+    },
+  },
+  defaults: { gap: "md" },
+});

src/components/auth-field-group/index.ts

@@ -1 +1,5 @@
-export { default as AuthFieldGroup, type AuthFieldGroupProps } from "./AuthFieldGroup";
+export {
+  AuthFieldGroupLayout as default,
+  AuthFieldGroupLayout as AuthFieldGroup,
+} from "./AuthFieldGroup.generated";
+export type { AuthFieldGroupProps, AuthFieldGroupGap } from "./AuthFieldGroup.generated";