@siyahi/ui 0.0.0-stage → 0.1.0-next.4

package/dist/components/ui/command.js

@@ -0,0 +1,88 @@
+"use client";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
+import { InputGroup, InputGroupAddon } from "./input-group.js";
+import "react";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, SearchIcon } from "lucide-react";
+import { Command as Command$1 } from "cmdk";
+//#region src/components/ui/command.tsx
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1, {
+		"data-slot": "command",
+		className: cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", className),
+		...props
+	});
+}
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...props,
+		children: [/* @__PURE__ */ jsxs(DialogHeader, {
+			className: "sr-only",
+			children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+		}), /* @__PURE__ */ jsx(DialogContent, {
+			className: cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className),
+			showCloseButton,
+			children
+		})]
+	});
+}
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-input-wrapper",
+		className: "p-1 pb-0",
+		children: /* @__PURE__ */ jsxs(InputGroup, {
+			className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!",
+			children: [/* @__PURE__ */ jsx(Command$1.Input, {
+				"data-slot": "command-input",
+				className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+				...props
+			}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })]
+		})
+	});
+}
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.List, {
+		"data-slot": "command-list",
+		className: cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className),
+		...props
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		"data-slot": "command-empty",
+		className: cn("py-6 text-center text-sm", className),
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Group, {
+		"data-slot": "command-group",
+		className: cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className),
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Separator, {
+		"data-slot": "command-separator",
+		className: cn("-mx-1 h-px w-auto bg-border", className),
+		...props
+	});
+}
+function CommandItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Command$1.Item, {
+		"data-slot": "command-item",
+		className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:**:[svg]:text-foreground", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })]
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/components/ui/context-menu.d.ts

@@ -0,0 +1,31 @@
+import * as React$1 from "react";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+//#region src/components/ui/context-menu.d.ts
+declare function ContextMenu({ ...props }: ContextMenu$1.Root.Props): React$1.JSX.Element;
+declare function ContextMenuPortal({ ...props }: ContextMenu$1.Portal.Props): React$1.JSX.Element;
+declare function ContextMenuTrigger({ className, ...props }: ContextMenu$1.Trigger.Props): React$1.JSX.Element;
+declare function ContextMenuContent({ className, align, alignOffset, side, sideOffset, ...props }: ContextMenu$1.Popup.Props & Pick<ContextMenu$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React$1.JSX.Element;
+declare function ContextMenuGroup({ ...props }: ContextMenu$1.Group.Props): React$1.JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: ContextMenu$1.GroupLabel.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenu$1.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function ContextMenuSub({ ...props }: ContextMenu$1.SubmenuRoot.Props): React$1.JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenu$1.SubmenuTrigger.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function ContextMenuSubContent({ ...props }: React$1.ComponentProps<typeof ContextMenuContent>): React$1.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }: ContextMenu$1.CheckboxItem.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function ContextMenuRadioGroup({ ...props }: ContextMenu$1.RadioGroup.Props): React$1.JSX.Element;
+declare function ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenu$1.RadioItem.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: ContextMenu$1.Separator.Props): React$1.JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/components/ui/context-menu.js

@@ -0,0 +1,132 @@
+import "react";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+//#region src/components/ui/context-menu.tsx
+function ContextMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+}
+function ContextMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, {
+		"data-slot": "context-menu-portal",
+		...props
+	});
+}
+function ContextMenuTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
+		"data-slot": "context-menu-trigger",
+		className: cn("select-none", className),
+		...props
+	});
+}
+function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
+			"data-slot": "context-menu-content",
+			className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+}
+function ContextMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Group, {
+		"data-slot": "context-menu-group",
+		...props
+	});
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
+		"data-slot": "context-menu-label",
+		"data-inset": inset,
+		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className),
+		...props
+	});
+}
+function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
+		"data-slot": "context-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
+		...props
+	});
+}
+function ContextMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuRoot, {
+		"data-slot": "context-menu-sub",
+		...props
+	});
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
+		"data-slot": "context-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+	});
+}
+function ContextMenuSubContent({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenuContent, {
+		"data-slot": "context-menu-sub-content",
+		className: "shadow-lg",
+		side: "right",
+		...props
+	});
+}
+function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2",
+			children: /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function ContextMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+}
+function ContextMenuRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2",
+			children: /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
+		"data-slot": "context-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function ContextMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/components/ui/dialog.d.ts

@@ -0,0 +1,19 @@
+import * as React$1 from "react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/components/ui/dialog.d.ts
+declare function Dialog({ ...props }: Dialog$1.Root.Props): React$1.JSX.Element;
+declare function DialogTrigger({ ...props }: Dialog$1.Trigger.Props): React$1.JSX.Element;
+declare function DialogPortal({ ...props }: Dialog$1.Portal.Props): React$1.JSX.Element;
+declare function DialogClose({ ...props }: Dialog$1.Close.Props): React$1.JSX.Element;
+declare function DialogOverlay({ className, ...props }: Dialog$1.Backdrop.Props): React$1.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: Dialog$1.Popup.Props & {
+  showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React$1.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function DialogTitle({ className, ...props }: Dialog$1.Title.Props): React$1.JSX.Element;
+declare function DialogDescription({ className, ...props }: Dialog$1.Description.Props): React$1.JSX.Element;
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/components/ui/dialog.js

@@ -0,0 +1,91 @@
+import { Button } from "./button.js";
+import "react";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/components/ui/dialog.tsx
+function Dialog({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+function DialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
+		...props
+	});
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+		"data-slot": "dialog-content",
+		className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
+			"data-slot": "dialog-close",
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				className: "absolute top-4 right-4",
+				size: "icon-sm"
+			}),
+			children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-2", className),
+		...props
+	});
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-footer",
+		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
+			render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+			children: "Close"
+		})]
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		"data-slot": "dialog-title",
+		className: cn("leading-none font-medium", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,31 @@
+import * as React$1 from "react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/ui/dropdown-menu.d.ts
+declare function DropdownMenu({ ...props }: Menu.Root.Props): React$1.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: Menu.Portal.Props): React$1.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: Menu.Trigger.Props): React$1.JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: Menu.Popup.Props & Pick<Menu.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React$1.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: Menu.Group.Props): React$1.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: Menu.GroupLabel.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: Menu.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function DropdownMenuSub({ ...props }: Menu.SubmenuRoot.Props): React$1.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: Menu.SubmenuTrigger.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React$1.ComponentProps<typeof DropdownMenuContent>): React$1.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: Menu.CheckboxItem.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: Menu.RadioGroup.Props): React$1.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: Menu.RadioItem.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: Menu.Separator.Props): React$1.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,136 @@
+import "react";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/ui/dropdown-menu.tsx
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-slot": "dropdown-menu-content",
+			className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+}
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className),
+		...props
+	});
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+	});
+}
+function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: cn("w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-checkbox-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/ui/input-group.d.ts

@@ -0,0 +1,20 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/ui/input-group.d.ts
+declare function InputGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+  align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React$1.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+  size?: "icon-sm" | "icon-xs" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
+  type?: "button" | "submit" | "reset";
+}): React$1.JSX.Element;
+declare function InputGroupText({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): React$1.JSX.Element;
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/ui/input-group.js

@@ -0,0 +1,79 @@
+"use client";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import "react";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/input-group.tsx
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		...props
+	});
+}
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+}
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+}
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/ui/input.d.ts

@@ -0,0 +1,5 @@
+import * as React$1 from "react";
+//#region src/components/ui/input.d.ts
+declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
+//#endregion
+export { Input };