@plexui/ui 0.19.0 → 0.20.0

package/dist/es/styles/variables-tokens-root.css

@@ -1,41 +1 @@
-/*
- * Plex UI tokens that semantic + components tiers reference via var(...).
- *
- * These live in `:root` (NOT in `@theme static`) so they don't interfere
- * with the consumer's Tailwind theme. With this layout:
- *   - Plex UI components see `--radius-md`, `--font-sans`, `--font-weight-medium`
- *     and render correctly.
- *   - Consumer's Tailwind utilities (`rounded-md`, `rounded-full`, `text-sm`)
- *     keep using Tailwind's own `@theme` defaults — Plex UI doesn't reset
- *     them with `--radius-*: initial`.
- *
- * If a consumer wants the Plex scale to also drive their Tailwind utilities,
- * they import the standalone `@plexui/ui/styles/variables-tailwind-theme.css`
- * file in addition to `@plexui/ui/css` (see /docs/installation).
- */
-:root {
-  /* Radii */
-  --radius-2xs: 0.125rem; /* 2px */
-  --radius-xs: 0.25rem; /* 4px */
-  --radius-sm: 0.375rem; /* 6px */
-  --radius-md: 0.5rem; /* 8px */
-  --radius-lg: 0.625rem; /* 10px */
-  --radius-xl: 0.75rem; /* 12px */
-  --radius-2xl: 1rem; /* 16px */
-  --radius-3xl: 1.25rem; /* 20px */
-  --radius-4xl: 1.5rem; /* 24px */
-  --radius-full: 9999px;
-
-  /* Font stacks */
-  --font-sans: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Sans", "Helvetica",
-    "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
-  --font-serif: ui-serif, Georgia, "Times New Roman", serif;
-  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Monaco", "Consolas",
-    "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
-
-  /* Font weights */
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-}
+@import "@plexui/styles/styles/variables-tokens-root.css";

package/dist/es/types.js

@@ -1,5 +1,5 @@
 // reference is needed instead of import so consumer projects can compile properly
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="./global.d.ts" />
+/// <reference path="./global.d.ts" preserve="true" />
 export {};
 //# sourceMappingURL=types.js.map

package/dist/es/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,qEAAqE;AACrE,sCAAsC","sourcesContent":["// reference is needed instead of import so consumer projects can compile properly\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n/// <reference path=\"./global.d.ts\" />\n\nexport type Size =\n  | \"5xs\"\n  | \"4xs\"\n  | \"3xs\"\n  | \"2xs\"\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\"\n  | \"5xl\"\n  | \"6xl\"\nexport type Sizes<T extends Size = Size> = T\n\nexport type ControlSize = Sizes<\"3xs\" | \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\">\n\nexport type Radius = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"full\"\nexport type Radii<T extends Radius = Radius> = T\n\nexport type TextColor = \"base\" | \"emphasis\" | \"secondary\" | \"tertiary\"\nexport type TextColors<T extends TextColor = TextColor> = T\n\nexport type SemanticColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"danger\"\n  | \"success\"\n  | \"warning\"\n  | \"caution\"\n  | \"discovery\"\n  | \"info\"\nexport type SemanticColors<T extends SemanticColor = SemanticColor> = T\n\nexport type Variant = \"solid\" | \"soft\" | \"outline\" | \"ghost\"\nexport type Variants<T extends Variant = Variant> = T\n\nexport type Alignment = \"start\" | \"center\" | \"end\"\nexport type Alignments<T extends Alignment = Alignment> = T\n\nexport type FontWeight = \"inherit\" | \"normal\" | \"medium\" | \"semibold\" | \"bold\"\nexport type FontWeights<T extends FontWeight = FontWeight> = T\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,qEAAqE;AACrE,sDAAsD","sourcesContent":["// reference is needed instead of import so consumer projects can compile properly\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n/// <reference path=\"./global.d.ts\" preserve=\"true\" />\n\n// The prop contract lives in @plexui/styles so every framework package shares it.\nexport type * from \"@plexui/styles/types\"\n"]}

package/dist/es/vite/index.js

