@a4ui/core 0.37.1 → 0.38.1

package/dist/layout/Aurora.d.ts

@@ -15,6 +15,22 @@ export interface AuroraProps {
      * @default 'blobs'
      */
     variant?: 'blobs' | 'mesh';
+    /**
+     * Blob palette. Each entry is a CSS color (`'#ff6a3d'`, `'oklch(0.7 0.2 40)'`,
+     * `'hsl(var(--brand))'`) or a theme token written as a custom property name
+     * (`'--primary'`, `'--accent'`, `'--success'` ...). Entries are assigned to the
+     * blobs / mesh points in order and repeat when there are fewer colors than
+     * blobs. Defaults to the theme tokens `--primary` / `--accent`, so every theme
+     * still tints it for free.
+     */
+    colors?: string[];
+    /**
+     * Color of the cursor-following glow, same format as a `colors` entry.
+     * @default '--primary'
+     */
+    glowColor?: string;
+    /** Peak opacity of the cursor glow, 0..1. @default 0.1 */
+    glowOpacity?: number;
     class?: string;
 }
 /**

package/dist/layout/EffectsToggle.d.ts

@@ -15,5 +15,5 @@ interface EffectsToggleProps {
  * <EffectsToggle label="Toggle effects" />
  * ```
  */
-export declare function EffectsToggle(props: EffectsToggleProps): import("solid-js").JSX.Element;
+export declare function EffectsToggle(props: EffectsToggleProps): import('solid-js').JSX.Element;
 export {};

package/dist/layout/SpaceBackground.d.ts

