@mastra/playground-ui 36.1.0-alpha.2 → 37.0.0-alpha.4

package/dist/scroll-area-COFVK-be.js

@@ -0,0 +1,221 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import * as React from 'react';
+import { useAutoscroll } from './hooks/use-autoscroll.es.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const DEFAULT_SCROLL_BUTTON_SPEED = 100;
+const DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;
+const MIN_SCROLL_BUTTON_SPEED = 1;
+const MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;
+function resolveMask(mask, orientation) {
+  if (mask === false) return { top: false, bottom: false, left: false, right: false };
+  const vertical = orientation === "vertical" || orientation === "both";
+  const horizontal = orientation === "horizontal" || orientation === "both";
+  const sides = { top: vertical, bottom: vertical, left: horizontal, right: horizontal };
+  if (mask === true || mask === void 0) return sides;
+  if (mask.y !== void 0) {
+    sides.top = mask.y;
+    sides.bottom = mask.y;
+  }
+  if (mask.x !== void 0) {
+    sides.left = mask.x;
+    sides.right = mask.x;
+  }
+  if (mask.top !== void 0) sides.top = mask.top;
+  if (mask.bottom !== void 0) sides.bottom = mask.bottom;
+  if (mask.left !== void 0) sides.left = mask.left;
+  if (mask.right !== void 0) sides.right = mask.right;
+  return sides;
+}
+function maskClasses(sides) {
+  return cn(
+    sides.top && "data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)]",
+    sides.bottom && "data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)]",
+    sides.left && "data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)]",
+    sides.right && "data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]"
+  );
+}
+function clampScrollButtonNumber(value, fallback, min) {
+  const resolvedValue = value ?? fallback;
+  return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);
+}
+const ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }) => {
+  const Icon = direction === "left" ? ChevronLeftIcon : ChevronRightIcon;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      className: cn(
+        "absolute top-1 bottom-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-neutral3 transition-colors duration-normal ease-out-custom hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10",
+        "outline-hidden focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
+        direction === "left" ? "left-1 group-data-[overflow-x-start]/scroll-area:flex" : "right-1 group-data-[overflow-x-end]/scroll-area:flex"
+      ),
+      onPointerDown: (event) => onStartScrolling(direction, event),
+      onPointerUp: onStopScrolling,
+      onPointerLeave: onStopScrolling,
+      onPointerCancel: onStopScrolling,
+      onBlur: onStopScrolling,
+      onClick: (event) => {
+        if (event.detail === 0) onKeyboardScroll(direction);
+      },
+      children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+};
+const ScrollButtons = ({ areaRef, scrollButtons }) => {
+  const scrollButtonInterval = React.useRef(null);
+  const scrollButtonOptions = typeof scrollButtons === "object" ? scrollButtons : void 0;
+  const scrollButtonSpeed = clampScrollButtonNumber(
+    scrollButtonOptions?.scrollSpeed,
+    DEFAULT_SCROLL_BUTTON_SPEED,
+    MIN_SCROLL_BUTTON_SPEED
+  );
+  const scrollButtonIntervalTime = clampScrollButtonNumber(
+    scrollButtonOptions?.scrollIntervalTime,
+    DEFAULT_SCROLL_BUTTON_INTERVAL_TIME,
+    MIN_SCROLL_BUTTON_INTERVAL_TIME
+  );
+  const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? "Scroll left";
+  const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? "Scroll right";
+  const stopScrollButtonScrolling = React.useCallback(() => {
+    if (!scrollButtonInterval.current) return;
+    clearInterval(scrollButtonInterval.current);
+    scrollButtonInterval.current = null;
+  }, []);
+  const scrollByDirection = React.useCallback(
+    (direction, multiplier = 1) => {
+      const viewport = areaRef.current;
+      if (!viewport) return;
+      viewport.scrollBy({
+        left: direction === "right" ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,
+        behavior: "smooth"
+      });
+    },
+    [areaRef, scrollButtonSpeed]
+  );
+  const startScrollButtonScrolling = React.useCallback(
+    (direction, event) => {
+      event?.preventDefault();
+      event?.stopPropagation();
+      event?.currentTarget.setPointerCapture?.(event.pointerId);
+      stopScrollButtonScrolling();
+      scrollByDirection(direction, 2);
+      scrollButtonInterval.current = setInterval(() => {
+        scrollByDirection(direction);
+      }, scrollButtonIntervalTime);
+    },
+    [scrollButtonIntervalTime, scrollByDirection, stopScrollButtonScrolling]
+  );
+  React.useEffect(() => {
+    return () => {
+      stopScrollButtonScrolling();
+    };
+  }, [stopScrollButtonScrolling]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ScrollButton,
+      {
+        direction: "left",
+        label: leftScrollButtonLabel,
+        onStartScrolling: startScrollButtonScrolling,
+        onStopScrolling: stopScrollButtonScrolling,
+        onKeyboardScroll: (direction) => scrollByDirection(direction, 2)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollButton,
+      {
+        direction: "right",
+        label: rightScrollButtonLabel,
+        onStartScrolling: startScrollButtonScrolling,
+        onStopScrolling: stopScrollButtonScrolling,
+        onKeyboardScroll: (direction) => scrollByDirection(direction, 2)
+      }
+    )
+  ] });
+};
+const ScrollArea = React.forwardRef(
+  ({
+    className,
+    children,
+    viewPortClassName,
+    maxHeight,
+    autoScroll = false,
+    orientation = "vertical",
+    scrollButtons,
+    mask,
+    showMask,
+    viewportRef,
+    ...props
+  }, ref) => {
+    const areaRef = React.useRef(null);
+    useAutoscroll(areaRef, { enabled: autoScroll });
+    const setViewportRef = React.useCallback(
+      (node) => {
+        areaRef.current = node;
+        if (typeof viewportRef === "function") viewportRef(node);
+        else if (viewportRef) viewportRef.current = node;
+      },
+      [viewportRef]
+    );
+    const effectiveMask = mask !== void 0 ? mask : showMask;
+    const sides = resolveMask(effectiveMask, orientation);
+    const viewportStyle = {};
+    if (maxHeight) viewportStyle.maxHeight = maxHeight;
+    if (orientation === "vertical") {
+      viewportStyle.overflowX = "hidden";
+      viewportStyle.overflowY = "scroll";
+    } else if (orientation === "horizontal") {
+      viewportStyle.overflowX = "scroll";
+      viewportStyle.overflowY = "hidden";
+    }
+    const contentStyle = orientation === "vertical" ? { minWidth: "0px" } : orientation === "horizontal" ? { minHeight: "0px" } : void 0;
+    return /* @__PURE__ */ jsxs(
+      ScrollArea$1.Root,
+      {
+        ref,
+        className: cn("group/scroll-area relative overflow-hidden", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            ScrollArea$1.Viewport,
+            {
+              ref: setViewportRef,
+              className: cn("h-full w-full rounded-[inherit]", maskClasses(sides), viewPortClassName),
+              style: viewportStyle,
+              children: /* @__PURE__ */ jsx(ScrollArea$1.Content, { style: contentStyle, children })
+            }
+          ),
+          scrollButtons && orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollButtons, { areaRef, scrollButtons }),
+          (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
+          (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
+          orientation === "both" && /* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
+        ]
+      }
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollArea$1.Scrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-opacity duration-normal ease-out-custom",
+      "opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0",
+      orientation === "vertical" && "h-full w-1.5 p-px",
+      orientation === "horizontal" && "h-1.5 w-full flex-col p-px",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, { className: "relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal" })
+  }
+));
+ScrollBar.displayName = "ScrollBar";
+
+export { ScrollArea as S, ScrollBar as a };
+//# sourceMappingURL=scroll-area-COFVK-be.js.map

package/dist/scroll-area-COFVK-be.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-COFVK-be.js","sources":["../src/ds/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'vertical' | 'horizontal' | 'both';\ntype ScrollButtonDirection = 'left' | 'right';\n\nconst DEFAULT_SCROLL_BUTTON_SPEED = 100;\nconst DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;\nconst MIN_SCROLL_BUTTON_SPEED = 1;\nconst MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;\n\nexport type MaskSides = {\n  top?: boolean;\n  bottom?: boolean;\n  left?: boolean;\n  right?: boolean;\n  /** Shorthand: sets both `left` and `right`. Per-side keys override. */\n  x?: boolean;\n  /** Shorthand: sets both `top` and `bottom`. Per-side keys override. */\n  y?: boolean;\n};\n\n/**\n * - `true` / omitted: fade the edges that match `orientation`.\n * - `false`: no fade.\n * - object: per-side override on top of the orientation default.\n */\nexport type ScrollAreaMask = boolean | MaskSides;\n\nexport type ScrollAreaScrollButtons =\n  | boolean\n  | {\n      /** Pixels to scroll per repeated interval. */\n      scrollSpeed?: number;\n      /** Milliseconds between repeated scroll steps while the button is held. */\n      scrollIntervalTime?: number;\n      leftLabel?: string;\n      rightLabel?: string;\n    };\n\nexport type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n  viewPortClassName?: string;\n  maxHeight?: string;\n  autoScroll?: boolean;\n  orientation?: Orientation;\n  /** Show left/right controls for horizontal overflow. Only applies to `horizontal` and `both` orientations. */\n  scrollButtons?: ScrollAreaScrollButtons;\n  /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */\n  mask?: ScrollAreaMask;\n  /** @deprecated Use `mask` instead. Retained for backward compatibility. */\n  showMask?: boolean;\n  /**\n   * Ref to the scrolling viewport element. Use this as the scroll element for a\n   * virtualizer (`getScrollElement: () => viewportRef.current`) so the list can\n   * virtualize while still using the ScrollArea's overlay scrollbar + masks.\n   */\n  viewportRef?: React.Ref<HTMLDivElement>;\n};\n\ntype ResolvedMask = { top: boolean; bottom: boolean; left: boolean; right: boolean };\n\nfunction resolveMask(mask: ScrollAreaMask | undefined, orientation: Orientation): ResolvedMask {\n  if (mask === false) return { top: false, bottom: false, left: false, right: false };\n\n  const vertical = orientation === 'vertical' || orientation === 'both';\n  const horizontal = orientation === 'horizontal' || orientation === 'both';\n  const sides: ResolvedMask = { top: vertical, bottom: vertical, left: horizontal, right: horizontal };\n\n  if (mask === true || mask === undefined) return sides;\n\n  if (mask.y !== undefined) {\n    sides.top = mask.y;\n    sides.bottom = mask.y;\n  }\n  if (mask.x !== undefined) {\n    sides.left = mask.x;\n    sides.right = mask.x;\n  }\n  if (mask.top !== undefined) sides.top = mask.top;\n  if (mask.bottom !== undefined) sides.bottom = mask.bottom;\n  if (mask.left !== undefined) sides.left = mask.left;\n  if (mask.right !== undefined) sides.right = mask.right;\n\n  return sides;\n}\n\nfunction maskClasses(sides: ResolvedMask) {\n  return cn(\n    sides.top && 'data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)]',\n    sides.bottom && 'data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)]',\n    sides.left && 'data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)]',\n    sides.right && 'data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]',\n  );\n}\n\nfunction clampScrollButtonNumber(value: number | undefined, fallback: number, min: number) {\n  const resolvedValue = value ?? fallback;\n  return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);\n}\n\ntype ScrollButtonProps = {\n  direction: ScrollButtonDirection;\n  label: string;\n  onStartScrolling: (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => void;\n  onStopScrolling: () => void;\n  onKeyboardScroll: (direction: ScrollButtonDirection) => void;\n};\n\nconst ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }: ScrollButtonProps) => {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        'absolute top-1 bottom-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-neutral3 transition-colors duration-normal ease-out-custom hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10',\n        'outline-hidden focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55',\n        direction === 'left'\n          ? 'left-1 group-data-[overflow-x-start]/scroll-area:flex'\n          : 'right-1 group-data-[overflow-x-end]/scroll-area:flex',\n      )}\n      onPointerDown={event => onStartScrolling(direction, event)}\n      onPointerUp={onStopScrolling}\n      onPointerLeave={onStopScrolling}\n      onPointerCancel={onStopScrolling}\n      onBlur={onStopScrolling}\n      onClick={event => {\n        if (event.detail === 0) onKeyboardScroll(direction);\n      }}\n    >\n      <Icon aria-hidden=\"true\" className=\"size-4\" />\n    </button>\n  );\n};\n\ntype ScrollButtonsProps = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  scrollButtons: Exclude<ScrollAreaScrollButtons, false | undefined>;\n};\n\nconst ScrollButtons = ({ areaRef, scrollButtons }: ScrollButtonsProps) => {\n  const scrollButtonInterval = React.useRef<ReturnType<typeof setInterval> | null>(null);\n  const scrollButtonOptions = typeof scrollButtons === 'object' ? scrollButtons : undefined;\n  const scrollButtonSpeed = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollSpeed,\n    DEFAULT_SCROLL_BUTTON_SPEED,\n    MIN_SCROLL_BUTTON_SPEED,\n  );\n  const scrollButtonIntervalTime = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollIntervalTime,\n    DEFAULT_SCROLL_BUTTON_INTERVAL_TIME,\n    MIN_SCROLL_BUTTON_INTERVAL_TIME,\n  );\n  const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? 'Scroll left';\n  const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? 'Scroll right';\n\n  const stopScrollButtonScrolling = React.useCallback(() => {\n    if (!scrollButtonInterval.current) return;\n    clearInterval(scrollButtonInterval.current);\n    scrollButtonInterval.current = null;\n  }, []);\n\n  const scrollByDirection = React.useCallback(\n    (direction: ScrollButtonDirection, multiplier = 1) => {\n      const viewport = areaRef.current;\n      if (!viewport) return;\n\n      viewport.scrollBy({\n        left: direction === 'right' ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,\n        behavior: 'smooth',\n      });\n    },\n    [areaRef, scrollButtonSpeed],\n  );\n\n  const startScrollButtonScrolling = React.useCallback(\n    (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      event?.currentTarget.setPointerCapture?.(event.pointerId);\n\n      stopScrollButtonScrolling();\n      scrollByDirection(direction, 2);\n\n      scrollButtonInterval.current = setInterval(() => {\n        scrollByDirection(direction);\n      }, scrollButtonIntervalTime);\n    },\n    [scrollButtonIntervalTime, scrollByDirection, stopScrollButtonScrolling],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      stopScrollButtonScrolling();\n    };\n  }, [stopScrollButtonScrolling]);\n\n  return (\n    <>\n      <ScrollButton\n        direction=\"left\"\n        label={leftScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n      <ScrollButton\n        direction=\"right\"\n        label={rightScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n    </>\n  );\n};\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      className,\n      children,\n      viewPortClassName,\n      maxHeight,\n      autoScroll = false,\n      orientation = 'vertical',\n      scrollButtons,\n      mask,\n      showMask,\n      viewportRef,\n      ...props\n    },\n    ref,\n  ) => {\n    const areaRef = React.useRef<HTMLDivElement>(null);\n    useAutoscroll(areaRef, { enabled: autoScroll });\n\n    // Keep the internal autoscroll ref while also exposing the viewport to callers\n    // (e.g. a virtualizer's scroll element).\n    const setViewportRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        areaRef.current = node;\n        if (typeof viewportRef === 'function') viewportRef(node);\n        else if (viewportRef) (viewportRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      },\n      [viewportRef],\n    );\n\n    const effectiveMask: ScrollAreaMask | undefined = mask !== undefined ? mask : showMask;\n    const sides = resolveMask(effectiveMask, orientation);\n\n    const viewportStyle: React.CSSProperties = {};\n    if (maxHeight) viewportStyle.maxHeight = maxHeight;\n    if (orientation === 'vertical') {\n      viewportStyle.overflowX = 'hidden';\n      viewportStyle.overflowY = 'scroll';\n    } else if (orientation === 'horizontal') {\n      viewportStyle.overflowX = 'scroll';\n      viewportStyle.overflowY = 'hidden';\n    }\n\n    // Base UI's ScrollAreaContent forces `min-width: fit-content` so the\n    // content can grow wider than the viewport (required for horizontal scroll\n    // measurement). For vertical-only scroll we override it so children shrink\n    // to the viewport width instead of forcing horizontal scroll.\n    const contentStyle: React.CSSProperties | undefined =\n      orientation === 'vertical'\n        ? { minWidth: '0px' }\n        : orientation === 'horizontal'\n          ? { minHeight: '0px' }\n          : undefined;\n\n    return (\n      <ScrollAreaPrimitive.Root\n        ref={ref}\n        className={cn('group/scroll-area relative overflow-hidden', className)}\n        {...props}\n      >\n        <ScrollAreaPrimitive.Viewport\n          ref={setViewportRef}\n          className={cn('h-full w-full rounded-[inherit]', maskClasses(sides), viewPortClassName)}\n          style={viewportStyle}\n        >\n          <ScrollAreaPrimitive.Content style={contentStyle}>{children}</ScrollAreaPrimitive.Content>\n        </ScrollAreaPrimitive.Viewport>\n        {scrollButtons && orientation !== 'vertical' && (\n          <ScrollButtons areaRef={areaRef} scrollButtons={scrollButtons} />\n        )}\n        {(orientation === 'vertical' || orientation === 'both') && <ScrollBar orientation=\"vertical\" />}\n        {(orientation === 'horizontal' || orientation === 'both') && <ScrollBar orientation=\"horizontal\" />}\n        {orientation === 'both' && <ScrollAreaPrimitive.Corner />}\n      </ScrollAreaPrimitive.Root>\n    );\n  },\n);\nScrollArea.displayName = 'ScrollArea';\n\nconst ScrollBar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.Scrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'flex touch-none select-none transition-opacity duration-normal ease-out-custom',\n      'opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0',\n      orientation === 'vertical' && 'h-full w-1.5 p-px',\n      orientation === 'horizontal' && 'h-1.5 w-full flex-col p-px',\n      className,\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Thumb className=\"relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal\" />\n  </ScrollAreaPrimitive.Scrollbar>\n));\nScrollBar.displayName = 'ScrollBar';\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollAreaPrimitive"],"mappings":"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"}

