@socprime/react-ui 0.0.5

package/ui/MultiSelect/MultiSelect.js

@@ -0,0 +1,163 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, Loader2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Badge } from "../Badge/Badge.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { SearchInput } from "../SearchInput/SearchInput.js";
+import { ScrollArea } from "../ScrollArea/ScrollArea.js";
+import { cn } from "../../lib/cn.js";
+function MultiSelect({
+  loading = false,
+  options,
+  value = [],
+  placeholder = "Select elements...",
+  className,
+  disabled = false,
+  maxDisplay = 3,
+  maxSelection,
+  searchable = true,
+  size = "default",
+  dropdownClassName,
+  align = "start",
+  variant,
+  badgeClassNames,
+  id,
+  name,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const filteredOptions = useMemo(() => {
+    if (!searchQuery) return options;
+    const query = searchQuery.toLowerCase();
+    return options.filter((option) => option.label.toLowerCase().includes(query));
+  }, [options, searchQuery]);
+  const selectedOptions = useMemo(
+    () => options.filter((option) => value.includes(option.value)),
+    [options, value]
+  );
+  const displayedBadges = selectedOptions.slice(0, maxDisplay);
+  const remainingCount = selectedOptions.length - maxDisplay;
+  const isMaxReached = maxSelection !== void 0 && value.length >= maxSelection;
+  const handleToggle = (optionValue) => {
+    const isSelected = value.includes(optionValue);
+    if (isSelected) {
+      onChange(value.filter((v) => v !== optionValue));
+      return;
+    }
+    if (isMaxReached) return;
+    onChange([...value, optionValue]);
+  };
+  const handleRemove = (optionValue) => {
+    onChange(value.filter((v) => v !== optionValue));
+  };
+  const renderSelectedBadges = () => {
+    if (selectedOptions.length === 0) {
+      return /* @__PURE__ */ jsx("span", { className: "text-gray-chateau", children: placeholder });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      displayedBadges.map((option) => /* @__PURE__ */ jsx(
+        Badge,
+        {
+          className: badgeClassNames,
+          variant: variant || option.badgeVariant,
+          onRemove: () => handleRemove(option.value),
+          children: option.label
+        },
+        option.value
+      )),
+      remainingCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+        "+",
+        remainingCount
+      ] })
+    ] });
+  };
+  const renderOptionItem = (option) => {
+    const isSelected = value.includes(option.value);
+    const isDisabled = option.disabled || !isSelected && isMaxReached;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs transition-colors",
+          "hover:bg-hover focus:bg-hover focus:text-default",
+          isSelected && "bg-hover",
+          isDisabled && "cursor-not-allowed opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isSelected,
+              onCheckedChange: () => handleToggle(option.value),
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "flex flex-1 items-center gap-2", children: [
+            option.label,
+            option.typeLabel && /* @__PURE__ */ jsx(Badge, { variant: option.badgeVariant, className: "text-2xs", children: option.typeLabel })
+          ] })
+        ]
+      },
+      option.value
+    );
+  };
+  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id,
+        name,
+        disabled,
+        "data-size": size,
+        "data-state": open ? "open" : "closed",
+        className: cn(
+          'border-border bg-secondary data-[placeholder]:text-gray-chateau [&_svg:not([class*="text-"])]:text-gray-chateau flex min-h-9 w-full items-center justify-between gap-2 rounded-md border px-3 py-1 text-xs font-normal transition-[color,box-shadow] outline-none',
+          "focus-visible:border-success focus-visible:ring-success/40 focus-visible:ring-[2px]",
+          "data-[state=open]:border-success data-[state=open]:ring-success/40 data-[state=open]:ring-[2px]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: renderSelectedBadges() }),
+          loading ? /* @__PURE__ */ jsx(Loader2, { className: "text-gray-chateau size-4 animate-spin" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ml-2 size-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        align,
+        sideOffset: 4,
+        className: cn(
+          "bg-secondary border-border text-foreground z-50 rounded-md border shadow-md outline-none",
+          "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",
+          "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",
+          dropdownClassName
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-3", children: [
+          searchable && /* @__PURE__ */ jsx(
+            SearchInput,
+            {
+              className: "w-full text-xs",
+              classNamesInput: "h-10",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              placeholder: "Search..."
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx("div", { className: "flex max-h-64 flex-col gap-2", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-gray-chateau py-6 text-center text-xs", children: "Nothing found" }) : filteredOptions.map(renderOptionItem) }) })
+        ] })
+      }
+    ) })
+  ] });
+}
+export {
+  MultiSelect
+};

package/ui/MultiSelect/index.js

@@ -0,0 +1,4 @@
+import { MultiSelect } from "./MultiSelect.js";
+export {
+  MultiSelect
+};

