@pixpilot/shadcn 0.4.0 → 0.6.0

package/dist/components/ui/index.cjs

@@ -6,24 +6,26 @@ const require_button = require('./button.cjs');
 const require_calendar = require('./calendar.cjs');
 const require_card = require('./card.cjs');
 const require_checkbox = require('./checkbox.cjs');
+const require_input = require('./input.cjs');
+const require_popover = require('./popover.cjs');
+const require_select = require('./select.cjs');
+const require_color_picker = require('./color-picker.cjs');
 const require_dialog = require('./dialog.cjs');
 const require_command = require('./command.cjs');
 const require_dropdown_menu = require('./dropdown-menu.cjs');
 const require_file_upload = require('./file-upload.cjs');
 const require_label = require('./label.cjs');
 const require_form = require('./form.cjs');
-const require_input = require('./input.cjs');
+const require_textarea = require('./textarea.cjs');
+const require_input_group = require('./input-group.cjs');
 const require_separator = require('./separator.cjs');
 const require_OrContinueWithSeparator = require('./OrContinueWithSeparator.cjs');
 const require_pagination = require('./pagination.cjs');
-const require_popover = require('./popover.cjs');
 const require_radio_group = require('./radio-group.cjs');
-const require_select = require('./select.cjs');
 const require_index = require('./shadcn-io/tags/index.cjs');
 const require_index$1 = require('./shadcn-io/tags-input-inline/index.cjs');
 const require_sheet = require('./sheet.cjs');
 const require_slider = require('./slider.cjs');
 const require_switch = require('./switch.cjs');
 const require_tabs = require('./tabs.cjs');
-const require_textarea = require('./textarea.cjs');
 const require_tooltip = require('./tooltip.cjs');

package/dist/components/ui/index.d.cts

@@ -6,18 +6,20 @@ import { Button, buttonVariants } from "./button.cjs";
 import { Calendar, CalendarDayButton } from "./calendar.cjs";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.cjs";
 import { Checkbox } from "./checkbox.cjs";
+import { Input } from "./input.cjs";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.cjs";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./select.cjs";
+import { ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerHueSlider, ColorPickerInput, ColorPickerProps, ColorPickerSwatch, ColorPickerTrigger, colorUtils, useStore } from "./color-picker.cjs";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./dialog.cjs";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./command.cjs";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.cjs";
-import { FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, FileUploadRoot, FileUploadRootProps, FileUploadTrigger, useStore } from "./file-upload.cjs";
+import { FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, FileUploadRoot, FileUploadRootProps, FileUploadTrigger, useStore as useStore$1 } from "./file-upload.cjs";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./form.cjs";
-import { Input } from "./input.cjs";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.cjs";
 import { Label } from "./label.cjs";
 import { OrContinueWithSeparator } from "./OrContinueWithSeparator.cjs";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination.cjs";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.cjs";
 import { RadioGroup, RadioGroupItem } from "./radio-group.cjs";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./select.cjs";
 import { Separator } from "./separator.cjs";
 import { Tags, TagsContent, TagsContentProps, TagsEmpty, TagsEmptyProps, TagsGroup, TagsGroupProps, TagsInput, TagsInputProps, TagsItem, TagsItemProps, TagsList, TagsListProps, TagsProps, TagsTrigger, TagsTriggerProps, TagsValue, TagsValueProps } from "./shadcn-io/tags/index.cjs";
 import { TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot } from "./shadcn-io/tags-input-inline/index.cjs";

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

@@ -6,18 +6,20 @@ import { Button, buttonVariants } from "./button.js";
 import { Calendar, CalendarDayButton } from "./calendar.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
 import { Checkbox } from "./checkbox.js";
+import { Input } from "./input.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./select.js";
+import { ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerHueSlider, ColorPickerInput, ColorPickerProps, ColorPickerSwatch, ColorPickerTrigger, colorUtils, useStore } from "./color-picker.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./dialog.js";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./command.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
-import { FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, FileUploadRoot, FileUploadRootProps, FileUploadTrigger, useStore } from "./file-upload.js";
+import { FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, FileUploadRoot, FileUploadRootProps, FileUploadTrigger, useStore as useStore$1 } from "./file-upload.js";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./form.js";
-import { Input } from "./input.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.js";
 import { Label } from "./label.js";
 import { OrContinueWithSeparator } from "./OrContinueWithSeparator.js";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination.js";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
 import { RadioGroup, RadioGroupItem } from "./radio-group.js";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./select.js";
 import { Separator } from "./separator.js";
 import { Tags, TagsContent, TagsContentProps, TagsEmpty, TagsEmptyProps, TagsGroup, TagsGroupProps, TagsInput, TagsInputProps, TagsItem, TagsItemProps, TagsList, TagsListProps, TagsProps, TagsTrigger, TagsTriggerProps, TagsValue, TagsValueProps } from "./shadcn-io/tags/index.js";
 import { TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot } from "./shadcn-io/tags-input-inline/index.js";

package/dist/components/ui/index.js

