@brainfish-ai/components 0.35.20 → 0.36.0

package/dist/esm/components/two-level-combobox/two-level-combobox.js

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { X, CaretUpDown, ArrowLeft, Spinner, Check } from '@phosphor-icons/react';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../ui/command.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover.js';
+import { DivButton } from '../ui/div-button.js';
+
+function TwoLevelCombobox({
+  firstLevelItems,
+  fetchSecondLevelItems,
+  onSelectionChange,
+  firstLevelLabel = "First Level",
+  secondLevelLabel = "Second Level",
+  firstLevelPlaceholder = "Select first level...",
+  className,
+  debugMode = false,
+  displayLabel = true
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [view, setView] = React.useState("first");
+  const [selectedFirstLevel, setSelectedFirstLevel] = React.useState(null);
+  const [selectedSecondLevel, setSelectedSecondLevel] = React.useState(null);
+  const [secondLevelItems, setSecondLevelItems] = React.useState([]);
+  const [isLoadingSecondLevel, setIsLoadingSecondLevel] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState("");
+  const handleFirstLevelSelect = async (item) => {
+    setSelectedFirstLevel(item);
+    setSelectedSecondLevel(null);
+    setIsLoadingSecondLevel(true);
+    setView("second");
+    setSearchValue("");
+    try {
+      const fetchedItems = await fetchSecondLevelItems(item.value);
+      setSecondLevelItems(fetchedItems);
+    } catch (error) {
+      console.warn(error);
+      setSecondLevelItems([]);
+    } finally {
+      setIsLoadingSecondLevel(false);
+    }
+    onSelectionChange?.(item, null);
+  };
+  const handleSecondLevelSelect = (item) => {
+    setSelectedSecondLevel(item);
+    setOpen(false);
+    onSelectionChange?.(selectedFirstLevel, item);
+  };
+  const handleBackToFirstLevel = () => {
+    setView("first");
+    setSearchValue("");
+  };
+  const handleOpenChange = (isOpen) => {
+    setOpen(isOpen);
+    if (isOpen && !selectedFirstLevel) {
+      setView("first");
+    } else if (isOpen && selectedFirstLevel) {
+      setView("second");
+    }
+  };
+  const handleClearSelection = (e) => {
+    e.stopPropagation();
+    setSelectedFirstLevel(null);
+    setSelectedSecondLevel(null);
+    setSecondLevelItems([]);
+    setView("first");
+    onSelectionChange?.(null, null);
+  };
+  const getLabel = () => {
+    if (selectedSecondLevel) return `${firstLevelLabel} & ${secondLevelLabel}`;
+    if (selectedFirstLevel) return `Select ${secondLevelLabel}`;
+    return `Select ${firstLevelLabel}`;
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: cn("space-y-4", className) }, /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, displayLabel && /* @__PURE__ */ React.createElement("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, getLabel()), /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "outline",
+      role: "combobox",
+      "aria-expanded": open,
+      className: "w-full justify-between bg-transparent"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 flex-1 min-w-0" }, selectedSecondLevel ? /* @__PURE__ */ React.createElement("div", { className: "truncate flex items-center gap-1" }, selectedFirstLevel.label, " → ", selectedSecondLevel.label) : selectedFirstLevel ? /* @__PURE__ */ React.createElement("div", { className: "truncate flex items-center" }, selectedFirstLevel.label) : /* @__PURE__ */ React.createElement("span", { className: "truncate" }, firstLevelPlaceholder)),
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 shrink-0" }, (selectedFirstLevel || selectedSecondLevel) && // Render button as div to prevent button within button error
+    /* @__PURE__ */ React.createElement(
+      DivButton,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "size-6 p-0 hover:bg-muted rounded-sm",
+        onClick: handleClearSelection,
+        "aria-label": "Clear selection"
+      },
+      /* @__PURE__ */ React.createElement(X, { className: "size-3" })
+    ), /* @__PURE__ */ React.createElement(CaretUpDown, { className: "size-4 shrink-0 opacity-50" }))
+  )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "w-full p-0", align: "start" }, /* @__PURE__ */ React.createElement(Command, null, view === "second" && selectedFirstLevel && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 p-2 border-b" }, /* @__PURE__ */ React.createElement(Button, { variant: "ghost", size: "sm", onClick: handleBackToFirstLevel, className: "h-8 w-8 p-0 shrink-0" }, /* @__PURE__ */ React.createElement(ArrowLeft, { className: "size-4" })), /* @__PURE__ */ React.createElement("div", { className: "text-sm font-medium truncate flex-1 min-w-0 flex items-center" }, selectedFirstLevel.label), /* @__PURE__ */ React.createElement(
+    DivButton,
+    {
+      variant: "ghost",
+      size: "sm",
+      className: "size-6 p-0 ml-auto hover:bg-muted rounded-sm shrink-0",
+      onClick: handleClearSelection,
+      "aria-label": "Clear selection"
+    },
+    /* @__PURE__ */ React.createElement(X, { className: "size-3" })
+  ), isLoadingSecondLevel && /* @__PURE__ */ React.createElement(Spinner, { className: "size-4 animate-spin text-muted-foreground shrink-0" })), /* @__PURE__ */ React.createElement(
+    CommandInput,
+    {
+      value: searchValue,
+      onValueChange: setSearchValue,
+      placeholder: view === "first" ? `Search ${firstLevelLabel.toLowerCase()}...` : `Search ${secondLevelLabel.toLowerCase()}...`
+    }
+  ), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandEmpty, null, view === "first" ? `No ${firstLevelLabel.toLowerCase()} found.` : `No ${secondLevelLabel.toLowerCase()} found.`), view === "first" && /* @__PURE__ */ React.createElement(CommandGroup, null, firstLevelItems.map((item) => /* @__PURE__ */ React.createElement(CommandItem, { key: item.value, value: item.label, onSelect: () => handleFirstLevelSelect(item) }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2" }, item.icon, item.label), /* @__PURE__ */ React.createElement(
+    Check,
+    {
+      className: cn(
+        "ml-2 size-4",
+        selectedFirstLevel?.value === item.value ? "opacity-100" : "opacity-0"
+      )
+    }
+  )))), view === "second" && selectedFirstLevel && /* @__PURE__ */ React.createElement(CommandGroup, null, isLoadingSecondLevel ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center py-6" }, /* @__PURE__ */ React.createElement(Spinner, { className: "size-4 animate-spin text-muted-foreground mr-2" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm text-muted-foreground" }, "Loading ", secondLevelLabel.toLowerCase(), "...")) : secondLevelItems.map((item) => /* @__PURE__ */ React.createElement(CommandItem, { key: item.value, value: item.label, onSelect: () => handleSecondLevelSelect(item) }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2" }, item.icon, item.label), /* @__PURE__ */ React.createElement(
+    Check,
+    {
+      className: cn(
+        "ml-2 size-4",
+        selectedSecondLevel?.value === item.value ? "opacity-100" : "opacity-0"
+      )
+    }
+  ))))))))), (selectedFirstLevel || selectedSecondLevel) && debugMode && /* @__PURE__ */ React.createElement("div", { className: "mt-6 p-4 bg-muted/50 rounded-lg space-y-2" }, /* @__PURE__ */ React.createElement("h3", { className: "font-medium text-sm" }, "Selected Values:"), selectedFirstLevel && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-muted-foreground flex items-center gap-1" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, firstLevelLabel, ":"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, selectedFirstLevel.label)), selectedSecondLevel && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-muted-foreground flex items-center gap-1" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, secondLevelLabel, ":"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, selectedSecondLevel.label))));
+}
+
+export { TwoLevelCombobox };