@@ -11,4 +11,4 @@
  * <SpaceBackground />
  * ```
  */
-export declare function SpaceBackground(): import("solid-js").JSX.Element;
+export declare function SpaceBackground(): import('solid-js').JSX.Element;

package/dist/motion-CTIBwMCA.js

@@ -0,0 +1,104 @@
+import { clsx as e } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+import { createEffect as n, createSignal as r, onCleanup as i, untrack as a } from "solid-js";
+import { animate as o, inView as s, scroll as c, spring as l, stagger as u } from "motion";
+// src/lib/cn.ts
+function d(...n) {
+	return t(e(n));
+}
+// src/lib/effects.ts
+var f = "a4ui-effects";
+function p() {
+	try {
+		return window.localStorage;
+	} catch {
+		return null;
+	}
+}
+function m() {
+	try {
+		if (new URLSearchParams(window.location.search).get("calm") === "1") return !1;
+	} catch {}
+	let e = p()?.getItem(f);
+	return e === null || e === "1";
+}
+function h(e) {
+	typeof document < "u" && document.documentElement.classList.toggle("calm", !e);
+}
+var g = m();
+h(g);
+var [_, v] = r(g);
+function y() {
+	return _;
+}
+function b() {
+	return !_();
+}
+function x(e) {
+	p()?.setItem(f, e ? "1" : "0"), h(e), v(e);
+}
+// src/lib/motion.ts
+var S = "(prefers-reduced-motion: reduce)";
+function C() {
+	return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia(S).matches;
+}
+var w = "a4ui-motion-forced";
+function T() {
+	try {
+		return window.localStorage;
+	} catch {
+		return null;
+	}
+}
+var [E, D] = r(T()?.getItem(w) === "1");
+typeof document < "u" && document.documentElement.classList.toggle("force-motion", a(E));
+function O() {
+	return E;
+}
+function k(e) {
+	T()?.setItem(w, e ? "1" : "0"), typeof document < "u" && document.documentElement.classList.toggle("force-motion", e), D(e);
+}
+function A() {
+	return b() || C() && !E();
+}
+function j(e, t = 600) {
+	let [s, c] = r(0), l;
+	return n(() => {
+		let n = e();
+		if (l?.stop(), A()) {
+			c(n);
+			return;
+		}
+		let r = a(s);
+		r !== n && (l = o(r, n, {
+			duration: t / 1e3,
+			ease: "easeOut",
+			onUpdate: (e) => c(e)
+		}));
+	}), i(() => l?.stop()), s;
+}
+function M(e, t = {}) {
+	A() || o(e, {
+		opacity: [0, 1],
+		y: [t.y ?? 8, 0]
+	}, {
+		duration: t.duration ?? .32,
+		delay: t.delay ?? 0,
+		ease: "easeOut"
+	});
+}
+function N(e, t = {}) {
+	if (A()) return () => {};
+	e.style.opacity = "0";
+	let n = !1;
+	return s(e, () => {
+		n || (n = !0, o(e, {
+			opacity: [0, 1],
+			y: [t.y ?? 16, 0]
+		}, {
+			duration: t.duration ?? .5,
+			ease: "easeOut"
+		}));
+	}, { amount: t.amount ?? .2 });
+}
+export { A as a, c, u as d, O as f, d as g, y as h, s as i, k as l, x as m, M as n, C as o, b as p, j as r, N as s, o as t, l as u };

package/dist/styles.css

@@ -254,10 +254,11 @@ body {
 }
 
 /* Drawer / Modal drawer-variant slide-over (Kobalte Dialog presence →
-   animationend keyframes, keyed off data-expanded/data-closed like Modal). */
+   animationend keyframes, keyed off data-expanded/data-closed like Modal).
+   --drawer-offscreen is set per side by Drawer (default: off the right edge). */
 @keyframes drawer-in {
   from {
-    transform: translateX(100%);
+    transform: var(--drawer-offscreen, translateX(100%));
   }
   to {
     transform: translateX(0);
@@ -268,7 +269,7 @@ body {
     transform: translateX(0);
   }
   to {
-    transform: translateX(100%);
+    transform: var(--drawer-offscreen, translateX(100%));
   }
 }
 .drawer-content[data-expanded] {
@@ -293,6 +294,112 @@ body {
   }
 }
 
+/* Questionnaire */
+@keyframes questionnaire-step-in {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes questionnaire-step-in-back {
+  from {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* NavigationMenu — Kobalte keys viewport/panel presence off animation names, so
+   these MUST be @keyframes. Panels slide in from the side of the previously
+   open one (data-motion) and are hidden once they have slid out. */
+@keyframes navmenu-viewport-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes navmenu-viewport-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.97);
+  }
+}
+@keyframes navmenu-from-start {
+  from {
+    opacity: 0;
+    transform: translateX(-2.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes navmenu-from-end {
+  from {
+    opacity: 0;
+    transform: translateX(2.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes navmenu-to-start {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(-2.5rem);
+  }
+}
+@keyframes navmenu-to-end {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(2.5rem);
+  }
+}
+.navmenu-viewport[data-expanded] {
+  animation: navmenu-viewport-in 0.2s ease-out;
+}
+.navmenu-viewport[data-closed] {
+  animation: navmenu-viewport-out 0.15s ease-in;
+}
+.navmenu-content[data-motion='from-start'] {
+  animation: navmenu-from-start 0.25s ease-out;
+}
+.navmenu-content[data-motion='from-end'] {
+  animation: navmenu-from-end 0.25s ease-out;
+}
+.navmenu-content[data-motion='to-start'] {
+  animation: navmenu-to-start 0.25s ease-in forwards;
+}
+.navmenu-content[data-motion='to-end'] {
+  animation: navmenu-to-end 0.25s ease-in forwards;
+}
+
 /* A4ui — starfield backdrop styles for <SpaceBackground/>.
  *
  * Extracted from the source project's space-theme.css. Mount SpaceBackground as

package/dist/ui/AspectRatio.d.ts

@@ -0,0 +1,19 @@
+import { JSX, ParentProps } from 'solid-js';
+interface AspectRatioProps extends ParentProps {
+    /** Width divided by height, e.g. `16 / 9`. @default 1 */
+    ratio?: number;
+    class?: string;
+}
+export type { AspectRatioProps };
+/**
+ * Box that keeps a fixed width:height ratio (CSS `aspect-ratio`). Children fill
+ * it; give images/video `object-cover`.
+ *
+ * @example
+ * ```tsx
+ * <AspectRatio ratio={16 / 9} class="w-full overflow-hidden rounded-lg">
+ *   <img src="/cover.jpg" alt="" class="object-cover" />
+ * </AspectRatio>
+ * ```
+ */
+export declare function AspectRatio(props: AspectRatioProps): JSX.Element;

package/dist/ui/Attachment.d.ts

@@ -0,0 +1,70 @@
+import { JSX, ParentProps } from 'solid-js';
+import { ItemSize } from './Item';
+export type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done';
+export type AttachmentOrientation = 'horizontal' | 'vertical';
+interface AttachmentProps extends ParentProps {
+    /** Lifecycle state. `uploading`/`processing` set `aria-busy`; `error` uses destructive tokens. @default 'idle' */
+    state?: AttachmentState;
+    /** Density, forwarded to `Item`. @default 'default' */
+    size?: ItemSize;
+    /** Lay media and text side by side, or stacked. @default 'horizontal' */
+    orientation?: AttachmentOrientation;
+    /**
+     * Upload progress, 0–100. Only used while `state="uploading"`; when omitted
+     * the bar is indeterminate (no `aria-valuenow`).
+     */
+    progress?: number;
+    /** Accessible name of the progress bar. @default 'Uploading' / 'Processing' */
+    progressLabel?: string;
+    class?: string;
+}
+export type { AttachmentProps };
+/**
+ * A file or image attachment: `AttachmentMedia`, an `AttachmentContent` with
+ * title/description and trailing `AttachmentActions`. Group several in an
+ * `AttachmentGroup` (horizontal scroll-snap row).
+ *
+ * @example
+ * ```tsx
+ * <Attachment state="uploading" progress={42}>
+ *   <AttachmentMedia><FileText /></AttachmentMedia>
+ *   <AttachmentContent>
+ *     <AttachmentTitle>roadmap.pdf</AttachmentTitle>
+ *     <AttachmentDescription>42% of 2.4 MB</AttachmentDescription>
+ *   </AttachmentContent>
+ *   <AttachmentActions>
+ *     <AttachmentAction label="Cancel upload"><X /></AttachmentAction>
+ *   </AttachmentActions>
+ * </Attachment>
+ * ```
+ */
+export declare function Attachment(props: AttachmentProps): JSX.Element;
+interface SlotProps extends ParentProps {
+    class?: string;
+}
+/** Leading visual: an icon tile (`icon`, default) or an image thumbnail (`image`). */
+export declare function AttachmentMedia(props: SlotProps & {
+    variant?: 'icon' | 'image';
+}): JSX.Element;
+/** The text column. */
+export declare function AttachmentContent(props: SlotProps): JSX.Element;
+/** File name; truncates on one line. */
+export declare function AttachmentTitle(props: SlotProps): JSX.Element;
+/** Secondary line: size, status or error message. */
+export declare function AttachmentDescription(props: SlotProps): JSX.Element;
+/** Trailing controls. */
+export declare function AttachmentActions(props: SlotProps): JSX.Element;
+interface AttachmentActionProps extends ParentProps {
+    /** Accessible name (required: the button only holds an icon). */
+    label: string;
+    onClick?: (event: MouseEvent) => void;
+    disabled?: boolean;
+    class?: string;
+}
+export type { AttachmentActionProps };
+/** Icon button inside `AttachmentActions`. */
+export declare function AttachmentAction(props: AttachmentActionProps): JSX.Element;
+/** Horizontal scroll-snap row of attachments. */
+export declare function AttachmentGroup(props: SlotProps & {
+    label?: string;
+}): JSX.Element;

package/dist/ui/ButtonGroup.d.ts

@@ -0,0 +1,37 @@
+import { JSX, ParentProps } from 'solid-js';
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+interface ButtonGroupProps extends ParentProps {
+    /** Layout direction. @default 'horizontal' */
+    orientation?: ButtonGroupOrientation;
+    /** Accessible name for the group (recommended). */
+    'aria-label'?: string;
+    class?: string;
+}
+export type { ButtonGroupProps };
+/**
+ * Groups buttons so they share borders; only the outer corners stay rounded.
+ * Renders `role="group"` — pass `aria-label` so it has a name. Children can be
+ * `Button`s, links, a `Dropdown` trigger, `ButtonGroupText` or
+ * `ButtonGroupSeparator`.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup aria-label="Text alignment">
+ *   <Button variant="outline">Left</Button>
+ *   <Button variant="outline">Center</Button>
+ *   <Button variant="outline">Right</Button>
+ * </ButtonGroup>
+ * ```
+ */
+export declare function ButtonGroup(props: ButtonGroupProps): JSX.Element;
+interface ButtonGroupTextProps extends ParentProps {
+    class?: string;
+}
+/** Non-interactive label cell that sits inside a {@link ButtonGroup}. */
+export declare function ButtonGroupText(props: ButtonGroupTextProps): JSX.Element;
+interface ButtonGroupSeparatorProps {
+    class?: string;
+}
+/** Thin divider between buttons that have no border of their own (e.g. primary). */
+export declare function ButtonGroupSeparator(props: ButtonGroupSeparatorProps): JSX.Element;
+export type { ButtonGroupTextProps, ButtonGroupSeparatorProps };

