@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.2.0

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

@@ -1,46 +1,71 @@
-export * as Accordion from './accordion';
-export * as Alert from './alert';
-export * as AlertDialog from './alert-dialog';
-export { AspectRatio } from './aspect-ratio';
-export * as Avatar from './avatar';
-export { Badge } from './badge';
-export * as Breadcrumb from './breadcrumb';
-export { Button, buttonVariants } from './button';
-export { Calendar } from './calendar';
-export * as Card from './card';
-export * as Carousel from './carousel';
-export { Checkbox } from './checkbox';
-export * as Collapsible from './collapsible';
-export * as Command from './command';
-export * as ContextMenu from './context-menu';
-export * as Dialog from './dialog';
-export * as Drawer from './drawer';
-export * as DropdownMenu from './dropdown-menu';
-export * as Form from './form';
-export * as HoverCard from './hover-card';
-export { Input } from './input';
-export { InputOTP } from './input-otp';
-export { Label } from './label';
-export * as Menubar from './menubar';
-export * as Pagination from './pagination';
-export * as Popover from './popover';
-export { Progress } from './progress';
-export * as RadioGroup from './radio-group';
-export { RangeCalendar } from './range-calendar';
-export * as Resizable from './resizable';
-export { ScrollArea } from './scroll-area';
-export * as Select from './select';
-export { Separator } from './separator';
-export * as Sheet from './sheet';
-export * as Sidebar from './sidebar';
-export { useSidebar } from './sidebar';
-export { Skeleton } from './skeleton';
-export { Slider } from './slider';
-export { Toaster } from './sonner';
-export { Switch } from './switch';
-export * as Table from './table';
-export * as Tabs from './tabs';
-export { Textarea } from './textarea';
-export { Toggle } from './toggle';
-export * as ToggleGroup from './toggle-group';
-export * as Tooltip from './tooltip';
+export * as Accordion from "./accordion/index.ts";
+export * as Alert from "./alert/index.ts";
+export * as AlertDialog from "./alert-dialog/index.ts";
+export { AspectRatio } from "./aspect-ratio/index.ts";
+export * as Avatar from "./avatar/index.ts";
+export { Badge } from "./badge/index.ts";
+export * as Breadcrumb from "./breadcrumb/index.ts";
+export { Button, buttonVariants, type ButtonSize, type ButtonVariant, type ButtonProps, } from "./button/index.ts";
+export { Calendar } from "./calendar/index.ts";
+export * as Card from "./card/index.ts";
+export * as Carousel from "./carousel/index.ts";
+export { Checkbox } from "./checkbox/index.ts";
+export * as Collapsible from "./collapsible/index.ts";
+export * as Command from "./command/index.ts";
+export * as ContextMenu from "./context-menu/index.ts";
+export * as Dialog from "./dialog/index.ts";
+export * as Drawer from "./drawer/index.ts";
+export * as DropdownMenu from "./dropdown-menu/index.ts";
+export * as HoverCard from "./hover-card/index.ts";
+export { InputOTP } from "./input-otp/index.ts";
+export * as InputGroup from "./input-group/index.ts";
+export * as Menubar from "./menubar/index.ts";
+export * as Pagination from "./pagination/index.ts";
+export * as Popover from "./popover/index.ts";
+export { Progress } from "./progress/index.ts";
+export * as RadioGroup from "./radio-group/index.ts";
+export { RangeCalendar } from "./range-calendar/index.ts";
+export * as Resizable from "./resizable/index.ts";
+export { ScrollArea } from "./scroll-area/index.ts";
+export * as Select from "./select/index.ts";
+export { Separator } from "./separator/index.ts";
+export * as Sheet from "./sheet/index.ts";
+export * as Sidebar from "./sidebar/index.ts";
+export { useSidebar } from "./sidebar/index.ts";
+export { Skeleton } from "./skeleton/index.ts";
+export { Slider } from "./slider/index.ts";
+export { Toaster } from "./sonner/index.ts";
+export { Switch } from "./switch/index.ts";
+export * as Table from "./table/index.ts";
+export * as Tabs from "./tabs/index.ts";
+export { Textarea } from "./textarea/index.ts";
+export { Toggle } from "./toggle/index.ts";
+export * as ToggleGroup from "./toggle-group/index.ts";
+export * as Tooltip from "./tooltip/index.ts";
+export * as Chart from "./chart/index.ts";
+export * as Item from "./item/index.ts";
+export * as Attachment from "./attachment/index.ts";
+export * as ButtonGroup from "./button-group/index.ts";
+export * as Field from "./field/index.ts";
+export * as Empty from "./empty/index.ts";
+export * as Kbd from "./kbd/index.ts";
+export * as NativeSelect from "./native-select/index.ts";
+export { Spinner } from "./spinner/index.ts";
+/**
+ * @deprecated Moved to @tanglemedia/svelte-started-form-shadcn
+ */
+export * as Form from "./form/index.ts";
+/**
+ * @deprecated Moved to @tanglemedia/svelte-started-form-shadcn
+ */
+export { Label } from "./label/index.ts";
+/**
+ * @deprecated Moved to @tanglemedia/svelte-started-form-shadcn
+ */
+export { Input } from "./input/index.ts";
+export type { SidebarStateProps } from "./sidebar/context.svelte.ts";
+export type { SidebarMenuButtonSize, SidebarMenuButtonVariant, } from "./sidebar/sidebar-menu-button.svelte";
+export * as Message from "./message/index.ts";
+export * as Bubble from "./bubble/index.ts";
+export * as MessageScroller from "./message-scroller/index.ts";
+export * as Questionnaire from "./questionnaire/index.ts";

package/dist/lib/components/ui/index.js

@@ -1,46 +1,69 @@
-export * as Accordion from './accordion';
-export * as Alert from './alert';
-export * as AlertDialog from './alert-dialog';
-export { AspectRatio } from './aspect-ratio';
-export * as Avatar from './avatar';
-export { Badge } from './badge';
-export * as Breadcrumb from './breadcrumb';
-export { Button, buttonVariants } from './button';
-export { Calendar } from './calendar';
-export * as Card from './card';
-export * as Carousel from './carousel';
-export { Checkbox } from './checkbox';
-export * as Collapsible from './collapsible';
-export * as Command from './command';
-export * as ContextMenu from './context-menu';
-export * as Dialog from './dialog';
-export * as Drawer from './drawer';
-export * as DropdownMenu from './dropdown-menu';
-export * as Form from './form';
-export * as HoverCard from './hover-card';
-export { Input } from './input';
-export { InputOTP } from './input-otp';
-export { Label } from './label';
-export * as Menubar from './menubar';
-export * as Pagination from './pagination';
-export * as Popover from './popover';
-export { Progress } from './progress';
-export * as RadioGroup from './radio-group';
-export { RangeCalendar } from './range-calendar';
-export * as Resizable from './resizable';
-export { ScrollArea } from './scroll-area';
-export * as Select from './select';
-export { Separator } from './separator';
-export * as Sheet from './sheet';
-export * as Sidebar from './sidebar';
-export { useSidebar } from './sidebar';
-export { Skeleton } from './skeleton';
-export { Slider } from './slider';
-export { Toaster } from './sonner';
-export { Switch } from './switch';
-export * as Table from './table';
-export * as Tabs from './tabs';
-export { Textarea } from './textarea';
-export { Toggle } from './toggle';
-export * as ToggleGroup from './toggle-group';
-export * as Tooltip from './tooltip';
+export * as Accordion from "./accordion/index.js";
+export * as Alert from "./alert/index.js";
+export * as AlertDialog from "./alert-dialog/index.js";
+export { AspectRatio } from "./aspect-ratio/index.js";
+export * as Avatar from "./avatar/index.js";
+export { Badge } from "./badge/index.js";
+export * as Breadcrumb from "./breadcrumb/index.js";
+export { Button, buttonVariants, } from "./button/index.js";
+export { Calendar } from "./calendar/index.js";
+export * as Card from "./card/index.js";
+export * as Carousel from "./carousel/index.js";
+export { Checkbox } from "./checkbox/index.js";
+export * as Collapsible from "./collapsible/index.js";
+export * as Command from "./command/index.js";
+export * as ContextMenu from "./context-menu/index.js";
+export * as Dialog from "./dialog/index.js";
+export * as Drawer from "./drawer/index.js";
+export * as DropdownMenu from "./dropdown-menu/index.js";
+export * as HoverCard from "./hover-card/index.js";
+export { InputOTP } from "./input-otp/index.js";
+export * as InputGroup from "./input-group/index.js";
+export * as Menubar from "./menubar/index.js";
+export * as Pagination from "./pagination/index.js";
+export * as Popover from "./popover/index.js";
+export { Progress } from "./progress/index.js";
+export * as RadioGroup from "./radio-group/index.js";
+export { RangeCalendar } from "./range-calendar/index.js";
+export * as Resizable from "./resizable/index.js";
+export { ScrollArea } from "./scroll-area/index.js";
+export * as Select from "./select/index.js";
+export { Separator } from "./separator/index.js";
+export * as Sheet from "./sheet/index.js";
+export * as Sidebar from "./sidebar/index.js";
+export { useSidebar } from "./sidebar/index.js";
+export { Skeleton } from "./skeleton/index.js";
+export { Slider } from "./slider/index.js";
+export { Toaster } from "./sonner/index.js";
+export { Switch } from "./switch/index.js";
+export * as Table from "./table/index.js";
+export * as Tabs from "./tabs/index.js";
+export { Textarea } from "./textarea/index.js";
+export { Toggle } from "./toggle/index.js";
+export * as ToggleGroup from "./toggle-group/index.js";
+export * as Tooltip from "./tooltip/index.js";
+export * as Chart from "./chart/index.js";
+export * as Item from "./item/index.js";
+export * as Attachment from "./attachment/index.js";
+export * as ButtonGroup from "./button-group/index.js";
+export * as Field from "./field/index.js";
+export * as Empty from "./empty/index.js";
+export * as Kbd from "./kbd/index.js";
+export * as NativeSelect from "./native-select/index.js";
+export { Spinner } from "./spinner/index.js";
+/**
+ * @deprecated Moved to @tanglemedia/svelte-started-form-shadcn
+ */
+export * as Form from "./form/index.js";
+/**
+ * @deprecated Moved to @tanglemedia/svelte-started-form-shadcn
+ */
+export { Label } from "./label/index.js";
+/**
+ * @deprecated Moved to @tanglemedia/svelte-started-form-shadcn
+ */
+export { Input } from "./input/index.js";
+export * as Message from "./message/index.js";
+export * as Bubble from "./bubble/index.js";
+export * as MessageScroller from "./message-scroller/index.js";
+export * as Questionnaire from "./questionnaire/index.js";

