@karni/ui 0.0.0-stage → 0.4.0

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

@@ -0,0 +1,150 @@
+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;
+    /** Target URL (rendered as a plain <a> by default). */
+    href: string;
+    /** Optional icon rendered before the label. */
+    icon?: React.ReactNode;
+    /** Marks the current page (aria-current="page" + active styling). */
+    active?: boolean;
+    /** 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[];
+    /**
+     * 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;
+        defaultClassName: string;
+    }) => React.ReactNode;
+    /** Escape hatch: replaces the entire derived nav inside the sidebar. */
+    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.
+     */
+    sidebarHeader?: React.ReactNode;
+    /** Slot pinned to the bottom of the sidebar (user menu, logout, …). */
+    sidebarFooter?: React.ReactNode;
+    /** Header slot, rendered in the top bar next to the mobile menu button. */
+    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 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: `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

@@ -0,0 +1,86 @@
+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).
+ */
+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). */
+    title: React.ReactNode;
+    /** Optional description under the title, linked via aria-describedby. */
+    description?: React.ReactNode;
+    /** Body content. */
+    children?: React.ReactNode;
+    /** Footer slot (actions row). Use <ModalClose asChild> for cancel buttons. */
+    footer?: React.ReactNode;
+    /**
+     * Uncontrolled usage: a node (usually a Button) that opens the modal,
+     * rendered through Radix `asChild`.
+     */
+    trigger?: React.ReactNode;
+    /** Controlled open state (pair with onOpenChange). */
+    open?: boolean;
+    /** Initial state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    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;
+    /**
+     * Escape hatch: props spread onto Radix Dialog.Content
+     * (onEscapeKeyDown, onInteractOutside, …).
+     */
+    contentProps?: Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "children" | "className">;
+}
+/**
+ * Themed Radix Dialog. Works controlled (`open` + `onOpenChange`) or
+ * 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: `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, slots, className, contentProps, }: ModalProps): React.ReactElement;

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

