@nikala-ui/folio 0.13.0

package/dist/vendor/docs-src/components/mdx-components.tsx

@@ -0,0 +1,144 @@
+import { splitProps, type JSX } from "solid-js";
+import { Plus } from "lucide-solid";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+// Resolved by the docs plugin to lazy wrappers around the consumer's local
+// component sources. The source modules load only when an MDX component is
+// actually rendered.
+// @ts-ignore
+import Core from "virtual:folio-components";
+
+const cn = (...values: unknown[]) => twMerge(clsx(values));
+type HtmlProps<T extends HTMLElement> = JSX.HTMLAttributes<T>;
+
+// Native elements are kept for Markdown semantics and accessibility. Structured
+// documentation UI is delegated to Nikala primitives below.
+export function MdxH1(props: HtmlProps<HTMLHeadingElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <h1 class={cn("scroll-mt-20 text-3xl font-bold tracking-tight text-foreground mb-4", local.class)} {...rest}>{local.children}</h1>;
+}
+export function MdxH2(props: HtmlProps<HTMLHeadingElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <h2 class={cn("scroll-mt-20 text-xl font-bold tracking-tight text-foreground mt-8 mb-4 border-b border-border pb-2 group flex items-center justify-between", local.class)} {...rest}>{local.children}</h2>;
+}
+export function MdxH3(props: HtmlProps<HTMLHeadingElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <h3 class={cn("scroll-mt-20 text-base font-semibold tracking-tight text-foreground mt-6 mb-3", local.class)} {...rest}>{local.children}</h3>;
+}
+export function MdxH4(props: HtmlProps<HTMLHeadingElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <h4 class={cn("scroll-mt-20 text-base font-semibold tracking-tight text-foreground mt-4 mb-2", local.class)} {...rest}>{local.children}</h4>;
+}
+export function MdxH5(props: HtmlProps<HTMLHeadingElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <h5 class={cn("scroll-mt-20 text-sm font-semibold tracking-tight text-foreground mt-3 mb-1", local.class)} {...rest}>{local.children}</h5>;
+}
+export function MdxH6(props: HtmlProps<HTMLHeadingElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <h6 class={cn("scroll-mt-20 text-xs font-semibold tracking-tight text-muted-foreground mt-2 mb-1", local.class)} {...rest}>{local.children}</h6>;
+}
+export function MdxP(props: HtmlProps<HTMLParagraphElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <p class={cn("text-sm text-muted-foreground leading-relaxed my-3", local.class)} {...rest}>{local.children}</p>;
+}
+export function MdxUl(props: HtmlProps<HTMLUListElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <ul class={cn("my-4 ml-6 list-disc [&>li]:mt-1.5 text-sm text-muted-foreground", local.class)} {...rest}>{local.children}</ul>;
+}
+export function MdxOl(props: HtmlProps<HTMLOListElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <ol class={cn("my-4 ml-6 list-decimal [&>li]:mt-1.5 text-sm text-muted-foreground", local.class)} {...rest}>{local.children}</ol>;
+}
+export function MdxLi(props: HtmlProps<HTMLLIElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <li class={cn("leading-relaxed", local.class)} {...rest}>{local.children}</li>;
+}
+export function MdxA(props: JSX.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <a class={cn("font-medium text-foreground underline underline-offset-4 decoration-border hover:decoration-foreground transition-colors", local.class)} {...rest}>{local.children}</a>;
+}
+export function MdxBlockquote(props: HtmlProps<HTMLQuoteElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <blockquote class={cn("my-4 border-l-2 border-border pl-4 italic text-sm text-muted-foreground", local.class)} {...rest}>{local.children}</blockquote>;
+}
+
+export function MdxTable(props: HtmlProps<HTMLTableElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <Core.Table class={cn("my-6 w-full text-left", local.class)} {...rest}>{local.children}</Core.Table>;
+}
+export function MdxThead(props: HtmlProps<HTMLTableSectionElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <Core.TableHeader class={cn("[&_tr]:border-b border-border", local.class)} {...rest}>{local.children}</Core.TableHeader>;
+}
+export function MdxTbody(props: HtmlProps<HTMLTableSectionElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <Core.TableBody class={cn("[&_tr:last-child]:border-0", local.class)} {...rest}>{local.children}</Core.TableBody>;
+}
+export function MdxTr(props: HtmlProps<HTMLTableRowElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <Core.TableRow class={cn("border-b border-border transition-colors hover:bg-muted/50", local.class)} {...rest}>{local.children}</Core.TableRow>;
+}
+export function MdxTh(props: HtmlProps<HTMLTableCellElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <Core.TableHead class={cn("h-9 px-3 text-left align-middle font-medium text-muted-foreground border-b border-border bg-muted/40 text-xs uppercase tracking-wider", local.class)} {...rest}>{local.children}</Core.TableHead>;
+}
+export function MdxTd(props: HtmlProps<HTMLTableCellElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return <Core.TableCell class={cn("p-3 align-middle text-sm border-b border-border last:border-0", local.class)} {...rest}>{local.children}</Core.TableCell>;
+}
+export function MdxHr(props: JSX.HTMLAttributes<HTMLHRElement>) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <hr class={cn("my-8 border-border", local.class)} {...rest} />;
+}
+export function MdxCode(props: HtmlProps<HTMLElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const inline = () => !String(local.class || "").includes("language-") && !String(local.class || "").includes("shiki");
+  return <code class={cn(inline() ? "rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground font-normal border border-border/50" : "font-mono text-xs", local.class)} {...rest}>{local.children}</code>;
+}
+
+function isPackageCommand(code: string, language: string) {
+  return /^(bash|sh|shell|zsh)$/i.test(language) && !code.includes("\n") && /^(bun|npm|pnpm|yarn|bunx|npx)\s+/.test(code.trim());
+}
+
+/** Preserve Shiki's server-rendered children while using Nikala's code chrome. */
+export function MdxPre(props: any) {
+  const [local, rest] = splitProps(props, ["class", "className", "children", "data-code", "data-lang"]);
+  const code = String(local["data-code"] || "").trim();
+  const language = String(local["data-lang"] || "text");
+  if (isPackageCommand(code, language)) return <Core.PackageManagerTabs command={code} />;
+
+  return (
+    <Core.CodeBlock code={code} language={language} class={cn(local.class || local.className)} {...rest}>
+      {local.children}
+    </Core.CodeBlock>
+  );
+}
+
+export function MdxImg(props: JSX.ImgHTMLAttributes<HTMLImageElement>) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <img class={cn("my-4 max-w-full rounded-lg border border-border", local.class)} {...rest} />;
+}
+export function MdxSup(props: HtmlProps<HTMLElement>) { const [local, rest] = splitProps(props, ["class", "children"]); return <sup class={cn("text-xs", local.class)} {...rest}>{local.children}</sup>; }
+export function MdxSub(props: HtmlProps<HTMLElement>) { const [local, rest] = splitProps(props, ["class", "children"]); return <sub class={cn("text-xs", local.class)} {...rest}>{local.children}</sub>; }
+export function MdxSpan(props: HtmlProps<HTMLSpanElement>) { const [local, rest] = splitProps(props, ["children"]); return <span {...rest}>{local.children}</span>; }
+export function MdxDiv(props: HtmlProps<HTMLDivElement>) { const [local, rest] = splitProps(props, ["children"]); return <div {...rest}>{local.children}</div>; }
+export function MdxSection(props: HtmlProps<HTMLElement>) { const [local, rest] = splitProps(props, ["children"]); return <section {...rest}>{local.children}</section>; }
+
+const markdownComponents = {
+  h1: MdxH1, h2: MdxH2, h3: MdxH3, h4: MdxH4, h5: MdxH5, h6: MdxH6,
+  p: MdxP, ul: MdxUl, ol: MdxOl, li: MdxLi, a: MdxA, blockquote: MdxBlockquote,
+  table: MdxTable, thead: MdxThead, tbody: MdxTbody, tr: MdxTr, th: MdxTh, td: MdxTd,
+  hr: MdxHr, code: MdxCode, pre: MdxPre, span: MdxSpan, div: MdxDiv, section: MdxSection,
+  strong: (props: HtmlProps<HTMLElement>) => <strong {...props} class="font-semibold text-foreground" />,
+  b: (props: HtmlProps<HTMLElement>) => <strong {...props} class="font-semibold text-foreground" />,
+  em: (props: HtmlProps<HTMLElement>) => <em {...props} class="italic" />,
+  i: (props: HtmlProps<HTMLElement>) => <em {...props} class="italic" />,
+  del: (props: HtmlProps<HTMLModElement>) => <del {...props} class="line-through opacity-70" />,
+  s: (props: HtmlProps<HTMLModElement>) => <del {...props} class="line-through opacity-70" />,
+};
+
+/** Merge every export from the consumer's local Nikala barrel automatically. */
+export const defaultMdxComponents = {
+  ...markdownComponents,
+  ...Core,
+};