package/dist/lib/components/ui/input/input.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 
@@ -16,6 +15,7 @@
 		type,
 		files = $bindable(),
 		class: className,
+		"data-slot": dataSlot = "input",
 		...restProps
 	}: Props = $props();
 </script>
@@ -23,8 +23,9 @@
 {#if type === "file"}
 	<input
 		bind:this={ref}
+		data-slot={dataSlot}
 		class={cn(
-			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		type="file"
@@ -35,8 +36,9 @@
 {:else}
 	<input
 		bind:this={ref}
+		data-slot={dataSlot}
 		class={cn(
-			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		{type}

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

@@ -1,5 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
 import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
 type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type: "file";

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

@@ -0,0 +1,7 @@
+import Addon from "./input-group-addon.svelte";
+import Button from "./input-group-button.svelte";
+import Input from "./input-group-input.svelte";
+import Text from "./input-group-text.svelte";
+import Textarea from "./input-group-textarea.svelte";
+import Root from "./input-group.svelte";
+export { Root, Addon, Button, Input, Text, Textarea, Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea, };

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

@@ -0,0 +1,9 @@
+import Addon from "./input-group-addon.svelte";
+import Button from "./input-group-button.svelte";
+import Input from "./input-group-input.svelte";
+import Text from "./input-group-text.svelte";
+import Textarea from "./input-group-textarea.svelte";
+import Root from "./input-group.svelte";
+export { Root, Addon, Button, Input, Text, Textarea, 
+//
+Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea, };

package/dist/lib/components/ui/input-group/input-group-addon.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+	export const inputGroupAddonVariants = tv({
+		base: "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)_-_5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+		variants: {
+			align: {
+				"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+				"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+				"block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+				"block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+			},
+		},
+		defaultVariants: {
+			align: "inline-start",
+		},
+	});
+
+	export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>["align"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		align = "inline-start",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		align?: InputGroupAddonAlign;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="input-group-addon"
+	data-align={align}
+	class={cn(inputGroupAddonVariants({ align }), className)}
+	onclick={(e) => {
+		if ((e.target as HTMLElement).closest("button")) {
+			return;
+		}
+		e.currentTarget.parentElement?.querySelector("input")?.focus();
+	}}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/input-group/input-group-addon.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
+    align: {
+        "inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first";
+        "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last";
+        "block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start";
+        "block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start";
+    };
+}, undefined, "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)_-_5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+    align: {
+        "inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first";
+        "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last";
+        "block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start";
+        "block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    align: {
+        "inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first";
+        "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last";
+        "block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start";
+        "block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start";
+    };
+}, undefined>>;
+export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>["align"];
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    align?: InputGroupAddonAlign;
+};
+declare const InputGroupAddon: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupAddon = ReturnType<typeof InputGroupAddon>;
+export default InputGroupAddon;

package/dist/lib/components/ui/input-group/input-group-button.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	const inputGroupButtonVariants = tv({
+		base: "gap-2 text-sm flex items-center shadow-none",
+		variants: {
+			size: {
+				xs: "h-6 gap-1 rounded-[calc(var(--radius)_-_3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: "",
+				"icon-xs": "size-6 rounded-[calc(var(--radius)_-_3px)] p-0 has-[>svg]:p-0",
+				"icon-sm": "size-8 p-0 has-[>svg]:p-0",
+			},
+		},
+		defaultVariants: {
+			size: "xs",
+		},
+	});
+
+	export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>["size"];
+</script>
+
+<script lang="ts">
+	import { Button } from "../button/index.js";
+	import { cn } from "../../utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		type = "button",
+		variant = "ghost",
+		size = "xs",
+		...restProps
+	}: Omit<ComponentProps<typeof Button>, "href" | "size"> & {
+		size?: InputGroupButtonSize;
+	} = $props();
+</script>
+
+<Button
+	bind:ref
+	{type}
+	data-size={size}
+	{variant}
+	class={cn(inputGroupButtonVariants({ size }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</Button>

package/dist/lib/components/ui/input-group/input-group-button.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from "tailwind-variants";
+declare const inputGroupButtonVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)_-_3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        "icon-xs": "size-6 rounded-[calc(var(--radius)_-_3px)] p-0 has-[>svg]:p-0";
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined, "gap-2 text-sm flex items-center shadow-none", {
+    size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)_-_3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        "icon-xs": "size-6 rounded-[calc(var(--radius)_-_3px)] p-0 has-[>svg]:p-0";
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)_-_3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        "icon-xs": "size-6 rounded-[calc(var(--radius)_-_3px)] p-0 has-[>svg]:p-0";
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined>>;
+export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>["size"];
+import { Button } from "../button/index.js";
+import type { ComponentProps } from "svelte";
+type $$ComponentProps = Omit<ComponentProps<typeof Button>, "href" | "size"> & {
+    size?: InputGroupButtonSize;
+};
+declare const InputGroupButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupButton = ReturnType<typeof InputGroupButton>;
+export default InputGroupButton;

package/dist/lib/components/ui/input-group/input-group-input.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Input } from "../input/index.js";
+	import { cn } from "../../utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	data-slot="input-group-control"
+	class={cn("rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1", className)}
+	bind:value
+	{...props}
+/>

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