package/dist/search-field-block-BkRBAVCC.cjs

@@ -0,0 +1,117 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const Button = require('./Button-Bj667lJx.cjs');
+const input = require('./input-DL5-kqK-.cjs');
+const tooltip = require('./tooltip-fTKN3FCp.cjs');
+const fieldBlock = require('./field-block-BR_ZD9QO.cjs');
+const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+function SearchFieldBlock({
+  name,
+  helpText,
+  errorMsg,
+  required = false,
+  disabled = false,
+  value,
+  label,
+  labelIsHidden = false,
+  layout = "vertical",
+  placeholder = "Search...",
+  onChange,
+  onReset,
+  className,
+  size,
+  variant,
+  isMinimized,
+  onMinimizedChange
+}) {
+  const inputRef = React.useRef(null);
+  const buttonSize = size === "default" ? "lg" : size;
+  React.useEffect(() => {
+    if (isMinimized === false) {
+      inputRef.current?.focus();
+    }
+  }, [isMinimized]);
+  if (isMinimized) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          size: buttonSize || "sm",
+          "aria-label": label || "Search",
+          disabled,
+          onClick: () => onMinimizedChange?.(false),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: label || "Search" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Layout, { layout, className, children: [
+    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Column, { children: [
+      layout === "vertical" && label && !labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name, required, children: label }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            ref: inputRef,
+            name,
+            disabled,
+            value,
+            placeholder,
+            onChange,
+            size,
+            variant,
+            className: utils_cn.cn(
+              size === "sm" && "pl-8 pr-8",
+              size === "md" && "pl-9 pr-9",
+              (!size || size === "default") && "pl-10 pr-10",
+              size === "lg" && "pl-11 pr-11"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.SearchIcon,
+          {
+            "aria-hidden": "true",
+            className: utils_cn.cn(
+              "text-neutral4 opacity-50 group-has-focus:opacity-100 absolute left-3 top-1/2 -translate-y-1/2",
+              size === "sm" && "w-3.5 h-3.5",
+              size === "md" && "w-4 h-4",
+              (!size || size === "default") && "w-[1.125rem] h-[1.125rem]",
+              size === "lg" && "w-5 h-5"
+            )
+          }
+        ),
+        onReset && (value || isMinimized === false) && /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            variant: "ghost",
+            size: buttonSize || "lg",
+            "aria-label": "Clear search",
+            onClick: () => {
+              if (value) {
+                onReset();
+              }
+              if (isMinimized === false) {
+                onMinimizedChange?.(true);
+              }
+            },
+            className: "absolute top-1/2 right-0 -translate-y-1/2",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+          }
+        )
+      ] }),
+      helpText && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.HelpText, { children: helpText }),
+      errorMsg && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.ErrorMsg, { children: errorMsg })
+    ] })
+  ] });
+}
+
+exports.SearchFieldBlock = SearchFieldBlock;
+//# sourceMappingURL=search-field-block-BkRBAVCC.cjs.map