@@ -1,54 +1,4 @@
-/**
- * Vite plugin for Plex UI.
- *
- * Importing `@plexui/ui/vite` and adding `plexui()` to your `plugins`
- * array eliminates every install-time gotcha documented in
- * /docs/installation:
- *
- *   1. Pins `css.transformer = 'postcss'` so Lightning CSS doesn't
- *      reorder cascade layers strict-by-first-occurrence.
- *   2. Pins `build.cssMinify = 'esbuild'` so Vite 8's Lightning CSS
- *      minifier doesn't strip the bare `@layer` declaration.
- *   3. Injects `<style>@layer theme, base, components, utilities;</style>`
- *      into <head> as a runtime failsafe — the browser sees the layer
- *      order before any stylesheet rule arrives, regardless of how the
- *      bundler shuffles things.
- *
- * Usage:
- *
- *     // vite.config.ts
- *     import { defineConfig } from 'vite';
- *     import plexui from '@plexui/ui/vite';
- *
- *     export default defineConfig({
- *       plugins: [plexui()],
- *     });
- *
- * That replaces the manual `@layer …;` declaration in main.css and the
- * manual `css.transformer` / `build.cssMinify` overrides. Your global
- * stylesheet still needs `@import "@plexui/ui/css"` and `@source` —
- * those wire the runtime tokens and Tailwind class-extraction, which a
- * Vite plugin can't do for you.
- */
-const LAYER_DECLARATION = "<style>@layer theme, base, components, utilities;</style>";
-export default function plexui(options = {}) {
-    const { injectLayerOrder = true } = options;
-    return {
-        name: "@plexui/ui",
-        enforce: "pre",
-        config() {
-            return {
-                css: { transformer: "postcss" },
-                build: { cssMinify: "esbuild" },
-            };
-        },
-        transformIndexHtml(html) {
-            if (!injectLayerOrder)
-                return html;
-            // Place the layer declaration right after <head> so it lands
-            // before any bundler-injected <link rel="stylesheet">.
-            return html.replace(/(<head[^>]*>)/i, `$1\n    ${LAYER_DECLARATION}`);
-        },
-    };
-}
+// The plugin is framework-agnostic and lives in @plexui/styles. This keeps
+// `@plexui/ui/vite` working for existing installs.
+export { default } from "@plexui/styles/vite";
 //# sourceMappingURL=index.js.map

package/dist/es/vite/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/vite/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAkBH,MAAM,iBAAiB,GACrB,2DAA2D,CAAA;AAW7D,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,UAA+B,EAAE;IAC9D,MAAM,EAAE,gBAAgB,GAAG,IAAI,EAAE,GAAG,OAAO,CAAA;IAE3C,OAAO;QACL,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE,KAAK;QACd,MAAM;YACJ,OAAO;gBACL,GAAG,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;gBAC/B,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE;aAChC,CAAA;QACH,CAAC;QACD,kBAAkB,CAAC,IAAI;YACrB,IAAI,CAAC,gBAAgB;gBAAE,OAAO,IAAI,CAAA;YAClC,6DAA6D;YAC7D,uDAAuD;YACvD,OAAO,IAAI,CAAC,OAAO,CACjB,gBAAgB,EAChB,WAAW,iBAAiB,EAAE,CAC/B,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC","sourcesContent":["/**\n * Vite plugin for Plex UI.\n *\n * Importing `@plexui/ui/vite` and adding `plexui()` to your `plugins`\n * array eliminates every install-time gotcha documented in\n * /docs/installation:\n *\n *   1. Pins `css.transformer = 'postcss'` so Lightning CSS doesn't\n *      reorder cascade layers strict-by-first-occurrence.\n *   2. Pins `build.cssMinify = 'esbuild'` so Vite 8's Lightning CSS\n *      minifier doesn't strip the bare `@layer` declaration.\n *   3. Injects `<style>@layer theme, base, components, utilities;</style>`\n *      into <head> as a runtime failsafe — the browser sees the layer\n *      order before any stylesheet rule arrives, regardless of how the\n *      bundler shuffles things.\n *\n * Usage:\n *\n *     // vite.config.ts\n *     import { defineConfig } from 'vite';\n *     import plexui from '@plexui/ui/vite';\n *\n *     export default defineConfig({\n *       plugins: [plexui()],\n *     });\n *\n * That replaces the manual `@layer …;` declaration in main.css and the\n * manual `css.transformer` / `build.cssMinify` overrides. Your global\n * stylesheet still needs `@import \"@plexui/ui/css\"` and `@source` —\n * those wire the runtime tokens and Tailwind class-extraction, which a\n * Vite plugin can't do for you.\n */\n\n// We deliberately do NOT import from \"vite\". Keeping vite out of the\n// build keeps it out of the runtime dependency graph entirely (the\n// plugin file is a few dozen lines and only describes the shape vite\n// expects). Consumers get full type-safety by declaring their config\n// `defineConfig({ plugins: [plexui()] })` — vite's own types cover the\n// `Plugin[]` slot, so our return value is just shaped to match it.\ntype ViteLikePlugin = {\n  name: string\n  enforce?: \"pre\" | \"post\"\n  config?: () => {\n    css?: { transformer?: \"postcss\" | \"lightningcss\" }\n    build?: { cssMinify?: boolean | \"esbuild\" | \"lightningcss\" }\n  }\n  transformIndexHtml?: (html: string) => string\n}\n\nconst LAYER_DECLARATION =\n  \"<style>@layer theme, base, components, utilities;</style>\"\n\nexport type PlexUIPluginOptions = {\n  /**\n   * Inject the cascade-layer `<style>` tag into <head> as a runtime\n   * failsafe. Defaults to `true`. Disable only if you've already added\n   * the equivalent `<style>` tag to your `index.html` by hand.\n   */\n  injectLayerOrder?: boolean\n}\n\nexport default function plexui(options: PlexUIPluginOptions = {}): ViteLikePlugin {\n  const { injectLayerOrder = true } = options\n\n  return {\n    name: \"@plexui/ui\",\n    enforce: \"pre\",\n    config() {\n      return {\n        css: { transformer: \"postcss\" },\n        build: { cssMinify: \"esbuild\" },\n      }\n    },\n    transformIndexHtml(html) {\n      if (!injectLayerOrder) return html\n      // Place the layer declaration right after <head> so it lands\n      // before any bundler-injected <link rel=\"stylesheet\">.\n      return html.replace(\n        /(<head[^>]*>)/i,\n        `$1\\n    ${LAYER_DECLARATION}`,\n      )\n    },\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/vite/index.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,mDAAmD;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA","sourcesContent":["// The plugin is framework-agnostic and lives in @plexui/styles. This keeps\n// `@plexui/ui/vite` working for existing installs.\nexport { default } from \"@plexui/styles/vite\"\nexport type { PlexUIPluginOptions } from \"@plexui/styles/vite\"\n"]}

package/dist/types/components/Accordion/index.d.ts

@@ -1 +1 @@
-export { Accordion, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, } from "./Accordion";
+export { Accordion, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, } from "./Accordion.js";

package/dist/types/components/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode, type Ref } from "react";
-import { type SemanticColors, type Variants } from "../../types";
+import { type SemanticColors, type Variants } from "../../types.js";
 export type AlertProps = {
     /**
      * Color for the button
@@ -27,10 +27,16 @@ export type AlertProps = {
     actionsClassName?: string;
     /** Callback when dismiss button is clicked. Shows dismiss button when provided. */
     onDismiss?: () => void;
+    /**
+     * A full-width strip across the top or bottom of a page or panel (offline,
+     * read-only, a new version): square corners and lines above and below only.
+     * @default false
+     */
+    banner?: boolean;
     /** Ref applied to the alert container */
     ref?: Ref<HTMLDivElement>;
 };