@@ -6,24 +6,26 @@ import { Button, buttonVariants } from "./button.js";
 import { Calendar, CalendarDayButton } from "./calendar.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
 import { Checkbox } from "./checkbox.js";
+import { Input } from "./input.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./select.js";
+import { ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerHueSlider, ColorPickerInput, ColorPickerSwatch, ColorPickerTrigger, colorUtils, useStore } from "./color-picker.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./dialog.js";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./command.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
-import { FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, FileUploadRoot, FileUploadTrigger, useStore } from "./file-upload.js";
+import { FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, FileUploadRoot, FileUploadTrigger, useStore as useStore$1 } from "./file-upload.js";
 import { Label } from "./label.js";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./form.js";
-import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.js";
 import { Separator } from "./separator.js";
 import { OrContinueWithSeparator } from "./OrContinueWithSeparator.js";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination.js";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
 import { RadioGroup, RadioGroupItem } from "./radio-group.js";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./select.js";
 import { Tags, TagsContent, TagsEmpty, TagsGroup, TagsInput, TagsItem, TagsList, TagsTrigger, TagsValue } from "./shadcn-io/tags/index.js";
 import { TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot } from "./shadcn-io/tags-input-inline/index.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./sheet.js";
 import { Slider } from "./slider.js";
 import { Switch } from "./switch.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
-import { Textarea } from "./textarea.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";

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