package/ui/PageHeader/PageHeader.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from "lucide-react";
+import { Link } from "react-router-dom";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../Button/Button.js";
+import { ConditionalContent } from "../ConditionalContent/ConditionalContent.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+const PageHeader = ({
+  loading,
+  title,
+  titleIcon,
+  backLink,
+  description,
+  descriptionSize = "md",
+  className,
+  titleClassName,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-6 max-lg:flex-wrap", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      backLink && /* @__PURE__ */ jsx(Link, { to: backLink, children: /* @__PURE__ */ jsx(Button, { variant: "icon", size: "xs", children: /* @__PURE__ */ jsx(ArrowLeft, { size: 20 }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(
+          ConditionalContent,
+          {
+            loading: !!loading,
+            loadingContent: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-64" }),
+            loadedContent: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              titleIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: titleIcon }),
+              /* @__PURE__ */ jsx("h2", { className: cn("text-default text-xl font-medium break-all", titleClassName), children: title })
+            ] })
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "text-gray-chateau break-all",
+              descriptionSize === "sm" ? "text-2xs" : "text-sm"
+            ),
+            children: description
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children })
+  ] });
+};
+export {
+  PageHeader
+};

package/ui/PageHeader/index.js

@@ -0,0 +1,4 @@
+import { PageHeader } from "./PageHeader.js";
+export {
+  PageHeader
+};

package/ui/Pagination/Pagination.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+function Pagination({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      className: cn("mx-auto flex w-full justify-center", className),
+      ...props
+    }
+  );
+}
+function PaginationContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "pagination-content",
+      className: cn("flex flex-row items-center gap-1", className),
+      ...props
+    }
+  );
+}
+function PaginationItem({ ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({ className, isActive, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": isActive,
+      className: cn(
+        "hover:bg-hover flex items-center justify-center rounded-sm border border-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PaginationPrevious({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "Go to previous page",
+      size: "s",
+      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "hidden md:block", children: "Previous" })
+      ]
+    }
+  );
+}
+function PaginationNext({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "Go to next page",
+      size: "s",
+      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "hidden md:block", children: "Next" }),
+        /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      ]
+    }
+  );
+}
+function PaginationEllipsis({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "pagination-ellipsis",
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+}
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+};

package/ui/Pagination/PaginationWrap.js

@@ -0,0 +1,149 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button } from "../Button/Button.js";
+import { Input } from "../Input/Input.js";
+import { SelectDefault } from "../Select/SelectDefault.js";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+} from "./Pagination.js";
+const perPageOptions = [
+  { label: "10", value: "10" },
+  { label: "25", value: "25" },
+  { label: "50", value: "50" },
+  { label: "100", value: "100" }
+];
+const PaginationWrap = ({
+  page,
+  totalPages,
+  limit = 25,
+  maxVisible = 5,
+  optionsPerPage,
+  onPageChange,
+  setLimit = () => {
+  }
+}) => {
+  const [pageGo, setPageGo] = useState(null);
+  const pageNumbers = useMemo(() => {
+    const pages = [];
+    if (totalPages <= maxVisible) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else if (page <= 3) {
+      for (let i = 1; i <= 4; i++) {
+        pages.push(i);
+      }
+      pages.push(-1);
+      pages.push(totalPages);
+    } else if (page >= totalPages - 2) {
+      pages.push(1);
+      pages.push(-1);
+      for (let i = totalPages - 3; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+      pages.push(-1);
+      for (let i = page - 1; i <= page + 1; i++) {
+        pages.push(i);
+      }
+      pages.push(-1);
+      pages.push(totalPages);
+    }
+    return pages;
+  }, [page, totalPages, maxVisible]);
+  const onPageGoClick = () => {
+    onPageChange(Number(pageGo));
+    setPageGo(null);
+  };
+  const limitItemChange = (value) => {
+    setLimit(Number(value));
+    setPageGo(null);
+  };
+  const previousPageClick = () => {
+    onPageChange(Math.max(1, page - 1));
+    setPageGo(null);
+  };
+  const nextPageClick = () => {
+    onPageChange(Math.min(totalPages, page + 1));
+    setPageGo(null);
+  };
+  const pageClick = (page2) => {
+    onPageChange(page2);
+    setPageGo(null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 xl:flex-nowrap", children: [
+    /* @__PURE__ */ jsxs("div", { className: "order-2 flex items-center gap-2 xl:order-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-gray-chateau hidden text-xs whitespace-nowrap lg:flex", children: "Items per page:" }),
+      /* @__PURE__ */ jsx(
+        SelectDefault,
+        {
+          className: "h-8 text-xs",
+          options: optionsPerPage || perPageOptions,
+          value: limit.toString(),
+          placeholder: "Select items per page",
+          onChange: limitItemChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Pagination, { className: "order-1 xl:order-2", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationPrevious,
+        {
+          onClick: previousPageClick,
+          className: `h-8 text-xs ${page === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}`
+        }
+      ) }),
+      pageNumbers.map((pageNum, idx) => /* @__PURE__ */ jsx(PaginationItem, { children: pageNum === -1 ? /* @__PURE__ */ jsx(PaginationEllipsis, {}) : /* @__PURE__ */ jsx(
+        PaginationLink,
+        {
+          className: `h-8 w-8 cursor-pointer text-xs ${page === pageNum ? "border-border" : ""}`,
+          onClick: () => pageClick(pageNum),
+          isActive: page === pageNum,
+          children: pageNum
+        }
+      ) }, idx)),
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationNext,
+        {
+          onClick: nextPageClick,
+          className: `h-8 text-xs ${page === totalPages || totalPages === 0 ? "pointer-events-none opacity-50" : "cursor-pointer"}`
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "order-3 flex items-center gap-3 xl:order-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-gray-chateau hidden text-xs whitespace-nowrap lg:flex", children: "Go to:" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: "h-8 w-13 px-2 text-xs",
+          type: "text",
+          value: pageGo ?? "",
+          placeholder: "Page",
+          pattern: "^[0-9]*$",
+          onChange: (e) => setPageGo(Number(e.target.value) || null)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "px-2 text-xs",
+          size: "s",
+          variant: "secondary",
+          disabled: pageGo !== null ? !(pageGo > 0 && pageGo <= totalPages) : true,
+          onClick: onPageGoClick,
+          children: "Go"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  PaginationWrap
+};

package/ui/Pagination/index.js

@@ -0,0 +1,20 @@
+import {
+  Pagination as Pagination2,
+  PaginationContent as PaginationContent2,
+  PaginationEllipsis as PaginationEllipsis2,
+  PaginationItem as PaginationItem2,
+  PaginationLink,
+  PaginationNext as PaginationNext2,
+  PaginationPrevious as PaginationPrevious2
+} from "./Pagination.js";
+import { PaginationWrap } from "./PaginationWrap.js";
+export {
+  Pagination2 as Pagination,
+  PaginationContent2 as PaginationContent,
+  PaginationEllipsis2 as PaginationEllipsis,
+  PaginationItem2 as PaginationItem,
+  PaginationLink,
+  PaginationNext2 as PaginationNext,
+  PaginationPrevious2 as PaginationPrevious,
+  PaginationWrap
+};

package/ui/RadioGroup/RadioGroup.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  Indicator as RadioGroupIndicatorPrimitive,
+  Item as RadioGroupItemPrimitive,
+  Root as RadioGroupPrimitive
+} from "@radix-ui/react-radio-group";
+import { cn } from "../../lib/cn.js";
+function RadioGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid w-full gap-2", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupItemPrimitive,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        "group/radio-group-item peer border-border bg-secondary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-critical aria-invalid:ring-critical/20 aria-invalid:data-[state=checked]:border-success dark:bg-secondary/30 dark:aria-invalid:border-critical/50 dark:aria-invalid:ring-critical/40 data-[state=checked]:border-success data-[state=checked]:bg-success data-[state=checked]:text-foreground dark:data-[state=checked]:bg-secondary relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        RadioGroupIndicatorPrimitive,
+        {
+          "data-slot": "radio-group-indicator",
+          className: "flex size-4 items-center justify-center",
+          children: /* @__PURE__ */ jsx("span", { className: "bg-success absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" })
+        }
+      )
+    }
+  );
+}
+export {
+  RadioGroup,
+  RadioGroupItem
+};