@@ -0,0 +1,60 @@
+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;
+    /** Optional sub-heading under the title. */
+    description?: React.ReactNode;
+    /** Slot rendered to the right of the title (buttons, menus, …). */
+    actions?: React.ReactNode;
+    /**
+     * 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
+ * content. The target usage `<Page title="Events"><ResourceTable … /></Page>`
+ * is a complete screen.
+ *
+ * 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

@@ -0,0 +1,45 @@
+import { VariantProps } from '../../lib/variants';
+import * as React from "react";
+/**
+ * Exported for composition (escape hatch): render any element as a button
+ * lookalike with `className={buttonVariants({ variant: "outline" })}`.
+ */
+export declare const buttonVariants: import('../..').VariantFn<{
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+    };
+}>;
+export type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariantProps;
+/**
+ * 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: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+    };
+}> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +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.
+ *
+ * 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

@@ -0,0 +1,24 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+/** Dropdown menu root (Radix DropdownMenu). */
+export declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+/** The element that opens the menu. */
+export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Groups related menu items. */
+export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** Renders the menu into `document.body`. */
+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, whose `onSelect` runs the action. */
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+/** A menu item with a check mark that toggles `checked`. */
+export declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A non-interactive heading inside the menu. */
+export declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+/** A divider line between menu items. */
+export declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+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.
+ */
+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

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+/** 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

@@ -0,0 +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.
+ *
+ * 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

@@ -0,0 +1,94 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from "react";
+/**
+ * The value that stands for "nothing selected" inside Radix Select, which reserves the empty string.
+ *
+ * This package maps the empty state through this sentinel at the component boundary (contract D8). Consumers of
+ * the composed <Select> never see it: `value`/`onValueChange` use `null`.
+ */
+export declare const KARNI_SELECT_EMPTY = "__karni_empty__";
+/** Radix Select root, for composing a custom select from the styled parts. */
+export declare const SelectRoot: React.FC<SelectPrimitive.SelectProps>;
+/** Groups related options inside `SelectContent`. */
+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.
+ *
+ * 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.
+ *
+ * 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`.
+ *
+ * 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, 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.
+ *
+ * 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. */
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    /** `null`/`""`/`undefined` all mean "no selection". */
+    value: string | null | undefined;
+    /** Receives `null` when the clear item is chosen, else the option value. */
+    onValueChange?: (value: string | null) => void;
+    options: readonly SelectOption[];
+    placeholder?: React.ReactNode;
+    /**
+     * Renders a clear item at the top of the list (contract D8): pass it for
+     * nullable fields (labelled with `EmptyValue` by default, a dash read as
+     * "empty") and filter contexts (e.g. "All").
+     * Choosing it emits `null`.
+     */
+    clearable?: boolean;
+    clearLabel?: React.ReactNode;
+    disabled?: boolean;
+    /** Forwarded to the hidden native select for HTML form submission. */
+    name?: string;
+    id?: string;
+    /** Merged onto the trigger. */
+    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;
+}
+/**
+ * Styled select for a list of `options`, with `null` for no selection. Maps the
+ * empty state through the KARNI_SELECT_EMPTY sentinel so `""` never reaches
+ * Radix (D8). For fully custom composition use SelectRoot/SelectTrigger/
+ * SelectContent/SelectItem directly.
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+/** 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

@@ -0,0 +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).
+ *
+ * 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

@@ -0,0 +1,10 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+/** 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, 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

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+/** 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

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

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

@@ -0,0 +1,8 @@
+/**
+ * Barrel-facing path for <ResourceForm>. The implementation lives in
+ * ./form/ (resource form builder). Every contract-pinned export name is
+ * re-exported here so src/index.ts keeps resolving this module.
+ */
+export { ResourceForm, defaultResourceFormSlots } from './form/ResourceForm';
+export type { ResourceFormProps, ResourceFormSlots, FieldOverride, KarniFieldProps, } from './form/ResourceForm';
+export type { ResourceFormErrorSummaryProps, ResourceFormFieldError, ResourceFormForbiddenProps, ResourceFormLoadingProps, ResourceFormSubmitErrorProps, } from './form/form-states';

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

@@ -0,0 +1,9 @@
+/**
+ * Barrel-facing path for <ResourceSelect>. The implementation lives in
+ * ./select/ (resource form builder). Every contract-pinned export name is
+ * re-exported here so src/index.ts keeps resolving this module.
+ */
+export { ResourceSelect } from './select/ResourceSelect';
+export type { ResourceSelectProps } from './select/ResourceSelect';
+export { defaultResourceSelectSlots } from './select/select-states';
+export type { ResourceSelectChipProps, ResourceSelectEmptyProps, ResourceSelectLoadingProps, ResourceSelectOptionProps, ResourceSelectSlots, } from './select/select-states';

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

@@ -0,0 +1,17 @@
+/**
+ * Public entry for ResourceTable (owner: resource table builder).
+ *
+ * The implementation lives in ./table/ (ResourceTable + filter bar +
+ * pagination controls + bulk select, contract "ResourceTable" + D5). This
+ * module keeps the barrel's import path and exported names stable.
+ */
+export { ResourceTable } from './table/ResourceTable';
+export type { BulkResult, ResourceTableDensity, ResourceTableKeyboardNavigation, ResourceTableProps, } from './table/ResourceTable';
+export type { ResourceColumn } from './table/derive-columns';
+export type { BulkAction, BulkActionReturn, BulkOutcome } from './table/BulkActionsBar';
+export { defaultResourceTableSlots } from './table/slots';
+export type { ResourceTableBulkActionsProps, ResourceTableForbiddenProps, ResourceTableLoadingProps, ResourceTableNoRecordsProps, ResourceTableNoResultsProps, ResourceTableOfflineProps, ResourceTablePaginationProps, ResourceTableRowCardProps, ResourceTableSlots, } from './table/slots';
+export type { ResourceTableActiveFilter } from './table/states';
+export type { ResourceTableCardField } from './table/RowCard';
+export { createHistoryStateStore } from './table/url-state';
+export type { ResourceTableStateStore } from './table/url-state';