package/dist/ui/ChatMarker.d.ts

@@ -0,0 +1,20 @@
+import { JSX, ParentProps } from 'solid-js';
+export type ChatMarkerVariant = 'default' | 'border' | 'separator';
+interface ChatMarkerProps extends ParentProps {
+    /** `default`: muted text. `border`: bordered pill. `separator`: text between two lines. @default 'default' */
+    variant?: ChatMarkerVariant;
+    /** Optional leading icon; decorative (`aria-hidden`). */
+    icon?: JSX.Element;
+    class?: string;
+}
+export type { ChatMarkerProps };
+/**
+ * Inline system note in a thread, e.g. a date divider or a status change.
+ *
+ * @example
+ * ```tsx
+ * <ChatMarker variant="separator">Yesterday</ChatMarker>
+ * <ChatMarker variant="border" icon={<UserPlus />}>Nova joined</ChatMarker>
+ * ```
+ */
+export declare function ChatMarker(props: ChatMarkerProps): JSX.Element;

package/dist/ui/ChatThread.d.ts

@@ -1,24 +1,48 @@
 import { JSX } from 'solid-js';
+/** Imperative handle handed out through {@link ChatThreadProps.apiRef}. */
+export interface ChatThreadApi {
+    /** Scroll the element carrying `data-message-id={id}` to the top of the view. Throws if there is none. */
+    scrollToMessage: (id: string, options?: {
+        behavior?: ScrollBehavior;
+    }) => void;
+    /** Scroll to the newest content and re-pin the thread to the bottom. */
+    scrollToEnd: (options?: {
+        behavior?: ScrollBehavior;
+    }) => void;
+}
 export interface ChatThreadProps {
     children: JSX.Element;
     /** Max width of the reading column, in px. Defaults to `768`. */
     maxWidth?: number;
-    /** Auto-scroll to the newest message on mount and whenever children change. Defaults to `true`. */
+    /**
+     * Follow new content (appended messages and streamed text) to the bottom,
+     * but only while the reader is already at the bottom. Defaults to `true`.
+     */
     stickToBottom?: boolean;
+    /** Receives the imperative API once on mount. */
+    apiRef?: (api: ChatThreadApi) => void;
+    /** Label of the button shown when new content arrives off-screen. Defaults to `'Jump to latest'`. */
+    jumpLabel?: string;
     class?: string;
 }
 /**
- * Scrollable, centered reading column that stacks chat messages. Layout-only:
- * it renders whatever is passed as `children`, so pair it with your own
- * message bubbles/components.
+ * Scrollable, centered reading column that stacks chat messages. Give message
+ * elements a `data-message-id` (`<Message id="…">` does) to target them with
+ * `apiRef`'s `scrollToMessage`.
+ *
+ * - Appended or streamed content scrolls into view only while the reader is
+ *   pinned to the bottom; otherwise the view stays put and a **Jump to latest**
+ *   button appears.
+ * - Prepending older messages keeps the visible messages where they were.
  *
  * @example
  * ```tsx
- * <ChatThread maxWidth={640}>
- *   <div>Hi! Ask me anything about your itinerary.</div>
- *   <div>What's the weather like in Rivertown this weekend?</div>
- *   <div>Sunny and mild, 18–22°C, light breeze on Saturday.</div>
+ * let api!: ChatThreadApi
+ * <ChatThread maxWidth={640} apiRef={(a) => (api = a)} class="h-96">
+ *   <Message id="m1" role="user">What changed in v2?</Message>
+ *   <Message id="m2" role="assistant">Three things…</Message>
  * </ChatThread>
+ * // later: api.scrollToMessage('m1')
  * ```
  */
 export declare function ChatThread(props: ChatThreadProps): JSX.Element;