package/dist/vendor/docs-src/components/ui/api-table.tsx

@@ -0,0 +1,117 @@
+import {
+  splitProps,
+  For,
+  Show,
+  type JSX,
+  type Component,
+} from "solid-js";
+import { SectionHeading } from "@/components/ui/section-heading";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "@/components/ui/table";
+import { cn } from "@/lib/cn";
+
+export interface ApiTableItem {
+  /** Property, attribute, or method name */
+  prop: string;
+  /** TypeScript type definition string */
+  type: string;
+  /** Default value if optional */
+  default?: string;
+  /** Detailed description of purpose and usage */
+  description: string;
+  /** Whether the property is strictly required */
+  required?: boolean;
+}
+
+export interface ApiTableProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Title header for this API section (e.g. component or interface name) */
+  title?: string;
+  /** Subtitle or explanatory note */
+  description?: string;
+  /** Badge label next to the title (defaults to "Props") */
+  badge?: string;
+  /** List of API properties to render in the table */
+  items: ApiTableItem[];
+  class?: string;
+}
+
+/**
+ * Clean, structured API reference table component composed from Table and Badge primitives.
+ */
+export const ApiTable: Component<ApiTableProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "title",
+    "description",
+    "badge",
+    "items",
+    "class",
+  ]);
+
+  return (
+    <div class={cn("my-6 space-y-3", local.class)} {...rest}>
+      {/* Header */}
+      <Show when={local.title}>
+        <SectionHeading
+          variant="compact"
+          title={local.title!}
+          badge={local.badge || "Props"}
+          description={local.description}
+        />
+      </Show>
+
+      {/* Responsive Table Container Composed from Nikala Table Primitives */}
+      <div class="rounded-lg border border-border bg-card/50 shadow-2xs overflow-hidden">
+        <Table class="text-xs">
+          <TableHeader class="bg-muted/40 font-mono text-[11px] uppercase tracking-wider text-muted-foreground select-none">
+            <TableRow class="hover:bg-transparent">
+              <TableHead class="h-9 px-4 font-semibold">Prop</TableHead>
+              <TableHead class="h-9 px-4 font-semibold">Type</TableHead>
+              <TableHead class="h-9 px-4 font-semibold">Default</TableHead>
+              <TableHead class="h-9 px-4 font-semibold">Description</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody class="font-mono text-xs">
+            <For each={local.items}>
+              {(item) => (
+                <TableRow class="transition-colors hover:bg-muted/20">
+                  <TableCell class="px-4 py-3 font-semibold text-primary">
+                    <span class="inline-flex items-center gap-1">
+                      {item.prop}
+                      <Show when={item.required}>
+                        <span class="text-rose-500 font-bold" title="Required">*</span>
+                      </Show>
+                    </span>
+                  </TableCell>
+                  <TableCell class="px-4 py-3 text-muted-foreground">
+                    <code class="rounded-md bg-muted px-1.5 py-0.5 font-mono text-[11px] text-foreground">
+                      {item.type}
+                    </code>
+                  </TableCell>
+                  <TableCell class="px-4 py-3 text-muted-foreground">
+                    <Show
+                      when={item.default}
+                      fallback={<span class="text-muted-foreground/40 font-mono">-</span>}
+                    >
+                      <code class="rounded-md bg-muted/60 px-1 py-0.5 font-mono text-[11px]">
+                        {item.default}
+                      </code>
+                    </Show>
+                  </TableCell>
+                  <TableCell class="px-4 py-3 font-sans font-normal leading-relaxed text-muted-foreground">
+                    {item.description}
+                  </TableCell>
+                </TableRow>
+              )}
+            </For>
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};