package/ui/RadioGroup/index.js

@@ -0,0 +1,5 @@
+import { RadioGroup as RadioGroup2, RadioGroupItem as RadioGroupItem2 } from "./RadioGroup.js";
+export {
+  RadioGroup2 as RadioGroup,
+  RadioGroupItem2 as RadioGroupItem
+};

package/ui/ScrollArea/ScrollArea.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../../lib/cn.js";
+function ScrollArea({ className, children, orientation = "vertical", ...props }) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative flex min-h-0 flex-col overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "focus-visible:ring-ring/50 h-0 min-h-0 w-full flex-1 rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!block",
+            children
+          }
+        ),
+        (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
+        (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-border relative flex-1 rounded-full"
+        }
+      )
+    }
+  );
+}
+export {
+  ScrollArea,
+  ScrollBar
+};

package/ui/ScrollArea/index.js

@@ -0,0 +1,5 @@
+import { ScrollArea, ScrollBar } from "./ScrollArea.js";
+export {
+  ScrollArea,
+  ScrollBar
+};

package/ui/SearchInput/SearchInput.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { SearchIcon, XIcon } from "lucide-react";
+import { Input } from "../Input/Input.js";
+const SearchInput = ({
+  className,
+  classNamesInput,
+  value,
+  placeholder,
+  onChange,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-1/2 left-2 flex size-4 -translate-y-[60%] items-center", children: /* @__PURE__ */ jsx(SearchIcon, { className: "text-subdued h-4 w-4" }) }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "text",
+        className: cn("px-7", classNamesInput),
+        placeholder: placeholder || "Search...",
+        ...props,
+        value,
+        onChange
+      }
+    ),
+    value && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "absolute inset-y-0 right-2 flex cursor-pointer items-center",
+        onClick: () => onChange?.({ target: { value: "" } }),
+        children: /* @__PURE__ */ jsx(XIcon, { className: "text-subdued hover:text-foreground h-4 w-4" })
+      }
+    )
+  ] });
+};
+export {
+  SearchInput
+};

package/ui/SearchInput/index.js

@@ -0,0 +1,4 @@
+import { SearchInput } from "./SearchInput.js";
+export {
+  SearchInput
+};