package/dist/search-field-block-BkRBAVCC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field-block-BkRBAVCC.cjs","sources":["../src/ds/components/FormFieldBlocks/fields/search-field-block.tsx"],"sourcesContent":["import { SearchIcon, XIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { Button } from '../../Button';\nimport { Input } from '../../Input';\nimport type { InputProps } from '../../Input';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../Tooltip';\nimport { FieldBlock } from '../block/field-block';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\nimport { cn } from '@/lib/utils';\n\nexport type SearchFieldBlockProps = {\n  name: string;\n  testId?: string;\n  label?: string;\n  labelIsHidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  value?: string;\n  placeholder?: string;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onReset?: () => void;\n  helpText?: string;\n  error?: boolean;\n  errorMsg?: string;\n  layout?: 'horizontal' | 'vertical';\n  className?: string;\n  size?: InputProps['size'];\n  variant?: InputProps['variant'];\n  isMinimized?: boolean;\n  onMinimizedChange?: (minimized: boolean) => void;\n};\n\nexport function SearchFieldBlock({\n  name,\n  helpText,\n  errorMsg,\n  required = false,\n  disabled = false,\n  value,\n  label,\n  labelIsHidden = false,\n  layout = 'vertical',\n  placeholder = 'Search...',\n  onChange,\n  onReset,\n  className,\n  size,\n  variant,\n  isMinimized,\n  onMinimizedChange,\n}: SearchFieldBlockProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const buttonSize = size === 'default' ? 'lg' : size;\n\n  useEffect(() => {\n    if (isMinimized === false) {\n      inputRef.current?.focus();\n    }\n  }, [isMinimized]);\n\n  if (isMinimized) {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            size={buttonSize || 'sm'}\n            aria-label={label || 'Search'}\n            disabled={disabled}\n            onClick={() => onMinimizedChange?.(false)}\n          >\n            <SearchIcon />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>{label || 'Search'}</TooltipContent>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <FieldBlock.Layout layout={layout} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {layout === 'vertical' && label && !labelIsHidden ? (\n          <FieldBlock.Label name={name} required={required}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <div className=\"relative group\">\n          <Input\n            ref={inputRef}\n            name={name}\n            disabled={disabled}\n            value={value}\n            placeholder={placeholder}\n            onChange={onChange}\n            size={size}\n            variant={variant}\n            className={cn(\n              size === 'sm' && 'pl-8 pr-8',\n              size === 'md' && 'pl-9 pr-9',\n              (!size || size === 'default') && 'pl-10 pr-10',\n              size === 'lg' && 'pl-11 pr-11',\n            )}\n          />\n          <SearchIcon\n            aria-hidden=\"true\"\n            className={cn(\n              'text-neutral4 opacity-50 group-has-focus:opacity-100 absolute left-3 top-1/2 -translate-y-1/2',\n              size === 'sm' && 'w-3.5 h-3.5',\n              size === 'md' && 'w-4 h-4',\n              (!size || size === 'default') && 'w-[1.125rem] h-[1.125rem]',\n              size === 'lg' && 'w-5 h-5',\n            )}\n          />\n          {onReset && (value || isMinimized === false) && (\n            <Button\n              variant=\"ghost\"\n              size={buttonSize || 'lg'}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                if (value) {\n                  onReset();\n                }\n                if (isMinimized === false) {\n                  onMinimizedChange?.(true);\n                }\n              }}\n              className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n            >\n              <XIcon />\n            </Button>\n          )}\n        </div>\n        {helpText && <FieldBlock.HelpText>{helpText}</FieldBlock.HelpText>}\n        {errorMsg && <FieldBlock.ErrorMsg>{errorMsg}</FieldBlock.ErrorMsg>}\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":["useRef","useEffect","Tooltip","jsx","TooltipTrigger","Button","SearchIcon","TooltipContent","jsxs","FieldBlock","VisuallyHidden","Input","cn","XIcon"],"mappings":"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"}

package/dist/search-field-block-CJSnpu8G.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SearchIcon, XIcon } from 'lucide-react';
+import { useRef, useEffect } from 'react';
+import { B as Button } from './Button-DUxP65eY.js';
+import { I as Input } from './input-CmF5qOKQ.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-CjjqIvhJ.js';
+import { F as FieldBlock } from './field-block-CpRBHzQO.js';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { c as cn } from './cn-BakJzhuv.js';
+
+function SearchFieldBlock({
+  name,
+  helpText,
+  errorMsg,
+  required = false,
+  disabled = false,
+  value,
+  label,
+  labelIsHidden = false,
+  layout = "vertical",
+  placeholder = "Search...",
+  onChange,
+  onReset,
+  className,
+  size,
+  variant,
+  isMinimized,
+  onMinimizedChange
+}) {
+  const inputRef = useRef(null);
+  const buttonSize = size === "default" ? "lg" : size;
+  useEffect(() => {
+    if (isMinimized === false) {
+      inputRef.current?.focus();
+    }
+  }, [isMinimized]);
+  if (isMinimized) {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: buttonSize || "sm",
+          "aria-label": label || "Search",
+          disabled,
+          onClick: () => onMinimizedChange?.(false),
+          children: /* @__PURE__ */ jsx(SearchIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: label || "Search" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(FieldBlock.Layout, { layout, className, children: [
+    layout === "horizontal" ? /* @__PURE__ */ jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsx(FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : label }) }) : null,
+    /* @__PURE__ */ jsxs(FieldBlock.Column, { children: [
+      layout === "vertical" && label && !labelIsHidden ? /* @__PURE__ */ jsx(FieldBlock.Label, { name, required, children: label }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: inputRef,
+            name,
+            disabled,
+            value,
+            placeholder,
+            onChange,
+            size,
+            variant,
+            className: cn(
+              size === "sm" && "pl-8 pr-8",
+              size === "md" && "pl-9 pr-9",
+              (!size || size === "default") && "pl-10 pr-10",
+              size === "lg" && "pl-11 pr-11"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SearchIcon,
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "text-neutral4 opacity-50 group-has-focus:opacity-100 absolute left-3 top-1/2 -translate-y-1/2",
+              size === "sm" && "w-3.5 h-3.5",
+              size === "md" && "w-4 h-4",
+              (!size || size === "default") && "w-[1.125rem] h-[1.125rem]",
+              size === "lg" && "w-5 h-5"
+            )
+          }
+        ),
+        onReset && (value || isMinimized === false) && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: buttonSize || "lg",
+            "aria-label": "Clear search",
+            onClick: () => {
+              if (value) {
+                onReset();
+              }
+              if (isMinimized === false) {
+                onMinimizedChange?.(true);
+              }
+            },
+            className: "absolute top-1/2 right-0 -translate-y-1/2",
+            children: /* @__PURE__ */ jsx(XIcon, {})
+          }
+        )
+      ] }),
+      helpText && /* @__PURE__ */ jsx(FieldBlock.HelpText, { children: helpText }),
+      errorMsg && /* @__PURE__ */ jsx(FieldBlock.ErrorMsg, { children: errorMsg })
+    ] })
+  ] });
+}
+
+export { SearchFieldBlock as S };
+//# sourceMappingURL=search-field-block-CJSnpu8G.js.map

