@bearmenu/ui 0.5.1 → 0.6.0

package/dist/components/selection-bar.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+declare const SelectionBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    count: number;
+    /** Hide bar when count is 0. Defaults to true. */
+    hideWhenEmpty?: boolean;
+    onClear?: () => void;
+    itemNoun?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { SelectionBar };

package/dist/components/selection-bar.js

@@ -0,0 +1,65 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SelectionBar = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      count,
+      hideWhenEmpty = true,
+      onClear,
+      itemNoun = "item",
+      children
+    } = _b, props = __objRest(_b, [
+      "className",
+      "count",
+      "hideWhenEmpty",
+      "onClear",
+      "itemNoun",
+      "children"
+    ]);
+    if (hideWhenEmpty && count <= 0) return null;
+    const noun = count === 1 ? itemNoun : `${itemNoun}s`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        role: "region",
+        "aria-label": `${count} ${noun} selected`,
+        "data-slot": "selection-bar",
+        className: cn(
+          "flex w-full items-center gap-3 rounded-2xl border border-border bg-card px-4 py-3 shadow-lg",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+            onClear && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Clear selection",
+                onClick: onClear,
+                className: "inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { "aria-live": "polite", children: [
+              count,
+              " ",
+              noun,
+              " selected"
+            ] })
+          ] }),
+          children && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children })
+        ]
+      })
+    );
+  }
+);
+SelectionBar.displayName = "SelectionBar";
+
+export { SelectionBar };

package/dist/components/separator.js

@@ -10,11 +10,12 @@ var Separator = React.forwardRef((_a, ref) => {
     SeparatorPrimitive.Root,
     __spreadValues({
       ref,
+      "data-slot": "separator",
       decorative,
       orientation,
       className: cn(
-        "shrink-0 bg-gradient-to-r from-transparent via-border to-transparent backdrop-blur-sm",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        "shrink-0",
+        orientation === "horizontal" ? "h-px w-full bg-gradient-to-r from-transparent via-border to-transparent" : "h-full w-px bg-gradient-to-b from-transparent via-border to-transparent",
         className
       )
     }, props)

package/dist/components/sheet.d.ts

@@ -10,7 +10,7 @@ declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.Dialog
 declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }

package/dist/components/sheet.js

@@ -26,7 +26,7 @@ var SheetOverlay = React.forwardRef((_a, ref) => {
 });
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 var sheetVariants = cva(
-  "fixed z-[1000] gap-4 glass bg-background p-6 shadow-2xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-[1000] gap-4 bg-background border-border p-6 shadow-2xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {

package/dist/components/skeleton-card.js

@@ -1,4 +1,4 @@
-import { Skeleton } from '../chunk-UISA4CIG.js';
+import { Skeleton } from '../chunk-N2KNBPAQ.js';
 import { AspectRatio } from '../chunk-3VMDCCCX.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';

package/dist/components/skeleton.js

@@ -1,3 +1,3 @@
-export { Skeleton } from '../chunk-UISA4CIG.js';
+export { Skeleton } from '../chunk-N2KNBPAQ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/slider.js

@@ -5,16 +5,33 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var Slider = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, { className, value, defaultValue } = _b, props = __objRest(_b, ["className", "value", "defaultValue"]);
+  const thumbCount = React.useMemo(() => {
+    if (Array.isArray(value)) return value.length;
+    if (Array.isArray(defaultValue)) return defaultValue.length;
+    return 1;
+  }, [value, defaultValue]);
   return /* @__PURE__ */ jsxs(
     SliderPrimitive.Root,
     __spreadProps(__spreadValues({
       ref,
-      className: cn("relative flex w-full touch-none select-none items-center", className)
+      "data-slot": "slider",
+      value,
+      defaultValue,
+      className: cn(
+        "relative flex w-full touch-none select-none items-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )
     }, props), {
       children: [
-        /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full glass border border-border/50", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-white shadow-lg" }) }),
-        /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-primary ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:shadow-lg hover:shadow-primary/20 hover:scale-110" })
+        /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+        Array.from({ length: thumbCount }, (_, i) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            className: "block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:scale-110"
+          },
+          i
+        ))
       ]
     })
   );

package/dist/components/sliding-panels.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-2BMJRXQX.js';
+import { Button } from '../chunk-ZFNOCP6W.js';
 import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';
@@ -26,20 +26,22 @@ var SlidingPanels = ({
     return () => ro.disconnect();
   }, [currentIndex]);
   const handleBack = () => {
-    if (currentIndex > 0) {
-      const previousPanel = panels[currentIndex - 1];
-      if (currentPanelData == null ? void 0 : currentPanelData.onBack) {
-        currentPanelData.onBack();
-      } else {
-        onPanelChange(previousPanel.id);
-      }
+    const previousPanel = panels[currentIndex - 1];
+    if (!previousPanel) return;
+    if (currentPanelData == null ? void 0 : currentPanelData.onBack) {
+      currentPanelData.onBack();
+    } else {
+      onPanelChange(previousPanel.id);
     }
   };
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("relative overflow-hidden transition-[height] duration-300", className),
-      style: { height: containerHeight },
+      className: cn(
+        "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
+        className
+      ),
+      style: { height: containerHeight, overflowClipMargin: "8px" },
       children: panels.map((panel, index) => {
         const isActive = panel.id === currentPanel;
         const isLeft = index < currentIndex;
@@ -51,10 +53,10 @@ var SlidingPanels = ({
               panelRefs.current[index] = el;
             },
             className: cn(
-              "absolute top-0 left-0 w-full transition-transform duration-300",
+              "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
               isActive && "translate-x-0",
-              isLeft && "-translate-x-full",
-              isRight && "translate-x-full"
+              isLeft && "-translate-x-[calc(100%+8px)]",
+              isRight && "translate-x-[calc(100%+8px)]"
             ),
             "aria-hidden": !isActive,
             children: [

package/dist/components/spinner.d.ts

@@ -0,0 +1,17 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const spinnerVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /** Visually-hidden label for screen readers. Defaults to "Loading". */
+    label?: string;
+} & React.RefAttributes<HTMLSpanElement>>;
+
+export { Spinner, spinnerVariants };

package/dist/components/spinner.js

@@ -0,0 +1,50 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { Loader2 } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var spinnerVariants = cva("animate-spin shrink-0", {
+  variants: {
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      default: "size-5",
+      lg: "size-6",
+      xl: "size-8"
+    },
+    tone: {
+      default: "text-muted-foreground",
+      primary: "text-primary",
+      destructive: "text-destructive",
+      inherit: ""
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    tone: "default"
+  }
+});
+var Spinner = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, size, tone, label = "Loading" } = _b, props = __objRest(_b, ["className", "size", "tone", "label"]);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      __spreadProps(__spreadValues({
+        ref,
+        role: "status",
+        "data-slot": "spinner",
+        className: cn("inline-flex items-center justify-center", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: spinnerVariants({ size, tone }) }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+        ]
+      })
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+export { Spinner, spinnerVariants };

package/dist/components/stepper.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+interface StepperStep {
+    id: string;
+    title: string;
+    description?: string;
+}
+declare const Stepper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    steps: StepperStep[];
+    activeStep: number;
+    /** Highest step the user has reached (enables clicking back). Defaults to activeStep. */
+    furthestStep?: number;
+    /** When provided, steps render as buttons. */
+    onStepClick?: (index: number) => void;
+    ariaLabel?: string;
+} & React.RefAttributes<HTMLElement>>;
+
+export { Stepper, type StepperStep };

package/dist/components/stepper.js

@@ -0,0 +1,199 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Stepper = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      steps,
+      activeStep,
+      furthestStep,
+      onStepClick,
+      ariaLabel = "Progress"
+    } = _b, props = __objRest(_b, [
+      "className",
+      "steps",
+      "activeStep",
+      "furthestStep",
+      "onStepClick",
+      "ariaLabel"
+    ]);
+    var _a2;
+    const reachable = furthestStep != null ? furthestStep : activeStep;
+    const isInteractive = typeof onStepClick === "function";
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      __spreadProps(__spreadValues({
+        ref,
+        "aria-label": ariaLabel,
+        className: cn("w-full", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx("ol", { className: "hidden md:flex w-full items-center", "data-slot": "stepper", children: steps.map((step, i) => {
+            const status = i < activeStep ? "complete" : i === activeStep ? "current" : "upcoming";
+            const isLast = i === steps.length - 1;
+            const canClick = isInteractive && i <= reachable;
+            const Item = canClick ? "button" : "div";
+            const itemProps = canClick ? {
+              type: "button",
+              onClick: () => onStepClick == null ? void 0 : onStepClick(i),
+              disabled: !canClick
+            } : {};
+            return /* @__PURE__ */ jsxs("li", { className: "contents", "data-status": status, children: [
+              /* @__PURE__ */ jsxs(
+                Item,
+                __spreadProps(__spreadValues({}, itemProps), {
+                  "aria-current": status === "current" ? "step" : void 0,
+                  className: cn(
+                    "group inline-flex items-center gap-2 rounded-full text-sm transition-opacity",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                    canClick && status !== "current" && "hover:opacity-80"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(StepCircle, { index: i, status }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "whitespace-nowrap transition-colors",
+                          status === "current" && "font-semibold text-foreground",
+                          status === "complete" && "font-medium text-foreground/80",
+                          status === "upcoming" && "text-foreground/40"
+                        ),
+                        children: step.title
+                      }
+                    )
+                  ]
+                })
+              ),
+              !isLast && /* @__PURE__ */ jsx(StepConnector, { filled: i < activeStep })
+            ] }, step.id);
+          }) }),
+          /* @__PURE__ */ jsxs("div", { className: "md:hidden", children: [
+            /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1.5", role: "list", children: steps.map((step, i) => {
+              const status = i < activeStep ? "complete" : i === activeStep ? "current" : "upcoming";
+              const canClick = isInteractive && i <= reachable;
+              return /* @__PURE__ */ jsx("li", { className: "flex-1", children: canClick ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onStepClick == null ? void 0 : onStepClick(i),
+                  "aria-label": `${i + 1}. ${step.title}`,
+                  "aria-current": status === "current" ? "step" : void 0,
+                  className: cn(
+                    "block w-full h-1.5 rounded-full transition-colors",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                    status === "current" && "bg-foreground",
+                    status === "complete" && "bg-foreground/50",
+                    status === "upcoming" && "bg-foreground/15"
+                  )
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-label": `${i + 1}. ${step.title}`,
+                  "aria-current": status === "current" ? "step" : void 0,
+                  className: cn(
+                    "block w-full h-1.5 rounded-full transition-colors",
+                    status === "current" && "bg-foreground",
+                    status === "complete" && "bg-foreground/50",
+                    status === "upcoming" && "bg-foreground/15"
+                  )
+                }
+              ) }, step.id);
+            }) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs uppercase tracking-[0.12em] text-foreground/40", children: `${activeStep + 1} / ${steps.length}` }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-base font-semibold text-foreground", children: (_a2 = steps[activeStep]) == null ? void 0 : _a2.title })
+          ] })
+        ]
+      })
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+function StepCircle({ index, status }) {
+  const isFilled = status !== "upcoming";
+  const isComplete = status === "complete";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute inset-0 rounded-full border transition-opacity duration-300",
+              isFilled ? "opacity-0 border-transparent" : "opacity-100 border-foreground/25"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute inset-0 rounded-full bg-foreground origin-center transition-transform duration-300 ease-out",
+              isFilled ? "scale-100" : "scale-0"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative text-xs font-semibold transition-opacity duration-200",
+              isComplete ? "opacity-0" : "opacity-100",
+              status === "current" ? "text-background" : "text-foreground/40"
+            ),
+            children: index + 1
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "pointer-events-none absolute inset-0 m-auto h-3.5 w-3.5 text-background",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M5 12 L10 17 L20 7",
+                pathLength: 1,
+                strokeDasharray: "1",
+                strokeDashoffset: isComplete ? 0 : 1,
+                style: {
+                  transition: isComplete ? "stroke-dashoffset 450ms cubic-bezier(0.65, 0, 0.35, 1) 180ms" : "stroke-dashoffset 150ms ease-in"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function StepConnector({ filled }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "relative h-1 flex-1 mx-3 overflow-hidden rounded-full bg-foreground/10",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-y-0 left-0 rounded-full bg-foreground/50 transition-[width] duration-500 ease-out",
+          style: { width: filled ? "100%" : "0%" }
+        }
+      )
+    }
+  );
+}
+
+export { Stepper };