package/dist/ui/ContactSection.d.ts

@@ -0,0 +1,49 @@
+import { JSX } from 'solid-js';
+/** A field {@link ContactSection} can render. */
+export type ContactField = 'name' | 'email' | 'phone' | 'subject' | 'message';
+/** Submitted values, keyed by field. Only the rendered fields are present. */
+export type ContactValues = Partial<Record<ContactField, string>>;
+export interface ContactSectionProps {
+    title?: string;
+    subtitle?: string;
+    /** Fields to render, in order. Defaults to `['name', 'email', 'message']`. */
+    fields?: ContactField[];
+    /** Override field and contact-detail labels, e.g. for another language. */
+    labels?: Partial<Record<ContactField | 'address', string>>;
+    /** Submit button text. Defaults to `'Send message'`. */
+    submitLabel?: string;
+    /**
+     * Where the form posts (`method="post"`): an endpoint URL, or a `mailto:` link
+     * (sent as plain text). Omit it to handle submission yourself with `onSubmit`.
+     */
+    action?: string;
+    /** Called with the values when the form submits and there is no `action`. */
+    onSubmit?: (values: ContactValues) => void;
+    /** Email shown (and linked) beside the form. */
+    email?: string;
+    /** Phone number shown (and linked) beside the form. */
+    phone?: string;
+    /** Postal address shown beside the form. */
+    address?: string;
+    /** Anchor id for in-page navigation. */
+    id?: string;
+    class?: string;
+}
+/**
+ * Contact section: a form (any of name, email, phone, subject, message) beside
+ * the business's email, phone and address. With `action` the form posts
+ * natively to that URL or `mailto:` link; without it, `onSubmit` receives the
+ * values. Name, email and message are required.
+ *
+ * @example
+ * ```tsx
+ * <ContactSection
+ *   title="Talk to us"
+ *   fields={['name', 'email', 'subject', 'message']}
+ *   action="https://formspree.io/f/your-id"
+ *   email="hello@example.com"
+ *   phone="+52 55 1234 5678"
+ * />
+ * ```
+ */
+export declare function ContactSection(props: ContactSectionProps): JSX.Element;