@@ -0,0 +1,11 @@
+declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
+    type: "file";
+    files?: FileList;
+} | {
+    type?: "number" | "hidden" | "color" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "month" | "datetime-local" | "image" | "password" | "range" | "time" | "week";
+    files?: undefined;
+})) & {
+    ref?: HTMLElement | null | undefined;
+}, {}, "ref" | "value">;
+type InputGroupInput = ReturnType<typeof InputGroupInput>;
+export default InputGroupInput;

package/dist/lib/components/ui/input-group/input-group-text.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	class={cn("text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/lib/components/ui/input-group/input-group-text.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const InputGroupText: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type InputGroupText = ReturnType<typeof InputGroupText>;
+export default InputGroupText;

package/dist/lib/components/ui/input-group/input-group-textarea.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Textarea } from "../textarea/index.js";
+	import { cn } from "../../utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Textarea> = $props();
+</script>
+
+<Textarea
+	bind:ref
+	data-slot="input-group-control"
+	class={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none", className)}
+	bind:value
+	{...props}
+/>

package/dist/lib/components/ui/input-group/input-group-textarea.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const InputGroupTextarea: import("svelte").Component<Omit<import("../../utils.js").WithElementRef<import("svelte/elements").HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
+type InputGroupTextarea = ReturnType<typeof InputGroupTextarea>;
+export default InputGroupTextarea;

package/dist/lib/components/ui/input-group/input-group.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...props
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-group"
+	role="group"
+	class={cn(
+		"group/input-group border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 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 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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-[>[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 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+		className
+	)}
+	{...props}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const InputGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;

package/dist/lib/components/ui/input-otp/index.d.ts

@@ -1,5 +1,5 @@
-import Root from "./input-otp.svelte";
 import Group from "./input-otp-group.svelte";
-import Slot from "./input-otp-slot.svelte";
 import Separator from "./input-otp-separator.svelte";
+import Slot from "./input-otp-slot.svelte";
+import Root from "./input-otp.svelte";
 export { Root, Group, Slot, Separator, Root as InputOTP, Group as InputOTPGroup, Slot as InputOTPSlot, Separator as InputOTPSeparator, };

package/dist/lib/components/ui/input-otp/index.js

@@ -1,5 +1,5 @@
-import Root from "./input-otp.svelte";
 import Group from "./input-otp-group.svelte";
-import Slot from "./input-otp-slot.svelte";
 import Separator from "./input-otp-separator.svelte";
+import Slot from "./input-otp-slot.svelte";
+import Root from "./input-otp.svelte";
 export { Root, Group, Slot, Separator, Root as InputOTP, Group as InputOTPGroup, Slot as InputOTPSlot, Separator as InputOTPSeparator, };