@contractspec/lib.ui-kit-web 1.56.1 → 1.58.0

package/dist/ui/molecules/Autocomplete/index.js

@@ -1,85 +1,579 @@
-'use client';
+// @bun
+var __require = import.meta.require;
 
-import { Button } from "../../button.js";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../../command.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../../popover.js";
-import { Drawer, DrawerContent, DrawerTrigger } from "../../drawer.js";
-import { useMediaQuery } from "../../use-media-query.js";
-import * as React$1 from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// ui/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 px-4 py-2 has-[>svg]:px-3",
+      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      icon: "size-9"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  if (asChild) {
+    return /* @__PURE__ */ jsxDEV(Slot, {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("button", {
+    ref,
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    ...props
+  }, undefined, false, undefined, this);
+});
+Button.displayName = "Button";
+// ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(DialogPrimitive.Root, {
+    "data-slot": "dialog",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(DialogPrimitive.Trigger, {
+    "data-slot": "dialog-trigger",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(DialogPrimitive.Portal, {
+    "data-slot": "dialog-portal",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(DialogPrimitive.Close, {
+    "data-slot": "dialog-close",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(DialogPrimitive.Overlay, {
+    "data-slot": "dialog-overlay",
+    className: cn2("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(DialogPortal, {
+    "data-slot": "dialog-portal",
+    children: [
+      /* @__PURE__ */ jsxDEV2(DialogOverlay, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2(DialogPrimitive.Content, {
+        "data-slot": "dialog-content",
+        className: cn2("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxDEV2(DialogPrimitive.Close, {
+            "data-slot": "dialog-close",
+            className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2(XIcon, {}, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("span", {
+                className: "sr-only",
+                children: "Close"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2("div", {
+    "data-slot": "dialog-header",
+    className: cn2("flex flex-col gap-2 text-center sm:text-left", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2("div", {
+    "data-slot": "dialog-footer",
+    className: cn2("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(DialogPrimitive.Title, {
+    "data-slot": "dialog-title",
+    className: cn2("text-lg leading-none font-semibold", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(DialogPrimitive.Description, {
+    "data-slot": "dialog-description",
+    className: cn2("text-muted-foreground text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/command.tsx
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(CommandPrimitive, {
+    "data-slot": "command",
+    className: cn3("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(Dialog, {
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV3(DialogHeader, {
+        className: "sr-only",
+        children: [
+          /* @__PURE__ */ jsxDEV3(DialogTitle, {
+            children: title
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(DialogDescription, {
+            children: description
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3(DialogContent, {
+        className: cn3("overflow-hidden p-0", className),
+        showCloseButton,
+        children: /* @__PURE__ */ jsxDEV3(Command, {
+          className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+          children
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    "data-slot": "command-input-wrapper",
+    className: "flex h-9 items-center gap-2 border-b px-3",
+    children: [
+      /* @__PURE__ */ jsxDEV3(SearchIcon, {
+        className: "size-4 shrink-0 opacity-50"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3(CommandPrimitive.Input, {
+        "data-slot": "command-input",
+        className: cn3("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+        ...props
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(CommandPrimitive.List, {
+    "data-slot": "command-list",
+    className: cn3("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(CommandPrimitive.Empty, {
+    "data-slot": "command-empty",
+    className: "py-6 text-center text-sm",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(CommandPrimitive.Group, {
+    "data-slot": "command-group",
+    className: cn3("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(CommandPrimitive.Separator, {
+    "data-slot": "command-separator",
+    className: cn3("bg-border -mx-1 h-px", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(CommandPrimitive.Item, {
+    "data-slot": "command-item",
+    className: cn3("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3("span", {
+    "data-slot": "command-shortcut",
+    className: cn3("text-muted-foreground ml-auto text-xs tracking-widest", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/popover.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn as cn4 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(PopoverPrimitive.Root, {
+    "data-slot": "popover",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(PopoverPrimitive.Trigger, {
+    "data-slot": "popover-trigger",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(PopoverPrimitive.Portal, {
+    children: /* @__PURE__ */ jsxDEV4(PopoverPrimitive.Content, {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn4("bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function PopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(PopoverPrimitive.Anchor, {
+    "data-slot": "popover-anchor",
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/drawer.tsx
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn as cn5 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(DrawerPrimitive.Root, {
+    "data-slot": "drawer",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DrawerTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(DrawerPrimitive.Trigger, {
+    "data-slot": "drawer-trigger",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(DrawerPrimitive.Portal, {
+    "data-slot": "drawer-portal",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(DrawerPrimitive.Close, {
+    "data-slot": "drawer-close",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(DrawerPrimitive.Overlay, {
+    "data-slot": "drawer-overlay",
+    className: cn5("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(DrawerPortal, {
+    "data-slot": "drawer-portal",
+    children: [
+      /* @__PURE__ */ jsxDEV5(DrawerOverlay, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5(DrawerPrimitive.Content, {
+        "data-slot": "drawer-content",
+        className: cn5("group/drawer-content bg-background fixed z-50 flex h-auto flex-col", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l sm:data-[vaul-drawer-direction=right]:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r sm:data-[vaul-drawer-direction=left]:max-w-sm", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+          }, undefined, false, undefined, this),
+          children
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DrawerHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5("div", {
+    "data-slot": "drawer-header",
+    className: cn5("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DrawerFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5("div", {
+    "data-slot": "drawer-footer",
+    className: cn5("mt-auto flex flex-col gap-2 p-4", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(DrawerPrimitive.Title, {
+    "data-slot": "drawer-title",
+    className: cn5("text-foreground font-semibold", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(DrawerPrimitive.Description, {
+    "data-slot": "drawer-description",
+    className: cn5("text-muted-foreground text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/use-media-query.ts
+import * as React2 from "react";
+function useMediaQuery(query) {
+  const [value, setValue] = React2.useState(false);
+  React2.useEffect(() => {
+    function onChange(event) {
+      setValue(event.matches);
+    }
+    const result = matchMedia(query);
+    result.addEventListener("change", onChange);
+    setValue(result.matches);
+    return () => result.removeEventListener("change", onChange);
+  }, [query]);
+  return value;
+}
 
-//#region ui/molecules/Autocomplete/index.tsx
-const statuses = [
-	{
-		value: "backlog",
-		label: "Backlog"
-	},
-	{
-		value: "in progress",
-		label: "In Progress"
-	},
-	{
-		value: "done",
-		label: "Done"
-	},
-	{
-		value: "canceled",
-		label: "Canceled"
-	}
+// ui/molecules/Autocomplete/index.tsx
+import * as React3 from "react";
+import { jsxDEV as jsxDEV6, Fragment } from "react/jsx-dev-runtime";
+"use client";
+var statuses = [
+  {
+    value: "backlog",
+    label: "Backlog"
+  },
+  {
+    value: "in progress",
+    label: "In Progress"
+  },
+  {
+    value: "done",
+    label: "Done"
+  },
+  {
+    value: "canceled",
+    label: "Canceled"
+  }
 ];
 function ComboBoxResponsive() {
-	const [open, setOpen] = React$1.useState(false);
-	const isDesktop = useMediaQuery("(min-width: 768px)");
-	const [selectedStatus, setSelectedStatus] = React$1.useState(null);
-	if (isDesktop) return /* @__PURE__ */ jsxs(Popover, {
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
-				className: "w-[150px] justify-start",
-				children: selectedStatus ? /* @__PURE__ */ jsx(Fragment, { children: selectedStatus.label }) : /* @__PURE__ */ jsx(Fragment, { children: "+ Set status" })
-			})
-		}), /* @__PURE__ */ jsx(PopoverContent, {
-			className: "w-[200px] p-0",
-			align: "start",
-			children: /* @__PURE__ */ jsx(StatusList, {
-				setOpen,
-				setSelectedStatus
-			})
-		})]
-	});
-	return /* @__PURE__ */ jsxs(Drawer, {
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsx(DrawerTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
-				className: "w-[150px] justify-start",
-				children: selectedStatus ? /* @__PURE__ */ jsx(Fragment, { children: selectedStatus.label }) : /* @__PURE__ */ jsx(Fragment, { children: "+ Set status" })
-			})
-		}), /* @__PURE__ */ jsx(DrawerContent, { children: /* @__PURE__ */ jsx("div", {
-			className: "mt-4 border-t",
-			children: /* @__PURE__ */ jsx(StatusList, {
-				setOpen,
-				setSelectedStatus
-			})
-		}) })]
-	});
-}
-function StatusList({ setOpen, setSelectedStatus }) {
-	return /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: "Filter status..." }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }), /* @__PURE__ */ jsx(CommandGroup, { children: statuses.map((status) => /* @__PURE__ */ jsx(CommandItem, {
-		value: status.value,
-		onSelect: (value) => {
-			setSelectedStatus(statuses.find((priority) => priority.value === value) || null);
-			setOpen(false);
-		},
-		children: status.label
-	}, status.value)) })] })] });
+  const [open, setOpen] = React3.useState(false);
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const [selectedStatus, setSelectedStatus] = React3.useState(null);
+  if (isDesktop) {
+    return /* @__PURE__ */ jsxDEV6(Popover, {
+      open,
+      onOpenChange: setOpen,
+      children: [
+        /* @__PURE__ */ jsxDEV6(PopoverTrigger, {
+          asChild: true,
+          children: /* @__PURE__ */ jsxDEV6(Button, {
+            variant: "outline",
+            className: "w-[150px] justify-start",
+            children: selectedStatus ? /* @__PURE__ */ jsxDEV6(Fragment, {
+              children: selectedStatus.label
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV6(Fragment, {
+              children: "+ Set status"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV6(PopoverContent, {
+          className: "w-[200px] p-0",
+          align: "start",
+          children: /* @__PURE__ */ jsxDEV6(StatusList, {
+            setOpen,
+            setSelectedStatus
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV6(Drawer, {
+    open,
+    onOpenChange: setOpen,
+    children: [
+      /* @__PURE__ */ jsxDEV6(DrawerTrigger, {
+        asChild: true,
+        children: /* @__PURE__ */ jsxDEV6(Button, {
+          variant: "outline",
+          className: "w-[150px] justify-start",
+          children: selectedStatus ? /* @__PURE__ */ jsxDEV6(Fragment, {
+            children: selectedStatus.label
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV6(Fragment, {
+            children: "+ Set status"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6(DrawerContent, {
+        children: /* @__PURE__ */ jsxDEV6("div", {
+          className: "mt-4 border-t",
+          children: /* @__PURE__ */ jsxDEV6(StatusList, {
+            setOpen,
+            setSelectedStatus
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
-
-//#endregion
-export { ComboBoxResponsive };
-//# sourceMappingURL=index.js.map
+function StatusList({
+  setOpen,
+  setSelectedStatus
+}) {
+  return /* @__PURE__ */ jsxDEV6(Command, {
+    children: [
+      /* @__PURE__ */ jsxDEV6(CommandInput, {
+        placeholder: "Filter status..."
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6(CommandList, {
+        children: [
+          /* @__PURE__ */ jsxDEV6(CommandEmpty, {
+            children: "No results found."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6(CommandGroup, {
+            children: statuses.map((status) => /* @__PURE__ */ jsxDEV6(CommandItem, {
+              value: status.value,
+              onSelect: (value) => {
+                setSelectedStatus(statuses.find((priority) => priority.value === value) || null);
+                setOpen(false);
+              },
+              children: status.label
+            }, status.value, false, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  ComboBoxResponsive
+};

package/dist/ui/molecules/SearchAndFilter/SearchAndFilter.d.ts

@@ -1,8 +1,4 @@
-import { SearchAndFilterProps } from "./types.js";
-import React from "react";
-
-//#region ui/molecules/SearchAndFilter/SearchAndFilter.d.ts
-declare const SearchAndFilter: React.FC<SearchAndFilterProps>;
-//#endregion
-export { SearchAndFilter };
+import React from 'react';
+import type { SearchAndFilterProps } from './types';
+export declare const SearchAndFilter: React.FC<SearchAndFilterProps>;
 //# sourceMappingURL=SearchAndFilter.d.ts.map

package/dist/ui/molecules/SearchAndFilter/SearchAndFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchAndFilter.d.ts","names":[],"sources":["../../../../ui/molecules/SearchAndFilter/SearchAndFilter.tsx"],"sourcesContent":[],"mappings":";;;;cAYa,iBAAiB,KAAA,CAAM,GAAG"}
+{"version":3,"file":"SearchAndFilter.d.ts","sourceRoot":"","sources":["../../../../ui/molecules/SearchAndFilter/SearchAndFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2H1D,CAAC"}