package/dist/ui/CtaBanner.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+import { SectionLink } from './internal/sectionKit';
+export interface CtaBannerProps {
+    title: string;
+    subtitle?: string;
+    /** Main call-to-action (filled button). */
+    primary: SectionLink;
+    /** Secondary call-to-action (outline button). */
+    secondary?: SectionLink;
+    /** Anchor id for in-page navigation. */
+    id?: string;
+    class?: string;
+}
+/**
+ * Call-to-action band that closes a page or splits long ones: a headline, an
+ * optional line of support and one or two buttons on a glass panel tinted with
+ * the theme's primary color.
+ *
+ * @example
+ * ```tsx
+ * <CtaBanner
+ *   title="Ready to launch?"
+ *   subtitle="Start free, upgrade when you grow."
+ *   primary={{ label: 'Create account', href: '/signup' }}
+ * />
+ * ```
+ */
+export declare function CtaBanner(props: CtaBannerProps): JSX.Element;

package/dist/ui/Drawer.d.ts

@@ -9,9 +9,13 @@ interface DrawerProps extends ParentProps {
     class?: string;
     /** Accessible label for the close button. @default 'Close' */
     closeLabel?: string;
+    /** Edge the panel is anchored to and slides in from. @default 'right' */
+    side?: DrawerSide;
 }
