@bricks-toolkit/toolkit 0.1.1 → 0.1.3

package/dist/chunk-JKPNJ4PZ.mjs

@@ -0,0 +1,313 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useId, useState, useRef, useEffect } from 'react';
+import { ChevronDownIcon, CheckIcon } from '@heroicons/react/20/solid';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "py-1 px-2 text-xs min-h-[1.75rem]",
+  sm: "py-1.5 px-3 text-sm min-h-[2.125rem]",
+  md: "py-2 px-3 text-sm min-h-[2.5rem]",
+  lg: "py-2.5 px-4 text-base min-h-[3rem]",
+  xl: "py-3 px-4 text-lg min-h-[3.5rem]"
+};
+var labelSizeClasses = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm",
+  xl: "text-base"
+};
+var variantClasses = {
+  default: "rounded-md border border-border bg-surface shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-0 transition-all duration-normal",
+  filled: "rounded-md border border-transparent bg-surface-secondary focus-visible:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-0 transition-all duration-normal",
+  flushed: "rounded-none border-0 border-b border-border bg-transparent focus-visible:outline-none focus-visible:ring-0",
+  unstyled: "border-0 bg-transparent p-0 focus-visible:outline-none focus-visible:ring-0"
+};
+var stateVariantClasses = {
+  default: {
+    default: "border-border focus-visible:border-primary focus-visible:ring-primary/40",
+    filled: "focus-visible:border-primary focus-visible:ring-primary/40",
+    flushed: "border-border focus-visible:border-primary",
+    unstyled: ""
+  },
+  error: {
+    default: "border-error focus-visible:border-error focus-visible:ring-error/20",
+    filled: "bg-error/5 focus-visible:border-error focus-visible:ring-error/20",
+    flushed: "border-error focus-visible:border-error",
+    unstyled: ""
+  },
+  success: {
+    default: "border-success focus-visible:border-success focus-visible:ring-success/20",
+    filled: "bg-success/5 focus-visible:border-success focus-visible:ring-success/20",
+    flushed: "border-success focus-visible:border-success",
+    unstyled: ""
+  },
+  warning: {
+    default: "border-warning focus-visible:border-warning focus-visible:ring-warning/20",
+    filled: "bg-warning/5 focus-visible:border-warning focus-visible:ring-warning/20",
+    flushed: "border-warning focus-visible:border-warning",
+    unstyled: ""
+  }
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error font-medium",
+  success: "text-success font-medium",
+  warning: "text-warning font-medium"
+};
+var disabledClasses = "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-secondary";
+function getStateMessage(state, errorMessage, successMessage, warningMessage) {
+  if (state === "error" && errorMessage) return errorMessage;
+  if (state === "success" && successMessage) return successMessage;
+  if (state === "warning" && warningMessage) return warningMessage;
+  return void 0;
+}
+var MultiSelect = forwardRef(function MultiSelect2({
+  options,
+  value,
+  defaultValue = [],
+  onChange,
+  placeholder = "Select options...",
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  variant = "default",
+  size = "md",
+  state = "default",
+  fullWidth = true,
+  disabled = false,
+  isLoading = false,
+  id: idProp,
+  wrapperClassName,
+  triggerClassName,
+  dropdownClassName,
+  labelClassName,
+  helperClassName
+}, ref) {
+  const generatedId = useId();
+  const componentId = idProp ?? generatedId;
+  const helperId = `${componentId}-helper`;
+  const stateMessageId = `${componentId}-state`;
+  const listboxId = `${componentId}-listbox`;
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const selectedValues = isControlled ? value : internalValue;
+  const containerRef = useRef(null);
+  const handleToggleOpen = () => {
+    if (disabled || isLoading) return;
+    setIsOpen((prev) => !prev);
+  };
+  const handleOptionClick = (optionValue) => {
+    let newValues;
+    if (selectedValues.includes(optionValue)) {
+      newValues = selectedValues.filter((v) => v !== optionValue);
+    } else {
+      newValues = [...selectedValues, optionValue];
+    }
+    if (!isControlled) {
+      setInternalValue(newValues);
+    }
+    onChange?.(newValues);
+  };
+  useEffect(() => {
+    const handleOutsideClick = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleOutsideClick);
+      document.addEventListener("touchstart", handleOutsideClick);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+      document.removeEventListener("touchstart", handleOutsideClick);
+    };
+  }, [isOpen]);
+  const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
+  const selectedLabels = options.filter((opt) => selectedValues.includes(opt.value)).map((opt) => opt.label);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative flex flex-col gap-1",
+        fullWidth ? "w-full" : "w-fit",
+        isOpen && "z-[60]",
+        wrapperClassName
+      ),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: componentId,
+            className: cn(
+              "font-black leading-none text-text uppercase tracking-widest",
+              labelSizeClasses[size],
+              disabled && "opacity-50 cursor-not-allowed",
+              labelClassName
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref,
+            id: componentId,
+            type: "button",
+            disabled: disabled || isLoading,
+            "aria-haspopup": "listbox",
+            "aria-expanded": isOpen,
+            "aria-controls": isOpen ? listboxId : void 0,
+            "aria-invalid": state === "error" ? true : void 0,
+            "aria-describedby": describedBy,
+            onClick: handleToggleOpen,
+            className: cn(
+              "w-full flex items-center justify-between text-left transition-colors duration-150",
+              sizeClasses[size],
+              variantClasses[variant],
+              stateVariantClasses[state][variant],
+              disabledClasses,
+              triggerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 truncate", children: selectedLabels.length > 0 ? /* @__PURE__ */ jsx("span", { className: "truncate text-text font-bold leading-tight", children: selectedLabels.join(", ") }) : /* @__PURE__ */ jsx("span", { className: "text-text-muted truncate transition-all duration-normal", children: placeholder }) }),
+              /* @__PURE__ */ jsx("div", { className: "shrink-0 ml-2 text-text-muted", children: isLoading ? /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "animate-spin h-4 w-4 text-text-muted",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        className: "opacity-25",
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "4"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        className: "opacity-75",
+                        fill: "currentColor",
+                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx(
+                ChevronDownIcon,
+                {
+                  className: cn("w-4 h-4 transition-transform duration-200", isOpen && "rotate-180")
+                }
+              ) })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute z-dropdown w-full mt-1 bg-surface border border-border rounded-md shadow-lg",
+              "max-h-60 overflow-y-auto py-1 animate-in fade-in zoom-in-95 duration-200",
+              // Position it below the trigger
+              "top-full left-0",
+              dropdownClassName
+            ),
+            children: /* @__PURE__ */ jsx(
+              "ul",
+              {
+                id: listboxId,
+                role: "listbox",
+                "aria-multiselectable": "true",
+                className: "flex flex-col outline-none",
+                tabIndex: -1,
+                children: options.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: "No options available" }) : options.map((option) => {
+                  const isSelected = selectedValues.includes(option.value);
+                  return /* @__PURE__ */ jsxs(
+                    "li",
+                    {
+                      role: "option",
+                      "aria-selected": isSelected,
+                      onClick: () => {
+                        handleOptionClick(option.value);
+                      },
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          handleOptionClick(option.value);
+                        }
+                      },
+                      tabIndex: 0,
+                      className: cn(
+                        "flex items-center gap-2 px-3 py-2 cursor-pointer transition-all duration-fast",
+                        "hover:bg-hover" + (isSelected ? "/60" : ""),
+                        isSelected ? "text-primary font-bold" : "text-text",
+                        labelSizeClasses[size]
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "flex shrink-0 items-center justify-center w-4 h-4 border rounded-sm transition-all duration-normal",
+                              isSelected ? "bg-primary border-primary" : "border-border"
+                            ),
+                            children: isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "w-3 h-3 text-text-inverse" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                      ]
+                    },
+                    option.value
+                  );
+                })
+              }
+            )
+          }
+        ),
+        (helperText !== void 0 || stateMessage !== void 0) && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+          helperText !== void 0 && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: helperId,
+              className: cn("text-xs leading-tight text-text-muted font-medium", helperClassName),
+              children: helperText
+            }
+          ),
+          stateMessage !== void 0 && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: stateMessageId,
+              role: state === "error" ? "alert" : void 0,
+              className: cn(
+                "text-xs leading-tight mt-1 font-medium",
+                stateMessageClasses[state],
+                helperClassName
+              ),
+              children: stateMessage
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+MultiSelect.displayName = "MultiSelect";
+
+export { MultiSelect };

