@karni/ui 0.3.1 → 0.4.0

package/dist/src/components/file-upload/FileUpload.d.ts

@@ -1,10 +1,40 @@
 import * as React from "react";
 /** Why a file was refused by <FileUpload> (surfaced through `onReject`). */
 export type FileUploadRejectReason = "accept" | "size";
+/** What the `Dropzone` slot receives: the props of the button it replaces, plus its state. */
+export interface FileUploadDropzoneProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Attach to the button: focus returns to it after a file is removed. */
+    buttonRef: React.Ref<HTMLButtonElement>;
+    /** A file is being dragged over the dropzone. */
+    dragging: boolean;
+    multiple: boolean;
+    /** The `uploading` prop. */
+    uploading: boolean;
+    /** The `children` prop (custom content), or undefined for the default text. */
+    children?: React.ReactNode;
+}
+/** What the `FileRow` slot receives: one current file. Render an <li>. */
+export interface FileUploadFileRowProps {
+    /** A pending `File`, or the URL string of a file already uploaded. */
+    file: File | string;
+    /** The file name (a URL's last path segment). */
+    name: string;
+    /** A pending file's size ("12 KB"), undefined for a URL. */
+    size?: string;
+    /** Removes the file. Undefined when it cannot be removed (clearable=false, disabled, uploading). */
+    onRemove?: () => void;
+}
+/** The parts of the picker a project can replace (`slots={{ FileRow: Thumbnail }}`). */
+export interface FileUploadSlots {
+    /** The drop target: a button that opens the file picker. */
+    Dropzone: React.ComponentType<FileUploadDropzoneProps>;
+    /** One row of the current-files list. */
+    FileRow: React.ComponentType<FileUploadFileRowProps>;
+}
 export interface FileUploadProps {
     /**
      * Current value. A `string` is an existing uploaded file (the display URL a
-     * karni backend returns); a `File` is a pending upload. Arrays are for
+     * karni backend returns), and a `File` is a pending upload. Arrays are for
      * `multiple` mode and may mix both.
      */
     value?: File | string | ReadonlyArray<File | string> | null;
@@ -22,6 +52,19 @@ export interface FileUploadProps {
     maxSize?: number;
     /** Called once per refused file with the reason ("accept" | "size"). */
     onReject?: (file: File, reason: FileUploadRejectReason) => void;
+    /**
+     * The sentence shown (and announced) for a refused file. Default: "notes.txt
+     * isn't an accepted file type." / "big.png is larger than 1.0 MB.". Return
+     * null to show nothing (when `onReject` reports it elsewhere).
+     */
+    rejectionMessage?: (file: File, reason: FileUploadRejectReason, limits: {
+        accept?: string;
+        maxSize?: number;
+    }) => React.ReactNode;
+    /** An error to show under the dropzone (announced). It marks the field invalid. */
+    error?: React.ReactNode;
+    /** True while the file uploads: the dropzone shows progress and takes no new files. */
+    uploading?: boolean;
     id?: string;
     /** Forwarded to the hidden native file input. */
     name?: string;
@@ -30,15 +73,36 @@ export interface FileUploadProps {
     children?: React.ReactNode;
     /** Set false to hide the per-file remove affordance. Default true. */
     clearable?: boolean;
+    /** Replaces the Dropzone or FileRow (see FileUploadSlots). */
+    slots?: Partial<FileUploadSlots>;
     "aria-label"?: string;
+    /** Ids of elements that label the dropzone (or point a <label htmlFor> at `id`). */
+    "aria-labelledby"?: string;
+    /** Ids of elements that describe the dropzone (help text, a form's error message). */
+    "aria-describedby"?: string;
+    /** Marks the dropzone invalid (a destructive border). `error` sets it too. */
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+    /** Called when focus leaves the dropzone (react-hook-form's onBlur). */
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
 }
+/** The default pieces of the picker, for wrapping one. */
+export declare const defaultFileUploadSlots: FileUploadSlots;
 /**
  * Drag-and-drop or click-to-browse file picker that shows the current file and the pending ones.
  *
  * Contract "FileUpload".
  *
  * Shows an existing uploaded value (URL string) as a link, pending `File`
- * values with name and size, and emits `File` objects — the hooks layer turns
+ * values with name and size, and emits `File` objects. The hooks layer turns
  * them into multipart bodies per amendment D2.
+ *
+ * Keyboard and screen readers: the dropzone is a button (Enter or Space opens
+ * the picker), labelled by its text, `aria-label`, `aria-labelledby` or a
+ * <label htmlFor={id}>. A refused file and the `error` prop are announced and
+ * linked through aria-describedby. `aria-invalid` (or `error`) marks it
+ * invalid. Removing a file returns focus to the dropzone.
+ *
+ * Escape hatches: `slots` replaces the Dropzone or FileRow, `children`
+ * replaces the dropzone's content, `rejectionMessage` rewords refusals.
  */
-export declare function FileUpload(props: FileUploadProps): React.ReactElement;
+export declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/layout/layout.d.ts

@@ -1,4 +1,6 @@
+import { LayoutRouteFocusOptions } from './route-focus';
 import * as React from "react";
+export type { LayoutRouteFocusOptions } from './route-focus';
 export interface LayoutNavItem {
     /** Visible label of the nav entry. */
     label: React.ReactNode;
@@ -11,14 +13,76 @@ export interface LayoutNavItem {
     /** React key override when `href` is not unique. */
     key?: string;
 }
+/** What the `NavLink` slot receives: the props of the <a> it replaces, plus the item. */
+export interface LayoutNavLinkProps {
+    item: LayoutNavItem;
+    href: string;
+    /** The styled class, focus indicator and active state included. */
+    className: string;
+    "aria-current"?: "page";
+    /** Closes the mobile drawer. Call it when the link navigates. */
+    onClick: () => void;
+    /** The icon and the label. */
+    children: React.ReactNode;
+}
+/** What the `Sidebar` slot (the static sidebar, md and up) receives. */
+export interface LayoutSidebarProps {
+    /** The `sidebarHeader` (the Karni mark by default), or null. */
+    header: React.ReactNode;
+    /** The derived nav, or the `sidebar` prop. */
+    nav: React.ReactNode;
+    /** The `sidebarFooter`, or null. */
+    footer: React.ReactNode;
+    /** `sidebarClassName`. */
+    className?: string;
+}
+/** What the `MobileDrawer` slot (the sidebar below md) receives. */
+export interface LayoutMobileDrawerProps extends LayoutSidebarProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The id the menu button's aria-controls names while the drawer is open. */
+    id: string;
+    /** The menu button: where focus returns when the drawer closes. */
+    returnFocusRef: React.RefObject<HTMLButtonElement | null>;
+}
+/** What the `Header` slot (the top bar) receives. */
+export interface LayoutHeaderProps {
+    /** The button that opens the drawer below md. Render it, or the drawer cannot open. */
+    menuButton: React.ReactNode;
+    /** The `header` prop's content. */
+    children?: React.ReactNode;
+    /** `headerClassName`. */
+    className?: string;
+}
+/** What the `SkipLink` slot receives: the first focusable element of the page. */
+export interface LayoutSkipLinkProps {
+    /** `#` + the id of <main>. */
+    href: string;
+    /** Moves focus to <main> without changing the URL (hash routers keep their route). */
+    onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    children: React.ReactNode;
+}
+/** The parts of the shell a project can replace (`slots={{ NavLink: RouterLink }}`). */
+export interface LayoutSlots {
+    /** The top bar with the menu button and the `header` content. */
+    Header: React.ComponentType<LayoutHeaderProps>;
+    /** The static sidebar (md and up). The default hides itself below md. */
+    Sidebar: React.ComponentType<LayoutSidebarProps>;
+    /** Each derived nav link. Replace it with your router's link. */
+    NavLink: React.ComponentType<LayoutNavLinkProps>;
+    /** The sidebar below md: a modal drawer (focus trapped, Escape closes). */
+    MobileDrawer: React.ComponentType<LayoutMobileDrawerProps>;
+    /** "Skip to content", visible only while focused. `() => null` removes it. */
+    SkipLink: React.ComponentType<LayoutSkipLinkProps>;
+}
 export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Items of the derived sidebar nav. */
     navItems?: readonly LayoutNavItem[];
     /**
-     * Escape hatch for router integration: wraps/replaces the default anchor of
-     * one item. `defaultNode` is the styled <a> the layout would render — return
-     * it, or your own node (e.g. a TanStack Router <Link> with
-     * `className={defaultClassName}`).
+     * Wraps or replaces the default link of one item. `defaultNode` is the
+     * link the layout would render. Return it, or your own node (e.g. a
+     * TanStack Router <Link> with `className={defaultClassName}`).
+     * Prefer the `NavLink` slot, which also closes the mobile drawer.
      */
     renderNavItem?: (item: LayoutNavItem, defaults: {
         defaultNode: React.ReactNode;
@@ -28,7 +92,7 @@ export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     sidebar?: React.ReactNode;
     /**
      * Brand/logo slot pinned to the top of the sidebar. Defaults to the Karni
-     * mark (`<KarniMark />`); pass your own brand, or `null` for no header.
+     * mark (`<KarniMark />`). Pass your own brand, or `null` for no header.
      */
     sidebarHeader?: React.ReactNode;
     /** Slot pinned to the bottom of the sidebar (user menu, logout, …). */
@@ -37,19 +101,50 @@ export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     header?: React.ReactNode;
     /** Accessible name of the sidebar navigation (default "Main"). */
     navLabel?: string;
+    /** Controlled open state of the mobile drawer (pair with onMobileNavOpenChange). */
+    mobileNavOpen?: boolean;
+    /** Initial open state of the mobile drawer when uncontrolled. */
+    defaultMobileNavOpen?: boolean;
+    /** Called when the drawer opens or closes (menu button, Escape, backdrop, a link). */
+    onMobileNavOpenChange?: (open: boolean) => void;
+    /** Replaces internal pieces of the shell. See LayoutSlots. */
+    slots?: Partial<LayoutSlots>;
+    /**
+     * Focus after a client-side navigation. Default `true`: once the new page
+     * is in, focus moves to its `<h1>` (else `<main>`) and a polite live region
+     * says the page title. Nothing moves on the first load (a redirect before
+     * the user acts included), when only search params change (filters,
+     * pagination, sorting), or when something took focus for the page itself
+     * (an autofocused field, a control inside `<main>`, a dialog). `false`
+     * turns it off. An object keeps it on and sets the route key, the target
+     * or the announcement (see LayoutRouteFocusOptions).
+     */
+    routeFocus?: boolean | LayoutRouteFocusOptions;
     sidebarClassName?: string;
     headerClassName?: string;
     contentClassName?: string;
     children?: React.ReactNode;
 }
+/** The default pieces of the shell, which you spread to wrap one (`{ ...defaultLayoutSlots }`). */
+export declare const defaultLayoutSlots: LayoutSlots;
 /**
  * App shell: sidebar navigation + header slot + content area.
  *
  * Responsive: under the `md` breakpoint the sidebar collapses behind a menu
- * button and opens as an overlay drawer (Escape or backdrop click closes it).
+ * button and opens as a modal drawer: focus moves into it and stays there,
+ * Escape, the backdrop, the close button or a link close it, and focus
+ * returns to the menu button. A "Skip to content" link is the first stop of
+ * the keyboard.
+ *
+ * After a client-side navigation, focus moves to the new page's `<h1>` and
+ * a live region says its title (`routeFocus`). Render the Layout once,
+ * around your router's outlet, so it sees the route change.
  *
- * Escape hatches: `renderNavItem` wraps each derived link (router
- * integration), `sidebar` replaces the derived nav wholesale, and
- * `sidebarHeader`/`sidebarFooter`/`header` are free slots.
+ * Escape hatches: `slots` replaces the Header, Sidebar, NavLink,
+ * MobileDrawer or SkipLink. `renderNavItem` wraps each derived link.
+ * `sidebar` replaces the derived nav wholesale. `sidebarHeader`,
+ * `sidebarFooter` and `header` are free slots. `mobileNavOpen` controls
+ * the drawer. `routeFocus={false}` turns the focus move off, and an object
+ * sets its route key, target or announcement.
  */
 export declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/layout/route-focus.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Layout's focus management after a client-side navigation, the way
+ * accessible SPA routers do it: once the new page is in, focus moves to its
+ * main heading (else <main>) and a polite live region says its title.
+ *
+ * It needs no router. The route is the URL's path (a hash route such as
+ * `#/events` included, search params left out), or the `routeKey` option. A
+ * change is noticed when the Layout renders and when anything in <main>
+ * changes, so a router that re-renders only its outlet is covered too.
+ * Internal to @karni/ui. Layout's `routeFocus` prop is the public surface.
+ */
+import * as React from "react";
+/** What Layout's `routeFocus` prop takes when it is an object. */
+export interface LayoutRouteFocusOptions {
+    /**
+     * The current route: focus moves when it changes. Default: the URL's path
+     * (`location.pathname`, plus a hash route such as `#/events`), so a change
+     * of search params only (filters, pagination, sorting) never moves focus.
+     * Pass your router's pathname or route id when the URL does not say which
+     * page is showing (a memory router).
+     */
+    routeKey?: string;
+    /**
+     * The element that takes focus after a navigation. Default: the first
+     * `<h1>` in `<main>`, else `<main>` itself. An element that cannot take
+     * focus gets `tabindex="-1"`.
+     */
+    getTarget?: (main: HTMLElement) => HTMLElement | null;
+    /**
+     * What the live region says after a navigation. Default: the document
+     * title when the new page changed it, else the heading's text. Return ""
+     * to say nothing.
+     */
+    getAnnouncement?: (target: HTMLElement) => string;
+}
+export interface RouteFocusOptions extends LayoutRouteFocusOptions {
+    enabled: boolean;
+}
+/**
+ * Watches the route and, after a navigation, moves focus into the new page.
+ * Returns the live region's text.
+ */
+export declare function useRouteFocus(mainRef: React.RefObject<HTMLElement | null>, options: RouteFocusOptions): string;

package/dist/src/components/modal/modal.d.ts

@@ -1,12 +1,46 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
 /**
- * Escape hatch for footer buttons: any element wrapped in <ModalClose asChild>
- * closes the modal on click (re-exported Radix Dialog.Close).
+ * Escape hatch for footer buttons: any element wrapped in
+ * `<ModalClose asChild>` closes the modal on click (re-exported Radix
+ * Dialog.Close).
  */
 export declare const ModalClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * The modal's title: names the dialog (aria-labelledby). A custom `Header`
+ * slot renders it so the dialog stays labelled.
+ */
+export declare const ModalTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+/** The modal's description: describes the dialog (aria-describedby). */
+export declare const ModalDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+/** What the `Header` slot receives. Render ModalTitle (and ModalDescription) inside it. */
+export interface ModalHeaderProps {
+    title: React.ReactNode;
+    /** The `description` prop, or undefined. */
+    description?: React.ReactNode;
+}
+/** What the `Footer` slot receives: the `footer` prop. */
+export interface ModalFooterProps {
+    children: React.ReactNode;
+}
+/** What the `CloseButton` slot receives. Wrap your button in <ModalClose asChild>. */
+export interface ModalCloseButtonProps {
+    /** Its accessible name ("Close"). */
+    label: string;
+}
+/** The parts of the dialog a project can replace (`slots={{ Footer: StickyFooter }}`). */
+export interface ModalSlots {
+    /** Title and description. It must render ModalTitle. */
+    Header: React.ComponentType<ModalHeaderProps>;
+    /** The actions row. */
+    Footer: React.ComponentType<ModalFooterProps>;
+    /** The top-right close button. It must close through ModalClose. */
+    CloseButton: React.ComponentType<ModalCloseButtonProps>;
+}
+/** The default pieces of the dialog, for wrapping one. */
+export declare const defaultModalSlots: ModalSlots;
 export interface ModalProps {
-    /** Dialog title — always rendered (Radix requires it for accessibility). */
+    /** Dialog title, always rendered (Radix requires it for accessibility). */
     title: React.ReactNode;
     /** Optional description under the title, linked via aria-describedby. */
     description?: React.ReactNode;
@@ -26,6 +60,8 @@ export interface ModalProps {
     onOpenChange?: (open: boolean) => void;
     /** Hides the top-right X button. */
     hideCloseButton?: boolean;
+    /** Replaces the Header, Footer or CloseButton. See ModalSlots. */
+    slots?: Partial<ModalSlots>;
     /** Extra classes for the content panel. */
     className?: string;
     /**
@@ -36,10 +72,15 @@ export interface ModalProps {
 }
 /**
  * Themed Radix Dialog. Works controlled (`open` + `onOpenChange`) or
- * uncontrolled via the `trigger` slot; `footer` is the actions row.
+ * uncontrolled via the `trigger` slot, and `footer` is the actions row.
+ *
+ * Keyboard and screen readers: the dialog is named by its title and
+ * described by its description. Focus moves into it on open, Tab stays
+ * inside, Escape closes, and focus returns to what opened it.
  *
- * Escape hatches: `contentProps` reaches the Radix content part, `className`
- * restyles the panel, `hideCloseButton` drops the X, and `ModalClose` lets any
- * footer element close the dialog.
+ * Escape hatches: `slots` replaces the Header, Footer or CloseButton,
+ * `contentProps` reaches the Radix content part, `className` restyles the
+ * panel, `hideCloseButton` drops the X, and `ModalClose` lets any footer
+ * element close the dialog.
  */
-export declare function Modal({ title, description, children, footer, trigger, open, defaultOpen, onOpenChange, hideCloseButton, className, contentProps, }: ModalProps): React.ReactElement;
+export declare function Modal({ title, description, children, footer, trigger, open, defaultOpen, onOpenChange, hideCloseButton, slots, className, contentProps, }: ModalProps): React.ReactElement;

package/dist/src/components/page/page.d.ts

@@ -1,4 +1,30 @@
 import * as React from "react";
+/** What the `Header` slot receives: the title row's pieces, already rendered by their slots. */
+export interface PageHeaderProps {
+    /** The Title slot holding `title`. */
+    title: React.ReactNode;
+    /** The Description slot holding `description`, or null. */
+    description: React.ReactNode;
+    /** The Actions slot holding `actions`, or null. */
+    actions: React.ReactNode;
+    /** `headerClassName`. */
+    className?: string;
+}
+/** What the `Title`, `Description` and `Actions` slots receive. */
+export interface PageSlotContentProps {
+    children: React.ReactNode;
+}
+/** The parts of the page chrome a project can replace (`slots={{ Title: MyHeading }}`). */
+export interface PageSlots {
+    /** The row holding the title, description and actions. */
+    Header: React.ComponentType<PageHeaderProps>;
+    /** The page heading. The default is the page's <h1>. */
+    Title: React.ComponentType<PageSlotContentProps>;
+    /** The line under the title. */
+    Description: React.ComponentType<PageSlotContentProps>;
+    /** The container of the actions, right of the title. */
+    Actions: React.ComponentType<PageSlotContentProps>;
+}
 export interface PageProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
     /** Page heading, rendered as an <h1>. */
     title: React.ReactNode;
@@ -7,23 +33,28 @@ export interface PageProps extends Omit<React.HTMLAttributes<HTMLElement>, "titl
     /** Slot rendered to the right of the title (buttons, menus, …). */
     actions?: React.ReactNode;
     /**
-     * Escape hatch: replaces the entire derived header (title/description/
-     * actions are ignored when given).
+     * Replaces the entire derived header (title/description/actions are
+     * ignored when given). Prefer the `Header` slot, which still receives them.
      */
     header?: React.ReactNode;
+    /** Replaces pieces of the chrome. See PageSlots. */
+    slots?: Partial<PageSlots>;
     /** Extra classes for the derived header row. */
     headerClassName?: string;
     /** Extra classes for the content area under the header. */
     contentClassName?: string;
     children?: React.ReactNode;
 }
+/** The default pieces of the page chrome, for wrapping one. */
+export declare const defaultPageSlots: PageSlots;
 /**
- * Standard page chrome: an <h1> title row with an actions slot, then the
+ * Standard page chrome: an `<h1>` title row with an actions slot, then the
  * content. The target usage `<Page title="Events"><ResourceTable … /></Page>`
  * is a complete screen.
  *
- * Escape hatches: `header` replaces the whole derived header; `className`,
- * `headerClassName` and `contentClassName` merge through cn(); every other
+ * Escape hatches: `slots` replaces the Header, Title, Description or
+ * Actions. `header` replaces the whole derived header. `className`,
+ * `headerClassName` and `contentClassName` merge through cn(). Every other
  * prop passes through to the root <section>.
  */
 export declare const Page: React.ForwardRefExoticComponent<PageProps & React.RefAttributes<HTMLElement>>;

package/dist/src/components/primitives/button.d.ts

@@ -25,6 +25,7 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Button
 /**
  * Themed button. `type` defaults to "button" (pass type="submit" in forms).
  * `className` is merged via cn(), so consumer classes win.
+ * A project replaces it with its own through `primitives={{ button: ... }}` on KarniProvider.
  */
 export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import('../..').VariantSelection<{
     variant: {

package/dist/src/components/primitives/checkbox.d.ts

@@ -1,5 +1,8 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as React from "react";
 export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
-/** Themed checkbox (Radix Checkbox) with a check mark indicator. */
+/** Themed checkbox (Radix Checkbox) with a check mark indicator.
+ *
+ * A project replaces it with its own through `primitives={{ checkbox: ... }}` on KarniProvider.
+ */
 export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/primitives/dropdown-menu.d.ts

@@ -10,7 +10,7 @@ export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<Dropdown
 export declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
 /** The styled menu panel. */
 export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-/** One menu item; `onSelect` runs the action. */
+/** One menu item, whose `onSelect` runs the action. */
 export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/primitives/icons.d.ts

@@ -2,10 +2,18 @@ import * as React from "react";
 /**
  * Minimal inline SVG icons used by the primitives (no icon dependency).
  * All strokes use `currentColor`, so they follow the text color tokens.
- * Internal to @karni/ui — not part of the public barrel.
+ * Internal to @karni/ui, not part of the public barrel.
  */
 type IconProps = React.SVGAttributes<SVGSVGElement>;
 export declare function CheckIcon(props: IconProps): React.ReactElement;
 export declare function ChevronDownIcon(props: IconProps): React.ReactElement;
 export declare function ChevronUpIcon(props: IconProps): React.ReactElement;
+export declare function AlertIcon(props: IconProps): React.ReactElement;
+export declare function LockIcon(props: IconProps): React.ReactElement;
+export declare function OfflineIcon(props: IconProps): React.ReactElement;
+export declare function SearchIcon(props: IconProps): React.ReactElement;
+export declare function SpinnerIcon(props: IconProps): React.ReactElement;
+export declare function SunIcon(props: IconProps): React.ReactElement;
+export declare function MoonIcon(props: IconProps): React.ReactElement;
+export declare function MonitorIcon(props: IconProps): React.ReactElement;
 export {};

package/dist/src/components/primitives/input.d.ts

@@ -1,4 +1,7 @@
 import * as React from "react";
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
-/** Themed text input; every native `<input>` prop passes through. */
+/** Themed text input that passes every native `<input>` prop through.
+ *
+ * A project replaces it with its own through `primitives={{ input: ... }}` on KarniProvider.
+ */
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/primitives/label.d.ts

@@ -1,5 +1,8 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as React from "react";
 export type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
-/** Themed form label (Radix Label) that dims when its field is disabled. */
+/** Themed form label (Radix Label) that dims when its field is disabled.
+ *
+ * A project replaces it with its own through `primitives={{ label: ... }}` on KarniProvider.
+ */
 export declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/dist/src/components/primitives/select.d.ts

@@ -13,15 +13,30 @@ export declare const SelectRoot: React.FC<SelectPrimitive.SelectProps>;
 export declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 /** Shows the selected option's label inside `SelectTrigger`. */
 export declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-/** The styled button that opens the select. */
+/** The styled button that opens the select.
+ *
+ * Part of the `select` family a project can replace (`primitives={{ select: ... }}` on KarniProvider).
+ */
 export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-/** The styled dropdown panel that lists the options. */
+/** The styled dropdown panel that lists the options.
+ *
+ * Part of the `select` family a project can replace (`primitives={{ select: ... }}` on KarniProvider).
+ */
 export declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-/** A heading inside a `SelectGroup`. */
+/** A heading inside a `SelectGroup`.
+ *
+ * Part of the `select` family a project can replace (`primitives={{ select: ... }}` on KarniProvider).
+ */
 export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-/** One selectable option; `value` is what the select reports. */
+/** One selectable option, whose `value` is what the select reports.
+ *
+ * Part of the `select` family a project can replace (`primitives={{ select: ... }}` on KarniProvider).
+ */
 export declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-/** A divider line between option groups. */
+/** A divider line between option groups.
+ *
+ * Part of the `select` family a project can replace (`primitives={{ select: ... }}` on KarniProvider).
+ */
 export declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectOption {
     /** Must be non-empty and not the reserved sentinel. */
@@ -38,7 +53,8 @@ export interface SelectProps {
     placeholder?: React.ReactNode;
     /**
      * Renders a clear item at the top of the list (contract D8): pass it for
-     * nullable fields (label "—" by default) and filter contexts (e.g. "All").
+     * nullable fields (labelled with `EmptyValue` by default, a dash read as
+     * "empty") and filter contexts (e.g. "All").
      * Choosing it emits `null`.
      */
     clearable?: boolean;
@@ -51,6 +67,21 @@ export interface SelectProps {
     className?: string;
     contentClassName?: string;
     "aria-label"?: string;
+    /** Forwarded to the trigger, like the other `aria-*` props below. */
+    "aria-labelledby"?: string;
+    /** Ids of the help text and error message that describe the field. */
+    "aria-describedby"?: string;
+    /** Marks the field invalid: the trigger reads it and draws its destructive border. */
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+    "aria-required"?: boolean | "true" | "false";
+    /**
+     * Called when focus leaves the select, never when it moves into the open
+     * list, so react-hook-form's onBlur validation does not run while the user
+     * is still choosing.
+     */
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    /** Called when the list opens or closes. */
+    onOpenChange?: (open: boolean) => void;
     /** Extra <SelectItem>/<SelectGroup> nodes appended after `options` (escape hatch). */
     children?: React.ReactNode;
 }

package/dist/src/components/primitives/skeleton.d.ts

@@ -1,4 +1,7 @@
 import * as React from "react";
 export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
-/** Loading placeholder block; size it with width/height utility classes. */
+/** Loading placeholder block that you size with width/height utility classes.
+ *
+ * A project replaces it with its own through `primitives={{ skeleton: ... }}` on KarniProvider.
+ */
 export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/primitives/switch.d.ts

@@ -1,5 +1,8 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import * as React from "react";
 export type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>;
-/** Themed on/off toggle (Radix Switch). */
+/** Themed on/off toggle (Radix Switch).
+ *
+ * A project replaces it with its own through `primitives={{ switch: ... }}` on KarniProvider.
+ */
 export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/primitives/tabs.d.ts

@@ -1,10 +1,10 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
-/** Tab set root (Radix Tabs); holds the selected value. */
+/** Tab set root (Radix Tabs) that holds the selected value. */
 export declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
 /** The row of tab buttons. */
 export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-/** One tab button; `value` names the panel it opens. */
+/** One tab button, whose `value` names the panel it opens. */
 export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** The panel shown while its `value` is the selected tab. */
 export declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/primitives/textarea.d.ts

@@ -1,4 +1,7 @@
 import * as React from "react";
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-/** Themed multi-line text input; every native `<textarea>` prop passes through. */
+/** Themed multi-line text input that passes every native `<textarea>` prop through.
+ *
+ * A project replaces it with its own through `primitives={{ textarea: ... }}` on KarniProvider.
+ */
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/src/components/resource/ResourceDetail.d.ts

@@ -1,7 +1,7 @@
 /**
  * Barrel-facing path for <ResourceDetail>. The implementation lives in
- * ./detail/ (resource form builder); every contract-pinned export name is
+ * ./detail/ (resource form builder). Every contract-pinned export name is
  * re-exported here so src/index.ts keeps resolving this module.
  */
-export { ResourceDetail } from './detail/ResourceDetail';
-export type { ResourceDetailProps, ResourceDetailFieldOverride } from './detail/ResourceDetail';
+export { ResourceDetail, defaultResourceDetailSlots } from './detail/ResourceDetail';
+export type { ResourceDetailProps, ResourceDetailFieldOverride, ResourceDetailSlots, ResourceDetailLoadingProps, ResourceDetailErrorProps, ResourceDetailNotFoundProps, ResourceDetailDeletedProps, ResourceDetailEmptyValueProps, ResourceDetailDeleteDialogProps, } from './detail/ResourceDetail';