+export type DrawerSide = 'right' | 'left' | 'top' | 'bottom';
+export type { DrawerProps };
 /**
- * Right-anchored slide-over panel built on Kobalte's `Dialog` (focus trap, portal,
+ * Edge-anchored slide-over panel (right by default, or `side="left" | "top" | "bottom"`) built on Kobalte's `Dialog` (focus trap, portal,
  * and open/close presence handled for you). Use for create/edit forms or detail
  * panels that need more room than a centered `Modal`.
  *
@@ -24,4 +28,3 @@ interface DrawerProps extends ParentProps {
  * ```
  */
 export declare function Drawer(props: DrawerProps): JSX.Element;
-export {};

package/dist/ui/Faq.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'solid-js';
+/** One question/answer pair rendered by {@link Faq}. */
+export interface FaqItem {
+    question: string;
+    answer: string;
+}
+export interface FaqProps {
+    title?: string;
+    subtitle?: string;
+    items: FaqItem[];
+    /** Allow several answers open at once. Defaults to `false`. */
+    multiple?: boolean;
+    /** Anchor id for in-page navigation. */
+    id?: string;
+    class?: string;
+}
+/**
+ * Frequently-asked-questions section: an optional heading over an
+ * {@link Accordion} of questions on a glass panel; each answer expands in place.
+ *
+ * @example
+ * ```tsx
+ * <Faq
+ *   title="Questions"
+ *   items={[{ question: 'Can I cancel anytime?', answer: 'Yes, from your account settings.' }]}
+ * />
+ * ```
+ */
+export declare function Faq(props: FaqProps): JSX.Element;

package/dist/ui/FeatureGrid.d.ts

@@ -0,0 +1,35 @@
+import { JSX } from 'solid-js';
+/** One feature rendered by {@link FeatureGrid}. */
+export interface FeatureItem {
+    title: string;
+    text: string;
+    /** Optional icon node, shown in a tinted tile above the title. */
+    icon?: JSX.Element;
+}
+export interface FeatureGridProps {
+    title?: string;
+    subtitle?: string;
+    items: FeatureItem[];
+    /** Columns on wide screens (one column on phones). Defaults to `3`. */
+    columns?: 2 | 3 | 4;
+    /** Anchor id for in-page navigation. */
+    id?: string;
+    class?: string;
+}
+/**
+ * Section listing a product's features: an optional heading and a responsive
+ * grid of glass cards, each with an optional icon, a title and a short text.
+ *
+ * @example
+ * ```tsx
+ * <FeatureGrid
+ *   title="Why teams switch"
+ *   items={[
+ *     { title: 'Fast', text: 'Pages load in under a second.' },
+ *     { title: 'Accessible', text: 'Keyboard and screen-reader friendly.' },
+ *     { title: 'Themeable', text: 'Swap palettes without touching CSS.' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function FeatureGrid(props: FeatureGridProps): JSX.Element;