@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-DMLPA65B.mjs

@@ -0,0 +1,107 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { useState } from 'react';
+import { ChevronRightIcon } from '@heroicons/react/20/solid';
+import { jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+var SEPARATORS = {
+  slash: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "select-none text-text-muted/60", children: "/" }),
+  chevron: /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: "w-4 h-4 text-text-muted/60 shrink-0" }),
+  dot: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "select-none text-text-muted/60", children: "\xB7" })
+};
+function resolveSeparator(sep) {
+  if (typeof sep === "string" && sep in SEPARATORS) return SEPARATORS[sep];
+  return sep;
+}
+function Crumb({ item, isCurrent, size }) {
+  const baseClass = cn(
+    "inline-flex items-center gap-1 transition-colors leading-none",
+    sizeClasses[size],
+    isCurrent ? "font-bold text-text cursor-default" : item.disabled ? "text-text-muted cursor-not-allowed" : "text-primary hover:text-primary-hover hover:underline underline-offset-4 cursor-pointer"
+  );
+  if (isCurrent) {
+    return /* @__PURE__ */ jsx("span", { className: baseClass, "aria-current": "page", children: item.label });
+  }
+  if (item.disabled) {
+    return /* @__PURE__ */ jsx("span", { className: baseClass, children: item.label });
+  }
+  if (item.onClick != null) {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick: item.onClick, className: baseClass, children: item.label });
+  }
+  if (item.href != null) {
+    return /* @__PURE__ */ jsx("a", { href: item.href, className: baseClass, children: item.label });
+  }
+  return /* @__PURE__ */ jsx("span", { className: baseClass, children: item.label });
+}
+function Breadcrumbs({
+  items,
+  separator = "chevron",
+  size = "sm",
+  collapsible = false,
+  maxItems = 4,
+  className
+}) {
+  const [expanded, setExpanded] = useState(false);
+  if (items.length === 0) return null;
+  const sep = resolveSeparator(separator);
+  let visibleItems;
+  let showEllipsis = false;
+  if (collapsible && !expanded && items.length > maxItems) {
+    const keep = Math.max(1, maxItems - 1);
+    visibleItems = items.slice(0, keep);
+    showEllipsis = true;
+  } else {
+    visibleItems = items;
+  }
+  const segments = [];
+  visibleItems.forEach((item, idx) => {
+    const isCurrent = !showEllipsis && idx === items.length - 1;
+    if (idx > 0) {
+      segments.push(
+        /* @__PURE__ */ jsx("li", { role: "presentation", className: "flex items-center", children: sep }, `sep-${String(idx)}`)
+      );
+    }
+    segments.push(
+      /* @__PURE__ */ jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsx(Crumb, { item, isCurrent, size }) }, `item-${String(idx)}`)
+    );
+  });
+  if (showEllipsis) {
+    segments.push(
+      /* @__PURE__ */ jsx("li", { role: "presentation", className: "flex items-center", children: sep }, "sep-ellipsis")
+    );
+    segments.push(
+      /* @__PURE__ */ jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Show full path",
+          onClick: () => {
+            setExpanded(true);
+          },
+          className: cn(
+            "text-text-muted hover:text-text-secondary transition-colors leading-none px-1",
+            sizeClasses[size]
+          ),
+          children: "\xB7\xB7\xB7"
+        }
+      ) }, "ellipsis")
+    );
+    const last = items[items.length - 1];
+    if (last != null) {
+      segments.push(
+        /* @__PURE__ */ jsx("li", { role: "presentation", className: "flex items-center", children: sep }, "sep-last")
+      );
+      segments.push(
+        /* @__PURE__ */ jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsx(Crumb, { item: last, isCurrent: true, size }) }, "item-last")
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: cn("w-full", className), children: /* @__PURE__ */ jsx("ol", { className: cn("flex flex-wrap items-center gap-1", sizeClasses[size]), children: segments }) });
+}
+
+export { Breadcrumbs };

package/dist/chunk-DN2GFJF4.mjs

@@ -0,0 +1,175 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useId, useRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6"
+};
+var labelSizeClasses = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm"
+};
+var stateClasses = {
+  default: "border-border text-accent focus:ring-accent/40 checked:border-accent checked:bg-accent",
+  error: "border-error text-error focus:ring-error/20 checked:border-error checked:bg-error",
+  success: "border-success text-success focus:ring-success/20 checked:border-success checked:bg-success",
+  warning: "border-warning text-warning focus:ring-warning/20 checked:border-warning checked:bg-warning"
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error font-medium",
+  success: "text-success font-medium",
+  warning: "text-warning font-medium"
+};
+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 RadioButton = forwardRef(function RadioButton2({
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  size = "md",
+  state = "default",
+  className,
+  wrapperClassName,
+  inputClassName,
+  labelClassName,
+  helperClassName,
+  id: idProp,
+  disabled,
+  onClick,
+  onPointerDown,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const inputId = idProp ?? generatedId;
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
+  const wasChecked = useRef(false);
+  const handlePointerDown = (e) => {
+    wasChecked.current = e.currentTarget.checked;
+    if (onPointerDown) onPointerDown(e);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      wasChecked.current = e.currentTarget.checked;
+    }
+    if (onKeyDown) onKeyDown(e);
+  };
+  const handleClick = (e) => {
+    if (wasChecked.current) {
+      e.currentTarget.checked = false;
+      const descriptor = Reflect.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "checked"
+      );
+      const nativeInputValueSetter = descriptor?.set;
+      if (nativeInputValueSetter) {
+        Reflect.apply(nativeInputValueSetter, e.currentTarget, [false]);
+      }
+      const event = new Event("change", { bubbles: true });
+      e.currentTarget.dispatchEvent(event);
+    }
+    if (onClick) onClick(e);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", wrapperClassName, className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("flex items-center justify-center shrink-0 relative", sizeClasses[size]),
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                ...rest,
+                id: inputId,
+                type: "radio",
+                disabled,
+                "aria-invalid": state === "error" ? true : void 0,
+                "aria-describedby": describedBy,
+                required,
+                onClick: handleClick,
+                onPointerDown: handlePointerDown,
+                onKeyDown: handleKeyDown,
+                className: cn(
+                  "peer m-0 appearance-none rounded-full border bg-surface transition-all overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface disabled:cursor-not-allowed disabled:bg-surface-secondary disabled:border-border disabled:checked:bg-border",
+                  sizeClasses[size],
+                  stateClasses[state],
+                  inputClassName
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute h-[1em] w-[1em] rounded-full text-[0.4em] text-text-inverse opacity-0 transition-opacity peer-checked:bg-current peer-checked:opacity-100 peer-disabled:peer-checked:bg-text-muted/40" })
+          ]
+        }
+      ),
+      label !== void 0 && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn(
+            "font-bold leading-none text-text mt-[0.125rem] select-none uppercase tracking-widest",
+            disabled && "opacity-50 cursor-not-allowed",
+            labelSizeClasses[size],
+            labelClassName
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+          ]
+        }
+      )
+    ] }),
+    (helperText !== void 0 || stateMessage !== void 0) && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "ml-6",
+          size === "sm" && "ml-6",
+          size === "md" && "ml-7",
+          size === "lg" && "ml-8"
+        ),
+        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
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+RadioButton.displayName = "RadioButton";
+
+export { RadioButton };

package/dist/chunk-ECLNLPOR.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var cardVariantClasses = {
+  default: "bg-surface text-text border border-border shadow-sm",
+  outlined: "bg-surface text-text border border-border",
+  elevated: "bg-surface text-text border-transparent shadow-md",
+  filled: "bg-surface-secondary border-transparent text-text-secondary"
+};
+var cardPaddingClasses = {
+  none: "p-0",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8"
+};
+var Card = react.forwardRef(function Card2({ className, variant = "default", padding = "none", ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: chunkL5VQZZVR_cjs.cn(
+        "rounded-lg flex flex-col transition-all duration-normal",
+        cardVariantClasses[variant],
+        cardPaddingClasses[padding],
+        className
+      ),
+      ...props
+    }
+  );
+});
+Card.displayName = "Card";
+var CardHeader = react.forwardRef(function CardHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkL5VQZZVR_cjs.cn("flex flex-col space-y-1 p-4", className), ...props });
+});
+CardHeader.displayName = "CardHeader";
+var CardTitle = react.forwardRef(function CardTitle2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h3",
+    {
+      ref,
+      className: chunkL5VQZZVR_cjs.cn("font-bold leading-none tracking-tight text-lg text-text", className),
+      ...props,
+      children
+    }
+  );
+});
+CardTitle.displayName = "CardTitle";
+var CardDescription = react.forwardRef(function CardDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: chunkL5VQZZVR_cjs.cn("text-sm text-text-secondary", className), ...props });
+});
+CardDescription.displayName = "CardDescription";
+var CardContent = react.forwardRef(function CardContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkL5VQZZVR_cjs.cn("p-4 pt-0", className), ...props });
+});
+CardContent.displayName = "CardContent";
+var CardFooter = react.forwardRef(function CardFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkL5VQZZVR_cjs.cn("flex items-center p-4 pt-0", className), ...props });
+});
+CardFooter.displayName = "CardFooter";
+
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;

package/dist/chunk-EV463QT5.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var chunkTNGW5YHA_cjs = require('./chunk-TNGW5YHA.cjs');
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var outline = require('@heroicons/react/24/outline');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Header = ({
+  logo,
+  children,
+  actions,
+  userSection,
+  isSticky = true,
+  className,
+  glass = false,
+  onMenuToggle
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "h-16 flex items-center justify-between px-6 bg-surface border-b border-border transition-all duration-normal",
+        isSticky && "sticky top-0 z-index-sticky",
+        glass && "glass",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+          onMenuToggle && /* @__PURE__ */ jsxRuntime.jsx(
+            chunkTNGW5YHA_cjs.IconButton,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(outline.Bars3Icon, { className: "w-5 h-5" }),
+              "aria-label": "Toggle Menu",
+              variant: "ghost",
+              size: "sm",
+              onClick: onMenuToggle,
+              className: "lg:hidden"
+            }
+          ),
+          logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: logo })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-xl px-8 hidden md:block", children }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: actions }),
+          userSection && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center pl-2 ml-2 border-l border-border h-8", children: userSection })
+        ] })
+      ]
+    }
+  );
+};
+Header.displayName = "Header";
+
+exports.Header = Header;

package/dist/chunk-FOVJHEWH.mjs

@@ -0,0 +1,51 @@
+import { IconButton } from './chunk-BVBCAAES.mjs';
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { Bars3Icon } from '@heroicons/react/24/outline';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Header = ({
+  logo,
+  children,
+  actions,
+  userSection,
+  isSticky = true,
+  className,
+  glass = false,
+  onMenuToggle
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "h-16 flex items-center justify-between px-6 bg-surface border-b border-border transition-all duration-normal",
+        isSticky && "sticky top-0 z-index-sticky",
+        glass && "glass",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          onMenuToggle && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx(Bars3Icon, { className: "w-5 h-5" }),
+              "aria-label": "Toggle Menu",
+              variant: "ghost",
+              size: "sm",
+              onClick: onMenuToggle,
+              className: "lg:hidden"
+            }
+          ),
+          logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: logo })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-xl px-8 hidden md:block", children }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: actions }),
+          userSection && /* @__PURE__ */ jsx("div", { className: "flex items-center pl-2 ml-2 border-l border-border h-8", children: userSection })
+        ] })
+      ]
+    }
+  );
+};
+Header.displayName = "Header";
+
+export { Header };

package/dist/chunk-G4HVY6FM.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 lg: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 };