@alpic-ai/ui 0.0.0

package/dist/components/copyable.d.mts

@@ -0,0 +1,22 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/copyable.d.ts
+interface CopyableProps {
+  content: string;
+  children: ReactNode;
+  className?: string;
+}
+declare function Copyable({
+  content,
+  children,
+  className
+}: CopyableProps): _$react_jsx_runtime0.JSX.Element;
+interface CopyableUrlProps {
+  url: URL;
+}
+declare function CopyableUrl({
+  url
+}: CopyableUrlProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Copyable, type CopyableProps, CopyableUrl, type CopyableUrlProps };

package/dist/components/copyable.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { Button } from "./button.mjs";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.mjs";
+import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/copyable.tsx
+function Copyable({ content, children, className }) {
+	const { copy, isCopied } = useCopyToClipboard();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-1", className),
+		children: [children, /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			size: "icon",
+			onClick: (event) => {
+				event.preventDefault();
+				copy(content);
+			},
+			children: isCopied ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4 text-muted-foreground" })
+		})]
+	});
+}
+function CopyableUrl({ url }) {
+	return /* @__PURE__ */ jsx(Copyable, {
+		content: url.href,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "font-semibold",
+			children: url.hostname
+		})
+	});
+}
+//#endregion
+export { Copyable, CopyableUrl };

package/dist/components/description-list.d.mts

@@ -0,0 +1,22 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
+
+//#region src/components/description-list.d.ts
+declare function DescriptionList({
+  className,
+  ...props
+}: React.ComponentProps<"dl">): _$react_jsx_runtime0.JSX.Element;
+declare function DescriptionItem({
+  className,
+  ...props
+}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+declare function DescriptionTitle({
+  className,
+  ...props
+}: React.ComponentProps<"dt">): _$react_jsx_runtime0.JSX.Element;
+declare function DescriptionValue({
+  className,
+  ...props
+}: React.ComponentProps<"dd">): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DescriptionItem, DescriptionList, DescriptionTitle, DescriptionValue };

package/dist/components/description-list.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/description-list.tsx
+function DescriptionList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("dl", {
+		"data-slot": "description-list",
+		className: cn("grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", className),
+		...props
+	});
+}
+function DescriptionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "description-item",
+		className: cn("flex flex-col gap-1 xl:gap-1.5", className),
+		...props
+	});
+}
+function DescriptionTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("dt", {
+		"data-slot": "description-title",
+		className: cn("type-text-xs font-medium text-subtle-foreground", className),
+		...props
+	});
+}
+function DescriptionValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx("dd", {
+		"data-slot": "description-value",
+		className: cn("type-text-sm text-foreground truncate", className),
+		...props
+	});
+}
+//#endregion
+export { DescriptionItem, DescriptionList, DescriptionTitle, DescriptionValue };

package/dist/components/dialog.d.mts

