@orochibraru/ui 0.0.0-stage → 0.0.0

package/dist/components/ui/field/field-group.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-group"
+	class={cn(
+		"gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/field/field-group.svelte.d.ts

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

package/dist/components/ui/field/field-label.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+
+	import { Label } from "../label/index.js";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof Label> = $props();
+</script>
+
+<Label
+	bind:ref
+	data-slot="field-label"
+	class={cn(
+		"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-focus-visible:border-ring has-[>[data-slot=field]]:has-focus-visible:ring-ring/50 has-[>[data-slot=field]]:has-focus-visible:ring-3 *:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit",
+		"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</Label>

package/dist/components/ui/field/field-label.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const FieldLabel: import("svelte").Component<Omit<{}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveLabelAttributes, import("bits-ui").LabelRootPropsWithoutHTML>, {}, "ref">;
+type FieldLabel = ReturnType<typeof FieldLabel>;
+export default FieldLabel;

package/dist/components/ui/field/field-legend.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "legend",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
+		variant?: "legend" | "label";
+	} = $props();
+</script>
+
+<legend
+	bind:this={ref}
+	data-slot="field-legend"
+	data-variant={variant}
+	class={cn(
+		"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</legend>

package/dist/components/ui/field/field-legend.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
+    variant?: "legend" | "label";
+};
+declare const FieldLegend: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type FieldLegend = ReturnType<typeof FieldLegend>;
+export default FieldLegend;

package/dist/components/ui/field/field-separator.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { Separator } from "../separator/index.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+	} = $props();
+
+	const hasContent = $derived(!!children);
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-separator"
+	data-content={hasContent}
+	class={cn(
+		"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative",
+		className,
+	)}
+	{...restProps}
+>
+	<Separator class="absolute inset-0 top-1/2" />
+	{#if children}
+		<span
+			class="text-muted-foreground px-2 relative mx-auto block w-fit bg-background"
+			data-slot="field-separator-content"
+		>
+			{@render children()}
+		</span>
+	{/if}
+</div>

package/dist/components/ui/field/field-separator.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    children?: Snippet;
+};
+declare const FieldSeparator: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type FieldSeparator = ReturnType<typeof FieldSeparator>;
+export default FieldSeparator;

package/dist/components/ui/field/field-set.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLFieldsetAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLFieldsetAttributes> = $props();
+</script>
+
+<fieldset
+	bind:this={ref}
+	data-slot="field-set"
+	class={cn(
+		"gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</fieldset>

package/dist/components/ui/field/field-set.svelte.d.ts

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

package/dist/components/ui/field/field-title.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-title"
+	class={cn(
+		"gap-2 leading-snug text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/field/field-title.svelte.d.ts

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

package/dist/components/ui/field/field.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const fieldVariants = tv({
+		base: "data-[invalid=true]:text-destructive gap-3 group/field flex w-full",
+		variants: {
+			orientation: {
+				vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+				horizontal:
+					"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				responsive:
+					"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+			},
+		},
+		defaultVariants: {
+			orientation: "vertical",
+		},
+	});
+
+	export type FieldOrientation = VariantProps<
+		typeof fieldVariants
+	>["orientation"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: FieldOrientation;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="field"
+	data-orientation={orientation}
+	class={cn(fieldVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/field/field.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const fieldVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto";
+        horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px";
+        responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px";
+    };
+}, undefined, "data-[invalid=true]:text-destructive gap-3 group/field flex w-full", {
+    orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto";
+        horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px";
+        responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto";
+        horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px";
+        responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px";
+    };
+}, undefined>>;
+export type FieldOrientation = VariantProps<typeof fieldVariants>["orientation"];
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: FieldOrientation;
+};
+declare const Field: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Field = ReturnType<typeof Field>;
+export default Field;

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

@@ -0,0 +1,11 @@
+import Content from "./field-content.svelte";
+import Description from "./field-description.svelte";
+import Error from "./field-error.svelte";
+import Group from "./field-group.svelte";
+import Label from "./field-label.svelte";
+import Legend from "./field-legend.svelte";
+import Separator from "./field-separator.svelte";
+import Set from "./field-set.svelte";
+import Title from "./field-title.svelte";
+import Field from "./field.svelte";
+export { Field, Set, Legend, Group, Content, Label, Title, Description, Separator, Error, Set as FieldSet, Legend as FieldLegend, Group as FieldGroup, Content as FieldContent, Label as FieldLabel, Title as FieldTitle, Description as FieldDescription, Separator as FieldSeparator, Error as FieldError, };

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

@@ -0,0 +1,13 @@
+import Content from "./field-content.svelte";
+import Description from "./field-description.svelte";
+import Error from "./field-error.svelte";
+import Group from "./field-group.svelte";
+import Label from "./field-label.svelte";
+import Legend from "./field-legend.svelte";
+import Separator from "./field-separator.svelte";
+import Set from "./field-set.svelte";
+import Title from "./field-title.svelte";
+import Field from "./field.svelte";
+export { Field, Set, Legend, Group, Content, Label, Title, Description, Separator, Error, 
+//
+Set as FieldSet, Legend as FieldLegend, Group as FieldGroup, Content as FieldContent, Label as FieldLabel, Title as FieldTitle, Description as FieldDescription, Separator as FieldSeparator, Error as FieldError, };

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

@@ -0,0 +1,2 @@
+import Root from "./input.svelte";
+export { Root, Root as Input, };

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

@@ -0,0 +1,4 @@
+import Root from "./input.svelte";
+export { Root, 
+//
+Root as Input, };

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

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type {
+		HTMLInputAttributes,
+		HTMLInputTypeAttribute,
+	} from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			(
+				| { type: "file"; files?: FileList }
+				| { type?: InputType; files?: undefined }
+			)
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "input",
+		...restProps
+	}: Props = $props();
+
+	const unmanaged = $derived(
+		restProps.autocomplete === undefined || restProps.autocomplete === "off"
+			? {
+					autocomplete: "off" as const,
+					"data-1p-ignore": "",
+					"data-lpignore": "true",
+					"data-bwignore": "",
+					"data-form-type": "other",
+				}
+			: {},
+	);
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"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 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 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"
+		bind:files
+		bind:value
+		{...restProps}
+		{...unmanaged}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"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 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 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}
+		bind:value
+		{...restProps}
+		{...unmanaged}
+	/>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
+    type: "file";
+    files?: FileList;
+} | {
+    type?: InputType;
+    files?: undefined;
+})>;
+declare const Input: import("svelte").Component<Props, {}, "ref" | "value" | "files">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/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/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/components/ui/input-group/input-group-addon.svelte

@@ -0,0 +1,58 @@
+<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-1 has-[>kbd]:ml-[-0.15rem] order-first",
+				"inline-end":
+					"pr-2 has-[>button]:-mr-1 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 type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	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/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-1 has-[>kbd]:ml-[-0.15rem] order-first";
+        "inline-end": "pr-2 has-[>button]:-mr-1 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-1 has-[>kbd]:ml-[-0.15rem] order-first";
+        "inline-end": "pr-2 has-[>button]:-mr-1 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-1 has-[>kbd]:ml-[-0.15rem] order-first";
+        "inline-end": "pr-2 has-[>button]:-mr-1 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 { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+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/components/ui/input-group/input-group-button.svelte

@@ -0,0 +1,53 @@
+<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)_-_5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: "",
+				"icon-xs":
+					"size-6 rounded-[calc(var(--radius)_-_5px)] p-0 has-[>svg]:p-0",
+				"icon-sm": "size-8 p-0 has-[>svg]:p-0",
+			},
+		},
+		defaultVariants: {
+			size: "xs",
+		},
+	});
+
+	export type InputGroupButtonSize = VariantProps<
+		typeof inputGroupButtonVariants
+	>["size"];
+</script>
+
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+
+	import { Button } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+
+	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/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)_-_5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        "icon-xs": "size-6 rounded-[calc(var(--radius)_-_5px)] p-0 has-[>svg]:p-0";
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined, "gap-2 text-sm flex items-center shadow-none", {
+    size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)_-_5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        "icon-xs": "size-6 rounded-[calc(var(--radius)_-_5px)] p-0 has-[>svg]:p-0";
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)_-_5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        "icon-xs": "size-6 rounded-[calc(var(--radius)_-_5px)] p-0 has-[>svg]:p-0";
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined>>;
+export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>["size"];
+import type { ComponentProps } from "svelte";
+import { Button } from "../button/index.js";
+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/components/ui/input-group/input-group-input.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+
+	import { Input } from "../input/index.js";
+	import { cn } from "../../../utils.js";
+
+	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 aria-invalid:ring-0 dark:bg-transparent flex-1",
+		className,
+	)}
+	bind:value
+	{...props}
+/>