xiod-ui 1.0.0

package/dist/components/grid.d.ts

@@ -0,0 +1,26 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/grid.d.ts
+declare const gridVariants: (props?: ({
+  columns?: "none" | "subgrid" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null | undefined;
+  rows?: "none" | "subgrid" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null | undefined;
+  flow?: "row" | "col" | "dense" | "row-dense" | "col-dense" | null | undefined;
+  align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
+  justify?: "start" | "center" | "end" | "stretch" | "between" | null | undefined;
+  gap?: "sm" | "md" | "lg" | "xl" | "none" | "base" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface GridProps extends useRender.ComponentProps<"div">, VariantProps<typeof gridVariants> {}
+declare function Grid({ className, render, columns, rows, flow, align, justify, gap, ...props }: GridProps): React$1.ReactElement;
+declare const gridItemVariants: (props?: ({
+  colSpan?: "auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | null | undefined;
+  rowSpan?: "auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | null | undefined;
+  colStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | null | undefined;
+  colEnd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | null | undefined;
+  rowStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | null | undefined;
+  rowEnd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface GridItemProps extends useRender.ComponentProps<"div">, VariantProps<typeof gridItemVariants> {}
+declare function GridItem({ className, render, colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, ...props }: GridItemProps): React$1.ReactElement;
+//#endregion
+export { Grid, GridItem, type GridItemProps, type GridProps, gridItemVariants, gridVariants };

package/dist/components/grid.js

@@ -0,0 +1,204 @@
+"use client";
+import { cn } from "cn";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/grid.tsx
+const gridVariants = cva("grid", {
+	variants: {
+		columns: {
+			none: "grid-cols-none",
+			1: "grid-cols-1",
+			2: "grid-cols-2",
+			3: "grid-cols-3",
+			4: "grid-cols-4",
+			5: "grid-cols-5",
+			6: "grid-cols-6",
+			7: "grid-cols-7",
+			8: "grid-cols-8",
+			9: "grid-cols-9",
+			10: "grid-cols-10",
+			11: "grid-cols-11",
+			12: "grid-cols-12",
+			subgrid: "grid-cols-subgrid"
+		},
+		rows: {
+			none: "grid-rows-none",
+			1: "grid-rows-1",
+			2: "grid-rows-2",
+			3: "grid-rows-3",
+			4: "grid-rows-4",
+			5: "grid-rows-5",
+			6: "grid-rows-6",
+			7: "grid-rows-7",
+			8: "grid-rows-8",
+			9: "grid-rows-9",
+			10: "grid-rows-10",
+			11: "grid-rows-11",
+			12: "grid-rows-12",
+			subgrid: "grid-rows-subgrid"
+		},
+		flow: {
+			row: "grid-flow-row",
+			col: "grid-flow-col",
+			dense: "grid-flow-dense",
+			"row-dense": "grid-flow-row-dense",
+			"col-dense": "grid-flow-col-dense"
+		},
+		align: {
+			start: "items-start",
+			center: "items-center",
+			end: "items-end",
+			stretch: "items-stretch",
+			baseline: "items-baseline"
+		},
+		justify: {
+			start: "justify-items-start",
+			center: "justify-items-center",
+			end: "justify-items-end",
+			stretch: "justify-items-stretch",
+			between: "justify-between"
+		},
+		gap: {
+			none: "gap-0",
+			sm: "gap-3",
+			base: "gap-4 sm:gap-6",
+			md: "gap-6",
+			lg: "gap-8",
+			xl: "gap-12"
+		}
+	},
+	defaultVariants: { gap: "base" }
+});
+function Grid({ className, render, columns, rows, flow, align, justify, gap, ...props }) {
+	const defaultProps = {
+		className: cn(gridVariants({
+			columns,
+			rows,
+			flow,
+			align,
+			justify,
+			gap
+		}), className),
+		"data-slot": "grid"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+const gridItemVariants = cva("", { variants: {
+	colSpan: {
+		auto: "col-auto",
+		full: "col-span-full",
+		1: "col-span-1",
+		2: "col-span-2",
+		3: "col-span-3",
+		4: "col-span-4",
+		5: "col-span-5",
+		6: "col-span-6",
+		7: "col-span-7",
+		8: "col-span-8",
+		9: "col-span-9",
+		10: "col-span-10",
+		11: "col-span-11",
+		12: "col-span-12"
+	},
+	rowSpan: {
+		auto: "row-auto",
+		full: "row-span-full",
+		1: "row-span-1",
+		2: "row-span-2",
+		3: "row-span-3",
+		4: "row-span-4",
+		5: "row-span-5",
+		6: "row-span-6",
+		7: "row-span-7",
+		8: "row-span-8",
+		9: "row-span-9",
+		10: "row-span-10",
+		11: "row-span-11",
+		12: "row-span-12"
+	},
+	colStart: {
+		1: "col-start-1",
+		2: "col-start-2",
+		3: "col-start-3",
+		4: "col-start-4",
+		5: "col-start-5",
+		6: "col-start-6",
+		7: "col-start-7",
+		8: "col-start-8",
+		9: "col-start-9",
+		10: "col-start-10",
+		11: "col-start-11",
+		12: "col-start-12",
+		13: "col-start-13"
+	},
+	colEnd: {
+		1: "col-end-1",
+		2: "col-end-2",
+		3: "col-end-3",
+		4: "col-end-4",
+		5: "col-end-5",
+		6: "col-end-6",
+		7: "col-end-7",
+		8: "col-end-8",
+		9: "col-end-9",
+		10: "col-end-10",
+		11: "col-end-11",
+		12: "col-end-12",
+		13: "col-end-13"
+	},
+	rowStart: {
+		1: "row-start-1",
+		2: "row-start-2",
+		3: "row-start-3",
+		4: "row-start-4",
+		5: "row-start-5",
+		6: "row-start-6",
+		7: "row-start-7",
+		8: "row-start-8",
+		9: "row-start-9",
+		10: "row-start-10",
+		11: "row-start-11",
+		12: "row-start-12",
+		13: "row-start-13"
+	},
+	rowEnd: {
+		1: "row-end-1",
+		2: "row-end-2",
+		3: "row-end-3",
+		4: "row-end-4",
+		5: "row-end-5",
+		6: "row-end-6",
+		7: "row-end-7",
+		8: "row-end-8",
+		9: "row-end-9",
+		10: "row-end-10",
+		11: "row-end-11",
+		12: "row-end-12",
+		13: "row-end-13"
+	}
+} });
+function GridItem({ className, render, colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, ...props }) {
+	const defaultProps = {
+		className: cn(gridItemVariants({
+			colSpan,
+			rowSpan,
+			colStart,
+			colEnd,
+			rowStart,
+			rowEnd
+		}), className),
+		"data-slot": "grid-item"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { Grid, GridItem, gridItemVariants, gridVariants };

package/dist/components/group.d.ts

@@ -0,0 +1,19 @@
+import { Separator } from "./separator.js";
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/group.d.ts
+declare const groupVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Group({ className, orientation, children, ...props }: {
+  className?: string;
+  orientation?: VariantProps<typeof groupVariants>["orientation"];
+  children: React$1.ReactNode;
+} & React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function GroupText({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function GroupSeparator({ className, orientation, ...props }: {
+  className?: string;
+} & React$1.ComponentProps<typeof Separator>): React$1.JSX.Element;
+//#endregion
+export { Group, GroupSeparator, GroupText, groupVariants };

package/dist/components/group.js

@@ -0,0 +1,45 @@
+"use client";
+import { Separator } from "./separator.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/group.tsx
+const groupVariants = cva("flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 dark:*:[[data-slot=button]:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64 dark:*:[[data-slot=separator]:has(~[data-slot=button]:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64", {
+	defaultVariants: { orientation: "horizontal" },
+	variants: { orientation: {
+		horizontal: "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none",
+		vertical: "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none"
+	} }
+});
+function Group({ className, orientation, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(groupVariants({ orientation }), className),
+		"data-orientation": orientation,
+		"data-slot": "group",
+		role: "group",
+		...props,
+		children
+	});
+}
+function GroupText({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("relative inline-flex items-center whitespace-nowrap gap-2 rounded-lg border border-input bg-muted not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-muted-foreground text-base sm:text-sm shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 [&_svg]:-mx-0.5", className),
+		"data-slot": "group-text"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function GroupSeparator({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		className: cn("[[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+input+&]:-translate-x-px pointer-events-none relative z-2 bg-input before:absolute before:inset-0 has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring dark:before:bg-input/32 [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&,[data-slot=number-field]:focus-within+input+&]:bg-ring", className),
+		orientation,
+		...props
+	});
+}
+//#endregion
+export { Group, GroupSeparator, GroupText, groupVariants };

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

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

package/dist/components/input-group.js

@@ -0,0 +1,61 @@
+"use client";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/input-group.tsx
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]", className),
+		"data-slot": "input-group",
+		role: "group",
+		...props
+	});
+}
+const inputGroupAddonVariants = cva("[&_svg]:-mx-0.5 flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80", {
+	defaultVariants: { align: "inline-start" },
+	variants: { align: {
+		"block-end": "order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]",
+		"block-start": "order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]",
+		"inline-end": "has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 order-last pe-[calc(--spacing(3)-1px)] has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]",
+		"inline-start": "has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 order-first ps-[calc(--spacing(3)-1px)] has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]"
+	} }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(inputGroupAddonVariants({ align }), className),
+		"data-align": align,
+		"data-slot": "input-group-addon",
+		onMouseDown: (e) => {
+			if (e.target.closest("button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']")) return;
+			e.preventDefault();
+			const parent = e.currentTarget.parentElement;
+			const input = parent?.querySelector("input, textarea");
+			if (input && !parent?.querySelector("input:focus, textarea:focus")) input.focus();
+		},
+		...props
+	});
+}
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("[&_svg]:-mx-0.5 line-clamp-1 flex items-center gap-2 text-muted-foreground leading-none in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className),
+		...props
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		className: cn(className),
+		unstyled: true,
+		...props
+	});
+}
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		className: cn(className),
+		unstyled: true,
+		...props
+	});
+}
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants };

package/dist/components/input-otp.d.ts

@@ -0,0 +1,24 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { OTPField as OTPField$1 } from "@base-ui/react/otp-field";
+//#region src/components/input-otp.d.ts
+export interface InputOtpProps extends Omit<OTPField$1.Root.Props, "className"> {
+  className?: string;
+}
+export interface InputOtpGroupProps extends useRender.ComponentProps<"div"> {}
+export interface InputOtpInputProps extends Omit<OTPField$1.Input.Props, "className"> {
+  className?: string;
+}
+export interface InputOtpSeparatorProps extends Omit<OTPField$1.Separator.Props, "className"> {
+  className?: string;
+}
+declare function InputOtp({ className, ...props }: InputOtpProps): React$1.JSX.Element;
+declare function InputOtpGroup({ className, render, ...props }: InputOtpGroupProps): React$1.ReactElement;
+declare function InputOtpInput({ className, ...props }: InputOtpInputProps): React$1.JSX.Element;
+declare function InputOtpSeparator({ className, children, ...props }: InputOtpSeparatorProps): React$1.JSX.Element;
+declare const OTPField: typeof InputOtp;
+declare const OTPFieldGroup: typeof InputOtpGroup;
+declare const OTPFieldInput: typeof InputOtpInput;
+declare const OTPFieldSeparator: typeof InputOtpSeparator;
+//#endregion
+export { InputOtp, InputOtpGroup, InputOtpInput, InputOtpSeparator, OTPField, OTPFieldGroup, OTPFieldInput, OTPFieldSeparator };

package/dist/components/input-otp.js

@@ -0,0 +1,50 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { MinusSign } from "xiod-icons/icons/MinusSign";
+import { OTPField as OTPField$1 } from "@base-ui/react/otp-field";
+//#region src/components/input-otp.tsx
+function InputOtp({ className, ...props }) {
+	return /* @__PURE__ */ jsx(OTPField$1.Root, {
+		className: cn("flex items-center gap-2 has-disabled:opacity-64", className),
+		"data-slot": "input-otp",
+		...props
+	});
+}
+function InputOtpGroup({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("flex items-center gap-2", className),
+		"data-slot": "input-otp-group"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function InputOtpInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("relative flex h-10 w-10 sm:h-9 sm:w-9 shrink-0 box-border items-center justify-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-center text-base sm:text-sm font-medium text-foreground shadow-xs/5 ring-ring/24 transition-shadow", "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] dark:bg-input/32", "not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", "has-focus-visible:border-ring has-focus-visible:ring-[3px]", "has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:has-aria-invalid:ring-destructive/24", "has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none", className),
+		"data-slot": "input-otp-input",
+		children: /* @__PURE__ */ jsx(OTPField$1.Input, {
+			className: "w-full h-full bg-transparent text-center font-inherit text-inherit outline-none caret-foreground placeholder:text-muted-foreground focus-visible:placeholder:text-muted-foreground/0",
+			...props
+		})
+	});
+}
+function InputOtpSeparator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(OTPField$1.Separator, {
+		className: cn("flex items-center justify-center text-muted-foreground/64 [&_svg:not([class*='size-'])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "input-otp-separator",
+		...props,
+		children: children || /* @__PURE__ */ jsx(MinusSign, { className: "h-5 w-5" })
+	});
+}
+const OTPField = InputOtp;
+const OTPFieldGroup = InputOtpGroup;
+const OTPFieldInput = InputOtpInput;
+const OTPFieldSeparator = InputOtpSeparator;
+//#endregion
+export { InputOtp, InputOtpGroup, InputOtpInput, InputOtpSeparator, OTPField, OTPFieldGroup, OTPFieldInput, OTPFieldSeparator };

package/dist/components/input-payment.d.ts

@@ -0,0 +1,131 @@
+import { Tabs } from "./tabs.js";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Input } from "@base-ui/react/input";
+//#region src/components/input-payment.d.ts
+export type CardBrand = "visa" | "mastercard" | "amex" | "rupay" | "unionpay" | "discover" | "dinersclub" | "jcb" | "mir" | "unknown";
+export interface CardCodeConfig {
+  name: string;
+  length: number;
+}
+export interface CardTypeConfig {
+  displayName: string;
+  type: CardBrand;
+  startPattern: RegExp;
+  gaps: number[];
+  lengths: number[];
+  code: CardCodeConfig;
+}
+export declare const CARD_TYPES: CardTypeConfig[];
+export declare const DEFAULT_CARD_TYPE: CardTypeConfig;
+export declare function getCardTypeByValue(cardNumber: string): CardTypeConfig;
+export declare function detectBrand(cardNumber: string): CardBrand;
+export type PaymentMethod = "card" | "upi";
+export type UpiProvider = "gpay" | "phonepe" | "paytm" | "amazonpay" | "bhim" | "cred" | "whatsapp" | "generic";
+export declare function validateUpiId(vpa: string): boolean;
+export declare function detectUpiProvider(vpa: string): UpiProvider;
+export declare function getUpiError(vpa: string): string | undefined;
+export declare function validateLuhn(cardNumber: string): boolean;
+export declare function formatCardNumber(cardNumber: string, cardTypeConfig?: CardTypeConfig): string;
+export declare function formatExpiry(value: string): string;
+export interface PaymentInputErrors {
+  cardNumber?: string;
+  expiryDate?: string;
+  cvc?: string;
+  zip?: string;
+  upi?: string;
+}
+export declare function getCardNumberError(cardNumber: string): string | undefined;
+export declare function getExpiryDateError(expiryDate: string): string | undefined;
+export declare function getCvcError(cvc: string, cardTypeConfig?: CardTypeConfig): string | undefined;
+export declare function getZipError(zip: string): string | undefined;
+interface InputPaymentContextValue {
+  paymentMethod: PaymentMethod;
+  setPaymentMethod: (method: PaymentMethod) => void;
+  cardNumber: string;
+  cardExpiry: string;
+  cardCvc: string;
+  cardZip: string;
+  upiId: string;
+  brand: CardBrand;
+  cardType: CardTypeConfig;
+  upiProvider: UpiProvider;
+  disabled?: boolean;
+  readOnly?: boolean;
+  isInGroup: boolean;
+  autoFocusNext: boolean;
+  isLuhnValid: boolean;
+  errors: PaymentInputErrors;
+  isValid: boolean;
+  cardNumberRef: React$1.RefObject<HTMLInputElement | null>;
+  expiryRef: React$1.RefObject<HTMLInputElement | null>;
+  cvcRef: React$1.RefObject<HTMLInputElement | null>;
+  zipRef: React$1.RefObject<HTMLInputElement | null>;
+  upiRef: React$1.RefObject<HTMLInputElement | null>;
+  setCardNumber: (val: string) => void;
+  setCardExpiry: (val: string) => void;
+  setCardCvc: (val: string) => void;
+  setCardZip: (val: string) => void;
+  setUpiId: (val: string) => void;
+}
+declare function useInputPaymentContext(): InputPaymentContextValue;
+export declare const usePaymentInputContext: typeof useInputPaymentContext;
+export declare const useInputPayment: typeof useInputPaymentContext;
+export declare const usePaymentInput: typeof useInputPaymentContext;
+export interface InputPaymentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  paymentMethod?: PaymentMethod;
+  defaultPaymentMethod?: PaymentMethod;
+  onPaymentMethodChange?: (method: PaymentMethod) => void;
+  cardNumber?: string;
+  defaultCardNumber?: string;
+  onCardNumberChange?: (val: string) => void;
+  cardExpiry?: string;
+  defaultCardExpiry?: string;
+  onCardExpiryChange?: (val: string) => void;
+  cardCvc?: string;
+  defaultCardCvc?: string;
+  onCardCvcChange?: (val: string) => void;
+  cardZip?: string;
+  defaultCardZip?: string;
+  onCardZipChange?: (val: string) => void;
+  upiId?: string;
+  defaultUpiId?: string;
+  onUpiIdChange?: (val: string) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  autoFocusNext?: boolean;
+  onValidationChange?: (isValid: boolean, errors: PaymentInputErrors) => void;
+  children?: React$1.ReactNode;
+}
+export type PaymentInputProps = InputPaymentProps;
+declare function InputPayment({ paymentMethod: paymentMethodProp, defaultPaymentMethod, onPaymentMethodChange, cardNumber: cardNumberProp, defaultCardNumber, onCardNumberChange, cardExpiry: cardExpiryProp, defaultCardExpiry, onCardExpiryChange, cardCvc: cardCvcProp, defaultCardCvc, onCardCvcChange, cardZip: cardZipProp, defaultCardZip, onCardZipChange, upiId: upiIdProp, defaultUpiId, onUpiIdChange, disabled, readOnly, autoFocusNext, onValidationChange, children, ...props }: InputPaymentProps): React$1.JSX.Element;
+declare function InputPaymentMethodSelector({ className, ...props }: React$1.ComponentProps<typeof Tabs>): React$1.JSX.Element;
+declare function InputPaymentGroup({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function InputPaymentUpiGroup({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+interface InputFieldProps extends Omit<React$1.ComponentProps<typeof Input>, "size" | "className" | "style" | "onChange" | "onKeyDown"> {
+  size?: "sm" | "default" | "lg" | number;
+  className?: string;
+  style?: React$1.CSSProperties;
+  onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: React$1.KeyboardEventHandler<HTMLInputElement>;
+}
+declare function InputPaymentCardNumber({ className, size, onChange, ref, ...props }: InputFieldProps): React$1.JSX.Element;
+declare function InputPaymentExpiry({ className, size, onChange, onKeyDown, ref, ...props }: InputFieldProps): React$1.JSX.Element;
+declare function InputPaymentCVC({ className, size, onChange, onKeyDown, ref, ...props }: InputFieldProps): React$1.JSX.Element;
+declare function InputPaymentZip({ className, size, onChange, onKeyDown, ref, ...props }: InputFieldProps): React$1.JSX.Element;
+declare function InputPaymentUpiId({ className, size, onChange, ref, ...props }: InputFieldProps): React$1.JSX.Element;
+declare function InputPaymentBrandIcon({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function InputPaymentUpiProviderIcon({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare const PaymentInput: typeof InputPayment;
+declare const PaymentInputGroup: typeof InputPaymentGroup;
+declare const PaymentInputCardNumber: typeof InputPaymentCardNumber;
+declare const PaymentInputExpiry: typeof InputPaymentExpiry;
+declare const PaymentInputCVC: typeof InputPaymentCVC;
+declare const PaymentInputZip: typeof InputPaymentZip;
+declare const PaymentInputBrandIcon: typeof InputPaymentBrandIcon;
+declare const PaymentInputUpiGroup: typeof InputPaymentUpiGroup;
+declare const PaymentInputUpiId: typeof InputPaymentUpiId;
+declare const PaymentInputUpiProviderIcon: typeof InputPaymentUpiProviderIcon;
+declare const PaymentInputMethodSelector: typeof InputPaymentMethodSelector;
+//#endregion
+export { InputPayment, InputPaymentBrandIcon, InputPaymentCVC, InputPaymentCardNumber, InputPaymentExpiry, InputPaymentGroup, InputPaymentMethodSelector, InputPaymentUpiGroup, InputPaymentUpiId, InputPaymentUpiProviderIcon, InputPaymentZip, PaymentInput, PaymentInputBrandIcon, PaymentInputCVC, PaymentInputCardNumber, PaymentInputExpiry, PaymentInputGroup, PaymentInputMethodSelector, PaymentInputUpiGroup, PaymentInputUpiId, PaymentInputUpiProviderIcon, PaymentInputZip };