@alexgorbatchev/shadcn 0.0.20 → 0.0.21

package/dist/chunk-kbg2e95b.js

@@ -0,0 +1,434 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Badge2
+} from "./chunk-wjx6zf94.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  NativeSelect2,
+  NativeSelectOption2
+} from "./chunk-r9qrb6b6.js";
+
+// src/components/Tabs.tsx
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+function Tabs2({ density, className, orientation = "horizontal", ...props }) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Root, {
+    "data-density": density,
+    "data-slot": "tabs",
+    orientation,
+    className: (state) => cn2("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+var tabsListVariants2 = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-sm p-px text-muted-foreground group-data-[orientation=horizontal]/tabs:h-control group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
+  variants: {
+    variant: {
+      default: "bg-muted",
+      line: "gap-1 bg-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function TabsList2({ density, className, variant = "default", ...props }) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.List, {
+    "data-density": density,
+    "data-slot": "tabs-list",
+    "data-variant": variant,
+    className: (state) => cn2(tabsListVariants2({ variant }), typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function TabsTrigger2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Tab, {
+    "data-density": density,
+    "data-slot": "tabs-trigger",
+    className: (state) => cn2("relative inline-flex h-full flex-1 items-center justify-center gap-control-gap rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-colors group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1 has-data-[icon=inline-start]:ps-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-end-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function TabsContent2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Panel, {
+    "data-density": density,
+    "data-slot": "tabs-content",
+    "data-scroll": "none",
+    className: (state) => cn2("flex-1 text-sm outline-none", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+
+// src/components/DragDropPreview.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DragDropPreview2({ labels, maxItems = 5 }) {
+  const limit = Math.max(1, Math.floor(maxItems));
+  return /* @__PURE__ */ jsxs("div", {
+    "data-slot": "drag-drop-preview",
+    className: "flex w-max max-w-64 flex-col items-start gap-1",
+    children: [
+      labels.slice(0, limit).map((label, index) => /* @__PURE__ */ jsx2(Badge2, {
+        variant: "secondary",
+        density: "compact",
+        children: /* @__PURE__ */ jsx2("span", {
+          className: "max-w-60 truncate",
+          children: label
+        })
+      }, `${index}:${label}`)),
+      labels.length > limit && /* @__PURE__ */ jsxs(Badge2, {
+        variant: "secondary",
+        density: "compact",
+        children: [
+          "+",
+          labels.length - limit,
+          " more…"
+        ]
+      })
+    ]
+  });
+}
+
+// src/components/DragDropProvider.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+
+// src/drag-drop/DragDropContext.ts
+import { createContext } from "react";
+var DragDropContext = createContext(null);
+
+// src/components/DragDropProvider.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DragDropProvider2({ children, maxPreviewItems = 5 }) {
+  const [active, setActive] = useState(null);
+  const [over, setOver] = useState(null);
+  const preview = useRef(null);
+  const end = useCallback(() => {
+    setActive(null);
+    setOver(null);
+  }, []);
+  useEffect(() => {
+    window.addEventListener("dragend", end);
+    window.addEventListener("drop", end);
+    return () => {
+      window.removeEventListener("dragend", end);
+      window.removeEventListener("drop", end);
+    };
+  }, [end]);
+  const start = (event, item, effect) => {
+    event.dataTransfer.effectAllowed = effect;
+    event.dataTransfer.setData(item.type, JSON.stringify(item.data) ?? "null");
+    event.dataTransfer.setData("text/plain", item.labels.join(`
+`));
+    flushSync(() => {
+      setActive(item);
+      setOver(null);
+    });
+    if (preview.current)
+      event.dataTransfer.setDragImage(preview.current, 12, 12);
+  };
+  const enter = (next) => setOver((current) => current?.id === next.id && current.type === next.type && current.isAlt === next.isAlt && current.effect === next.effect ? current : next);
+  const leave = (id) => setOver((current) => current?.id === id ? null : current);
+  return /* @__PURE__ */ jsxs2(DragDropContext, {
+    value: { active, over, start, end, enter, leave },
+    children: [
+      children,
+      /* @__PURE__ */ jsx3("div", {
+        ref: preview,
+        "aria-hidden": "true",
+        className: "pointer-events-none fixed -left-[10000px] top-0 w-max",
+        children: /* @__PURE__ */ jsx3(DragDropPreview2, {
+          labels: active?.labels ?? [],
+          maxItems: maxPreviewItems
+        })
+      }),
+      /* @__PURE__ */ jsx3("span", {
+        role: "status",
+        "aria-label": "Drag status",
+        className: "sr-only",
+        children: active && `${active.labels.length} ${active.labels.length === 1 ? "item" : "items"} being dragged`
+      })
+    ]
+  });
+}
+
+// src/hooks/useDragDrop.ts
+import { useContext } from "react";
+function useDragDrop2() {
+  const context = useContext(DragDropContext);
+  if (!context)
+    throw new Error("Drag and drop requires DragDropProvider.");
+  return context;
+}
+
+// src/hooks/useDragSource.ts
+import { useId } from "react";
+function useDragSource2({
+  type,
+  data,
+  labels,
+  effectAllowed = "copyMove",
+  disabled = false
+}) {
+  const { active, start, end } = useDragDrop2();
+  const sourceId = useId();
+  return {
+    isDragging: active?.sourceId === sourceId,
+    props: {
+      draggable: !disabled,
+      onDragStart: (event) => {
+        if (event.defaultPrevented)
+          return;
+        event.stopPropagation();
+        if (disabled || labels.length === 0) {
+          event.preventDefault();
+          return;
+        }
+        start(event, { sourceId, type, data, labels }, effectAllowed);
+      },
+      onDragEnd: end
+    }
+  };
+}
+
+// src/components/DragSource.tsx
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
+function DragSource2({
+  type,
+  data,
+  labels,
+  effectAllowed,
+  disabled,
+  render,
+  ...props
+}) {
+  const source = useDragSource2({ type, data, labels, effectAllowed, disabled });
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps(props, source.props),
+    state: { slot: "drag-source", dragging: source.isDragging }
+  });
+}
+
+// src/hooks/useDropTarget.ts
+import { useId as useId2, useState as useState2 } from "react";
+function useDropTarget2({ accept, canDrop, getDropEffect, onDrop }) {
+  const { active, over, enter, leave, end } = useDragDrop2();
+  const id = useId2();
+  const [feedback, setFeedback] = useState2(null);
+  return {
+    feedback,
+    type: over?.id === id ? over.type : null,
+    isOver: over?.id === id,
+    isAlt: over?.id === id && over.isAlt,
+    effect: over?.id === id ? over.effect : "none",
+    props: {
+      onDragOver: (event) => {
+        const type = accept.find((type) => event.dataTransfer.types.includes(type));
+        if (!type)
+          return;
+        event.stopPropagation();
+        const item = active?.type === type ? active : null;
+        const effect = item && canDrop && !canDrop(item) ? "none" : getDropEffect?.(item, event) ?? "move";
+        event.dataTransfer.dropEffect = effect;
+        if (effect === "none") {
+          leave(id);
+          return;
+        }
+        event.preventDefault();
+        setFeedback((current) => current?.type === type && current.isAlt === event.altKey && current.effect === effect ? current : { type, isAlt: event.altKey, effect });
+        enter({ id, type, isAlt: event.altKey, effect });
+      },
+      onDragLeave: (event) => {
+        if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget))
+          leave(id);
+      },
+      onDrop: (event) => {
+        const type = accept.find((type) => event.dataTransfer.types.includes(type));
+        if (!type)
+          return;
+        event.stopPropagation();
+        event.preventDefault();
+        const raw = event.dataTransfer.getData(type);
+        let data;
+        try {
+          data = JSON.parse(raw);
+        } catch {
+          data = raw;
+        }
+        const item = { type, data, labels: active?.labels ?? [] };
+        leave(id);
+        end();
+        if (!canDrop || canDrop(item))
+          onDrop(item, event);
+      }
+    }
+  };
+}
+
+// src/components/DropTarget.tsx
+import { useRender as useRender2 } from "@base-ui/react/use-render";
+import { mergeProps as mergeProps2 } from "@base-ui/react/merge-props";
+function DropTarget2({
+  accept,
+  canDrop,
+  getDropEffect,
+  onDrop,
+  render,
+  ...props
+}) {
+  const target = useDropTarget2({ accept, canDrop, getDropEffect, onDrop });
+  return useRender2({
+    defaultTagName: "div",
+    render,
+    props: mergeProps2(props, target.props),
+    state: { slot: "drop-target", over: target.isOver, effect: target.effect }
+  });
+}
+
+// src/components/Kanban.tsx
+import { useId as useId3 } from "react";
+import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Kanban2({
+  label,
+  columns,
+  items,
+  onItemsChange,
+  renderItem,
+  canMove,
+  disabled,
+  density
+}) {
+  const boardId = useId3();
+  const type = `application/x-kanban-${boardId.replaceAll(":", "").toLowerCase()}`;
+  const canDropInto = (data, columnId) => typeof data === "string" && !disabled && items.some((item) => item.id === data && (!canMove || canMove(item, columnId)));
+  const move = (id, columnId, beforeId) => {
+    const item = items.find((candidate) => candidate.id === id);
+    if (!item || disabled || !columns.some((column) => column.id === columnId) || canMove && !canMove(item, columnId) || id === beforeId)
+      return;
+    const remaining = items.filter((candidate) => candidate.id !== id);
+    const index = beforeId ? remaining.findIndex((candidate) => candidate.id === beforeId) : remaining.length;
+    remaining.splice(index < 0 ? remaining.length : index, 0, { ...item, columnId });
+    onItemsChange(remaining);
+  };
+  return /* @__PURE__ */ jsx4(DragDropProvider2, {
+    children: /* @__PURE__ */ jsx4("div", {
+      role: "region",
+      "aria-label": label,
+      "data-density": density,
+      className: "overflow-x-auto",
+      children: /* @__PURE__ */ jsx4("div", {
+        className: "grid min-w-max auto-cols-[18rem] grid-flow-col gap-4",
+        children: columns.map((column) => {
+          const cards = items.filter((item) => item.columnId === column.id);
+          return /* @__PURE__ */ jsxs3(DropTarget2, {
+            accept: [type],
+            canDrop: (item) => canDropInto(item.data, column.id),
+            onDrop: (item) => {
+              if (typeof item.data === "string")
+                move(item.data, column.id);
+            },
+            render: /* @__PURE__ */ jsx4("section", {
+              "aria-label": column.label,
+              "data-scroll": "none"
+            }),
+            className: "flex min-h-48 flex-col gap-3 rounded-sm border border-border bg-muted/30 p-3 data-over:border-primary",
+            children: [
+              /* @__PURE__ */ jsxs3("header", {
+                className: "flex items-center justify-between gap-2",
+                children: [
+                  /* @__PURE__ */ jsx4("h2", {
+                    className: "text-sm font-semibold",
+                    children: column.label
+                  }),
+                  /* @__PURE__ */ jsx4(Badge2, {
+                    variant: "secondary",
+                    "aria-label": `${column.label} count`,
+                    children: cards.length
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx4("ol", {
+                className: "grid gap-2",
+                children: cards.map((item, index) => /* @__PURE__ */ jsx4("li", {
+                  children: /* @__PURE__ */ jsx4(DropTarget2, {
+                    accept: [type],
+                    canDrop: (drag) => canDropInto(drag.data, column.id),
+                    onDrop: (drag) => {
+                      if (typeof drag.data === "string")
+                        move(drag.data, column.id, item.id);
+                    },
+                    children: /* @__PURE__ */ jsxs3(DragSource2, {
+                      type,
+                      data: item.id,
+                      labels: [item.title],
+                      disabled,
+                      className: "grid gap-3 rounded-sm border border-border bg-card p-3 text-sm data-dragging:opacity-50",
+                      role: "group",
+                      "aria-label": item.title,
+                      "data-scroll": "none",
+                      children: [
+                        /* @__PURE__ */ jsx4("div", {
+                          children: renderItem ? renderItem(item) : /* @__PURE__ */ jsx4("h3", {
+                            className: "font-medium",
+                            children: item.title
+                          })
+                        }),
+                        /* @__PURE__ */ jsxs3("div", {
+                          className: "flex items-center gap-1",
+                          children: [
+                            /* @__PURE__ */ jsx4(NativeSelect2, {
+                              "aria-label": `Move ${item.title} to`,
+                              value: column.id,
+                              disabled,
+                              onChange: (event) => move(item.id, event.target.value),
+                              children: columns.map((target) => /* @__PURE__ */ jsx4(NativeSelectOption2, {
+                                value: target.id,
+                                disabled: Boolean(canMove && !canMove(item, target.id)),
+                                children: target.label
+                              }, target.id))
+                            }),
+                            /* @__PURE__ */ jsx4(Button2, {
+                              type: "button",
+                              variant: "ghost",
+                              size: "icon-sm",
+                              "aria-label": `Move ${item.title} up`,
+                              disabled: disabled || index === 0,
+                              onClick: () => move(item.id, column.id, cards[index - 1]?.id),
+                              children: /* @__PURE__ */ jsx4(ArrowUpIcon, {})
+                            }),
+                            /* @__PURE__ */ jsx4(Button2, {
+                              type: "button",
+                              variant: "ghost",
+                              size: "icon-sm",
+                              "aria-label": `Move ${item.title} down`,
+                              disabled: disabled || index === cards.length - 1,
+                              onClick: () => move(cards[index + 1].id, column.id, item.id),
+                              children: /* @__PURE__ */ jsx4(ArrowDownIcon, {})
+                            })
+                          ]
+                        })
+                      ]
+                    })
+                  })
+                }, item.id))
+              }),
+              !cards.length && /* @__PURE__ */ jsx4("p", {
+                className: "py-6 text-center text-sm text-muted-foreground",
+                children: "No items"
+              })
+            ]
+          }, column.id);
+        })
+      })
+    })
+  });
+}
+
+export { Tabs2, tabsListVariants2, TabsList2, TabsTrigger2, TabsContent2, DragDropPreview2, DragDropProvider2, useDragDrop2, useDragSource2, DragSource2, useDropTarget2, DropTarget2, Kanban2 };

package/dist/chunk-r9qrb6b6.js

@@ -0,0 +1,54 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/NativeSelect.tsx
+import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeSelect2({
+  density,
+  className,
+  dir,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", {
+    dir,
+    className: cn2("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
+    "data-density": density,
+    "data-slot": "native-select-wrapper",
+    "data-size": size,
+    children: [
+      /* @__PURE__ */ jsx("select", {
+        dir,
+        "data-slot": "native-select",
+        "data-size": size,
+        className: "h-control w-full min-w-0 appearance-none rounded-sm border border-input bg-secondary py-1 pe-8 ps-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive data-[size=sm]:h-control-sm data-[size=sm]:rounded-sm data-[size=sm]:py-0.5",
+        ...props
+      }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, {
+        className: "pointer-events-none absolute top-1/2 end-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
+        "aria-hidden": "true",
+        "data-slot": "native-select-icon"
+      })
+    ]
+  });
+}
+function NativeSelectOption2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx("option", {
+    "data-density": density,
+    "data-slot": "native-select-option",
+    className: cn2("bg-[Canvas] text-[CanvasText]", className),
+    ...props
+  });
+}
+function NativeSelectOptGroup2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx("optgroup", {
+    "data-density": density,
+    "data-slot": "native-select-optgroup",
+    className: cn2("bg-[Canvas] text-[CanvasText]", className),
+    ...props
+  });
+}
+
+export { NativeSelect2, NativeSelectOption2, NativeSelectOptGroup2 };

package/dist/{chunk-ecmk3vgd.js → chunk-seeed8a2.js}

@@ -1,6 +1,6 @@
 import {
   CommandSeparator2
-} from "./chunk-7pyt4e5t.js";
+} from "./chunk-ghmkxqn5.js";
 
 // src/components/assistant-ui/elements/ModelSelectorSeparator.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-d9jbqd99.js → chunk-tynbgc30.js}

@@ -10,7 +10,7 @@ import {
   SidebarMenu2,
   SidebarMenuItem2,
   SidebarMenuButton2
-} from "./chunk-h979cxnh.js";
+} from "./chunk-dq7kr5y0.js";
 import {
   ThreadList3
 } from "./chunk-1tgrhacr.js";

package/dist/{chunk-1qhf8gh8.js → chunk-wwyzwptb.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-qgjjcmpa.js";
 import {
   Thread2
-} from "./chunk-8fcjx3he.js";
+} from "./chunk-az81pc04.js";
 import {
   ThreadListSearch2,
   ThreadListRoot2,

package/dist/components/AccountMenu.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../density/types.js";
+type AccountAction = "profile" | "settings" | "sign-out";
+type AccountMenuProps = IDensityProps & {
+    name: string;
+    email?: string;
+    image?: string;
+    onAction: (action: AccountAction) => void;
+};
+declare function AccountMenu({ name, email, image, onAction, density }: AccountMenuProps): ReactElement;
+export { AccountMenu };
+export type { AccountMenuProps, AccountAction };

package/dist/components/AppShell.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, ReactElement, ReactNode } from "react";
+import type { IDensityProps } from "../density/types.js";
+type AppShellNavigationItem = {
+    id: string;
+    label: string;
+    href: string;
+    icon?: ReactNode;
+    active?: boolean;
+};
+type AppShellProps = IDensityProps & {
+    navigation: readonly AppShellNavigationItem[];
+    brand: ReactNode;
+    children: ReactNode;
+    header?: ReactNode;
+    sidebarFooter?: ReactNode;
+    footer?: ReactNode;
+    height?: CSSProperties["height"];
+    defaultSidebarOpen?: boolean;
+    label?: string;
+};
+declare function AppShell({ navigation, brand, children, header, sidebarFooter, footer, height, defaultSidebarOpen, label, density, }: AppShellProps): ReactElement;
+export { AppShell };
+export type { AppShellNavigationItem, AppShellProps };

package/dist/components/AuthForm.d.ts

@@ -0,0 +1,18 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { IDensityProps } from "../density/types.js";
+type AuthFormMode = "sign-in" | "sign-up" | "reset-password";
+type AuthFormValues = {
+    email: string;
+    password: string;
+    name: string;
+};
+type AuthFormProps = IDensityProps & {
+    mode?: AuthFormMode;
+    onSubmit: (values: AuthFormValues) => void | Promise<void>;
+    footer?: ReactNode;
+    alternativeActions?: ReactNode;
+    disabled?: boolean;
+};
+declare function AuthForm({ mode, onSubmit, footer, alternativeActions, disabled, density, }: AuthFormProps): ReactElement;
+export { AuthForm };
+export type { AuthFormProps, AuthFormMode, AuthFormValues };

package/dist/components/BarList.d.ts

@@ -0,0 +1,16 @@
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../density/types.js";
+type BarListItem = {
+    id: string;
+    label: string;
+    value: number;
+};
+type BarListProps = IDensityProps & {
+    label: string;
+    items: readonly BarListItem[];
+    onItemSelect?: (item: BarListItem) => void;
+    valueFormatter?: (value: number) => string;
+};
+declare function BarList({ label, items, onItemSelect, valueFormatter, density, }: BarListProps): ReactElement;
+export { BarList };
+export type { BarListProps, BarListItem };

package/dist/components/BillingUsage.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../density/types.js";
+type UsageMetric = {
+    id: string;
+    label: string;
+    used: number;
+    limit: number;
+    unit?: string;
+};
+type BillingUsageProps = IDensityProps & {
+    plan: string;
+    price: string;
+    period: string;
+    metrics: readonly UsageMetric[];
+    onManage: () => void;
+    pending?: boolean;
+};
+declare function BillingUsage({ plan, price, period, metrics, onManage, pending, density }: BillingUsageProps): ReactElement;
+export { BillingUsage };
+export type { BillingUsageProps, UsageMetric };

package/dist/components/Combobox.d.ts

@@ -32,8 +32,9 @@ type ComboboxChipsProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Chips>
 declare function ComboboxChips({ density, className, ...props }: ComboboxChipsProps): ReactElement;
 type ComboboxChipProps = ComboboxPrimitive.Chip.Props & {
     showRemove?: boolean;
+    removeLabel?: string;
 } & IDensityProps;
-declare function ComboboxChip({ density, className, children, showRemove, ...props }: ComboboxChipProps): ReactElement;
+declare function ComboboxChip({ density, className, children, showRemove, removeLabel, ...props }: ComboboxChipProps): ReactElement;
 type ComboboxChipsInputProps = ComboboxPrimitive.Input.Props & IDensityProps;
 declare function ComboboxChipsInput({ density, className, ...props }: ComboboxChipsInputProps): ReactElement;
 export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, };

package/dist/components/DashboardLayout.d.ts

@@ -0,0 +1,18 @@
+import type { ReactElement, ReactNode } from "react";
+import type { IDensityProps } from "../density/types.js";
+import { type StatCardProps } from "./StatCard.js";
+type DashboardStat = Omit<StatCardProps, "density"> & {
+    id: string;
+};
+type DashboardLayoutProps = IDensityProps & {
+    title: string;
+    description?: ReactNode;
+    actions?: ReactNode;
+    filters?: ReactNode;
+    stats: readonly DashboardStat[];
+    children: ReactNode;
+    footer?: ReactNode;
+};
+declare function DashboardLayout({ title, description, actions, filters, stats, children, footer, density, }: DashboardLayoutProps): ReactElement;
+export { DashboardLayout };
+export type { DashboardLayoutProps, DashboardStat };

package/dist/components/FilterBar.d.ts

@@ -0,0 +1,20 @@
+import type { ILabelValue } from "../options/types.js";
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../density/types.js";
+type FilterDefinition = {
+    id: string;
+    label: string;
+    options: readonly ILabelValue[];
+};
+type FilterBarProps = IDensityProps & {
+    label: string;
+    search: string;
+    onSearchChange: (value: string) => void;
+    filters: readonly FilterDefinition[];
+    value: Record<string, string>;
+    onValueChange: (value: Record<string, string>) => void;
+    disabled?: boolean;
+};
+declare function FilterBar({ label, search, onSearchChange, filters, value, onValueChange, disabled, density, }: FilterBarProps): ReactElement;
+export { FilterBar };
+export type { FilterBarProps, FilterDefinition };