@bearmenu/ui 0.5.2 → 0.6.1

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';
@@ -37,8 +37,11 @@ var SlidingPanels = ({
   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;
@@ -50,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?: "inherit" | "default" | "destructive" | "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?: "inherit" | "default" | "destructive" | "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/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 };

package/dist/components/table.js

@@ -1,23 +1,47 @@
 import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { __objRest, __spreadValues, __spreadProps } from '../chunk-3GWWZKX7.js';
 import * as React from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-var Table = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx("table", __spreadValues({ ref, className: cn("w-full caption-bottom text-sm", className) }, props)) });
-  }
-);
+var Table = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, containerClassName } = _b, props = __objRest(_b, ["className", "containerClassName"]);
+  return /* @__PURE__ */ jsx("div", { className: cn("relative w-full overflow-auto rounded-xl border border-border", containerClassName), children: /* @__PURE__ */ jsx(
+    "table",
+    __spreadValues({
+      ref,
+      "data-slot": "table",
+      className: cn("w-full caption-bottom text-sm", className)
+    }, props)
+  ) });
+});
 Table.displayName = "Table";
 var TableHeader = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx("thead", __spreadValues({ ref, className: cn("[&_tr]:border-b", className) }, props));
+  var _b = _a, { className, sticky } = _b, props = __objRest(_b, ["className", "sticky"]);
+  return /* @__PURE__ */ jsx(
+    "thead",
+    __spreadValues({
+      ref,
+      "data-slot": "table-header",
+      className: cn(
+        "bg-muted/50 [&_tr]:border-b [&_tr]:border-border",
+        sticky && "sticky top-0 z-10",
+        className
+      )
+    }, props)
+  );
 });
 TableHeader.displayName = "TableHeader";
 var TableBody = React.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx("tbody", __spreadValues({ ref, className: cn("[&_tr:last-child]:border-0", className) }, props));
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    __spreadValues({
+      ref,
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className)
+    }, props)
+  );
 });
 TableBody.displayName = "TableBody";
 var TableFooter = React.forwardRef((_a, ref) => {
@@ -26,40 +50,74 @@ var TableFooter = React.forwardRef((_a, ref) => {
     "tfoot",
     __spreadValues({
       ref,
-      className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)
+      "data-slot": "table-footer",
+      className: cn("border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className)
     }, props)
   );
 });
 TableFooter.displayName = "TableFooter";
-var TableRow = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx(
-      "tr",
-      __spreadValues({
-        ref,
-        className: cn(
-          "border-b border-border/50 transition-all duration-300 hover:bg-muted/30 hover:backdrop-blur-sm data-[state=selected]:bg-muted/50",
-          className
-        )
-      }, props)
-    );
-  }
-);
-TableRow.displayName = "TableRow";
-var TableHead = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+var TableRow = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, interactive } = _b, props = __objRest(_b, ["className", "interactive"]);
   return /* @__PURE__ */ jsx(
-    "th",
+    "tr",
     __spreadValues({
       ref,
+      "data-slot": "table-row",
       className: cn(
-        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        "border-b border-border transition-colors data-[state=selected]:bg-muted",
+        interactive && "cursor-pointer hover:bg-muted/50",
         className
       )
     }, props)
   );
 });
+TableRow.displayName = "TableRow";
+var TableHead = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, sortable, sortDirection = "none", onSort, children } = _b, props = __objRest(_b, ["className", "sortable", "sortDirection", "onSort", "children"]);
+    if (!sortable) {
+      return /* @__PURE__ */ jsx(
+        "th",
+        __spreadProps(__spreadValues({
+          ref,
+          "data-slot": "table-head",
+          className: cn(
+            "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground [&:has([role=checkbox])]:pr-0",
+            className
+          )
+        }, props), {
+          children
+        })
+      );
+    }
+    const ariaSort = sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none";
+    return /* @__PURE__ */ jsx(
+      "th",
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "table-head",
+        "aria-sort": ariaSort,
+        className: cn(
+          "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground [&:has([role=checkbox])]:pr-0",
+          className
+        )
+      }, props), {
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onSort,
+            className: "inline-flex items-center gap-1 rounded-sm text-inherit transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            children: [
+              children,
+              sortDirection === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "size-3.5", "aria-hidden": true }) : sortDirection === "desc" ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 opacity-50", "aria-hidden": true })
+            ]
+          }
+        )
+      })
+    );
+  }
+);
 TableHead.displayName = "TableHead";
 var TableCell = React.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -67,15 +125,43 @@ var TableCell = React.forwardRef((_a, ref) => {
     "td",
     __spreadValues({
       ref,
-      className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)
+      "data-slot": "table-cell",
+      className: cn("p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0", className)
     }, props)
   );
 });
 TableCell.displayName = "TableCell";
 var TableCaption = React.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx("caption", __spreadValues({ ref, className: cn("mt-4 text-sm text-muted-foreground", className) }, props));
+  return /* @__PURE__ */ jsx(
+    "caption",
+    __spreadValues({
+      ref,
+      "data-slot": "table-caption",
+      className: cn("mt-4 text-sm text-muted-foreground", className)
+    }, props)
+  );
 });
 TableCaption.displayName = "TableCaption";
+var TableEmpty = (_a) => {
+  var _b = _a, {
+    colSpan,
+    children = "No results.",
+    className
+  } = _b, props = __objRest(_b, [
+    "colSpan",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("tr", __spreadProps(__spreadValues({ "data-slot": "table-empty" }, props), { children: /* @__PURE__ */ jsx(
+    "td",
+    {
+      colSpan,
+      className: cn("h-24 text-center text-sm text-muted-foreground", className),
+      children
+    }
+  ) }));
+};
+TableEmpty.displayName = "TableEmpty";
 
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableRow };