@nexub/react 1.0.0 → 1.2.0

package/dist/chunk-TCTFQYLH.js

@@ -0,0 +1,115 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/DateRangePicker/DateRangePicker.tsx
+import * as React from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { DayPicker } from "react-day-picker";
+import { format } from "date-fns";
+import { CalendarDays, ChevronLeft, ChevronRight } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatRange(range, placeholder) {
+  if (!range) return placeholder;
+  if (range.from && range.to) {
+    return `${format(range.from, "PP")} \u2013 ${format(range.to, "PP")}`;
+  }
+  if (range.from) return `${format(range.from, "PP")} \u2013 \u2026`;
+  return placeholder;
+}
+var calendarClassNames = {
+  months: "flex flex-col sm:flex-row gap-4",
+  month: "flex flex-col gap-4",
+  month_caption: "flex justify-center pt-1 relative items-center",
+  caption_label: "text-sm font-medium",
+  nav: "flex items-center gap-1",
+  button_previous: "absolute left-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+  button_next: "absolute right-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+  month_grid: "w-full border-collapse",
+  weekdays: "flex",
+  weekday: "text-[var(--color-text-muted)] rounded-md w-8 font-normal text-[0.8rem] flex-1 text-center",
+  week: "flex w-full mt-2",
+  day: "relative p-0 text-center text-sm flex-1 focus-within:relative focus-within:z-20",
+  day_button: "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+  selected: "bg-[var(--color-fill-primary)] text-white hover:bg-[var(--color-fill-primary-hover)]",
+  range_start: "rounded-l-md",
+  range_end: "rounded-r-md",
+  range_middle: "aria-selected:bg-[var(--color-bg-subtle)] aria-selected:text-[var(--color-text-primary)] rounded-none",
+  today: "bg-[var(--color-bg-subtle)]",
+  outside: "opacity-50",
+  disabled: "opacity-50",
+  hidden: "invisible"
+};
+var DateRangePicker = React.forwardRef(function DateRangePicker2({
+  value,
+  onChange,
+  placeholder = "Pick a date range",
+  disabled = false,
+  minDate,
+  maxDate,
+  className,
+  id,
+  "aria-label": ariaLabel
+}, ref) {
+  const [open, setOpen] = React.useState(false);
+  const display = formatRange(value, placeholder);
+  const label = ariaLabel ? `${ariaLabel}: ${display}` : display;
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        id,
+        disabled,
+        "aria-label": label,
+        className: cn(
+          "inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border border-[var(--color-border-input)] bg-[var(--color-bg-default)] px-3 py-2 text-sm",
+          "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          !value && "text-[var(--color-text-muted)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
+          display
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+      RadixPopover.Content,
+      {
+        align: "start",
+        className: cn(
+          "z-[var(--z-popover)] rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+        ),
+        children: /* @__PURE__ */ jsx(
+          DayPicker,
+          {
+            mode: "range",
+            selected: value,
+            onSelect: onChange,
+            numberOfMonths: 2,
+            startMonth: minDate,
+            endMonth: maxDate,
+            initialFocus: true,
+            showOutsideDays: true,
+            className: "p-3",
+            classNames: calendarClassNames,
+            components: {
+              Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { size: "xs", "aria-hidden": "true" }) : orientation === "right" ? /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", ...rest })
+            }
+          }
+        )
+      }
+    ) })
+  ] });
+});
+DateRangePicker.displayName = "DateRangePicker";
+
+export {
+  DateRangePicker
+};

package/dist/chunk-U3AEA4BZ.js

@@ -0,0 +1,56 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Link/Link.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ExternalLink } from "@nexub/icons";
+import { cva } from "class-variance-authority";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var linkVariants = cva(
+  [
+    "inline-flex items-center gap-1 transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)] rounded-sm"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "text-[var(--color-brand-primary-500)] hover:text-[var(--color-brand-primary-600)]",
+        muted: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]",
+        underlined: "text-[var(--color-brand-primary-500)] underline underline-offset-4 hover:text-[var(--color-brand-primary-600)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Link = React.forwardRef(
+  ({ variant, external = false, asChild, className, children, target, rel, ...rest }, ref) => {
+    const resolvedTarget = external ? "_blank" : target;
+    const resolvedRel = resolvedTarget === "_blank" ? [.../* @__PURE__ */ new Set([...rel?.split(/\s+/).filter(Boolean) ?? [], "noopener", "noreferrer"])].join(" ") : rel;
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(linkVariants({ variant }), className),
+        ...rest,
+        target: resolvedTarget,
+        rel: resolvedRel,
+        children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          children,
+          external && /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" })
+        ] })
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+
+export {
+  linkVariants,
+  Link
+};

package/dist/chunk-U3EGB3JL.js

@@ -0,0 +1,43 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Toggle/Toggle.tsx
+import * as React from "react";
+import * as RadixToggle from "@radix-ui/react-toggle";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--color-bg-subtle)] data-[state=on]:text-[var(--color-text-primary)]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)]",
+        outline: "border border-[var(--color-border-default)] bg-transparent hover:bg-[var(--color-bg-subtle)]"
+      },
+      size: {
+        sm: "h-8 px-2.5",
+        md: "h-9 px-3",
+        lg: "h-10 px-4"
+      }
+    },
+    defaultVariants: { variant: "default", size: "md" }
+  }
+);
+var Toggle = React.forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToggle.Root,
+    {
+      ref,
+      className: cn(toggleVariants({ variant, size }), className),
+      ...props
+    }
+  )
+);
+Toggle.displayName = "Toggle";
+
+export {
+  toggleVariants,
+  Toggle
+};

package/dist/chunk-UALYS4XI.js

@@ -0,0 +1,67 @@
+'use client';
+import {
+  glassSurfaceClass
+} from "./chunk-ROZVVWPV.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Popover/Popover.tsx
+import * as React from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { jsx } from "react/jsx-runtime";
+var Root2 = RadixPopover.Root;
+var Trigger2 = RadixPopover.Trigger;
+var Portal2 = RadixPopover.Portal;
+var Close2 = RadixPopover.Close;
+var Content2 = React.forwardRef(
+  function PopoverContent({ className, sideOffset = 4, surface = "solid", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixPopover.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(
+          "z-[var(--z-popover)] rounded-lg border border-[var(--color-border-default)]",
+          "bg-[var(--color-bg-default)] p-4 shadow-md",
+          "outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+          "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+          "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          surface === "glass" && glassSurfaceClass,
+          className
+        ),
+        "data-material": surface === "glass" ? "glass" : void 0,
+        ...props
+      }
+    );
+  }
+);
+Content2.displayName = "Popover.Content";
+var Arrow2 = React.forwardRef(
+  function PopoverArrow({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixPopover.Arrow,
+      {
+        ref,
+        className: cn("fill-[var(--color-border-default)]", className),
+        ...props
+      }
+    );
+  }
+);
+Arrow2.displayName = "Popover.Arrow";
+var Popover = {
+  Root: Root2,
+  Trigger: Trigger2,
+  Portal: Portal2,
+  Content: Content2,
+  Arrow: Arrow2,
+  Close: Close2
+};
+
+export {
+  Popover
+};

package/dist/chunk-UTBUIBEP.js

@@ -0,0 +1,153 @@
+'use client';
+import {
+  useIsomorphicLayoutEffect
+} from "./chunk-NHUQLIHL.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Rating/Rating.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+
+// src/hooks/useControllableState.ts
+import { useState, useCallback, useRef } from "react";
+function useControllableState({
+  value: controlledValue,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolled;
+  const onChangeRef = useRef(onChange);
+  useIsomorphicLayoutEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+      onChangeRef.current?.(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+
+// src/components/Rating/Rating.tsx
+import { jsx } from "react/jsx-runtime";
+var ratingVariants = cva("inline-flex items-center gap-0.5", {
+  variants: {
+    size: {
+      sm: "[&_svg]:h-4 [&_svg]:w-4",
+      md: "[&_svg]:h-5 [&_svg]:w-5",
+      lg: "[&_svg]:h-7 [&_svg]:w-7"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var Rating = React.forwardRef(
+  ({
+    className,
+    size,
+    value: controlledValue,
+    max = 5,
+    readOnly = false,
+    onValueChange,
+    ...props
+  }, ref) => {
+    const [value, setValue] = useControllableState({
+      value: controlledValue,
+      defaultValue: 0,
+      onChange: onValueChange
+    });
+    const [hovered, setHovered] = React.useState(null);
+    const displayValue = hovered ?? value ?? 0;
+    const starRefs = React.useRef([]);
+    const tabStop = value && value > 0 ? value : 1;
+    const handleKeyDown = (e, starValue) => {
+      const next = e.key === "ArrowRight" || e.key === "ArrowUp" ? Math.min(max, starValue + 1) : e.key === "ArrowLeft" || e.key === "ArrowDown" ? Math.max(1, starValue - 1) : e.key === "Home" ? 1 : e.key === "End" ? max : null;
+      if (next === null) return;
+      e.preventDefault();
+      setValue(next);
+      starRefs.current[next - 1]?.focus();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(ratingVariants({ size }), className),
+        role: "radiogroup",
+        "aria-label": "Rating",
+        "aria-readonly": readOnly || void 0,
+        ...props,
+        children: Array.from({ length: max }, (_, i) => {
+          const starValue = i + 1;
+          const filled = starValue <= displayValue;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: (el) => {
+                starRefs.current[i] = el;
+              },
+              type: "button",
+              role: "radio",
+              tabIndex: starValue === tabStop ? 0 : -1,
+              "aria-checked": starValue === (value ?? 0),
+              "aria-label": `${starValue} star${starValue !== 1 ? "s" : ""}`,
+              disabled: readOnly,
+              onClick: () => !readOnly && setValue(starValue),
+              onKeyDown: (e) => !readOnly && handleKeyDown(e, starValue),
+              onMouseEnter: () => !readOnly && setHovered(starValue),
+              onMouseLeave: () => !readOnly && setHovered(null),
+              className: cn(
+                "bg-transparent border-0 p-0 m-0 inline-flex items-center justify-center transition-transform",
+                !readOnly && "cursor-pointer hover:scale-110",
+                readOnly && "cursor-default",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-1 rounded-sm",
+                "disabled:pointer-events-none"
+              ),
+              children: /* @__PURE__ */ jsx(
+                StarIcon,
+                {
+                  filled,
+                  "aria-hidden": "true"
+                }
+              )
+            },
+            starValue
+          );
+        })
+      }
+    );
+  }
+);
+Rating.displayName = "Rating";
+function StarIcon({ filled, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      fill: filled ? "var(--color-founderub-500, #f59e0b)" : "none",
+      stroke: filled ? "var(--color-founderub-500, #f59e0b)" : "var(--color-border-default)",
+      strokeWidth: "1.5",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinejoin: "round",
+          d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+        }
+      )
+    }
+  );
+}
+
+export {
+  useControllableState,
+  ratingVariants,
+  Rating
+};

package/dist/chunk-UWWL5FPC.js

@@ -0,0 +1,80 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Text/Text.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var textVariants = cva("", {
+  variants: {
+    size: {
+      "body-lg": "text-lg leading-relaxed",
+      body: "text-base leading-relaxed",
+      "body-sm": "text-sm leading-relaxed",
+      caption: "text-xs leading-normal",
+      label: "text-sm leading-none font-medium"
+    },
+    tone: {
+      default: "text-[var(--color-text-primary)]",
+      secondary: "text-[var(--color-text-secondary)]",
+      muted: "text-[var(--color-text-muted)]",
+      subtle: "text-[var(--color-text-subtle)]",
+      inverse: "text-[var(--color-text-inverse)]"
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    }
+  },
+  defaultVariants: {
+    size: "body",
+    tone: "default"
+  }
+});
+var Text = React.forwardRef(
+  ({
+    size,
+    tone,
+    weight,
+    asChild = false,
+    truncate = false,
+    lineClamp,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const Comp = asChild ? Slot : "p";
+    const clampStyle = lineClamp !== void 0 ? {
+      display: "-webkit-box",
+      WebkitLineClamp: lineClamp,
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden"
+    } : {};
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          textVariants({ size, tone, weight }),
+          truncate && "truncate",
+          className
+        ),
+        style: { ...clampStyle, ...style },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Text.displayName = "Text";
+
+export {
+  textVariants,
+  Text
+};

package/dist/chunk-V3FZHIEB.js

@@ -0,0 +1,52 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Flex/Flex.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var directionClass = {
+  row: "flex-row",
+  column: "flex-col",
+  "row-reverse": "flex-row-reverse",
+  "column-reverse": "flex-col-reverse"
+};
+var Flex = React.forwardRef(
+  ({
+    gap,
+    align,
+    justify,
+    wrap = false,
+    direction = "row",
+    asChild = false,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    const inlineStyle = {
+      ...gap !== void 0 ? { gap: typeof gap === "number" ? `${gap * 0.25}rem` : gap } : {},
+      ...align ? { alignItems: align } : {},
+      ...justify ? { justifyContent: justify } : {},
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn("flex", directionClass[direction], wrap && "flex-wrap", className),
+        style: inlineStyle,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
+
+export {
+  Flex
+};

package/dist/chunk-VPZCQFVY.js

@@ -0,0 +1,33 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Checkbox/Checkbox.tsx
+import * as React from "react";
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+import { Check, Minus } from "@nexub/icons";
+import { jsx } from "react/jsx-runtime";
+var Checkbox = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixCheckbox.Root,
+    {
+      ref,
+      className: cn(
+        "peer h-4 w-4 shrink-0 rounded-sm border border-[var(--color-border-input)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-[var(--color-fill-primary)] data-[state=checked]:border-[var(--color-fill-primary)] data-[state=checked]:text-white",
+        "data-[state=indeterminate]:bg-[var(--color-fill-primary)] data-[state=indeterminate]:border-[var(--color-fill-primary)] data-[state=indeterminate]:text-white",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "flex items-center justify-center", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { size: "xs" }) : /* @__PURE__ */ jsx(Check, { size: "xs" }) })
+    }
+  )
+);
+Checkbox.displayName = "Checkbox";
+
+export {
+  Checkbox
+};

package/dist/chunk-VT7RKY46.js

@@ -0,0 +1,49 @@
+'use client';
+import {
+  Combobox
+} from "./chunk-2VDP2ML4.js";
+
+// src/components/Autocomplete/Autocomplete.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Autocomplete({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Search\u2026",
+  emptyText = "No results found.",
+  loading = false,
+  className
+}) {
+  const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
+  const [search, setSearch] = React.useState(selectedLabel);
+  const [prevValue, setPrevValue] = React.useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setSearch(selectedLabel);
+  }
+  return /* @__PURE__ */ jsxs(Combobox.Root, { className, children: [
+    /* @__PURE__ */ jsx(Combobox.Input, { placeholder, value: search, onValueChange: setSearch }),
+    /* @__PURE__ */ jsx(Combobox.List, { children: loading ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-[var(--color-text-muted)]", children: "Loading\u2026" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText }),
+      options.map((opt) => /* @__PURE__ */ jsx(
+        Combobox.Item,
+        {
+          value: opt.label,
+          keywords: [opt.value],
+          onSelect: () => {
+            onValueChange?.(opt.value);
+            setSearch(opt.label);
+          },
+          children: opt.label
+        },
+        opt.value
+      ))
+    ] }) })
+  ] });
+}
+Autocomplete.displayName = "Autocomplete";
+
+export {
+  Autocomplete
+};