@braintwopoint0/playback-commons 0.1.14 → 0.1.15

package/dist/ui/index.js

@@ -1675,15 +1675,640 @@ function getPayloadConfigFromPayload(config, payload, key) {
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 
+// src/ui/skeleton.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx18("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props });
+}
+
+// src/ui/separator.tsx
+import * as React16 from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Separator2 = React16.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx19(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    ),
+    ...props
+  }
+));
+Separator2.displayName = SeparatorPrimitive.Root.displayName;
+
+// src/ui/tabs.tsx
+import * as React17 from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Tabs = TabsPrimitive.Root;
+var TabsList = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// src/ui/checkbox.tsx
+import * as React18 from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var Checkbox = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx21(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: /* @__PURE__ */ jsx21(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "3",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "h-3.5 w-3.5",
+        children: /* @__PURE__ */ jsx21("polyline", { points: "20 6 9 17 4 12" })
+      }
+    ) })
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+// src/ui/switch.tsx
+import * as React19 from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var Switch = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-[24px] w-[44px] 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",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx22(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+// src/ui/collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
+// src/ui/sheet.tsx
+import * as React20 from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+var Sheet = SheetPrimitive.Root;
+var SheetTrigger = SheetPrimitive.Trigger;
+var SheetClose = SheetPrimitive.Close;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = cva4(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg 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: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = React20.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs12(SheetPortal, { children: [
+  /* @__PURE__ */ jsx23(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs12(
+    SheetPrimitive.Content,
+    {
+      ref,
+      className: cn(sheetVariants({ side }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs12(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsxs12(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx23("path", { d: "M18 6 6 18" }),
+                /* @__PURE__ */ jsx23("path", { d: "m6 6 12 12" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx23("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx23("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx23(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+  SheetPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+  SheetPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+// src/ui/textarea.tsx
+import * as React21 from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Textarea = React21.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx24(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/ui/tooltip.tsx
+import * as React22 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip2 = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React22.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx25(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/ui/avatar.tsx
+import * as React23 from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var Avatar = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+// src/ui/page-shell.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var maxWidthClasses = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  full: "max-w-full"
+};
+function PageShell({ maxWidth = "xl", className, children, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      className: cn(
+        "min-h-screen bg-[var(--night)] text-[var(--timberwolf)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx27("div", { className: cn("mx-auto w-full px-4 py-6 sm:px-6 lg:px-8", maxWidthClasses[maxWidth]), children })
+    }
+  );
+}
+
+// src/ui/stats-grid.tsx
+import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+var colorClasses = {
+  default: "text-[var(--timberwolf)]",
+  green: "text-emerald-400",
+  yellow: "text-amber-400",
+  red: "text-red-400",
+  blue: "text-sky-400"
+};
+var columnClasses = {
+  2: "grid-cols-2",
+  3: "grid-cols-2 sm:grid-cols-3",
+  4: "grid-cols-2 sm:grid-cols-4",
+  6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6"
+};
+function StatsGrid({ stats, columns = 4, className, ...props }) {
+  return /* @__PURE__ */ jsx28("div", { className: cn("grid gap-3", columnClasses[columns], className), ...props, children: stats.map((stat) => /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-[var(--border)] bg-card p-4",
+        stat.alert && "border-red-500/50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx28("p", { className: "text-xs text-muted-foreground", children: stat.label }),
+        /* @__PURE__ */ jsx28(
+          "p",
+          {
+            className: cn(
+              "mt-1 text-2xl font-semibold",
+              colorClasses[stat.color || "default"]
+            ),
+            children: stat.value
+          }
+        )
+      ]
+    },
+    stat.label
+  )) });
+}
+
+// src/ui/section-card.tsx
+import * as React24 from "react";
+import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+function SectionCard({
+  icon,
+  title,
+  count,
+  defaultOpen = true,
+  collapsible = true,
+  className,
+  children,
+  ...props
+}) {
+  const [open, setOpen] = React24.useState(defaultOpen);
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: cn("rounded-lg border border-[var(--border)] bg-card", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs14(
+          "button",
+          {
+            type: "button",
+            onClick: () => collapsible && setOpen(!open),
+            className: cn(
+              "flex w-full items-center gap-3 p-4 text-left",
+              collapsible && "cursor-pointer hover:bg-muted/50"
+            ),
+            children: [
+              icon && /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground", children: icon }),
+              /* @__PURE__ */ jsx29("span", { className: "flex-1 text-sm font-medium text-[var(--timberwolf)]", children: title }),
+              count !== void 0 && /* @__PURE__ */ jsx29("span", { className: "rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }),
+              collapsible && /* @__PURE__ */ jsx29(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: cn(
+                    "text-muted-foreground transition-transform duration-200",
+                    open && "rotate-180"
+                  ),
+                  children: /* @__PURE__ */ jsx29("path", { d: "m6 9 6 6 6-6" })
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx29("div", { className: "border-t border-[var(--border)] p-4", children })
+      ]
+    }
+  );
+}
+
+// src/ui/empty-state.tsx
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action, className, ...props }) {
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      className: cn("flex flex-col items-center justify-center py-12 text-center", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx30("div", { className: "mb-4 text-muted-foreground", children: icon }),
+        /* @__PURE__ */ jsx30("h3", { className: "text-lg font-medium text-[var(--timberwolf)]", children: title }),
+        description && /* @__PURE__ */ jsx30("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: description }),
+        action && /* @__PURE__ */ jsx30("div", { className: "mt-4", children: action })
+      ]
+    }
+  );
+}
+
+// src/ui/search-bar.tsx
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+function SearchBar({ value, onChange, onClear, className, placeholder = "Search...", ...props }) {
+  return /* @__PURE__ */ jsxs16("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs16(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx31("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ jsx31("path", { d: "m21 21-4.3-4.3" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx31(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        className: "h-10 w-full rounded-md border border-input bg-background pl-9 pr-9 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        ...props
+      }
+    ),
+    value && /* @__PURE__ */ jsx31(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onChange("");
+          onClear?.();
+        },
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+        children: /* @__PURE__ */ jsxs16(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx31("path", { d: "M18 6 6 18" }),
+              /* @__PURE__ */ jsx31("path", { d: "m6 6 12 12" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/ui/data-row.tsx
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+var statusColors = {
+  green: "bg-emerald-400",
+  yellow: "bg-amber-400",
+  red: "bg-red-400",
+  gray: "bg-zinc-500"
+};
+function DataRow({ status, primary, secondary, trailing, className, ...props }) {
+  return /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 rounded-md px-3 py-2.5 hover:bg-muted/50 transition-colors",
+        className
+      ),
+      ...props,
+      children: [
+        status && /* @__PURE__ */ jsx32("span", { className: cn("h-2 w-2 shrink-0 rounded-full", statusColors[status]) }),
+        /* @__PURE__ */ jsxs17("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx32("p", { className: "truncate text-sm text-[var(--timberwolf)]", children: primary }),
+          secondary && /* @__PURE__ */ jsx32("p", { className: "truncate text-xs text-muted-foreground", children: secondary })
+        ] }),
+        trailing && /* @__PURE__ */ jsx32("div", { className: "shrink-0", children: trailing })
+      ]
+    }
+  );
+}
+
+// src/ui/motion-presets.ts
+var fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] }
+};
+var fadeInDown = {
+  initial: { opacity: 0, y: -20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] }
+};
+var staggerContainer = {
+  initial: {},
+  animate: { transition: { staggerChildren: 0.06 } }
+};
+var staggerItem = {
+  initial: { opacity: 0, y: 12 },
+  animate: { opacity: 1, y: 0, transition: { duration: 0.3 } }
+};
+var pageTransition = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: { duration: 0.25 }
+};
+var hoverScale = {
+  whileHover: { scale: 1.02 },
+  whileTap: { scale: 0.98 },
+  transition: { type: "spring", stiffness: 400, damping: 25 }
+};
+var hoverLift = {
+  whileHover: { y: -2 },
+  transition: { type: "spring", stiffness: 400, damping: 25 }
+};
+var springBounce = {
+  type: "spring",
+  stiffness: 300,
+  damping: 20
+};
+var easeSmooth = [0.25, 0.46, 0.45, 0.94];
+
+// src/ui/fade-in.tsx
+import * as React25 from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+function FadeIn({ children, className, delay = 0, direction = "up", ...props }) {
+  const ref = React25.useRef(null);
+  const [visible, setVisible] = React25.useState(false);
+  React25.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx33(
+    "div",
+    {
+      ref,
+      className: cn(
+        "transition-all duration-500 ease-out",
+        visible ? "opacity-100 translate-y-0 translate-x-0" : direction === "left" ? "opacity-0 -translate-x-5" : "opacity-0 translate-y-6",
+        className
+      ),
+      style: delay ? { transitionDelay: `${delay}ms` } : void 0,
+      ...props,
+      children
+    }
+  );
+}
+
 // src/ui/footer.tsx
-import Image from "next/image";
+import Image2 from "next/image";
 import Link2 from "next/link";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 function Footer() {
-  return /* @__PURE__ */ jsxs12("footer", { className: "container mx-auto flex p-5 items-center justify-between border-t border-[var(--timberwolf)]", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsx18(Link2, { href: "https://www.instagram.com/playback_global", target: "_blank", children: /* @__PURE__ */ jsx18(
-        Image,
+  return /* @__PURE__ */ jsxs18("footer", { className: "container mx-auto flex p-5 items-center justify-between border-t border-[var(--timberwolf)]", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx34(Link2, { href: "https://www.instagram.com/playback_global", target: "_blank", children: /* @__PURE__ */ jsx34(
+        Image2,
         {
           src: "/assets/instagram.png",
           alt: "PLAYBACK Instagram",
@@ -1692,8 +2317,8 @@ function Footer() {
           className: "h-9 w-9"
         }
       ) }),
-      /* @__PURE__ */ jsx18(Link2, { href: "https://youtube.com/@playback_global", target: "_blank", children: /* @__PURE__ */ jsx18(
-        Image,
+      /* @__PURE__ */ jsx34(Link2, { href: "https://youtube.com/@playback_global", target: "_blank", children: /* @__PURE__ */ jsx34(
+        Image2,
         {
           src: "/assets/youtube.png",
           alt: "PLAYBACK YouTube",
@@ -1702,8 +2327,8 @@ function Footer() {
           className: "h-9 w-9"
         }
       ) }),
-      /* @__PURE__ */ jsx18(Link2, { href: "https://www.tiktok.com/@playback_global", target: "_blank", children: /* @__PURE__ */ jsx18(
-        Image,
+      /* @__PURE__ */ jsx34(Link2, { href: "https://www.tiktok.com/@playback_global", target: "_blank", children: /* @__PURE__ */ jsx34(
+        Image2,
         {
           src: "/assets/tiktok.png",
           alt: "PLAYBACK TikTok",
@@ -1712,13 +2337,13 @@ function Footer() {
           className: "h-9 w-9"
         }
       ) }),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx34(
         Link2,
         {
           href: "https://www.linkedin.com/company/playbacksports/",
           target: "_blank",
-          children: /* @__PURE__ */ jsx18(
-            Image,
+          children: /* @__PURE__ */ jsx34(
+            Image2,
             {
               src: "/assets/linkedin.png",
               alt: "PLAYBACK LinkedIn",
@@ -1730,18 +2355,21 @@ function Footer() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs12("h2", { className: "text-lg", children: [
+    /* @__PURE__ */ jsxs18("h2", { className: "text-lg", children: [
       "by",
       " ",
-      /* @__PURE__ */ jsx18(Link2, { href: "https://www.braintwopoint0.com", children: /* @__PURE__ */ jsxs12("span", { style: { fontFamily: "AvertaStd-Semibold" }, children: [
+      /* @__PURE__ */ jsx34(Link2, { href: "https://www.braintwopoint0.com", children: /* @__PURE__ */ jsxs18("span", { style: { fontFamily: "AvertaStd-Semibold" }, children: [
         "BRAIN",
-        /* @__PURE__ */ jsx18("span", { style: { fontFamily: "AvertaStd-Thin" }, children: "2.0" })
+        /* @__PURE__ */ jsx34("span", { style: { fontFamily: "AvertaStd-Thin" }, children: "2.0" })
       ] }) })
     ] })
   ] });
 }
 export {
   AnimatedTooltip,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
   Badge,
   Button,
   Calendar,
@@ -1758,6 +2386,11 @@ export {
   ChartStyle,
   ChartTooltip,
   ChartTooltipContent,
+  Checkbox,
+  Collapsible,
+  CollapsibleContent2 as CollapsibleContent,
+  CollapsibleTrigger2 as CollapsibleTrigger,
+  DataRow,
   DatePicker,
   DateTimePicker,
   Dialog,
@@ -1770,6 +2403,8 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  EmptyState,
+  FadeIn,
   FlipWords,
   Footer,
   HeroHighlight,
@@ -1780,10 +2415,13 @@ export {
   HoverEffect,
   Input,
   Label,
+  PageShell,
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
+  SearchBar,
+  SectionCard,
   Select,
   SelectContent,
   SelectGroup,
@@ -1794,8 +2432,40 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  Separator2 as Separator,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  Skeleton,
+  StatsGrid,
+  Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
   TimePicker,
+  Tooltip2 as Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
   badgeVariants,
-  buttonVariants
+  buttonVariants,
+  easeSmooth,
+  fadeInDown,
+  fadeInUp,
+  hoverLift,
+  hoverScale,
+  pageTransition,
+  springBounce,
+  staggerContainer,
+  staggerItem
 };
 //# sourceMappingURL=index.js.map