package/dist/esm/components/two-level-combobox.js

@@ -1,2 +1 @@
-export{T as TwoLevelCombobox}from"../chunks/two-level-combobox.CQUmvlq6.js";
-//# sourceMappingURL=two-level-combobox.js.map
+export { TwoLevelCombobox } from './two-level-combobox/two-level-combobox.js';

package/dist/esm/components/ui/accordion.js

@@ -1,8 +1,46 @@
-import*as e from"react";import*as t from"@radix-ui/react-accordion";import{CaretDown as a}from"@phosphor-icons/react";import{c as r}from"../../chunks/utils.DtKoarLP.js";function o({...a}){/* @__PURE__ */
-return e.createElement(t.Root,{"data-slot":"accordion",...a})}function n({className:a,...o}){/* @__PURE__ */
-return e.createElement(t.Item,{"data-slot":"accordion-item",className:r("border-b [&>h3]:my-0",a),...o})}function s({className:o,children:n,...s}){/* @__PURE__ */
-return e.createElement(t.Header,{className:"flex"},/* @__PURE__ */e.createElement(t.Trigger,{"data-slot":"accordion-trigger",className:r("focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:no-underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180 group",o),...s},n,
-/* @__PURE__ */e.createElement(a,{className:"text-muted-foreground size-4 shrink-0 translate-y-0.5 transition-transform duration-200 hover:bg-dark-300 hover:group-[&[data-state=open]]:bg-dark-200 rounded-sm group-hover:transition-colors hover:duration-300 hover:ease-in-out"})))}function i({className:a,children:o,...n}){/* @__PURE__ */
-return e.createElement(t.Content,{"data-slot":"accordion-content",className:"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",...n},
-/* @__PURE__ */e.createElement("div",{className:r("pt-0 pb-4",a)},o))}export{o as Accordion,i as AccordionContent,n as AccordionItem,s as AccordionTrigger};
-//# sourceMappingURL=accordion.js.map
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { CaretDown } from '@phosphor-icons/react';
+import { cn } from '../../lib/utils.js';
+
+function Accordion({ ...props }) {
+  return /* @__PURE__ */ React.createElement(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    AccordionPrimitive.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b [&>h3]:my-0", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({ className, children, ...props }) {
+  return /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React.createElement(
+    AccordionPrimitive.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:no-underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180 group",
+        className
+      ),
+      ...props
+    },
+    children,
+    /* @__PURE__ */ React.createElement(CaretDown, { className: "text-muted-foreground size-4 shrink-0 translate-y-0.5 transition-transform duration-200 hover:bg-dark-300 hover:group-[&[data-state=open]]:bg-dark-200 rounded-sm group-hover:transition-colors hover:duration-300 hover:ease-in-out" })
+  ));
+}
+function AccordionContent({ className, children, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    AccordionPrimitive.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("div", { className: cn("pt-0 pb-4", className) }, children)
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/esm/components/ui/alert-dialog.js

@@ -1,4 +1,114 @@
-import*as e from"react";import*as a from"@radix-ui/react-alert-dialog";import{c as t}from"../../chunks/utils.DtKoarLP.js";import{b as s}from"../../chunks/button.DXe2tRBO.js";const l=e.createContext({}),o=e.forwardRef(({onOpenChange:t,...s},o)=>{const n=e.useCallback(()=>{t?.(!1)},[t]);/* @__PURE__ */
-return e.createElement(l.Provider,{value:{onClose:n}},/* @__PURE__ */e.createElement(a.Root,{onOpenChange:t,...s}))});o.displayName=a.Root.displayName;const n=a.Trigger,r=a.Portal,d=e.forwardRef(({className:s,zIndex:l,style:o,...n},r)=>/* @__PURE__ */e.createElement(a.Overlay,{className:t("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",s),style:null!=l?{...o,zIndex:l}:o,...n,ref:r}));d.displayName=a.Overlay.displayName;const c=e.forwardRef(({className:s,zIndex:l,style:o,...n},c)=>/* @__PURE__ */e.createElement(r,null,/* @__PURE__ */e.createElement(d,{zIndex:l}),/* @__PURE__ */e.createElement(a.Content,{ref:c,className:t("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-0 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md",s),style:null!=l?{...o,zIndex:l}:o,...n})));c.displayName=a.Content.displayName;const i=({className:a,...s})=>/* @__PURE__ */e.createElement("div",{className:t("flex flex-col text-center sm:text-left",a),...s});i.displayName="AlertDialogHeader";const m=({className:a,...s})=>/* @__PURE__ */e.createElement("div",{className:t("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pb-4 px-4",a),...s});m.displayName="AlertDialogFooter";const f=e.forwardRef(({className:s,...l},o)=>/* @__PURE__ */e.createElement(a.Title,{ref:o,className:t("text-lg font-medium px-4 my-0 h-12 flex items-center",s),...l}));f.displayName=a.Title.displayName;const p=e.forwardRef(({className:s,...l},o)=>/* @__PURE__ */e.createElement(a.Description,{ref:o,className:t("text-sm px-4 py-3 my-0",s),...l}));p.displayName=a.Description.displayName;const N=e.forwardRef(({className:o,variant:n,asChild:r,onClick:d,...c},i)=>{const{onClose:m}=e.useContext(l),f=e.useCallback(async e=>{if(!d)return;const a=d(e);if(null!=(t=a)&&"object"==typeof t&&"then"in t){e.preventDefault();try{await a,m?.()}catch(s){console.error("AlertDialogAction onClick failed:",s)}}var t},[d,m]);/* @__PURE__ */
-return e.createElement(a.Action,{ref:i,className:t(s({variant:n}),o),onClick:f,...c})});N.displayName=a.Action.displayName;const u=e.forwardRef(({className:l,variant:o,...n},r)=>/* @__PURE__ */e.createElement(a.Cancel,{ref:r,className:t(s({variant:o||"link"}),"mt-2 sm:mt-0 text-foreground",l),...n}));u.displayName=a.Cancel.displayName;export{o as AlertDialog,N as AlertDialogAction,u as AlertDialogCancel,c as AlertDialogContent,p as AlertDialogDescription,m as AlertDialogFooter,i as AlertDialogHeader,d as AlertDialogOverlay,r as AlertDialogPortal,f as AlertDialogTitle,n as AlertDialogTrigger};
-//# sourceMappingURL=alert-dialog.js.map
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cn } from '../../lib/utils.js';
+import { buttonVariants } from './button.js';
+
+const AlertDialogContext = React.createContext({});
+const AlertDialog = React.forwardRef(({ onOpenChange, ...props }, _ref) => {
+  const handleClose = React.useCallback(() => {
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+  return /* @__PURE__ */ React.createElement(AlertDialogContext.Provider, { value: { onClose: handleClose } }, /* @__PURE__ */ React.createElement(AlertDialogPrimitive.Root, { onOpenChange, ...props }));
+});
+AlertDialog.displayName = AlertDialogPrimitive.Root.displayName;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogOverlay = React.forwardRef(({ className, zIndex, style, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  AlertDialogPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    style: zIndex != null ? { ...style, zIndex } : style,
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+const AlertDialogContent = React.forwardRef(({ className, zIndex, style, ...props }, ref) => /* @__PURE__ */ React.createElement(AlertDialogPortal, null, /* @__PURE__ */ React.createElement(AlertDialogOverlay, { zIndex }), /* @__PURE__ */ React.createElement(
+  AlertDialogPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-0 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md",
+      className
+    ),
+    style: zIndex != null ? { ...style, zIndex } : style,
+    ...props
+  }
+)));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col text-center sm:text-left", className), ...props });
+AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pb-4 px-4", className),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  AlertDialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-medium px-4 my-0 h-12 flex items-center", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(AlertDialogPrimitive.Description, { ref, className: cn("text-sm px-4 py-3 my-0", className), ...props }));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+const AlertDialogAction = React.forwardRef(({ className, variant, asChild, onClick, ...props }, ref) => {
+  const { onClose } = React.useContext(AlertDialogContext);
+  const handleClick = React.useCallback(
+    async (event) => {
+      if (!onClick) return;
+      const result = onClick(event);
+      const isPromise = (value) => value != null && typeof value === "object" && "then" in value;
+      if (isPromise(result)) {
+        event.preventDefault();
+        try {
+          await result;
+          onClose?.();
+        } catch (error) {
+          console.error("AlertDialogAction onClick failed:", error);
+        }
+      }
+    },
+    [onClick, onClose]
+  );
+  if (asChild) {
+    return /* @__PURE__ */ React.createElement(
+      AlertDialogPrimitive.Action,
+      {
+        ref,
+        className: cn(buttonVariants({ variant }), className),
+        onClick: handleClick,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    AlertDialogPrimitive.Action,
+    {
+      ref,
+      className: cn(buttonVariants({ variant }), className),
+      onClick: handleClick,
+      ...props
+    }
+  );
+});
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+const AlertDialogCancel = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    className: cn(buttonVariants({ variant: variant || "link" }), "mt-2 sm:mt-0 text-foreground", className),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/esm/components/ui/alert.js

@@ -1,5 +1,103 @@
-import*as e from"react";import{cva as t}from"class-variance-authority";import{c as a}from"../../chunks/utils.DtKoarLP.js";const r=t("relative w-full rounded-lg border px-4 py-3 text-sm flex gap-3 [&>svg]:size-5 [&>svg]:shrink-0",{variants:{variant:{default:"bg-card text-card-foreground",danger:"border-red bg-red-100 text-dark [&>svg]:text-red",success:"border-green bg-green-100 text-dark [&>svg]:text-green",warning:"border-yellow bg-yellow-100 text-dark [&>svg]:text-yellow",info:"border-blue bg-blue-100 text-dark [&>svg]:text-blue"},layout:{compact:"items-center",longForm:"p-8 items-start [&_[data-slot='alert-description']]:space-y-4 [&_[data-slot='alert-description']>p]:my-0"}},defaultVariants:{variant:"default",layout:"compact"}}),l=e.forwardRef(({className:t,variant:l,layout:c,children:d,...i},m)=>{const f=[];let p=[];return e.Children.forEach(d,t=>{if(e.isValidElement(t)){const a=t.type===s,r=t.type===n;a||r?p.push(t):(p.length>0&&(f.push(
-/* @__PURE__ */e.createElement(o,{key:`content-${f.length}`},p)),p=[]),f.push(t))}else p.length>0&&(f.push(
-/* @__PURE__ */e.createElement(o,{key:`content-${f.length}`},p)),p=[]),f.push(t)}),p.length>0&&f.push(/* @__PURE__ */e.createElement(o,{key:`content-${f.length}`},p)),/* @__PURE__ */e.createElement("div",{ref:m,"data-slot":"alert",role:"alert",className:a(r({variant:l,layout:c}),t),...i},f)});l.displayName="Alert";const s=e.forwardRef(({className:t,...r},l)=>
-/* @__PURE__ */e.createElement("h5",{ref:l,"data-slot":"alert-title",className:a("line-clamp-1 min-h-4 heading-xs",t),...r}));s.displayName="AlertTitle";const n=e.forwardRef(({className:t,...r},l)=>/* @__PURE__ */e.createElement("div",{ref:l,"data-slot":"alert-description",className:a("text-dark/80 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",t),...r}));n.displayName="AlertDescription";const o=e.forwardRef(({className:t,...r},l)=>/* @__PURE__ */e.createElement("div",{ref:l,"data-slot":"alert-content",className:a("flex flex-col gap-1 flex-grow",t),...r}));o.displayName="AlertContent";const c=e.forwardRef(({className:t,...r},l)=>/* @__PURE__ */e.createElement("div",{ref:l,"data-slot":"alert-action",className:a("self-start flex items-start justify-end",t),...r}));c.displayName="AlertAction";export{l as Alert,c as AlertAction,o as AlertContent,n as AlertDescription,s as AlertTitle};
-//# sourceMappingURL=alert.js.map
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm flex gap-3 [&>svg]:size-5 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        danger: "border-red bg-red-100 text-dark [&>svg]:text-red",
+        success: "border-green bg-green-100 text-dark [&>svg]:text-green",
+        warning: "border-yellow bg-yellow-100 text-dark [&>svg]:text-yellow",
+        info: "border-blue bg-blue-100 text-dark [&>svg]:text-blue"
+      },
+      layout: {
+        compact: "items-center",
+        longForm: "p-8 items-start [&_[data-slot='alert-description']]:space-y-4 [&_[data-slot='alert-description']>p]:my-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      layout: "compact"
+    }
+  }
+);
+const Alert = React.forwardRef(
+  ({ className, variant, layout, children, ...props }, ref) => {
+    const wrappedChildren = [];
+    let contentChildren = [];
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        const isTitle = child.type === AlertTitle;
+        const isDescription = child.type === AlertDescription;
+        if (isTitle || isDescription) {
+          contentChildren.push(child);
+        } else {
+          if (contentChildren.length > 0) {
+            wrappedChildren.push(
+              /* @__PURE__ */ React.createElement(AlertContent, { key: `content-${wrappedChildren.length}` }, contentChildren)
+            );
+            contentChildren = [];
+          }
+          wrappedChildren.push(child);
+        }
+      } else {
+        if (contentChildren.length > 0) {
+          wrappedChildren.push(
+            /* @__PURE__ */ React.createElement(AlertContent, { key: `content-${wrappedChildren.length}` }, contentChildren)
+          );
+          contentChildren = [];
+        }
+        wrappedChildren.push(child);
+      }
+    });
+    if (contentChildren.length > 0) {
+      wrappedChildren.push(/* @__PURE__ */ React.createElement(AlertContent, { key: `content-${wrappedChildren.length}` }, contentChildren));
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        "data-slot": "alert",
+        role: "alert",
+        className: cn(alertVariants({ variant, layout }), className),
+        ...props
+      },
+      wrappedChildren
+    );
+  }
+);
+Alert.displayName = "Alert";
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  /* @__PURE__ */ React.createElement("h5", { ref, "data-slot": "alert-title", className: cn("line-clamp-1 min-h-4 heading-xs", className), ...props })
+));
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      "data-slot": "alert-description",
+      className: cn("text-dark/80 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className),
+      ...props
+    }
+  )
+);
+AlertDescription.displayName = "AlertDescription";
+const AlertContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement("div", { ref, "data-slot": "alert-content", className: cn("flex flex-col gap-1 flex-grow", className), ...props }));
+AlertContent.displayName = "AlertContent";
+const AlertAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    "data-slot": "alert-action",
+    className: cn("self-start flex items-start justify-end", className),
+    ...props
+  }
+));
+AlertAction.displayName = "AlertAction";
+
+export { Alert, AlertAction, AlertContent, AlertDescription, AlertTitle };

package/dist/esm/components/ui/avatar.js

@@ -1,8 +1,89 @@
-import*as a from"react";import*as e from"@radix-ui/react-avatar";import{c as t}from"../../chunks/utils.DtKoarLP.js";function r({className:r,size:s="default",...i}){/* @__PURE__ */
-return a.createElement(e.Root,{"data-slot":"avatar","data-size":s,className:t("group/avatar relative flex size-8 shrink-0 select-none data-[size=lg]:size-10 data-[size=sm]:size-6",r),...i})}function s({className:r,...s}){/* @__PURE__ */
-return a.createElement(e.Image,{"data-slot":"avatar-image",className:t("aspect-square size-full overflow-hidden rounded-full",r),...s})}function i({className:r,...s}){/* @__PURE__ */
-return a.createElement(e.Fallback,{"data-slot":"avatar-fallback",className:t("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",r),...s})}function u({className:e,...r}){/* @__PURE__ */
-return a.createElement("span",{"data-slot":"avatar-badge",className:t("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none","group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden","group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=default]/avatar:ring-1","group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",e),...r})}function o({className:e,...r}){/* @__PURE__ */
-return a.createElement("div",{"data-slot":"avatar-group",className:t("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",e),...r})}function l({className:e,...r}){/* @__PURE__ */
-return a.createElement("div",{"data-slot":"avatar-group-count",className:t("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",e),...r})}export{r as Avatar,u as AvatarBadge,i as AvatarFallback,o as AvatarGroup,l as AvatarGroupCount,s as AvatarImage};
-//# sourceMappingURL=avatar.js.map
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '../../lib/utils.js';
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(
+        "group/avatar relative flex size-8 shrink-0 select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    AvatarPrimitive.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full overflow-hidden rounded-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarBadge({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      "data-slot": "avatar-badge",
+      className: cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=default]/avatar:ring-1",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarGroup({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "avatar-group",
+      className: cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarGroupCount({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "avatar-group-count",
+      className: cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/esm/components/ui/badge.js

@@ -1,3 +1,26 @@
-import*as e from"react";import{cva as r}from"class-variance-authority";import{c as t}from"../../chunks/utils.DtKoarLP.js";const i=r("inline-flex items-center rounded-md border h-[18px] font-normal rounded-[4px] py-[1px] px-[6px] text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",{variants:{variant:{default:"border-primary bg-primary text-primary-foreground hover:bg-primary/80",destructive:"inline-flex border-destructive bg-destructive text-destructive hover:bg-destructive/80",success:"inline-flex border-success bg-success text-success hover:bg-success/80",warning:"inline-flex border-warning bg-warning text-warning hover:bg-warning/80",disabled:"inline-flex border-disabled bg-disabled text-disabled hover:bg-disabled/80"}},defaultVariants:{variant:"default"}});function n({className:r,variant:n,...s}){/* @__PURE__ */
-return e.createElement("span",{className:t(i({variant:n}),r),...s})}export{n as Badge,i as badgeVariants};
-//# sourceMappingURL=badge.js.map
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border h-[18px] font-normal rounded-[4px] py-[1px] px-[6px] text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-primary bg-primary text-primary-foreground hover:bg-primary/80",
+        destructive: "inline-flex border-destructive bg-destructive text-destructive hover:bg-destructive/80",
+        success: "inline-flex border-success bg-success text-success hover:bg-success/80",
+        warning: "inline-flex border-warning bg-warning text-warning hover:bg-warning/80",
+        disabled: "inline-flex border-disabled bg-disabled text-disabled hover:bg-disabled/80"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ React.createElement("span", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+export { Badge, badgeVariants };

package/dist/esm/components/ui/breadcrumb.js

@@ -1,5 +1,60 @@
-import*as e from"react";import{S as a}from"../../chunks/index.C9B3bui8.js";import{MoreHorizontal as r,ChevronRight as s}from"lucide-react";import{c as t}from"../../chunks/utils.DtKoarLP.js";const l=e.forwardRef(({...a},r)=>/* @__PURE__ */e.createElement("nav",{ref:r,"aria-label":"breadcrumb",...a}));l.displayName="Breadcrumb";const m=e.forwardRef(({className:a,...r},s)=>/* @__PURE__ */e.createElement("ol",{ref:s,className:t("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5 list-none",a),...r}));m.displayName="BreadcrumbList";const c=e.forwardRef(({className:a,...r},s)=>/* @__PURE__ */e.createElement("li",{ref:s,className:t("inline-flex items-center gap-1.5",a),...r}));c.displayName="BreadcrumbItem";const n=e.forwardRef(({asChild:r,className:s,...l},m)=>{const c=r?a:"a";/* @__PURE__ */
-return e.createElement(c,{ref:m,className:t("transition-colors hover:text-foreground",s),...l})});n.displayName="BreadcrumbLink";const o=e.forwardRef(({className:a,...r},s)=>/* @__PURE__ */e.createElement("span",{ref:s,role:"link","aria-disabled":"true","aria-current":"page",className:t("font-normal text-foreground",a),...r}));o.displayName="BreadcrumbPage";const i=({children:a,className:r,...l})=>/* @__PURE__ */e.createElement("li",{role:"presentation","aria-hidden":"true",className:t("[&>svg]:w-3.5 [&>svg]:h-3.5",r),...l},a??/* @__PURE__ */e.createElement(s,null));i.displayName="BreadcrumbSeparator";const d=({className:a,...s})=>/* @__PURE__ */e.createElement("span",{role:"presentation","aria-hidden":"true",className:t("flex h-9 w-9 items-center justify-center",a),...s},
-/* @__PURE__ */e.createElement(r,{className:"h-4 w-4"}),
-/* @__PURE__ */e.createElement("span",{className:"sr-only"},"More"));d.displayName="BreadcrumbElipssis";export{l as Breadcrumb,d as BreadcrumbEllipsis,c as BreadcrumbItem,n as BreadcrumbLink,m as BreadcrumbList,o as BreadcrumbPage,i as BreadcrumbSeparator};
-//# sourceMappingURL=breadcrumb.js.map
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { MoreHorizontal, ChevronRight } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+
+const Breadcrumb = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React.createElement("nav", { ref, "aria-label": "breadcrumb", ...props }));
+Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbList = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "ol",
+    {
+      ref,
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5 list-none",
+        className
+      ),
+      ...props
+    }
+  )
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement("li", { ref, className: cn("inline-flex items-center gap-1.5", className), ...props })
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ React.createElement(Comp, { ref, className: cn("transition-colors hover:text-foreground", className), ...props });
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ref,
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("font-normal text-foreground", className),
+      ...props
+    }
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ React.createElement("li", { role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className), ...props }, children ?? /* @__PURE__ */ React.createElement(ChevronRight, null));
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ React.createElement(
+  "span",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("flex h-9 w-9 items-center justify-center", className),
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(MoreHorizontal, { className: "h-4 w-4" }),
+  /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "More")
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };