@px-ui/ui 1.0.11 → 1.2.0

package/dist/components/toast.js

@@ -1,6 +1,6 @@
 "use client";
 
-import "../utils-DeIaBj75.js";
-import { a as toast, i as anchoredToastManager, n as Toaster, o as toastManager, r as anchoredToast, t as AnchoredToaster } from "../toast-BrPEQywl.js";
+import "../utils-DUlptRpf.js";
+import { a as toast, i as anchoredToastManager, n as Toaster, o as toastManager, r as anchoredToast, t as AnchoredToaster } from "../toast-BdxoP8vz.js";
 
 export { AnchoredToaster, Toaster, anchoredToast, anchoredToastManager, toast, toastManager };

package/dist/components/toggle-group.d.ts

@@ -1,5 +1,5 @@
-import { n as toggleVariants } from "../toggle-gjMAPmkg.js";
-import * as react_jsx_runtime296 from "react/jsx-runtime";
+import { n as toggleVariants } from "../toggle-0BxcVVwi.js";
+import * as react_jsx_runtime172 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
@@ -16,14 +16,14 @@ declare function ToggleGroup({
 }: ToggleGroup$1.Props & VariantProps<typeof toggleVariants> & {
   spacing?: number;
   orientation?: "horizontal" | "vertical";
-}): react_jsx_runtime296.JSX.Element;
+}): react_jsx_runtime172.JSX.Element;
 declare function ToggleGroupItem({
   className,
   children,
   variant,
   size,
   ...props
-}: Toggle.Props & VariantProps<typeof toggleVariants>): react_jsx_runtime296.JSX.Element;
+}: Toggle.Props & VariantProps<typeof toggleVariants>): react_jsx_runtime172.JSX.Element;
 //#endregion
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.ts.map

package/dist/components/toggle-group.js

@@ -1,7 +1,7 @@
-import { t as cn } from "../utils-DeIaBj75.js";
-import { n as toggleVariants } from "../toggle-CA4KsgWs.js";
-import * as React$1 from "react";
+import { t as cn } from "../utils-DUlptRpf.js";
+import { n as toggleVariants } from "../toggle-BZXrLBLK.js";
 import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
 import "class-variance-authority";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";

package/dist/components/toggle.d.ts

@@ -1,2 +1,2 @@
-import { n as toggleVariants, t as Toggle } from "../toggle-gjMAPmkg.js";
+import { n as toggleVariants, t as Toggle } from "../toggle-0BxcVVwi.js";
 export { Toggle, toggleVariants };

package/dist/components/toggle.js

@@ -1,6 +1,6 @@
 "use client";
 
-import "../utils-DeIaBj75.js";
-import { n as toggleVariants, t as Toggle } from "../toggle-CA4KsgWs.js";
+import "../utils-DUlptRpf.js";
+import { n as toggleVariants, t as Toggle } from "../toggle-BZXrLBLK.js";
 
 export { Toggle, toggleVariants };

package/dist/components/tooltip.d.ts

@@ -1,2 +1,2 @@
-import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../tooltip-7bptiThf.js";
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../tooltip-DWoVF4fx.js";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip.js

@@ -1,4 +1,4 @@
-import "../utils-DeIaBj75.js";
-import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../tooltip-BhxGE3Gb.js";
+import "../utils-DUlptRpf.js";
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../tooltip-Dsfn_zZD.js";
 
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/tree-select.d.ts

@@ -0,0 +1,192 @@
+import * as react_jsx_runtime227 from "react/jsx-runtime";
+import * as React$1 from "react";
+
+//#region src/components/tree-select.d.ts
+/**
+ * A single node in the tree passed to {@link TreeSelect}.
+ */
+interface TreeSelectNode {
+  /** Stable, unique identifier. Used as the selection key in `value`. */
+  id: string;
+  /** Human-readable label rendered on the row. */
+  label: React$1.ReactNode;
+  /** Plain-text label used for search matching. Falls back to `label` when it is a string. */
+  searchText?: string;
+  /** Optional child nodes. Presence of a non-empty array makes the row expandable. */
+  children?: TreeSelectNode[];
+  /** Disables the row's checkbox (and excludes it from parent propagation). */
+  disabled?: boolean;
+}
+/** Tri-state checked status for a node, per the active `selectionMode`. */
+type TreeSelectCheckedState = "checked" | "unchecked" | "indeterminate";
+/** How selecting a node affects the others. See {@link TreeSelectProps.selectionMode}. */
+type TreeSelectSelectionMode = "cascade" | "leaf" | "independent";
+/** Per-row context passed to {@link TreeSelectProps.renderNode}. */
+interface TreeSelectNodeMeta {
+  /** Tri-state of this row under the active `selectionMode`. */
+  state: TreeSelectCheckedState;
+  /** 0-based depth (root rows are depth 0). */
+  depth: number;
+  /** Whether this (expandable) row is currently open. Always false for leaves. */
+  expanded: boolean;
+  /** Whether the row is disabled (the node itself, or the whole control). */
+  disabled: boolean;
+  /** Put this on your label text (`id={meta.labelId}`) to name the checkbox. */
+  labelId: string;
+  /** Toggle this row's selection; omit `next` to flip from the current state. */
+  toggle: (next?: boolean) => void;
+}
+interface TreeSelectProps extends Omit<React$1.ComponentProps<"div">, "onChange" | "defaultValue"> {
+  /** The tree of nodes to render. */
+  nodes: TreeSelectNode[];
+  /** Controlled selection — array of selected node `id`s. Pair with `onValueChange`. */
+  value?: string[];
+  /** Initial selection for the uncontrolled case. @default [] */
+  defaultValue?: string[];
+  /** Called whenever the selection changes, with the next array of selected `id`s. */
+  onValueChange?: (value: string[]) => void;
+  /**
+   * Render a search box that filters the tree. Matching nodes and their
+   * ancestors are kept; non-matching branches are hidden.
+   * @default false
+   */
+  searchable?: boolean;
+  /** Placeholder for the search input. @default "Search…" */
+  searchPlaceholder?: string;
+  /** Controlled search query. Pair with `onSearchChange`. */
+  search?: string;
+  /** Default search query for the uncontrolled case. @default "" */
+  defaultSearch?: string;
+  /** Called when the internal search query changes. */
+  onSearchChange?: (search: string) => void;
+  /**
+   * Maximum depth to render, 0-based (root nodes are depth 0). Nodes deeper
+   * than this are not rendered and are excluded from propagation/counts.
+   * Omit for unlimited depth.
+   */
+  maxDepth?: number;
+  /**
+   * How selecting a node affects the others.
+   * - `"cascade"` (default): selecting a parent selects all of its enabled
+   *   descendants; a branch with a mix shows the indeterminate state. The
+   *   selection includes both parent ids and leaf ids.
+   * - `"leaf"`: only leaf rows are selectable. A parent checkbox toggles its
+   *   enabled leaves and reflects their tri-state, but parent ids never enter
+   *   `value`, and counts are based on leaves.
+   * - `"independent"`: each node toggles only itself — no cascade and no
+   *   indeterminate roll-up.
+   * @default "cascade"
+   */
+  selectionMode?: TreeSelectSelectionMode;
+  /**
+   * Show a summary line above the tree with the selected count.
+   * @default true
+   */
+  showSummary?: boolean;
+  /**
+   * Render a custom summary given the selected ids and the total selectable
+   * count. Overrides the default count text.
+   */
+  renderSummary?: (selectedCount: number, total: number) => React$1.ReactNode;
+  /**
+   * Render the row body (everything after the checkbox) yourself. You own the
+   * label markup — including click-to-toggle (call `meta.toggle()`) and naming
+   * the managed checkbox (put `id={meta.labelId}` on your label text, or rely
+   * on a string `label`/`searchText` as the fallback name). The chevron,
+   * checkbox, indentation, and expansion stay managed by the component.
+   */
+  renderNode?: (node: TreeSelectNode, meta: TreeSelectNodeMeta) => React$1.ReactNode;
+  /** Message shown when the tree has no nodes at all. @default "No items." */
+  emptyMessage?: React$1.ReactNode;
+  /** Message shown when a search query yields no matches. @default "No results found." */
+  noResultsMessage?: React$1.ReactNode;
+  /** Disable the entire control. */
+  disabled?: boolean;
+  /**
+   * Whether all branches start expanded (uncontrolled). Ignored when
+   * `expandedIds` or `defaultExpandedIds` is provided. @default false
+   */
+  defaultExpanded?: boolean;
+  /**
+   * Controlled set of expanded branch `id`s. Pair with `onExpandedChange`.
+   * Driving this lets a consumer implement expand-all / collapse-all or
+   * persist which branches are open.
+   */
+  expandedIds?: string[];
+  /** Initial expanded branch `id`s for the uncontrolled case. */
+  defaultExpandedIds?: string[];
+  /** Called when the set of expanded branch `id`s changes. */
+  onExpandedChange?: (expandedIds: string[]) => void;
+  /** Max height of the scroll viewport (any CSS length). @default "16rem" */
+  scrollHeight?: string | number;
+  /** Extra className for the scroll viewport wrapper. */
+  scrollClassName?: string;
+}
+/**
+ * A hierarchical, searchable tree multi-select with tri-state checkboxes.
+ *
+ * Selecting a parent selects all of its (enabled) descendants; clearing a
+ * parent clears them. A branch with a mix of selected and unselected
+ * descendants shows the indeterminate state. The selection is a flat array of
+ * node ids and works controlled (`value` + `onValueChange`) or uncontrolled
+ * (`defaultValue`). Expansion is likewise controllable (`expandedIds` +
+ * `onExpandedChange`) so consumers can implement expand-all / collapse-all.
+ *
+ * @example
+ * ```tsx
+ * const nodes = [
+ *   {
+ *     id: "fe",
+ *     label: "Frontend",
+ *     children: [
+ *       { id: "react", label: "React" },
+ *       { id: "vue", label: "Vue" },
+ *     ],
+ *   },
+ *   { id: "be", label: "Backend", children: [{ id: "rails", label: "Rails" }] },
+ * ]
+ *
+ * function Example() {
+ *   const [value, setValue] = React.useState<string[]>(["react"])
+ *   return (
+ *     <TreeSelect
+ *       nodes={nodes}
+ *       value={value}
+ *       onValueChange={setValue}
+ *       searchable
+ *       maxDepth={1}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare function TreeSelect({
+  nodes,
+  value,
+  defaultValue,
+  onValueChange,
+  searchable,
+  searchPlaceholder,
+  search,
+  defaultSearch,
+  onSearchChange,
+  maxDepth,
+  selectionMode,
+  showSummary,
+  renderSummary,
+  renderNode,
+  emptyMessage,
+  noResultsMessage,
+  disabled,
+  defaultExpanded,
+  expandedIds,
+  defaultExpandedIds,
+  onExpandedChange,
+  scrollHeight,
+  scrollClassName,
+  className,
+  ...props
+}: TreeSelectProps): react_jsx_runtime227.JSX.Element;
+//#endregion
+export { TreeSelect, TreeSelectCheckedState, TreeSelectNode, TreeSelectNodeMeta, TreeSelectProps, TreeSelectSelectionMode };
+//# sourceMappingURL=tree-select.d.ts.map

package/dist/components/tree-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-select.d.ts","names":[],"sources":["../../src/components/tree-select.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAiCiB,UAAA,cAAA,CAAc;EAcnB;EAIA,EAAA,EAAA,MAAA;EAGK;EAeA,KAAA,EAhCR,OAAA,CAAM,SAiCb;EAAa;EAEN,UAAA,CAAA,EAAA,MAAA;EAuCS;EAU0C,QAAM,CAAA,EAhFrD,cAgFqD,EAAA;EAQ5C;EAAsB,QAAA,CAAA,EAAA,OAAA;;;AAIvB,KAtFT,sBAAA,GAsFe,SAAA,GAAA,WAAA,GAAA,eAAA;;AA/Db,KAnBF,uBAAA,GAmBE,SAAA,GAAA,MAAA,GAAA,aAAA;AAohBd;AACE,UAriBe,kBAAA,CAqiBf;EACA;EACA,KAAA,EAriBO,sBAqiBP;EACA;EACA,KAAA,EAAA,MAAA;EACA;EACA,QAAA,EAAA,OAAA;EACA;EACA,QAAA,EAAA,OAAA;EACA;EACA,OAAA,EAAA,MAAA;EACA;EACA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,OAAA,EAAA,GAAA,IAAA;;AAEA,UApiBe,eAAA,SACP,IAmiBR,CAniBa,OAAA,CAAM,cAmiBnB,CAAA,KAAA,CAAA,EAAA,UAAA,GAAA,cAAA,CAAA,CAAA;EACA;EACA,KAAA,EAniBO,cAmiBP,EAAA;EACA;EACA,KAAA,CAAA,EAAA,MAAA,EAAA;EACA;EACA,YAAA,CAAA,EAAA,MAAA,EAAA;EACA;EACA,aAAA,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,IAAA;EACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAngBgB;;;;;;;;;;4DAU0C,OAAA,CAAM;;;;;;;;sBAQ5C,sBAAsB,uBAAuB,OAAA,CAAM;;iBAExD,OAAA,CAAM;;qBAEF,OAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqdX,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0Bb,kBAAe,oBAAA,CAAA,GAAA,CAAA"}