package/dist/search-field-block-CJSnpu8G.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field-block-CJSnpu8G.js","sources":["../src/ds/components/FormFieldBlocks/fields/search-field-block.tsx"],"sourcesContent":["import { SearchIcon, XIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { Button } from '../../Button';\nimport { Input } from '../../Input';\nimport type { InputProps } from '../../Input';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../Tooltip';\nimport { FieldBlock } from '../block/field-block';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\nimport { cn } from '@/lib/utils';\n\nexport type SearchFieldBlockProps = {\n  name: string;\n  testId?: string;\n  label?: string;\n  labelIsHidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  value?: string;\n  placeholder?: string;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onReset?: () => void;\n  helpText?: string;\n  error?: boolean;\n  errorMsg?: string;\n  layout?: 'horizontal' | 'vertical';\n  className?: string;\n  size?: InputProps['size'];\n  variant?: InputProps['variant'];\n  isMinimized?: boolean;\n  onMinimizedChange?: (minimized: boolean) => void;\n};\n\nexport function SearchFieldBlock({\n  name,\n  helpText,\n  errorMsg,\n  required = false,\n  disabled = false,\n  value,\n  label,\n  labelIsHidden = false,\n  layout = 'vertical',\n  placeholder = 'Search...',\n  onChange,\n  onReset,\n  className,\n  size,\n  variant,\n  isMinimized,\n  onMinimizedChange,\n}: SearchFieldBlockProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const buttonSize = size === 'default' ? 'lg' : size;\n\n  useEffect(() => {\n    if (isMinimized === false) {\n      inputRef.current?.focus();\n    }\n  }, [isMinimized]);\n\n  if (isMinimized) {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            size={buttonSize || 'sm'}\n            aria-label={label || 'Search'}\n            disabled={disabled}\n            onClick={() => onMinimizedChange?.(false)}\n          >\n            <SearchIcon />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>{label || 'Search'}</TooltipContent>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <FieldBlock.Layout layout={layout} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {layout === 'vertical' && label && !labelIsHidden ? (\n          <FieldBlock.Label name={name} required={required}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <div className=\"relative group\">\n          <Input\n            ref={inputRef}\n            name={name}\n            disabled={disabled}\n            value={value}\n            placeholder={placeholder}\n            onChange={onChange}\n            size={size}\n            variant={variant}\n            className={cn(\n              size === 'sm' && 'pl-8 pr-8',\n              size === 'md' && 'pl-9 pr-9',\n              (!size || size === 'default') && 'pl-10 pr-10',\n              size === 'lg' && 'pl-11 pr-11',\n            )}\n          />\n          <SearchIcon\n            aria-hidden=\"true\"\n            className={cn(\n              'text-neutral4 opacity-50 group-has-focus:opacity-100 absolute left-3 top-1/2 -translate-y-1/2',\n              size === 'sm' && 'w-3.5 h-3.5',\n              size === 'md' && 'w-4 h-4',\n              (!size || size === 'default') && 'w-[1.125rem] h-[1.125rem]',\n              size === 'lg' && 'w-5 h-5',\n            )}\n          />\n          {onReset && (value || isMinimized === false) && (\n            <Button\n              variant=\"ghost\"\n              size={buttonSize || 'lg'}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                if (value) {\n                  onReset();\n                }\n                if (isMinimized === false) {\n                  onMinimizedChange?.(true);\n                }\n              }}\n              className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n            >\n              <XIcon />\n            </Button>\n          )}\n        </div>\n        {helpText && <FieldBlock.HelpText>{helpText}</FieldBlock.HelpText>}\n        {errorMsg && <FieldBlock.ErrorMsg>{errorMsg}</FieldBlock.ErrorMsg>}\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/searchbar-DzOR_xnW.cjs

@@ -0,0 +1,105 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const useDebounce = require('use-debounce');
+const controlSize = require('./control-size-D67C0kPZ.cjs');
+const formElement = require('./form-element-Cy7aV1Ds.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+const searchbarFilledSurface = utils_cn.cn(
+  "bg-surface-overlay-soft rounded-full",
+  "hover:bg-surface-overlay-strong",
+  formElement.inputHoverBorderWithin,
+  "outline-hidden focus-within:outline-hidden focus-within:bg-surface-overlay-strong",
+  formElement.inputFocusBorderWithin
+);
+const searchbarVariantClasses = {
+  default: searchbarFilledSurface,
+  filled: searchbarFilledSurface,
+  outline: utils_cn.cn(
+    "bg-transparent rounded-full",
+    formElement.inputHoverBorderWithin,
+    "outline-hidden focus-within:outline-hidden",
+    formElement.inputFocusBorderWithin
+  )
+};
+const Searchbar = ({
+  onSearch,
+  label,
+  placeholder,
+  debounceMs = 300,
+  size = "md",
+  variant = "outline",
+  className
+}) => {
+  const id = React.useId();
+  const inputRef = React.useRef(null);
+  const debouncedSearch = useDebounce.useDebouncedCallback((value) => {
+    onSearch(value);
+  }, debounceMs);
+  React.useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+  React.useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const handleKeyDown = (event) => {
+      if (event.key.toLowerCase() === "f" && event.shiftKey && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        input.focus();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  const handleChange = (e) => {
+    debouncedSearch(e.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils_cn.cn(
+        "border border-border1 flex w-full items-center gap-2 overflow-hidden pl-2 pr-1",
+        transitions.transitions.all,
+        searchbarVariantClasses[variant],
+        controlSize.controlHeight[size],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: utils_cn.cn("text-neutral3 h-4 w-4", transitions.transitions.colors) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id,
+              type: "text",
+              placeholder,
+              className: utils_cn.cn(
+                "bg-transparent placeholder:text-neutral2 block w-full px-2 outline-hidden",
+                controlSize.controlSizeClasses[size]
+              ),
+              name: id,
+              ref: inputRef,
+              onChange: handleChange
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const SearchbarWrapper = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2.5 border-b border-border1", children });
+};
+
+exports.Searchbar = Searchbar;
+exports.SearchbarWrapper = SearchbarWrapper;
+//# sourceMappingURL=searchbar-DzOR_xnW.cjs.map

package/dist/searchbar-DzOR_xnW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchbar-DzOR_xnW.cjs","sources":["../src/ds/components/Searchbar/searchbar.tsx"],"sourcesContent":["import { SearchIcon } from 'lucide-react';\nimport { useEffect, useId, useRef } from 'react';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { controlHeight, controlSizeClasses } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { inputFocusBorderWithin, inputHoverBorderWithin } from '@/ds/primitives/form-element';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype SearchbarVariant = 'default' | 'filled' | 'outline';\n\nexport type SearchbarProps = {\n  onSearch: (search: string) => void;\n  label: string;\n  placeholder: string;\n  debounceMs?: number;\n  size?: ControlSize;\n  variant?: SearchbarVariant;\n  className?: string;\n};\n\n// `default` and `filled` are the same filled surface on purpose: the default Searchbar\n// look IS the filled treatment, and `filled` is an explicit alias for consumers. Share\n// the class string so the two can't drift.\nconst searchbarFilledSurface = cn(\n  'bg-surface-overlay-soft rounded-full',\n  'hover:bg-surface-overlay-strong',\n  inputHoverBorderWithin,\n  'outline-hidden focus-within:outline-hidden focus-within:bg-surface-overlay-strong',\n  inputFocusBorderWithin,\n);\n\nconst searchbarVariantClasses: Record<SearchbarVariant, string> = {\n  default: searchbarFilledSurface,\n  filled: searchbarFilledSurface,\n  outline: cn(\n    'bg-transparent rounded-full',\n    inputHoverBorderWithin,\n    'outline-hidden focus-within:outline-hidden',\n    inputFocusBorderWithin,\n  ),\n};\n\nexport const Searchbar = ({\n  onSearch,\n  label,\n  placeholder,\n  debounceMs = 300,\n  size = 'md',\n  variant = 'outline',\n  className,\n}: SearchbarProps) => {\n  const id = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const debouncedSearch = useDebouncedCallback((value: string) => {\n    onSearch(value);\n  }, debounceMs);\n\n  useEffect(() => {\n    return () => {\n      debouncedSearch.cancel();\n    };\n  }, [debouncedSearch]);\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (!input) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() === 'f' && event.shiftKey && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        input.focus();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    debouncedSearch(e.target.value);\n  };\n\n  return (\n    <div\n      className={cn(\n        'border border-border1 flex w-full items-center gap-2 overflow-hidden pl-2 pr-1',\n        transitions.all,\n        searchbarVariantClasses[variant],\n        controlHeight[size],\n        className,\n      )}\n    >\n      <SearchIcon className={cn('text-neutral3 h-4 w-4', transitions.colors)} />\n\n      <div className=\"flex-1\">\n        <label htmlFor={id} className=\"sr-only\">\n          {label}\n        </label>\n\n        <input\n          id={id}\n          type=\"text\"\n          placeholder={placeholder}\n          className={cn(\n            'bg-transparent placeholder:text-neutral2 block w-full px-2 outline-hidden',\n            controlSizeClasses[size],\n          )}\n          name={id}\n          ref={inputRef}\n          onChange={handleChange}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport const SearchbarWrapper = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"px-3 py-2.5 border-b border-border1\">{children}</div>;\n};\n"],"names":["cn","inputHoverBorderWithin","inputFocusBorderWithin","useId","useRef","useDebouncedCallback","useEffect","jsxs","transitions","controlHeight","jsx","SearchIcon","controlSizeClasses"],"mappings":"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"}