package/dist/vendor/docs-src/components/ui/badge.tsx

@@ -0,0 +1,56 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+/**
+ * Class variance authority configuration for badge styling variants.
+ */
+export const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline:
+          "text-foreground border-border",
+        success:
+          "border-transparent bg-green-600 text-zinc-50 shadow-sm hover:bg-green-600/90 dark:bg-green-900 dark:text-zinc-50 dark:hover:bg-green-900/90",
+        warning:
+          "border-transparent bg-yellow-600 text-zinc-50 shadow-sm hover:bg-yellow-600/90 dark:bg-yellow-900 dark:text-zinc-50 dark:hover:bg-yellow-900/90",
+        info:
+          "border-transparent bg-blue-600 text-zinc-50 shadow-sm hover:bg-blue-600/90 dark:bg-blue-900 dark:text-zinc-50 dark:hover:bg-blue-900/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+/**
+ * Props interface for the Badge component extending standard HTML div attributes.
+ */
+export interface BadgeProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {
+  class?: string;
+}
+
+/**
+ * Nikala UI Badge component built for SolidJS with Tailwind CSS v4 styling.
+ */
+export const Badge: Component<BadgeProps> = (props) => {
+  // Use splitProps to preserve SolidJS reactivity
+  const [local, rest] = splitProps(props, ["variant", "class", "children"]);
+
+  return (
+    <div class={cn(badgeVariants({ variant: local.variant }), local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};

package/dist/vendor/docs-src/components/ui/breadcrumb.tsx

@@ -0,0 +1,136 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface BreadcrumbProps extends JSX.HTMLAttributes<HTMLElement> {
+  class?: string;
+}
+
+/**
+ * Root navigation container for the Nikala UI Breadcrumb hierarchy.
+ */
+export const Breadcrumb: Component<BreadcrumbProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <nav aria-label="breadcrumb" class={cn("relative w-full", local.class)} {...rest} />;
+};
+
+export interface BreadcrumbListProps extends JSX.HTMLAttributes<HTMLOListElement> {
+  class?: string;
+}
+
+/**
+ * Ordered list container housing all breadcrumb path items.
+ */
+export const BreadcrumbList: Component<BreadcrumbListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <ol
+      class={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground break-words sm:gap-2.5",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface BreadcrumbItemProps extends JSX.HTMLAttributes<HTMLLIElement> {
+  class?: string;
+}
+
+/**
+ * Individual list item element wrapper in the breadcrumb hierarchy.
+ */
+export const BreadcrumbItem: Component<BreadcrumbItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <li class={cn("inline-flex items-center gap-1.5", local.class)} {...rest} />;
+};
+
+export interface BreadcrumbLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  class?: string;
+}
+
+/**
+ * Clickable breadcrumb trail link element.
+ */
+export const BreadcrumbLink: Component<BreadcrumbLinkProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <a
+      class={cn(
+        "transition-colors hover:text-foreground underline-offset-4 hover:underline",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface BreadcrumbPageProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  class?: string;
+}
+
+/**
+ * Non-clickable active page indicator in breadcrumb hierarchy.
+ */
+export const BreadcrumbPage: Component<BreadcrumbPageProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <span
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      class={cn("font-normal text-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface BreadcrumbSeparatorProps extends JSX.HTMLAttributes<HTMLLIElement> {
+  class?: string;
+}
+
+/**
+ * Visual separator icon rendered between breadcrumb path links.
+ */
+export const BreadcrumbSeparator: Component<BreadcrumbSeparatorProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <li
+      role="presentation"
+      aria-hidden="true"
+      class={cn("[&>svg]:size-3.5 text-muted-foreground", local.class)}
+      {...rest}
+    >
+      {local.children || (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+        </svg>
+      )}
+    </li>
+  );
+};
+
+export interface BreadcrumbEllipsisProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  class?: string;
+}
+
+/**
+ * Ellipsis element representing truncated intermediate breadcrumb items.
+ */
+export const BreadcrumbEllipsis: Component<BreadcrumbEllipsisProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      class={cn("flex h-9 w-9 items-center justify-center text-muted-foreground", local.class)}
+      {...rest}
+    >
+      <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="1" />
+        <circle cx="19" cy="12" r="1" />
+        <circle cx="5" cy="12" r="1" />
+      </svg>
+    </span>
+  );
+};

package/dist/vendor/docs-src/components/ui/button.tsx

@@ -0,0 +1,82 @@
+import { Show, splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * Class variance authority configuration for button styling variants and sizes.
+ */
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90 border border-primary/50",
+        destructive:
+          "bg-red-600 text-zinc-50 shadow-sm hover:bg-red-600/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        success: "*:bg-green-600 text-zinc-50 shadow-sm hover:bg-green-600/90 dark:bg-green-900 dark:text-zinc-50 dark:hover:bg-green-900/90",
+        warning: "*:bg-yellow-600 text-zinc-50 shadow-sm hover:bg-yellow-600/90 dark:bg-yellow-900 dark:text-zinc-50 dark:hover:bg-yellow-900/90",
+        info: "*:bg-blue-600 text-zinc-50 shadow-sm hover:bg-blue-600/90 dark:bg-blue-900 dark:text-zinc-50 dark:hover:bg-blue-900/90",
+      },
+      size: {
+        xs: "h-6 rounded-md px-2 text-xs",
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+/**
+ * Props interface for the Button component extending standard HTML button attributes.
+ */
+export interface ButtonProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  /** Shows a loading spinner and prevents repeated clicks while active. */
+  loading?: boolean;
+  class?: string;
+}
+
+/**
+ * Nikala UI Button component built for SolidJS with Tailwind CSS v4 styling.
+ */
+export const Button: Component<ButtonProps> = (props) => {
+  // Use splitProps to preserve SolidJS reactivity for destructured props
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "size",
+    "class",
+    "children",
+    "loading",
+    "disabled",
+  ]);
+
+  return (
+    <button
+      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
+      disabled={local.disabled || local.loading}
+      aria-busy={local.loading ? "true" : undefined}
+      {...rest}
+    >
+      <Show when={local.loading}>
+        <Spinner size="sm" class="text-current" />
+      </Show>
+      {local.children}
+    </button>
+  );
+};

package/dist/vendor/docs-src/components/ui/callout.tsx

@@ -0,0 +1,137 @@
+import {
+  splitProps,
+  Show,
+  type Component,
+  type JSX,
+  type ParentComponent,
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  Info,
+  Lightbulb,
+  AlertTriangle,
+  AlertCircle,
+  CheckCircle2,
+  Bookmark,
+} from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+export const calloutVariants = cva(
+  "relative w-full rounded-lg border p-4 text-sm leading-relaxed transition-colors",
+  {
+    variants: {
+      variant: {
+        note: "border-border/80 bg-muted/50 text-foreground [&>svg]:text-foreground",
+        info: "border-sky-500/30 bg-sky-500/10 text-sky-950 dark:text-sky-100 [&>svg]:text-sky-600 dark:[&>svg]:text-sky-400",
+        tip: "border-emerald-500/30 bg-emerald-500/10 text-emerald-950 dark:text-emerald-100 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-400",
+        warning: "border-amber-500/30 bg-amber-500/10 text-amber-950 dark:text-amber-100 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400",
+        danger: "border-destructive/30 bg-destructive/10 text-destructive dark:text-red-200 [&>svg]:text-destructive",
+        success: "border-emerald-500/30 bg-emerald-500/10 text-emerald-950 dark:text-emerald-100 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-400",
+      },
+    },
+    defaultVariants: {
+      variant: "note",
+    },
+  }
+);
+
+const defaultIcons = {
+  note: Bookmark,
+  info: Info,
+  tip: Lightbulb,
+  warning: AlertTriangle,
+  danger: AlertCircle,
+  success: CheckCircle2,
+};
+
+export interface CalloutProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof calloutVariants> {
+  title?: string;
+  type?: VariantProps<typeof calloutVariants>["variant"];
+  icon?: Component<{ class?: string }> | false;
+  class?: string;
+}
+
+export const Callout: ParentComponent<CalloutProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "type",
+    "title",
+    "icon",
+    "class",
+    "children",
+  ]);
+
+  const variant = () => local.variant || local.type || "note";
+
+  const IconComponent = () => {
+    if (local.icon === false) return null;
+    if (local.icon) return local.icon;
+    return defaultIcons[variant()] || Info;
+  };
+
+  return (
+    <div
+      role="region"
+      aria-label={local.title || `${variant()} callout`}
+      class={cn(
+        calloutVariants({ variant: variant() }),
+        "flex gap-3.5 items-start",
+        local.class
+      )}
+      {...rest}
+    >
+      <Show when={IconComponent()}>
+        {(Icon) => (
+          <span class="inline-flex shrink-0 items-center justify-center mt-0.5 select-none">
+            <Dynamic component={Icon()} class="size-4.5 shrink-0" />
+          </span>
+        )}
+      </Show>
+      <div class="flex-1 space-y-1 min-w-0">
+        <Show when={local.title}>
+          <h5 class="font-semibold text-sm leading-none tracking-tight">
+            {local.title}
+          </h5>
+        </Show>
+        <div class="text-sm opacity-90 leading-relaxed break-words">
+          {local.children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export interface CalloutTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+export const CalloutTitle: ParentComponent<CalloutTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <h5
+      class={cn("font-semibold text-sm leading-none tracking-tight mb-1", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </h5>
+  );
+};
+
+export interface CalloutDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const CalloutDescription: ParentComponent<CalloutDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <div
+      class={cn("text-sm opacity-90 leading-relaxed", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};