-export declare const Alert: ({ color, variant, title, description, actions, actionsPlacement, indicator, className, actionsClassName, onDismiss, ref, ...restProps }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ color, variant, title, description, actions, actionsPlacement, indicator, className, actionsClassName, onDismiss, banner, ref, ...restProps }: AlertProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Indicator: ({ color }: {
     color: AlertProps["color"];
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Alert/index.d.ts

@@ -1 +1 @@
-export { Alert, type AlertProps } from "./Alert";
+export { Alert, type AlertProps } from "./Alert.js";

package/dist/types/components/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { type SemanticColors, type Variants } from "../../types";
+import { type SemanticColors, type Variants } from "../../types.js";
 export type AvatarProps = {
     /** Class name applied to the avatar */
     className?: string;

package/dist/types/components/Avatar/index.d.ts

@@ -1,2 +1,2 @@
-export { Avatar, type AvatarProps } from "./Avatar";
-export { AvatarGroup, type AvatarGroupProps } from "./AvatarGroup";
+export { Avatar, type AvatarProps } from "./Avatar.js";
+export { AvatarGroup, type AvatarGroupProps } from "./AvatarGroup.js";

package/dist/types/components/Badge/index.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type SemanticColors, type Sizes, type Variants } from "../../types";
+import { type SemanticColors, type Sizes, type Variants } from "../../types.js";
 export type BadgeProps = {
     /** Content rendered inside the badge */
     children: ReactNode;

package/dist/types/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentProps, type ReactNode } from "react";
+export type BreadcrumbProps = Omit<ComponentProps<"nav">, "children"> & {
+    children: ReactNode;
+    /**
+     * Text size: `sm` for a trail above a compact header, `md` above a page title
+     * @default md
+     */
+    size?: "sm" | "md";
+    /**
+     * What stands between two items
+     * @default a small chevron
+     */
+    separator?: ReactNode;
+};
+/**
+ * The trail of pages that leads to the current one. Each `Breadcrumb.Item`
+ * is a link, a button (`onClick`) or the current page (`current`).
+ */
+export declare const Breadcrumb: {
+    ({ children, size, separator, className, "aria-label": ariaLabel, ...restProps }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, href, to, current, onClick, className }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type BreadcrumbItemProps = {
+    children: ReactNode;
+    /** Link destination. Internal paths use the `linkComponent` of `PlexUIProvider` */
+    href?: string;
+    /** Router link destination, for link components that take `to` */
+    to?: string;
+    /** The current page: not a link, marked `aria-current="page"` */
+    current?: boolean;
+    /** Makes an item without a destination act as a button */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    className?: string;
+};

package/dist/types/components/Breadcrumb/index.d.ts

@@ -0,0 +1 @@
+export { Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps } from "./Breadcrumb.js";

package/dist/types/components/Button/Button.d.ts

@@ -1,11 +1,11 @@
 import { type ButtonHTMLAttributes, type ComponentProps, type ComponentType, type ReactNode } from "react";
-import { type ControlSize, type SemanticColors, type Sizes, type Variants } from "../../types";
+import { type ControlSize, type SemanticColors, type Sizes, type Variants } from "../../types.js";
 type CommonProps = {
     /**
      * Color for the button
-     * @default secondary
+     * @default primary
      */
-    color: SemanticColors<"primary" | "secondary" | "danger" | "success" | "info" | "discovery" | "caution" | "warning">;
+    color?: SemanticColors<"primary" | "secondary" | "danger" | "success" | "info" | "discovery" | "caution" | "warning">;
     /**
      * Style variant for the Button
      * @default "solid"

package/dist/types/components/Button/CopyButton.d.ts

@@ -1,9 +1,14 @@
-import { type ClipboardContent } from "../../lib/copyToClipboard";
-import { type ButtonProps } from "./Button";
+import { type ClipboardContent } from "../../lib/copyToClipboard.js";
+import { type ButtonProps } from "./Button.js";
 export type CopyButtonProps = {
     copyValue: string | ClipboardContent | (() => string) | (() => ClipboardContent);
     children?: React.ReactNode | ((props: {
         copied: boolean;
     }) => React.ReactNode);
-} & Omit<ButtonProps, "children">;
-export declare const CopyButton: ({ children, copyValue, onClick, ...restProps }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+    /**
+     * Called once the clipboard write settles, with whether it succeeded. The
+     * button shows the copied state only after a successful write.
+     */
+    onCopy?: (copied: boolean) => void;
+} & Omit<ButtonProps, "children" | "onCopy">;
+export declare const CopyButton: ({ children, copyValue, onClick, onCopy, ...restProps }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Button/index.d.ts

@@ -1,2 +1,2 @@
-export { Button, ButtonLink, type ButtonProps } from "./Button";
-export { CopyButton, type CopyButtonProps } from "./CopyButton";
+export { Button, ButtonLink, type ButtonProps } from "./Button.js";
+export { CopyButton, type CopyButtonProps } from "./CopyButton.js";

package/dist/types/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps, type HTMLAttributes, type Ref } from "react";
-import { Separator } from "../Separator";
+import { Separator } from "../Separator/index.js";
 export type ButtonGroupOrientation = "horizontal" | "vertical";
 export type ButtonGroupProps = HTMLAttributes<HTMLDivElement> & {
     /**
@@ -13,8 +13,9 @@ export type ButtonGroupProps = HTMLAttributes<HTMLDivElement> & {
 declare const ButtonGroupRoot: ({ orientation, className, ref, ...restProps }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
 export type ButtonGroupSeparatorProps = Omit<ComponentProps<typeof Separator>, "orientation"> & {
     /**
-     * When omitted, flips to match the surrounding ButtonGroup axis.
-     * Pass explicitly to override (rare).
+     * When omitted, uses `"vertical"`, the axis that looks right between
+     * horizontal items. Pass explicitly inside a vertical group.
+     * @default "vertical"
      */
     orientation?: ButtonGroupOrientation;
 };

package/dist/types/components/ButtonGroup/index.d.ts

@@ -1 +1 @@
-export { ButtonGroup, type ButtonGroupProps, type ButtonGroupOrientation, type ButtonGroupSeparatorProps, } from "./ButtonGroup";
+export { ButtonGroup, type ButtonGroupProps, type ButtonGroupOrientation, type ButtonGroupSeparatorProps, } from "./ButtonGroup.js";

package/dist/types/components/Card/index.d.ts

@@ -1 +1 @@
-export { Card, type CardProps, type CardSlotProps, type CardVariant, type CardSize, } from "./Card";
+export { Card, type CardProps, type CardSlotProps, type CardVariant, type CardSize, } from "./Card.js";

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -8,6 +8,8 @@ export type CheckboxProps = {
     checked?: boolean | "indeterminate";
     /** Optional accessible label rendered to the right of the checkbox. */
     label?: ReactNode;
+    /** Optional second line below the label. Linked via `aria-describedby`. */
+    description?: ReactNode;
     /** Event handler called when the state of the checkbox changes. */
     onCheckedChange?: (nextState: boolean) => void;
     /** Event handler called when the checkbox looses focus. */
@@ -43,4 +45,4 @@ export type CheckboxProps = {
      */
     variant?: "solid" | "ghost";
 };
-export declare const Checkbox: ({ className, label, id: propsId, disabled, orientation, pill, variant, ...restProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ className, label, description, id: propsId, disabled, orientation, pill, variant, ...restProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Checkbox/index.d.ts

@@ -1 +1 @@
-export { Checkbox, type CheckboxProps } from "./Checkbox";
+export { Checkbox, type CheckboxProps } from "./Checkbox.js";

package/dist/types/components/CodeBlock/index.d.ts

@@ -1,2 +1,2 @@
-export { CodeBlock, CodeBlockBase } from "./CodeBlock";
-export { CollapsibleCodeBlock, type CollapsibleCodeBlockProps } from "./CollapsibleCodeBlock";
+export { CodeBlock, CodeBlockBase } from "./CodeBlock.js";
+export { CollapsibleCodeBlock, type CollapsibleCodeBlockProps } from "./CollapsibleCodeBlock.js";

package/dist/types/components/DataTable/DataTable.d.ts

@@ -1,5 +1,5 @@
 import { type ColumnDef, type RowData, type RowSelectionState, type SortingState, type VisibilityState } from "@tanstack/react-table";
-declare module "@tanstack/react-table" {
+declare module "@tanstack/table-core" {
     interface ColumnMeta<TData extends RowData, TValue> {
         align?: "left" | "center" | "right";
     }
@@ -32,7 +32,8 @@ export type DataTableProps<TData> = {
     columnVisibility?: VisibilityState;
     /** Callback when column visibility changes */
     onColumnVisibilityChange?: (visibility: VisibilityState) => void;
-    /** Enable row selection checkboxes
+    /** Enable row selection: adds a first column with a checkbox per row and a
+     * header checkbox that selects every row
      * @default false
      */
     enableRowSelection?: boolean;

package/dist/types/components/DataTable/index.d.ts

@@ -1,5 +1,5 @@
-export { DataTable, type DataTableProps } from "./DataTable";
-export { DataTablePagination, type DataTablePaginationProps } from "./DataTablePagination";
-export { DataTableColumnHeader, type DataTableColumnHeaderProps } from "./DataTableColumnHeader";
+export { DataTable, type DataTableProps } from "./DataTable.js";
+export { DataTablePagination, type DataTablePaginationProps } from "./DataTablePagination.js";
+export { DataTableColumnHeader, type DataTableColumnHeaderProps } from "./DataTableColumnHeader.js";
 export type { ColumnDef, RowSelectionState, SortingState, VisibilityState, } from "@tanstack/react-table";
-export { idCell, dateTimeCell, statusCell, tooltipHeader } from "./columnHelpers";
+export { idCell, dateTimeCell, statusCell, tooltipHeader } from "./columnHelpers.js";

package/dist/types/components/DateInput/DateInput.d.ts

@@ -1,6 +1,6 @@
 import { type MaskitoDateMode, type MaskitoTimeMode } from "@maskito/kit";
 import { DateTime } from "luxon";
-import { type InputProps } from "../Input";
+import { type InputProps } from "../Input/index.js";
 export type DateInputProps = {
     value: DateTime | null;
     onChange: (value: DateTime | null) => void;

package/dist/types/components/DateInput/index.d.ts

@@ -1 +1 @@
-export { DateInput, type DateInputProps } from "./DateInput";
+export { DateInput, type DateInputProps } from "./DateInput.js";

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -1,11 +1,11 @@
 import { DateTime } from "luxon";
-import { type PopoverContentProps } from "../Popover";
-import { type SelectControlProps } from "../SelectControl";
+import { type PopoverContentProps } from "../Popover/index.js";
+import { type SelectControlProps } from "../SelectControl/index.js";
 export type DatePickerProps = Pick<SelectControlProps, "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-invalid"> & {
     /**
      * Allow targeting the input for forms and accessibility.
      */
-    id: string;
+    id?: string;
     /**
      * The selected date value.
      */
@@ -59,7 +59,7 @@ export type DatePickerProps = Pick<SelectControlProps, "aria-label" | "aria-labe
     variant?: SelectControlProps["variant"];
     /**
      * Determines if the select trigger should be a fully rounded pill shape
-     * @default false
+     * @default true
      */
     pill?: boolean;
     /**
@@ -87,8 +87,9 @@ export type DatePickerProps = Pick<SelectControlProps, "aria-label" | "aria-labe
     triggerShowIcon?: boolean;
     /**
      * Format of dates displayed in the trigger
+     * @default "MM/dd/yy", or "MM/dd/yy HH:mm" with showTime
      */
-    triggerDateFormat: string;
+    triggerDateFormat?: string;
     /**
      * Display a clear action that allows the select to be unset.
      * @default false
@@ -96,7 +97,7 @@ export type DatePickerProps = Pick<SelectControlProps, "aria-label" | "aria-labe
     clearable?: boolean;
     /**
      * Extends select to 100% of available width.
-     * @default true
+     * @default false
      */
     block?: boolean;
     /**

package/dist/types/components/DatePicker/context.d.ts

@@ -1,5 +1,5 @@
 import { DateTime } from "luxon";
-import type { SelectControlProps } from "../SelectControl";
+import type { SelectControlProps } from "../SelectControl/index.js";
 export type DateContextValue = {
     value: DateTime | null;
     min?: DateTime;

package/dist/types/components/DatePicker/index.d.ts

@@ -1,2 +1,2 @@
-export { DatePicker } from "./DatePicker";
-export type { DatePickerProps } from "./DatePicker";
+export { DatePicker } from "./DatePicker.js";
+export type { DatePickerProps } from "./DatePicker.js";

package/dist/types/components/DateRangePicker/Calendar.d.ts

@@ -1,4 +1,4 @@
-import { type DateRangeShortcut } from "./types";
+import { type DateRangeShortcut } from "./types.js";
 export declare const DateRangeCalendar: () => import("react/jsx-runtime").JSX.Element;
 export declare const DateRangeShortcuts: ({ shortcuts }: {
     shortcuts?: DateRangeShortcut[];

package/dist/types/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,7 +1,7 @@
 import { DateTime } from "luxon";
-import { type PopoverContentProps } from "../Popover";
-import type { SelectControlProps } from "../SelectControl";
-import { type DateRange, type DateRangeShortcut } from "./types";
+import { type PopoverContentProps } from "../Popover/index.js";
+import type { SelectControlProps } from "../SelectControl/index.js";
+import { type DateRange, type DateRangeShortcut } from "./types.js";
 export type DateRangePickerProps = {
     /**
      * The selected date range value.
@@ -65,7 +65,7 @@ export type DateRangePickerProps = {
     variant?: SelectControlProps["variant"];
     /**
      * Determines if the select trigger should be a fully rounded pill shape
-     * @default false
+     * @default true
      */
     pill?: boolean;
     /**
@@ -108,7 +108,7 @@ export type DateRangePickerProps = {
     clearable?: boolean;
     /**
      * Extends select to 100% of available width.
-     * @default true
+     * @default false
      */
     block?: boolean;
 };

package/dist/types/components/DateRangePicker/context.d.ts

@@ -1,6 +1,6 @@
 import { DateTime } from "luxon";
-import type { SelectControlProps } from "../SelectControl";
-import type { DateRange, DateRangeShortcut } from "./types";
+import type { SelectControlProps } from "../SelectControl/index.js";
+import type { DateRange, DateRangeShortcut } from "./types.js";
 export type DateRangeContextValue = {
     value: DateRange | null;
     min?: DateTime;

package/dist/types/components/DateRangePicker/index.d.ts

@@ -1,2 +1,2 @@
-export { DateRangePicker, type DateRangePickerProps } from "./DateRangePicker";
-export { type DateRange, type DateRangeShortcut } from "./types";
+export { DateRangePicker, type DateRangePickerProps } from "./DateRangePicker.js";
+export { type DateRange, type DateRangeShortcut } from "./types.js";

package/dist/types/components/Dialog/Dialog.d.ts

@@ -9,8 +9,9 @@ export declare const Dialog: {
     Trigger: ({ children }: {
         children: ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, width, showClose, className }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, width, showClose, className, placement, mobilePlacement, onOpenAutoFocus, onCloseAutoFocus, }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
     Header: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
     Footer: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
     Title: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
     Description: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
@@ -18,11 +19,28 @@ export declare const Dialog: {
         children: ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
 };
+export type DialogPlacement = "center" | "top" | "bottom" | "start" | "end" | "fullscreen";
 export type DialogContentProps = {
     children: ReactNode;
     width?: number | string;
     showClose?: boolean;
     className?: string;
+    /**
+     * Where the panel sits: centered, near the top (search, command lists),
+     * a sheet along the bottom, a full-height panel on the start or end side,
+     * or the whole screen.
+     * @default center
+     */
+    placement?: DialogPlacement;
+    /** Placement at 640px and below, such as a bottom sheet on phones. @default placement */
+    mobilePlacement?: Extract<DialogPlacement, "center" | "bottom" | "fullscreen">;
+    /**
+     * Called when focus moves into the dialog on open. Call
+     * `event.preventDefault()` to focus something else yourself.
+     */
+    onOpenAutoFocus?: (event: Event) => void;
+    /** Called when focus returns on close. Call `event.preventDefault()` to keep it elsewhere. */
+    onCloseAutoFocus?: (event: Event) => void;
 };
 type DialogSlotProps = {
     children: ReactNode;

package/dist/types/components/Dialog/index.d.ts

@@ -1 +1 @@
-export { Dialog, type DialogContentProps, type DialogProps } from "./Dialog";
+export { Dialog, type DialogContentProps, type DialogPlacement, type DialogProps } from "./Dialog.js";

package/dist/types/components/EmptyMessage/EmptyMessage.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type SemanticColors, type Sizes } from "../../types";
+import { type SemanticColors, type Sizes } from "../../types.js";
 export type EmptyMessageProps = {
     children: ReactNode;
     className?: string;
@@ -8,9 +8,21 @@ export type EmptyMessageProps = {
      * @default static
      */
     fill?: "static" | "absolute" | "none";
+    /**
+     * `sm` is the compact message for a panel, a card section or a list with
+     * nothing in it: smaller title, tighter spacing, no minimum width.
+     * @default md
+     */
+    size?: Sizes<"sm" | "md">;
+    /**
+     * `start` left-aligns the message, for an empty state that sits under a
+     * section heading instead of filling a surface.
+     * @default center
+     */
+    align?: "center" | "start";
 };
 export declare const EmptyMessage: {
-    ({ children, className, fill }: EmptyMessageProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, fill, size, align }: EmptyMessageProps): import("react/jsx-runtime").JSX.Element;
     Icon: ({ size, color, children, className }: EmptyMessageIconProps) => import("react/jsx-runtime").JSX.Element;
     Title: ({ children, className, color }: EmptyMessageTitleProps) => import("react/jsx-runtime").JSX.Element;
     Description: ({ children, className }: {
@@ -24,7 +36,7 @@ export declare const EmptyMessage: {
 };
 export type EmptyMessageIconProps = {
     /**
-     * @default sm
+     * @default md
      */
     size?: Sizes<"sm" | "md">;
     /**

package/dist/types/components/EmptyMessage/index.d.ts

@@ -1 +1 @@
-export { EmptyMessage, type EmptyMessageIconProps, type EmptyMessageProps } from "./EmptyMessage";
+export { EmptyMessage, type EmptyMessageIconProps, type EmptyMessageProps } from "./EmptyMessage.js";

package/dist/types/components/Field/Field.d.ts

@@ -1,6 +1,8 @@
-import type { ControlSize } from "../../types";
+import type { ControlSize } from "../../types.js";
 export type FieldChildProps = {
     id: string;
+    /** The label's id. Spread onto a control that the label's `for` cannot name, such as a Select trigger. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     "aria-invalid"?: boolean;
     opticallyAlign?: "start" | "end";
@@ -21,10 +23,15 @@ export type FieldProps = {
      * Uses the existing FieldError component internally.
      */
     errorMessage?: React.ReactNode;
+    /**
+     * Content placed at the end of the label row, such as a link that acts on
+     * the field ("Forgot password?", "Replace").
+     */
+    labelAction?: React.ReactNode;
     /**
      * Controls the font size of the label to visually match the child control's size.
      * Matches the ControlSize scale used by Input, Select, etc.
-     * @default "md"
+     * @default the child control's `size`, else "md"
      */
     size?: ControlSize;
     /**
@@ -58,8 +65,11 @@ export type FieldProps = {
     /**
      * The form control(s) to render.
      * - If a single ReactElement, Field clones it with { id, aria-describedby, aria-invalid }.
-     * - If a function (render prop), it is called with { id, "aria-describedby", "aria-invalid" }.
+     *   A child without its own `aria-label`, `aria-labelledby` or `label` also gets
+     *   `aria-labelledby` pointing at the label, which names controls the label's
+     *   `for` cannot reach, such as the Select and DatePicker triggers.
+     * - If a function (render prop), it is called with { id, "aria-labelledby", "aria-describedby", "aria-invalid" }.
      */
     children: React.ReactElement | ((fieldProps: FieldChildProps) => React.ReactNode);
 };
-export declare function Field({ label, description, errorMessage, size, required, orientation, opticallyAlign, id: idProp, className, children, }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function Field({ label, description, errorMessage, labelAction, size: sizeProp, required, orientation, opticallyAlign, id: idProp, className, children, }: FieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Field/index.d.ts

@@ -1 +1 @@
-export { Field, type FieldProps, type FieldChildProps } from "./Field";
+export { Field, type FieldProps, type FieldChildProps } from "./Field.js";