@@ -0,0 +1,61 @@
+import { ButtonProps } from "./button.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/dialog.d.ts
+declare function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
+declare function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>): _$react_jsx_runtime0.JSX.Element;
+declare function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>): _$react_jsx_runtime0.JSX.Element;
+declare function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>): _$react_jsx_runtime0.JSX.Element;
+declare const dialogContentVariants: (props?: ({
+  size?: "sm" | "lg" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+interface DialogContentProps extends React.ComponentProps<typeof DialogPrimitive.Content>, VariantProps<typeof dialogContentVariants> {
+  showCloseButton?: boolean;
+}
+declare function DialogContent({
+  className,
+  children,
+  size,
+  showCloseButton,
+  ...props
+}: DialogContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function DialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+declare const dialogFooterVariants: (props?: ({
+  layout?: "horizontal" | "vertical" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+interface DialogFooterProps extends React.ComponentProps<"div">, VariantProps<typeof dialogFooterVariants> {}
+declare function DialogFooter({
+  className,
+  layout,
+  ...props
+}: DialogFooterProps): _$react_jsx_runtime0.JSX.Element;
+declare function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>): _$react_jsx_runtime0.JSX.Element;
+declare function DialogClose({
+  children,
+  ...props
+}: Omit<ButtonProps, "variant" | "asChild">): _$react_jsx_runtime0.JSX.Element;
+declare function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, type DialogFooterProps, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogContentVariants, dialogFooterVariants };

package/dist/components/dialog.mjs

@@ -0,0 +1,110 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { Button } from "./button.mjs";
+import { XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+//#region src/components/dialog.tsx
+function Dialog({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+function DialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+		"data-slot": "dialog-overlay",
+		className: cn("fixed inset-0 z-50 bg-overlay", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
+		...props
+	});
+}
+const dialogContentVariants = cva([
+	"bg-background fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2",
+	"overflow-y-auto rounded-2xl px-6 shadow-lg outline-none",
+	"data-[state=open]:animate-in data-[state=closed]:animate-out",
+	"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+	"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+	"duration-200"
+].join(" "), {
+	variants: { size: {
+		sm: "max-w-[400px]",
+		lg: "max-w-[544px]"
+	} },
+	defaultVariants: { size: "sm" }
+});
+function DialogContent({ className, children, size, showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+		"data-slot": "dialog-content",
+		className: cn(dialogContentVariants({ size }), className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+			"data-slot": "dialog-close",
+			className: cn("absolute top-3 right-4 flex size-8 items-center justify-center rounded-md", "text-subtle-foreground transition-colors", "[@media(hover:hover)]:hover:text-foreground", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", "disabled:pointer-events-none"),
+			children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4" }), /* @__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-0.5 pt-6 pr-10", className),
+		...props
+	});
+}
+const dialogFooterVariants = cva("pb-6 pt-6", {
+	variants: { layout: {
+		horizontal: "flex gap-3 [&>*]:flex-1",
+		vertical: "flex flex-col gap-3"
+	} },
+	defaultVariants: { layout: "horizontal" }
+});
+function DialogFooter({ className, layout, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: cn(dialogFooterVariants({ layout }), className),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+		"data-slot": "dialog-title",
+		className: cn("type-text-md font-semibold text-foreground", className),
+		...props
+	});
+}
+function DialogClose({ children = "Cancel", ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+		"data-slot": "dialog-cancel",
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			...props,
+			children
+		})
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+		"data-slot": "dialog-description",
+		className: cn("type-text-sm text-subtle-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogContentVariants, dialogFooterVariants };

package/dist/components/dropdown-menu.d.mts

@@ -0,0 +1,72 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/dropdown-menu.d.ts
+declare function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenuContent({
+  className,
+  sideOffset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): _$react_jsx_runtime0.JSX.Element;
+declare const dropdownMenuItemVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+declare function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {
+  inset?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenuHeader({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuItemVariants };

package/dist/components/dropdown-menu.mjs

@@ -0,0 +1,122 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+//#region src/components/dropdown-menu.tsx
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
+		"data-slot": "dropdown-menu-content",
+		sideOffset,
+		className: cn("bg-popover text-popover-foreground", "z-50 min-w-60 overflow-x-hidden overflow-y-auto rounded-md border border-border-secondary py-1 shadow-lg", "max-h-(--radix-dropdown-menu-content-available-height)", "origin-(--radix-dropdown-menu-content-transform-origin)", "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", className),
+		...props
+	}) });
+}
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+const dropdownMenuItemVariants = cva([
+	"relative flex cursor-default items-center gap-2 rounded-sm px-2.5 py-2 outline-hidden select-none",
+	"type-text-sm font-semibold",
+	"mx-1.5 my-px",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	"data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+].join(" "), {
+	variants: { variant: {
+		default: [
+			"text-muted-foreground",
+			"[&_svg:not([class*='text-'])]:text-muted-foreground",
+			"[@media(hover:hover)]:hover:bg-background-hover [@media(hover:hover)]:hover:text-muted-foreground-hover",
+			"focus:bg-background-hover focus:text-muted-foreground-hover"
+		].join(" "),
+		destructive: [
+			"text-destructive",
+			"[&_svg]:!text-destructive",
+			"[@media(hover:hover)]:hover:bg-destructive/10 dark:[@media(hover:hover)]:hover:bg-destructive/20",
+			"focus:bg-destructive/10 dark:focus:bg-destructive/20"
+		].join(" ")
+	} },
+	defaultVariants: { variant: "default" }
+});
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		className: cn(dropdownMenuItemVariants({ variant }), inset && "pl-8", className),
+		...props
+	});
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
+		"data-slot": "dropdown-menu-label",
+		className: cn("px-2.5 py-1.5 type-text-sm font-semibold text-foreground", inset && "pl-8", className),
+		...props
+	});
+}
+function DropdownMenuHeader({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropdown-menu-header",
+		className: cn("flex items-center gap-2 border-b border-border-secondary p-3", className),
+		...props,
+		children
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("bg-border -mx-1 my-1 h-px", className),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("ml-auto shrink-0 rounded-xs border border-border px-1 py-px type-text-xs font-medium text-subtle-foreground", className),
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		className: cn(dropdownMenuItemVariants({ variant: "default" }), "data-[state=open]:bg-background-hover data-[state=open]:text-muted-foreground-hover", inset && "pl-8", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
+	});
+}
+function DropdownMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: cn("bg-popover text-popover-foreground", "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border-secondary py-1 shadow-lg", "origin-(--radix-dropdown-menu-content-transform-origin)", "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", className),
+		...props
+	});
+}
+//#endregion
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuItemVariants };

package/dist/components/input-group.d.mts

@@ -0,0 +1,25 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/input-group.d.ts
+declare function InputGroup({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"fieldset">): _$react_jsx_runtime0.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+  align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+declare function InputGroupAddon({
+  className,
+  align,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): _$react_jsx_runtime0.JSX.Element;
+declare function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupTextarea };

package/dist/components/input-group.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/input-group.tsx
+function InputGroup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("fieldset", {
+		"data-slot": "input-group",
+		className: cn("group/input-group relative flex w-full items-center rounded-md border bg-background", "h-9 min-w-0 has-[>textarea]:h-auto", "transition-colors", "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]:border-2", "has-[[data-slot][aria-invalid=true]]:border-border-error", "has-[[data-slot=input-group-control]:disabled]:bg-disabled has-[[data-slot=input-group-control]:disabled]:text-disabled-foreground has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed", className),
+		...props,
+		children
+	});
+}
+const inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 type-text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 group-disabled/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", {
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (event) => {
+			if (event.target.closest("button")) return;
+			(event.currentTarget.parentElement?.querySelector("textarea, input"))?.focus();
+		},
+		...props
+	});
+}
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "input-group-control",
+		className: cn("w-full flex-1 resize-none rounded-none border-0 bg-transparent px-3 py-3 shadow-none outline-none", "type-text-md text-foreground placeholder:text-placeholder", "focus-visible:ring-0", className),
+		...props
+	});
+}
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupTextarea };

package/dist/components/input.d.mts

@@ -0,0 +1,27 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
+
+//#region src/components/input.d.ts
+interface InputProps extends Omit<React.ComponentProps<"input">, "size"> {
+  label?: string;
+  required?: boolean;
+  hint?: string;
+  error?: string;
+  leadingText?: string;
+  leadingIcon?: React.ReactNode;
+  size?: "sm" | "md";
+}
+declare function Input({
+  className,
+  id,
+  label,
+  required,
+  hint,
+  error,
+  leadingText,
+  leadingIcon,
+  size,
+  ...props
+}: InputProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Input, type InputProps };

package/dist/components/input.mjs

@@ -0,0 +1,90 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { Label } from "./label.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/components/input.tsx
+const inputSizeStyles = {
+	sm: {
+		standalone: "h-8 px-2 py-1.5 type-text-sm",
+		wrapper: "h-8",
+		inner: "px-2 py-1.5",
+		text: "type-text-sm",
+		leadingText: "pl-2 pr-2 type-text-sm",
+		leadingIcon: "pl-2 [&_svg]:size-4"
+	},
+	md: {
+		standalone: "h-8 px-2.5 py-1.5 type-text-md",
+		wrapper: "h-8",
+		inner: "px-2.5 py-1.5",
+		text: "type-text-md",
+		leadingText: "pl-2.5 pr-2 type-text-md",
+		leadingIcon: "pl-2.5 [&_svg]:size-5"
+	}
+};
+function Input({ className, id, label, required, hint, error, leadingText, leadingIcon, size = "md", ...props }) {
+	const generatedId = React.useId();
+	const fieldId = id ?? generatedId;
+	const hasAddons = leadingText || leadingIcon;
+	const sizes = inputSizeStyles[size];
+	const inputElement = /* @__PURE__ */ jsx("input", {
+		id: fieldId,
+		"data-slot": "input",
+		className: cn("w-full min-w-0 bg-transparent outline-none", sizes.text, "text-foreground placeholder:text-placeholder", "disabled:cursor-not-allowed", !hasAddons && [
+			"flex",
+			sizes.standalone,
+			"bg-background border border-border rounded-md",
+			"transition-colors",
+			"focus-visible:border-ring focus-visible:border-2",
+			"disabled:bg-disabled disabled:text-disabled-foreground",
+			"aria-invalid:border-border-error",
+			error && "border-border-error"
+		], hasAddons && "flex-1 min-h-0", className),
+		required,
+		"aria-invalid": error ? true : void 0,
+		"aria-describedby": fieldId && (hint || error) ? `${fieldId}-description` : void 0,
+		...props
+	});
+	const wrappedInput = hasAddons ? /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center w-full overflow-hidden", sizes.wrapper, "bg-background border border-border rounded-md", "transition-colors", "has-[input:focus-visible]:border-ring has-[input:focus-visible]:border-2", "has-[input:disabled]:bg-disabled has-[input:disabled]:text-disabled-foreground has-[input:disabled]:cursor-not-allowed", error && "border-border-error"),
+		children: [
+			leadingIcon && /* @__PURE__ */ jsx("span", {
+				className: cn("flex items-center text-subtle-foreground [&_svg]:shrink-0", sizes.leadingIcon),
+				children: leadingIcon
+			}),
+			leadingText && /* @__PURE__ */ jsx("span", {
+				className: cn("flex items-center text-subtle-foreground whitespace-nowrap border-r border-border self-stretch", sizes.leadingText),
+				children: leadingText
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex flex-1 items-center min-w-0", sizes.inner),
+				children: inputElement
+			})
+		]
+	}) : inputElement;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-0.5",
+				children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: fieldId,
+					className: "type-text-sm font-medium text-muted-foreground",
+					children: label
+				}), required && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "type-text-sm font-medium text-required",
+					children: "*"
+				})]
+			}),
+			wrappedInput,
+			(hint || error) && /* @__PURE__ */ jsx("p", {
+				id: fieldId ? `${fieldId}-description` : void 0,
+				className: cn("type-text-sm", error ? "text-destructive" : "text-subtle-foreground"),
+				children: error ?? hint
+			})
+		]
+	});
+}
+//#endregion
+export { Input };