@@ -0,0 +1,90 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils = require('../../lib/utils.cjs');
+require('../../lib/index.cjs');
+const require_button = require('./button.cjs');
+const require_input = require('./input.cjs');
+const require_textarea = require('./textarea.cjs');
+let class_variance_authority = require("class-variance-authority");
+class_variance_authority = require_rolldown_runtime.__toESM(class_variance_authority);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/ui/input-group.tsx
+function InputGroup({ className,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: require_utils.cn("group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]", "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className),
+		...props
+	});
+}
+const inputGroupAddonVariants = (0, class_variance_authority.cva)("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", {
+	variants: { align: {
+		"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+		"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+		"block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+		"block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon({ className, align = "inline-start",...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: require_utils.cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+}
+const inputGroupButtonVariants = (0, class_variance_authority.cva)("text-sm shadow-none flex gap-2 items-center", {
+	variants: { size: {
+		xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+		sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+		"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__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: require_utils.cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+}
+function InputGroupText({ className,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_utils.cn("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function InputGroupInput({ className,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+		"data-slot": "input-group-control",
+		className: require_utils.cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+function InputGroupTextarea({ className,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_textarea.Textarea, {
+		"data-slot": "input-group-control",
+		className: require_utils.cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+
+//#endregion
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupButton = InputGroupButton;
+exports.InputGroupInput = InputGroupInput;
+exports.InputGroupText = InputGroupText;
+exports.InputGroupTextarea = InputGroupTextarea;

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

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

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

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

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

@@ -0,0 +1,81 @@
+import { cn } from "../../lib/utils.js";
+import "../../lib/index.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import { cva } from "class-variance-authority";
+import "react";
+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 border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]", "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className),
+		...props
+	});
+}
+const inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", {
+	variants: { align: {
+		"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+		"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+		"block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+		"block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+	} },
+	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("text-sm shadow-none flex gap-2 items-center", {
+	variants: { size: {
+		xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+		sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+		"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("text-muted-foreground flex items-center gap-2 text-sm [&_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 focus-visible: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-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

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

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

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

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

package/dist/components/ui/label.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime83 from "react/jsx-runtime";
+import * as react_jsx_runtime99 from "react/jsx-runtime";
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 
@@ -6,6 +6,6 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 declare function Label({
   className,
   ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime83.JSX.Element;
+}: React.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime99.JSX.Element;
 //#endregion
 export { Label };

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

@@ -1,11 +1,11 @@
 import * as React from "react";
-import * as react_jsx_runtime83 from "react/jsx-runtime";
+import * as react_jsx_runtime99 from "react/jsx-runtime";
 import * as LabelPrimitive from "@radix-ui/react-label";
 
 //#region src/components/ui/label.d.ts
 declare function Label({
   className,
   ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime83.JSX.Element;
+}: React.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime99.JSX.Element;
 //#endregion
 export { Label };

package/dist/components/ui/pagination.d.cts

@@ -1,20 +1,20 @@
 import { Button } from "./button.cjs";
 import "../../index.cjs";
-import * as react_jsx_runtime85 from "react/jsx-runtime";
+import * as react_jsx_runtime101 from "react/jsx-runtime";
 import * as React from "react";
 
 //#region src/components/ui/pagination.d.ts
 declare function Pagination({
   className,
   ...props
-}: React.ComponentProps<'nav'>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<'nav'>): react_jsx_runtime101.JSX.Element;
 declare function PaginationContent({
   className,
   ...props
-}: React.ComponentProps<'ul'>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<'ul'>): react_jsx_runtime101.JSX.Element;
 declare function PaginationItem({
   ...props
-}: React.ComponentProps<'li'>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<'li'>): react_jsx_runtime101.JSX.Element;
 type PaginationLinkProps = {
   isActive?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, 'size'> & React.ComponentProps<'a'>;
@@ -23,18 +23,18 @@ declare function PaginationLink({
   isActive,
   size,
   ...props
-}: PaginationLinkProps): react_jsx_runtime85.JSX.Element;
+}: PaginationLinkProps): react_jsx_runtime101.JSX.Element;
 declare function PaginationPrevious({
   className,
   ...props
-}: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime101.JSX.Element;
 declare function PaginationNext({
   className,
   ...props
-}: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime101.JSX.Element;
 declare function PaginationEllipsis({
   className,
   ...props
-}: React.ComponentProps<'span'>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<'span'>): react_jsx_runtime101.JSX.Element;
 //#endregion
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

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

@@ -1,20 +1,20 @@
 import { Button } from "./button.js";
 import "../../index.js";
 import * as React from "react";
-import * as react_jsx_runtime85 from "react/jsx-runtime";
+import * as react_jsx_runtime101 from "react/jsx-runtime";
 
 //#region src/components/ui/pagination.d.ts
 declare function Pagination({
   className,
   ...props
-}: React.ComponentProps<'nav'>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<'nav'>): react_jsx_runtime101.JSX.Element;
 declare function PaginationContent({
   className,
   ...props
-}: React.ComponentProps<'ul'>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<'ul'>): react_jsx_runtime101.JSX.Element;
 declare function PaginationItem({
   ...props
-}: React.ComponentProps<'li'>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<'li'>): react_jsx_runtime101.JSX.Element;
 type PaginationLinkProps = {
   isActive?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, 'size'> & React.ComponentProps<'a'>;
@@ -23,18 +23,18 @@ declare function PaginationLink({
   isActive,
   size,
   ...props
-}: PaginationLinkProps): react_jsx_runtime85.JSX.Element;
+}: PaginationLinkProps): react_jsx_runtime101.JSX.Element;
 declare function PaginationPrevious({
   className,
   ...props
-}: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime101.JSX.Element;
 declare function PaginationNext({
   className,
   ...props
-}: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime101.JSX.Element;
 declare function PaginationEllipsis({
   className,
   ...props
-}: React.ComponentProps<'span'>): react_jsx_runtime85.JSX.Element;
+}: React.ComponentProps<'span'>): react_jsx_runtime101.JSX.Element;
 //#endregion
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/ui/popover.d.cts

@@ -1,22 +1,22 @@
-import * as react_jsx_runtime92 from "react/jsx-runtime";
+import * as react_jsx_runtime108 from "react/jsx-runtime";
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 //#region src/components/ui/popover.d.ts
 declare function Popover({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime92.JSX.Element;
+}: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime108.JSX.Element;
 declare function PopoverTrigger({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime92.JSX.Element;
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime108.JSX.Element;
 declare function PopoverContent({
   className,
   align,
   sideOffset,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime92.JSX.Element;
+}: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime108.JSX.Element;
 declare function PopoverAnchor({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime92.JSX.Element;
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime108.JSX.Element;
 //#endregion
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

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

@@ -1,22 +1,22 @@
 import * as React from "react";
-import * as react_jsx_runtime92 from "react/jsx-runtime";
+import * as react_jsx_runtime108 from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 //#region src/components/ui/popover.d.ts
 declare function Popover({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime92.JSX.Element;
+}: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime108.JSX.Element;
 declare function PopoverTrigger({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime92.JSX.Element;
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime108.JSX.Element;
 declare function PopoverContent({
   className,
   align,
   sideOffset,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime92.JSX.Element;
+}: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime108.JSX.Element;
 declare function PopoverAnchor({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime92.JSX.Element;
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime108.JSX.Element;
 //#endregion
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/components/ui/radio-group.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime96 from "react/jsx-runtime";
+import * as react_jsx_runtime112 from "react/jsx-runtime";
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 
@@ -6,10 +6,10 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 declare function RadioGroup({
   className,
   ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>): react_jsx_runtime96.JSX.Element;
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>): react_jsx_runtime112.JSX.Element;
 declare function RadioGroupItem({
   className,
   ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>): react_jsx_runtime96.JSX.Element;
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>): react_jsx_runtime112.JSX.Element;
 //#endregion
 export { RadioGroup, RadioGroupItem };

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

@@ -1,15 +1,15 @@
 import * as React from "react";
-import * as react_jsx_runtime96 from "react/jsx-runtime";
+import * as react_jsx_runtime112 from "react/jsx-runtime";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 
 //#region src/components/ui/radio-group.d.ts
 declare function RadioGroup({
   className,
   ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>): react_jsx_runtime96.JSX.Element;
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>): react_jsx_runtime112.JSX.Element;
 declare function RadioGroupItem({
   className,
   ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>): react_jsx_runtime96.JSX.Element;
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>): react_jsx_runtime112.JSX.Element;
 //#endregion
 export { RadioGroup, RadioGroupItem };