@timbal-ai/timbal-react 0.5.4 → 0.6.0

package/dist/chunk-IYENDIRY.esm.js

@@ -0,0 +1,119 @@
+import {
+  cn
+} from "./chunk-4TCJQSIX.esm.js";
+
+// src/ui/pill-segmented-tabs.tsx
+import {
+  memo,
+  useCallback,
+  useId
+} from "react";
+import { motion, useReducedMotion } from "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
+import { jsx, jsxs } from "react/jsx-runtime";
+var PillTab = ({
+  tabKey,
+  label,
+  isActive,
+  disabled,
+  onSelect,
+  layoutId,
+  segmentClassName,
+  animateIndicator
+}) => {
+  const handlePress = useCallback(() => {
+    if (!disabled) onSelect(tabKey);
+  }, [disabled, onSelect, tabKey]);
+  return /* @__PURE__ */ 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__ */ jsx(
+          motion.div,
+          {
+            layoutId,
+            className: pillSegmentedActiveIndicatorClass,
+            transition: { type: "spring", duration: 0.3, bounce: 0.15 }
+          }
+        ) : isActive ? /* @__PURE__ */ jsx("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
+        /* @__PURE__ */ 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 = useId();
+  const layoutId = layoutIdProp ?? `pill-segmented-${reactId.replace(/:/g, "")}`;
+  const reducedMotion = useReducedMotion();
+  const isFlush = trackVariant === "flush";
+  const trackClass = isFlush ? pillSegmentedTrackFlushClass : pillSegmentedTrackClass;
+  const segmentClassName = isFlush ? pillSegmentedFlushSegmentClass : pillSegmentedSegmentClass;
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass, className), children: tabs.map((tab) => /* @__PURE__ */ 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 = memo(PillSegmentedTabs);
+
+export {
+  PillSegmentedTabs,
+  MemoPillSegmentedTabs
+};

package/dist/chunk-KC5QLVUG.esm.js

@@ -0,0 +1,22 @@
+// src/chat/layout.ts
+var THREAD_DEFAULT_MAX_WIDTH = "44rem";
+var threadMessageColumnClass = "mx-auto w-full max-w-(--thread-max-width)";
+var assistantMessageRootClass = [
+  "aui-assistant-message-root relative",
+  threadMessageColumnClass,
+  "py-3 duration-150"
+].join(" ");
+var assistantMessageContentClass = "wrap-break-word px-2 text-foreground leading-relaxed";
+var userMessageRootClass = [
+  "aui-user-message-root flex flex-col items-end gap-2",
+  threadMessageColumnClass,
+  "px-2 py-3"
+].join(" ");
+
+export {
+  THREAD_DEFAULT_MAX_WIDTH,
+  threadMessageColumnClass,
+  assistantMessageRootClass,
+  assistantMessageContentClass,
+  userMessageRootClass
+};