package/dist/chunk-JV6AWBN5.mjs

@@ -0,0 +1,113 @@
+import { Skeleton } from './chunk-32SKYPQW.mjs';
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Image = forwardRef(function Image2({
+  src,
+  alt,
+  fallback,
+  loadingComponent,
+  showSkeleton = true,
+  aspectRatio,
+  objectFit = "cover",
+  className,
+  containerClassName,
+  onLoad,
+  onError,
+  style,
+  ...props
+}, ref) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [prevSrc, setPrevSrc] = useState(src);
+  if (src !== prevSrc) {
+    setPrevSrc(src);
+    setIsLoading(true);
+    setHasError(false);
+  }
+  const handleLoad = (event) => {
+    setIsLoading(false);
+    onLoad?.(event);
+  };
+  const handleError = (event) => {
+    setIsLoading(false);
+    setHasError(true);
+    onError?.(event);
+  };
+  const renderFallback = () => {
+    const imgStyleClasses = cn(
+      "h-full w-full",
+      objectFit === "cover" && "object-cover",
+      objectFit === "contain" && "object-contain",
+      objectFit === "fill" && "object-fill",
+      objectFit === "none" && "object-none",
+      objectFit === "scale-down" && "object-scale-down",
+      className
+    );
+    if (typeof fallback === "string") {
+      return /* @__PURE__ */ jsx("img", { src: fallback, alt, className: imgStyleClasses, ...props });
+    }
+    return /* @__PURE__ */ jsx("div", { className: imgStyleClasses, children: fallback ?? /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-surface-secondary text-text-tertiary", children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "h-1/3 w-1/3 opacity-20",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.5,
+            d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+          }
+        )
+      }
+    ) }) });
+  };
+  const containerStyle = {
+    aspectRatio,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden",
+        !aspectRatio && "h-full w-full",
+        containerClassName
+      ),
+      style: containerStyle,
+      children: [
+        isLoading && showSkeleton && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10", children: loadingComponent ?? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full", variant: "wave" }) }),
+        hasError ? renderFallback() : /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref,
+            src,
+            alt,
+            onLoad: handleLoad,
+            onError: handleError,
+            className: cn(
+              "transition-opacity duration-500 ease-in-out",
+              isLoading ? "opacity-0" : "opacity-100",
+              objectFit === "cover" && "object-cover",
+              objectFit === "contain" && "object-contain",
+              objectFit === "fill" && "object-fill",
+              objectFit === "none" && "object-none",
+              objectFit === "scale-down" && "object-scale-down",
+              "h-full w-full",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+});
+Image.displayName = "Image";
+
+export { Image };

package/dist/chunk-K3IJEZ4S.mjs

@@ -0,0 +1,203 @@
+import { IconButton } from './chunk-BVBCAAES.mjs';
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "h-8 px-3 text-xs tracking-tight",
+  sm: "h-9 px-4 text-sm tracking-tight",
+  md: "h-10 px-5 text-sm font-medium tracking-tight",
+  lg: "h-11 px-6 text-base font-medium tracking-tight",
+  xl: "h-12 px-8 text-lg font-medium tracking-tight"
+};
+var variantListClasses = {
+  default: "border-b border-border/60 bg-transparent gap-2",
+  filled: "bg-surface-secondary/80 p-1.5 rounded-xl gap-1.5 border border-border/40 shadow-inner backdrop-blur-sm",
+  flushed: "border-b border-border/60 bg-transparent gap-8",
+  unstyled: "gap-4"
+};
+var variantTabClasses = {
+  default: {
+    default: "border border-transparent text-text-muted hover:text-text hover:bg-hover/5 rounded-t-lg mb-[-1px] transition-all duration-normal",
+    selected: "border border-border border-b-surface text-primary rounded-t-lg mb-[-1px] bg-surface font-bold shadow-[0_-4px_12px_-4px_rgba(0,0,0,0.08)]"
+  },
+  filled: {
+    default: "text-text-muted hover:text-text rounded-lg hover:bg-hover/30 transition-all duration-normal px-4",
+    selected: "bg-surface text-primary shadow-md rounded-lg font-bold scale-[1.02] px-4"
+  },
+  flushed: {
+    default: "border-b-2 border-transparent text-text-muted hover:text-text hover:border-border/40 mb-[-1px] transition-all duration-normal px-1",
+    selected: "border-b-2 border-primary text-primary mb-[-1px] font-bold px-1 tracking-normal"
+  },
+  unstyled: {
+    default: "text-text-muted hover:text-text transition-all duration-normal opacity-70 hover:opacity-100",
+    selected: "text-primary font-bold"
+  }
+};
+var Tabs = forwardRef(function Tabs2({
+  items,
+  defaultSelectedId,
+  selectedId: externalSelectedId,
+  onChange,
+  variant = "default",
+  size = "md",
+  fullWidth = false,
+  className,
+  tabListClassName,
+  tabClassName,
+  tabPanelClassName,
+  ...rest
+}, ref) {
+  const [internalSelectedId, setInternalSelectedId] = useState(() => {
+    if (externalSelectedId !== void 0) return externalSelectedId;
+    if (defaultSelectedId !== void 0) return defaultSelectedId;
+    return items.length > 0 ? items[0]?.id ?? "" : "";
+  });
+  const scrollContainerRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const isControlled = externalSelectedId !== void 0;
+  const currentSelectedId = isControlled ? externalSelectedId : internalSelectedId;
+  const handleTabClick = (id, disabled) => {
+    if (disabled) return;
+    if (!isControlled) {
+      setInternalSelectedId(id);
+    }
+    onChange?.(id);
+  };
+  const checkScroll = () => {
+    if (scrollContainerRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+      setCanScrollLeft(scrollLeft > 5);
+      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 5);
+    }
+  };
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    checkScroll();
+    container.addEventListener("scroll", checkScroll);
+    window.addEventListener("resize", checkScroll);
+    const timer = setTimeout(checkScroll, 100);
+    return () => {
+      container.removeEventListener("scroll", checkScroll);
+      window.removeEventListener("resize", checkScroll);
+      clearTimeout(timer);
+    };
+  }, [items, fullWidth]);
+  const scroll = (direction) => {
+    if (scrollContainerRef.current) {
+      const scrollAmount = scrollContainerRef.current.clientWidth / 2;
+      scrollContainerRef.current.scrollBy({
+        left: direction === "left" ? -scrollAmount : scrollAmount,
+        behavior: "smooth"
+      });
+    }
+  };
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      const activeTab = scrollContainerRef.current.querySelector('[aria-selected="true"]');
+      if (activeTab) {
+        activeTab.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+      }
+    }
+  }, [currentSelectedId]);
+  const selectedItem = items.find((item) => item.id === currentSelectedId);
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative group/tabs flex items-center", children: [
+      canScrollLeft && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 z-20 flex h-full items-center pl-1 lg:hidden pointer-events-none", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-4 h-4" }),
+            "aria-label": "Scroll left",
+            variant: "ghost",
+            size: "xs",
+            isRound: true,
+            onClick: () => {
+              scroll("left");
+            },
+            className: "pointer-events-auto shadow-xl border border-border/20 bg-surface/98 backdrop-blur-xl hover:bg-primary hover:text-surface transition-all duration-300"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "w-12 h-full bg-gradient-to-r from-surface/80 to-transparent pointer-events-none -ml-6" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollContainerRef,
+          className: cn(
+            "flex-1 overflow-x-auto scrollbar-none scroll-smooth",
+            variant === "filled" ? "py-1" : "",
+            fullWidth && "w-full"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "tablist",
+              className: cn(
+                "flex flex-nowrap",
+                (fullWidth || variant !== "filled") && "min-w-full",
+                variant === "filled" && "w-max mx-auto lg:mx-0",
+                variantListClasses[variant],
+                tabListClassName
+              ),
+              children: items.map((item) => {
+                const isSelected = item.id === currentSelectedId;
+                const isDisabled = item.disabled;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": isSelected,
+                    "aria-disabled": isDisabled,
+                    disabled: isDisabled,
+                    onClick: () => {
+                      handleTabClick(item.id, isDisabled);
+                    },
+                    className: cn(
+                      "flex items-center justify-center font-medium transition-all duration-normal outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface whitespace-nowrap shrink-0",
+                      sizeClasses[size],
+                      variantTabClasses[variant][isSelected ? "selected" : "default"],
+                      fullWidth && "flex-1",
+                      isDisabled && "opacity-50 cursor-not-allowed pointer-events-none",
+                      tabClassName
+                    ),
+                    children: item.label
+                  },
+                  item.id
+                );
+              })
+            }
+          )
+        }
+      ),
+      canScrollRight && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 z-20 flex h-full items-center pr-1 hidden pointer-events-none", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-8 h-full bg-gradient-to-l from-surface to-transparent pointer-events-none -mr-4" }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-4 h-4" }),
+            "aria-label": "Scroll right",
+            variant: "ghost",
+            size: "xs",
+            isRound: true,
+            onClick: () => {
+              scroll("right");
+            },
+            className: "pointer-events-auto shadow-xl border border-border/20 bg-surface/98 backdrop-blur-xl hover:bg-primary hover:text-surface transition-all duration-300"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { role: "tabpanel", className: cn("pt-4", tabPanelClassName), tabIndex: 0, children: selectedItem?.content })
+  ] });
+});
+Tabs.displayName = "Tabs";
+
+export { Tabs };