@timbal-ai/timbal-react 0.5.4 → 0.6.0

package/dist/ui.cjs

@@ -0,0 +1,720 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui.ts
+var ui_exports = {};
+__export(ui_exports, {
+  Avatar: () => Avatar,
+  AvatarFallback: () => AvatarFallback,
+  AvatarImage: () => AvatarImage,
+  Button: () => Button,
+  Dialog: () => Dialog,
+  DialogClose: () => DialogClose,
+  DialogContent: () => DialogContent,
+  DialogOverlay: () => DialogOverlay,
+  DialogPortal: () => DialogPortal,
+  DialogTitle: () => DialogTitle,
+  DialogTrigger: () => DialogTrigger,
+  MemoPillSegmentedTabs: () => MemoPillSegmentedTabs,
+  PillSegmentedTabs: () => PillSegmentedTabs,
+  Shimmer: () => Shimmer,
+  TimbalV2Button: () => TimbalV2Button,
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipProvider: () => TooltipProvider,
+  TooltipTrigger: () => TooltipTrigger
+});
+module.exports = __toCommonJS(ui_exports);
+
+// src/ui/button.tsx
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/design/button-tokens.ts
+var TIMBAL_V2_ELEVATED_GRADIENT = "bg-gradient-to-b from-elevated-from to-elevated-to";
+var TIMBAL_V2_MODAL_SURFACE = cn(
+  "bg-gradient-to-b from-modal-from to-modal-to",
+  "border border-border shadow-card-elevated"
+);
+var TIMBAL_V2_PRIMARY_GRADIENT = "bg-gradient-to-b from-primary-fill-from to-primary-fill-to";
+var TIMBAL_V2_FROM_LEGACY_BUTTON = {
+  default: "primary",
+  destructive: "destructive",
+  outline: "secondary",
+  secondary: "secondary",
+  ghost: "ghost",
+  link: "link"
+};
+var TIMBAL_V2_SIZE_HEIGHT = {
+  xs: "min-h-8 h-8",
+  sm: "min-h-9 h-9",
+  md: "min-h-10 h-10",
+  lg: "min-h-11 h-11"
+};
+var TIMBAL_V2_SIZE_ICON = {
+  xs: "min-h-8 min-w-8 size-8",
+  sm: "min-h-8 min-w-8 size-8",
+  md: "min-h-10 min-w-10 size-10",
+  lg: "min-h-11 min-w-11 size-11"
+};
+var TIMBAL_V2_SIZE_LABEL_PX = {
+  xs: "px-3",
+  sm: "px-4",
+  md: "px-5",
+  lg: "px-6"
+};
+var TIMBAL_V2_FILL = {
+  primary: [
+    "bg-gradient-to-b from-primary-fill-from to-primary-fill-to",
+    "group-hover/tbv2:from-primary-fill-hover-from group-hover/tbv2:to-primary-fill-hover-to",
+    "group-active/tbv2:from-primary-fill-active-from group-active/tbv2:to-primary-fill-active-to"
+  ].join(" "),
+  informative: [
+    TIMBAL_V2_PRIMARY_GRADIENT,
+    "group-hover/tbv2:from-primary-fill-hover-from group-hover/tbv2:to-primary-fill-hover-to",
+    "group-active/tbv2:from-primary-fill-active-from group-active/tbv2:to-primary-fill-active-to",
+    "group-active/tbv2:[background-image:linear-gradient(to_top,rgba(0,0,0,0.08),transparent_55%)]"
+  ].join(" "),
+  destructive: [
+    TIMBAL_V2_ELEVATED_GRADIENT,
+    "group-hover/tbv2:from-destructive-fill-hover-from group-hover/tbv2:to-destructive-fill-hover-to",
+    "group-active/tbv2:from-destructive-fill-active-from group-active/tbv2:to-destructive-fill-active-to"
+  ].join(" "),
+  secondary: [
+    TIMBAL_V2_ELEVATED_GRADIENT,
+    "group-hover/tbv2:from-secondary-fill-hover-from group-hover/tbv2:to-secondary-fill-hover-to",
+    "group-active/tbv2:from-secondary-fill-active-from group-active/tbv2:to-secondary-fill-active-to"
+  ].join(" "),
+  ghost: [
+    "bg-transparent",
+    "group-hover/tbv2:bg-ghost-fill-hover",
+    "group-active/tbv2:bg-ghost-fill-active"
+  ].join(" "),
+  link: "bg-transparent"
+};
+var TIMBAL_V2_LABEL = {
+  primary: "text-primary-foreground",
+  informative: "text-primary-foreground",
+  destructive: "text-destructive",
+  secondary: "text-foreground",
+  ghost: "text-foreground",
+  link: "text-foreground underline decoration-foreground/25 underline-offset-2 group-hover/tbv2:decoration-foreground/45"
+};
+var TIMBAL_V2_BORDER = {
+  primary: "",
+  informative: "border border-foreground/15",
+  destructive: "border border-destructive/45",
+  secondary: "border border-border",
+  ghost: "",
+  link: ""
+};
+var TIMBAL_V2_SHADOW = {
+  primary: "shadow-card",
+  informative: "shadow-card",
+  destructive: "shadow-card",
+  secondary: "shadow-card",
+  ghost: "",
+  link: ""
+};
+var TIMBAL_V2_SWITCH_TRACK_OFF = cn(
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "border border-border shadow-card"
+);
+var TIMBAL_V2_SWITCH_THUMB = cn(
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "border border-border/80 shadow-sm"
+);
+var TIMBAL_V2_SECONDARY_CHROME = [
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "border border-border shadow-card",
+  "transition-[background-color,box-shadow,border-color] duration-200 ease-in-out",
+  "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
+  "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
+].join(" ");
+
+// src/ui/timbal-v2-button.tsx
+var React = __toESM(require("react"), 1);
+var import_radix_ui = require("radix-ui");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TIMBAL_V2_FILL_AS_CHILD = {
+  primary: [
+    "bg-gradient-to-b from-primary-fill-from to-primary-fill-to",
+    "hover:from-primary-fill-hover-from hover:to-primary-fill-hover-to",
+    "active:from-primary-fill-active-from active:to-primary-fill-active-to"
+  ].join(" "),
+  informative: [
+    TIMBAL_V2_PRIMARY_GRADIENT,
+    "hover:from-primary-fill-hover-from hover:to-primary-fill-hover-to",
+    "active:from-primary-fill-active-from active:to-primary-fill-active-to",
+    "active:[background-image:linear-gradient(to_top,rgba(0,0,0,0.08),transparent_55%)]"
+  ].join(" "),
+  destructive: [
+    TIMBAL_V2_ELEVATED_GRADIENT,
+    "hover:from-destructive-fill-hover-from hover:to-destructive-fill-hover-to",
+    "active:from-destructive-fill-active-from active:to-destructive-fill-active-to"
+  ].join(" "),
+  secondary: [
+    TIMBAL_V2_ELEVATED_GRADIENT,
+    "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
+    "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
+  ].join(" "),
+  ghost: [
+    "bg-transparent",
+    "hover:bg-ghost-fill-hover",
+    "active:bg-ghost-fill-active"
+  ].join(" "),
+  link: "bg-transparent"
+};
+var TIMBAL_V2_LABEL_AS_CHILD = {
+  ...TIMBAL_V2_LABEL,
+  link: "text-foreground underline decoration-foreground/25 underline-offset-2 hover:decoration-foreground/45"
+};
+var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
+  variant = "secondary",
+  size = "sm",
+  isIconOnly = false,
+  isLoading = false,
+  fullWidth = false,
+  shape = "pill",
+  asChild = false,
+  className,
+  disabled,
+  type = "button",
+  children,
+  ...props
+}, ref) {
+  const isDisabled = disabled || isLoading;
+  const sizeClass = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
+  const radiusClass = variant === "link" || variant === "ghost" ? "rounded-md" : shape === "rect" ? "rounded-md" : "rounded-full";
+  const sharedRootClass = cn(
+    "relative box-border inline-flex items-center justify-center gap-2 whitespace-nowrap border-0 text-sm font-normal shadow-none transition duration-200 ease-in-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    sizeClass,
+    radiusClass,
+    TIMBAL_V2_BORDER[variant],
+    TIMBAL_V2_SHADOW[variant],
+    fullWidth && "w-full",
+    isDisabled && "pointer-events-none opacity-50",
+    className
+  );
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_radix_ui.Slot.Root,
+      {
+        ref,
+        "aria-disabled": isDisabled ? true : void 0,
+        "data-slot": "timbal-v2-button",
+        "data-variant": variant,
+        className: cn(
+          sharedRootClass,
+          TIMBAL_V2_FILL_AS_CHILD[variant],
+          !isIconOnly && TIMBAL_V2_SIZE_LABEL_PX[size],
+          TIMBAL_V2_LABEL_AS_CHILD[variant]
+        ),
+        ...props,
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      ref,
+      type,
+      disabled: isDisabled,
+      "data-slot": "timbal-v2-button",
+      "data-variant": variant,
+      className: cn(
+        "group/tbv2 flex-col items-stretch overflow-hidden bg-transparent p-0",
+        sharedRootClass
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute inset-0 transition duration-200 ease-in-out",
+              TIMBAL_V2_FILL[variant]
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: cn(
+              "relative z-10 flex min-h-0 flex-1 items-center justify-center gap-1 leading-tight",
+              !isIconOnly && TIMBAL_V2_SIZE_LABEL_PX[size],
+              TIMBAL_V2_LABEL[variant]
+            ),
+            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/ui/button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LEGACY_SIZE_TO_V2 = {
+  default: "md",
+  xs: "xs",
+  sm: "sm",
+  lg: "lg",
+  icon: "sm",
+  "icon-xs": "xs",
+  "icon-sm": "sm",
+  "icon-lg": "lg"
+};
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "",
+        destructive: "",
+        outline: "",
+        secondary: "",
+        ghost: "",
+        link: ""
+      },
+      size: {
+        default: "",
+        xs: "",
+        sm: "",
+        lg: "",
+        icon: "",
+        "icon-xs": "",
+        "icon-sm": "",
+        "icon-lg": ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const v2Variant = TIMBAL_V2_FROM_LEGACY_BUTTON[variant ?? "default"];
+  const v2Size = LEGACY_SIZE_TO_V2[size ?? "default"];
+  const isIconOnly = typeof size === "string" && size.startsWith("icon");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    TimbalV2Button,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      variant: v2Variant,
+      size: v2Size,
+      shape: "rect",
+      isIconOnly,
+      asChild,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/ui/tooltip.tsx
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_radix_ui2.Tooltip.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Tooltip.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_radix_ui2.Tooltip.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Tooltip.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/ui/avatar.tsx
+var import_radix_ui3 = require("radix-ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui3.Avatar.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui3.Avatar.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui3.Avatar.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/dialog.tsx
+var import_lucide_react = require("lucide-react");
+var import_radix_ui4 = require("radix-ui");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui4.Dialog.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui4.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui4.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui4.Dialog.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_radix_ui4.Dialog.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[70] bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_radix_ui4.Dialog.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          TIMBAL_V2_MODAL_SURFACE,
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl p-6 duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            import_radix_ui4.Dialog.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-[opacity,background-color] hover:bg-ghost-fill-hover hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_radix_ui4.Dialog.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/shimmer.tsx
+var import_react = require("motion/react");
+var import_react2 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2
+}) => {
+  const MotionComponent = import_react.motion.create(
+    Component
+  );
+  const dynamicSpread = (0, import_react2.useMemo)(
+    () => (children?.length ?? 0) * spread,
+    [children, spread]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    MotionComponent,
+    {
+      animate: { backgroundPosition: "0% center" },
+      className: cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className
+      ),
+      initial: { backgroundPosition: "100% center" },
+      style: {
+        "--spread": `${dynamicSpread}px`,
+        backgroundImage: "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))"
+      },
+      transition: {
+        repeat: Number.POSITIVE_INFINITY,
+        duration,
+        ease: "linear"
+      },
+      children
+    }
+  );
+};
+var Shimmer = (0, import_react2.memo)(ShimmerComponent);
+
+// src/ui/pill-segmented-tabs.tsx
+var import_react3 = require("react");
+var import_react4 = require("motion/react");
+
+// src/design/pill-segmented-classes.ts
+var pillSegmentedTrackBase = "inline-flex w-fit max-w-max shrink-0 self-start items-center rounded-full";
+var pillSegmentedTrackSurface = cn(
+  "bg-pill-segmented-track border border-[var(--pill-segmented-track-border)]",
+  "shadow-[var(--pill-segmented-track-shadow)]"
+);
+var pillSegmentedTrackClass = cn(
+  pillSegmentedTrackBase,
+  pillSegmentedTrackSurface,
+  "gap-1 p-1"
+);
+var pillSegmentedTrackFlushClass = cn(
+  pillSegmentedTrackBase,
+  pillSegmentedTrackSurface,
+  "h-[var(--studio-chrome-pill-height)] items-center gap-0.5 overflow-visible p-0.5"
+);
+var pillSegmentedSegmentClass = cn(
+  "relative flex items-center gap-1.5 rounded-full px-4 py-1.5 text-xs font-normal transition-colors"
+);
+var pillSegmentedFlushSegmentClass = cn(
+  "relative box-border inline-flex h-9 min-h-9 items-center justify-center gap-1.5 rounded-full px-3.5 py-0",
+  "text-sm font-normal leading-tight transition-colors"
+);
+var pillSegmentedActiveIndicatorClass = cn(
+  "absolute inset-0 rounded-full",
+  "border border-[var(--pill-segmented-indicator-border)]",
+  "bg-gradient-to-b from-[var(--pill-segmented-indicator-from)] to-[var(--pill-segmented-indicator-to)]",
+  "shadow-[var(--pill-segmented-indicator-shadow)]"
+);
+
+// src/ui/pill-segmented-tabs.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PillTab = ({
+  tabKey,
+  label,
+  isActive,
+  disabled,
+  onSelect,
+  layoutId,
+  segmentClassName,
+  animateIndicator
+}) => {
+  const handlePress = (0, import_react3.useCallback)(() => {
+    if (!disabled) onSelect(tabKey);
+  }, [disabled, onSelect, tabKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: handlePress,
+      disabled,
+      "aria-pressed": isActive,
+      className: cn(
+        segmentClassName,
+        disabled && "cursor-not-allowed opacity-50",
+        !disabled && (isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground")
+      ),
+      children: [
+        isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react4.motion.div,
+          {
+            layoutId,
+            className: pillSegmentedActiveIndicatorClass,
+            transition: { type: "spring", duration: 0.3, bounce: 0.15 }
+          }
+        ) : isActive ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative z-10 whitespace-nowrap", children: label })
+      ]
+    }
+  );
+};
+var PillSegmentedTabs = ({
+  value,
+  onChange,
+  tabs,
+  className,
+  trackVariant = "default",
+  layoutId: layoutIdProp,
+  "aria-label": ariaLabel
+}) => {
+  const reactId = (0, import_react3.useId)();
+  const layoutId = layoutIdProp ?? `pill-segmented-${reactId.replace(/:/g, "")}`;
+  const reducedMotion = (0, import_react4.useReducedMotion)();
+  const isFlush = trackVariant === "flush";
+  const trackClass = isFlush ? pillSegmentedTrackFlushClass : pillSegmentedTrackClass;
+  const segmentClassName = isFlush ? pillSegmentedFlushSegmentClass : pillSegmentedSegmentClass;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass, className), children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    PillTab,
+    {
+      tabKey: tab.key,
+      label: tab.label,
+      disabled: tab.disabled,
+      isActive: value === tab.key,
+      onSelect: onChange,
+      layoutId,
+      segmentClassName,
+      animateIndicator: !reducedMotion
+    },
+    tab.key
+  )) });
+};
+var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  MemoPillSegmentedTabs,
+  PillSegmentedTabs,
+  Shimmer,
+  TimbalV2Button,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+});