package/dist/components/sticky-container.js

@@ -22,6 +22,7 @@ var StickyContainer = ({
       {
         ref,
         id,
+        "data-stuck": isSticky ? "true" : void 0,
         className: cn(
           "sticky px-4 transition-all duration-200",
           hideUntilSticky ? isSticky ? "py-4 opacity-100 translate-y-0" : "py-0 opacity-0 -translate-y-2 pointer-events-none" : "py-4",

package/dist/components/switch.js

@@ -9,17 +9,18 @@ var Switch = React.forwardRef((_a, ref) => {
   return /* @__PURE__ */ jsx(
     SwitchPrimitive.Root,
     __spreadProps(__spreadValues({
+      ref,
+      "data-slot": "switch",
       className: cn(
-        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input glass data-[state=checked]:shadow-lg data-[state=checked]:shadow-primary/20 hover:shadow-md",
+        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input aria-invalid:ring-2 aria-invalid:ring-destructive/40",
         className
       )
     }, props), {
-      ref,
       children: /* @__PURE__ */ jsx(
         SwitchPrimitive.Thumb,
         {
           className: cn(
-            "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-all duration-300 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground backdrop-blur-md border border-border/50"
+            "pointer-events-none block size-5 rounded-full bg-background shadow-md ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground"
           )
         }
       )

package/dist/components/table.d.ts

@@ -1,12 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
+    containerClassName?: string;
+} & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & {
+    sticky?: boolean;
+} & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
-declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & {
+    interactive?: boolean;
+} & React.RefAttributes<HTMLTableRowElement>>;
+type SortDirection = "asc" | "desc" | "none";
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & {
+    sortable?: boolean;
+    sortDirection?: SortDirection;
+    onSort?: () => void;
+} & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+declare const TableEmpty: {
+    ({ colSpan, children, className, ...props }: React.ComponentProps<"tr"> & {
+        colSpan: number;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableRow };