ixia-ui-react 1.8.0 → 2.1.0

package/dist/input-Czt30vp7.js

@@ -0,0 +1,179 @@
+import { t as cn } from "./cn-BDi0DfT5.js";
+import { n as Icon } from "./icon-D3JWfCa2.js";
+import { t as Button } from "./button-DXQvyQyj.js";
+import { n as inputVariants, t as formatFileSize } from "./input.types-D0gyoaQv.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Input } from "@base-ui/react/input";
+// src/components/input/input.tsx
+const DEFAULT_COLOR = "#000000";
+const EMPTY_FILE_COUNT = 0;
+const SINGLE_FILE_COUNT = 1;
+const defaultFileUploadButtonIcon = /* @__PURE__ */ jsx(Icon, { name: "upload" });
+const defaultFilesSelectedLabel = (count) => `${count} files selected`;
+const defaultMaxFilesErrorLabel = (maxFiles) => {
+	if (maxFiles === SINGLE_FILE_COUNT) return `You can select up to ${maxFiles} file.`;
+	return `You can select up to ${maxFiles} files.`;
+};
+const defaultMaxFileSizeErrorLabel = (fileName, maxFileSize) => `"${fileName}" exceeds the maximum size of ${maxFileSize}.`;
+function getStringValue(value) {
+	if (typeof value === "string") return value;
+}
+function getColorValue(isControlled, controlledValue, uncontrolledValue) {
+	if (isControlled) return getStringValue(controlledValue) || DEFAULT_COLOR;
+	return uncontrolledValue || DEFAULT_COLOR;
+}
+function getColorInputProps(isControlled, colorValue) {
+	if (isControlled) return { value: colorValue };
+	return { defaultValue: colorValue };
+}
+function getFileValidationError(files, options) {
+	const { maxFiles, maxFileSize, maxFilesErrorLabel, maxFileSizeErrorLabel } = options, oversizedFile = files.find((file) => maxFileSize !== void 0 && file.size > maxFileSize);
+	if (maxFiles !== void 0 && files.length > maxFiles) return maxFilesErrorLabel(maxFiles);
+	if (oversizedFile && maxFileSize !== void 0) return maxFileSizeErrorLabel(oversizedFile.name, formatFileSize(maxFileSize));
+}
+function getFileStatus(options) {
+	const { fileError, selectedFiles, placeholder, filesSelectedLabel } = options;
+	if (fileError) return /* @__PURE__ */ jsx("span", {
+		className: "style-text-prose-0 text-error-default",
+		children: fileError
+	});
+	if (selectedFiles.length === EMPTY_FILE_COUNT) return /* @__PURE__ */ jsx("span", {
+		className: "style-text-prose-0 text-on-surface-variant",
+		children: placeholder
+	});
+	if (selectedFiles.length === SINGLE_FILE_COUNT) return selectedFiles.at(EMPTY_FILE_COUNT)?.name;
+	return filesSelectedLabel(selectedFiles.length);
+}
+function Input$1({ fileUploadButtonIcon = defaultFileUploadButtonIcon, fileUploadButtonLabel, maxFiles, maxFileSize, clearFilesLabel = "Remove files", filesSelectedLabel = defaultFilesSelectedLabel, maxFilesErrorLabel = defaultMaxFilesErrorLabel, maxFileSizeErrorLabel = defaultMaxFileSizeErrorLabel, compact, variant, size, className, ref, ...props }) {
+	const inputRef = useRef(null), [uncontrolledColorValue, setUncontrolledColorValue] = useState(getStringValue(props.defaultValue) || getStringValue(props.value) || DEFAULT_COLOR), [selectedFiles, setSelectedFiles] = useState([]), [fileError, setFileError] = useState(void 0);
+	if (props.type === "color") {
+		const isControlled = props.value !== void 0, colorValue = getColorValue(isControlled, props.value, uncontrolledColorValue), { onChange, defaultValue: _defaultValue, value: _value, ...colorProps } = props, handleColorChange = (event) => {
+			if (!isControlled) setUncontrolledColorValue(event.currentTarget.value);
+			onChange?.(event);
+		}, handleColorRef = (node) => {
+			inputRef.current = node;
+			if (typeof ref === "function") {
+				ref(node);
+				return;
+			}
+			if (ref && typeof ref === "object") Object.assign(ref, { current: node });
+		};
+		if (compact) return /* @__PURE__ */ jsxs("button", {
+			"aria-label": "Open color picker",
+			className: cn("relative outline-2 outline-transparent transition-colors focus-within:outline-border hover:cursor-pointer", size === "small" && "size-lg -outline-offset-2", size === "medium" && "size-xl -outline-offset-4", size === "large" && "size-2xl -outline-offset-6", className),
+			disabled: props.disabled,
+			onClick: () => inputRef.current?.click(),
+			type: "button",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("size-full", size === "small" && "rounded-md", size === "medium" && "rounded-lg", size === "large" && "rounded-xl"),
+				style: { backgroundColor: colorValue }
+			}), /* @__PURE__ */ jsx(Input, {
+				className: "peer pointer-events-none invisible absolute",
+				...getColorInputProps(isControlled, colorValue),
+				onChange: handleColorChange,
+				ref: handleColorRef,
+				type: "color",
+				...colorProps
+			})]
+		});
+		return /* @__PURE__ */ jsxs("button", {
+			"aria-label": `${colorValue}, open color picker`,
+			className: cn("relative flex hover:cursor-pointer", inputVariants({
+				size,
+				variant
+			}), className),
+			disabled: props.disabled,
+			onClick: () => inputRef.current?.click(),
+			type: "button",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("absolute top-1/2 left-xs aspect-square h-7/12 -translate-y-1/2", size === "small" && "rounded-md", size === "medium" && "rounded-lg", size === "large" && "rounded-xl"),
+					style: { backgroundColor: colorValue }
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					className: "peer pointer-events-none invisible absolute top-lg",
+					...getColorInputProps(isControlled, colorValue),
+					onChange: handleColorChange,
+					ref: handleColorRef,
+					type: "color",
+					...colorProps
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: cn("text-left", size === "small" && "pr-2xs pl-lg style-text-default--1", size === "medium" && "pl-lg style-text-default-0", size === "large" && "pl-xl style-text-default-1"),
+					children: colorValue
+				})
+			]
+		});
+	}
+	if (props.type === "file") {
+		const { onChange, ...fileProps } = props, clearFiles = () => {
+			if (inputRef.current) inputRef.current.value = "";
+			setSelectedFiles([]);
+			setFileError(void 0);
+		}, handleFileChange = (event) => {
+			const input = event.currentTarget, files = [...input.files ?? []], validationError = getFileValidationError(files, {
+				maxFileSize,
+				maxFileSizeErrorLabel,
+				maxFiles,
+				maxFilesErrorLabel
+			});
+			if (validationError) {
+				setSelectedFiles([]);
+				setFileError(validationError);
+				input.value = "";
+				return;
+			}
+			setFileError(void 0);
+			setSelectedFiles(files);
+			onChange?.(event);
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-lg",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-xs",
+				children: [
+					/* @__PURE__ */ jsxs(Button, {
+						variant: "soft",
+						tone: "neutral",
+						onClick: () => inputRef.current?.click(),
+						children: [fileUploadButtonIcon, fileUploadButtonLabel]
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						ref: inputRef,
+						...fileProps,
+						hidden: true,
+						onChange: handleFileChange
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "style-text-default-0",
+						children: getFileStatus({
+							fileError,
+							filesSelectedLabel,
+							placeholder: props.placeholder,
+							selectedFiles
+						})
+					})
+				]
+			}), /* @__PURE__ */ jsx(Button, {
+				"aria-label": clearFilesLabel,
+				size: "medium",
+				variant: "ghost",
+				tone: "error",
+				onClick: clearFiles,
+				children: /* @__PURE__ */ jsx(Icon, { name: "close" })
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsx(Input, {
+		className: cn(inputVariants({
+			size,
+			variant
+		}), className),
+		ref,
+		...props
+	});
+}
+export { Input$1 as t };
+
+//# sourceMappingURL=input-Czt30vp7.js.map

package/dist/input-Czt30vp7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-Czt30vp7.js","names":["Input","BaseInput"],"sources":["../src/components/input/input.tsx"],"sourcesContent":["import { Input as BaseInput } from '@base-ui/react/input'\nimport { useRef, useState } from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { formatFileSize, inputVariants } from './input.types'\nimport type { InputProps } from './input.types'\n\nconst DEFAULT_COLOR = '#000000',\n  EMPTY_FILE_COUNT = 0,\n  SINGLE_FILE_COUNT = 1,\n  defaultFileUploadButtonIcon = <Icon name=\"upload\" />,\n  defaultFilesSelectedLabel = (count: number) => `${count} files selected`,\n  defaultMaxFilesErrorLabel = (maxFiles: number) => {\n    if (maxFiles === SINGLE_FILE_COUNT) {\n      return `You can select up to ${maxFiles} file.`\n    }\n    return `You can select up to ${maxFiles} files.`\n  },\n  defaultMaxFileSizeErrorLabel = (fileName: string, maxFileSize: string) =>\n    `\"${fileName}\" exceeds the maximum size of ${maxFileSize}.`\n\nfunction getStringValue(value: unknown): string | undefined {\n  if (typeof value === 'string') {\n    return value\n  }\n  return undefined\n}\n\nfunction getColorValue(\n  isControlled: boolean,\n  controlledValue: unknown,\n  uncontrolledValue: string,\n): string {\n  if (isControlled) {\n    return getStringValue(controlledValue) || DEFAULT_COLOR\n  }\n  return uncontrolledValue || DEFAULT_COLOR\n}\n\nfunction getColorInputProps(isControlled: boolean, colorValue: string) {\n  if (isControlled) {\n    return { value: colorValue }\n  }\n  return { defaultValue: colorValue }\n}\n\nfunction getFileValidationError(\n  files: File[],\n  options: {\n    maxFiles: number | undefined\n    maxFileSize: number | undefined\n    maxFilesErrorLabel: NonNullable<InputProps['maxFilesErrorLabel']>\n    maxFileSizeErrorLabel: NonNullable<InputProps['maxFileSizeErrorLabel']>\n  },\n): string | undefined {\n  const { maxFiles, maxFileSize, maxFilesErrorLabel, maxFileSizeErrorLabel } = options,\n    oversizedFile = files.find((file) => maxFileSize !== undefined && file.size > maxFileSize)\n  if (maxFiles !== undefined && files.length > maxFiles) {\n    return maxFilesErrorLabel(maxFiles)\n  }\n\n  if (oversizedFile && maxFileSize !== undefined) {\n    return maxFileSizeErrorLabel(oversizedFile.name, formatFileSize(maxFileSize))\n  }\n  return undefined\n}\n\nfunction getFileStatus(options: {\n  fileError: string | undefined\n  selectedFiles: File[]\n  placeholder: InputProps['placeholder']\n  filesSelectedLabel: (count: number) => string\n}) {\n  const { fileError, selectedFiles, placeholder, filesSelectedLabel } = options\n  if (fileError) {\n    return <span className=\"style-text-prose-0 text-error-default\">{fileError}</span>\n  }\n  if (selectedFiles.length === EMPTY_FILE_COUNT) {\n    return <span className=\"style-text-prose-0 text-on-surface-variant\">{placeholder}</span>\n  }\n  if (selectedFiles.length === SINGLE_FILE_COUNT) {\n    return selectedFiles.at(EMPTY_FILE_COUNT)?.name\n  }\n  return filesSelectedLabel(selectedFiles.length)\n}\n\nexport function Input({\n  fileUploadButtonIcon = defaultFileUploadButtonIcon,\n  fileUploadButtonLabel,\n  maxFiles,\n  maxFileSize,\n  clearFilesLabel = 'Remove files',\n  filesSelectedLabel = defaultFilesSelectedLabel,\n  maxFilesErrorLabel = defaultMaxFilesErrorLabel,\n  maxFileSizeErrorLabel = defaultMaxFileSizeErrorLabel,\n  compact,\n  variant,\n  size,\n  className,\n  ref,\n  ...props\n}: InputProps) {\n  const inputRef = useRef<HTMLInputElement>(null),\n    [uncontrolledColorValue, setUncontrolledColorValue] = useState<string>(\n      getStringValue(props.defaultValue) || getStringValue(props.value) || DEFAULT_COLOR,\n    ),\n    [selectedFiles, setSelectedFiles] = useState<File[]>([]),\n    [fileError, setFileError] = useState<string | undefined>(undefined)\n\n  if (props.type === 'color') {\n    const isControlled = props.value !== undefined,\n      colorValue = getColorValue(isControlled, props.value, uncontrolledColorValue),\n      { onChange, defaultValue: _defaultValue, value: _value, ...colorProps } = props,\n      handleColorChange: NonNullable<typeof onChange> = (event) => {\n        if (!isControlled) {\n          setUncontrolledColorValue(event.currentTarget.value)\n        }\n\n        onChange?.(event)\n      },\n      handleColorRef = (node: HTMLInputElement | null) => {\n        inputRef.current = node\n\n        if (typeof ref === 'function') {\n          ref(node)\n          return\n        }\n\n        if (ref && typeof ref === 'object') {\n          Object.assign(ref, { current: node })\n        }\n      }\n\n    if (compact) {\n      return (\n        <button\n          aria-label=\"Open color picker\"\n          className={cn(\n            'relative outline-2 outline-transparent transition-colors focus-within:outline-border hover:cursor-pointer',\n            size === 'small' && 'size-lg -outline-offset-2',\n            size === 'medium' && 'size-xl -outline-offset-4',\n            size === 'large' && 'size-2xl -outline-offset-6',\n            className,\n          )}\n          disabled={props.disabled}\n          onClick={() => inputRef.current?.click()}\n          type=\"button\"\n        >\n          <div\n            className={cn(\n              'size-full',\n              size === 'small' && 'rounded-md',\n              size === 'medium' && 'rounded-lg',\n              size === 'large' && 'rounded-xl',\n            )}\n            style={{\n              backgroundColor: colorValue,\n            }}\n          />\n          <BaseInput\n            className=\"peer pointer-events-none invisible absolute\"\n            {...getColorInputProps(isControlled, colorValue)}\n            onChange={handleColorChange}\n            ref={handleColorRef}\n            type=\"color\"\n            {...colorProps}\n          />\n        </button>\n      )\n    }\n\n    return (\n      <button\n        aria-label={`${colorValue}, open color picker`}\n        className={cn(\n          'relative flex hover:cursor-pointer',\n          inputVariants({ size, variant }),\n          className,\n        )}\n        disabled={props.disabled}\n        onClick={() => inputRef.current?.click()}\n        type=\"button\"\n      >\n        <div\n          className={cn(\n            'absolute top-1/2 left-xs aspect-square h-7/12 -translate-y-1/2',\n            size === 'small' && 'rounded-md',\n            size === 'medium' && 'rounded-lg',\n            size === 'large' && 'rounded-xl',\n          )}\n          style={{\n            backgroundColor: colorValue,\n          }}\n        />\n        <BaseInput\n          className=\"peer pointer-events-none invisible absolute top-lg\"\n          {...getColorInputProps(isControlled, colorValue)}\n          onChange={handleColorChange}\n          ref={handleColorRef}\n          type=\"color\"\n          {...colorProps}\n        />\n        <p\n          className={cn(\n            'text-left',\n            size === 'small' && 'pr-2xs pl-lg style-text-default--1',\n            size === 'medium' && 'pl-lg style-text-default-0',\n            size === 'large' && 'pl-xl style-text-default-1',\n          )}\n        >\n          {colorValue}\n        </p>\n      </button>\n    )\n  }\n\n  if (props.type === 'file') {\n    const { onChange, ...fileProps } = props,\n      clearFiles = () => {\n        if (inputRef.current) {\n          inputRef.current.value = ''\n        }\n\n        setSelectedFiles([])\n        setFileError(undefined)\n      },\n      handleFileChange: NonNullable<typeof onChange> = (event) => {\n        const input = event.currentTarget,\n          files = [...(input.files ?? [])],\n          validationError = getFileValidationError(files, {\n            maxFileSize,\n            maxFileSizeErrorLabel,\n            maxFiles,\n            maxFilesErrorLabel,\n          })\n        if (validationError) {\n          setSelectedFiles([])\n          setFileError(validationError)\n          input.value = ''\n          return\n        }\n\n        setFileError(undefined)\n        setSelectedFiles(files)\n        onChange?.(event)\n      }\n\n    return (\n      <div className=\"flex items-center justify-between gap-lg\">\n        <div className=\"flex items-center gap-xs\">\n          <Button variant=\"soft\" tone=\"neutral\" onClick={() => inputRef.current?.click()}>\n            {fileUploadButtonIcon}\n            {fileUploadButtonLabel}\n          </Button>\n          <BaseInput ref={inputRef} {...fileProps} hidden onChange={handleFileChange} />\n          <p className=\"style-text-default-0\">\n            {getFileStatus({\n              fileError,\n              filesSelectedLabel,\n              placeholder: props.placeholder,\n              selectedFiles,\n            })}\n          </p>\n        </div>\n        <Button\n          aria-label={clearFilesLabel}\n          size=\"medium\"\n          variant=\"ghost\"\n          tone=\"error\"\n          onClick={clearFiles}\n        >\n          <Icon name=\"close\" />\n        </Button>\n      </div>\n    )\n  }\n\n  return (\n    <BaseInput className={cn(inputVariants({ size, variant }), className)} ref={ref} {...props} />\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { a as InputGroupAddonProps, c as InputGroupSeparatorProps, i as InputGroupAddon, n as InputGroupSeparator, o as InputGroupInputProps, r as InputGroupInput, s as InputGroupProps, t as InputGroup } from "../index-DdFxZ3Xr.js";
+export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupSeparator, type InputGroupSeparatorProps };

package/dist/input-group/index.js

@@ -0,0 +1 @@
+export { t as InputGroup, i as InputGroupAddon, r as InputGroupInput, n as InputGroupSeparator } from "../input-group-CgdazGrY.js";

package/dist/input-group-CgdazGrY.js

@@ -0,0 +1,111 @@
+import { t as cn } from "./cn-BDi0DfT5.js";
+import { n as inputVariants } from "./input.types-D0gyoaQv.js";
+import { t as Separator } from "./separator-DgIQp1cB.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Input } from "@base-ui/react/input";
+// src/components/input-group/input-group.tsx
+function InputGroup$1({ variant, size, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(inputVariants({
+			size,
+			variant
+		}), className),
+		ref,
+		...props
+	});
+}
+// src/components/input-group/input-group.types.ts
+const inputGroupAddonVariants = cva("inline-flex items-center gap-2xs text-on-surface-variant not-first:pl-2xs group-aria-invalid:text-error-on-container", {
+	defaultVariants: { size: "medium" },
+	variants: { size: {
+		large: "style-text-default-1 [&>svg]:size-md",
+		medium: "style-text-default-0 [&>svg]:size-sm",
+		small: "style-text-default--1 [&>svg]:size-xs"
+	} }
+});
+// src/components/input-group/input-group-addon.tsx
+function InputGroupAddon({ size, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(inputGroupAddonVariants({ size }), className),
+		ref,
+		...props
+	});
+}
+// src/components/input-group/input-group-input.tsx
+const DEFAULT_COLOR = "#000000";
+function getStringValue(value) {
+	if (typeof value === "string") return value;
+}
+function getColorValue(isControlled, controlledValue, uncontrolledValue) {
+	if (isControlled) return getStringValue(controlledValue) || DEFAULT_COLOR;
+	return uncontrolledValue || DEFAULT_COLOR;
+}
+function getColorInputProps(isControlled, colorValue) {
+	if (isControlled) return { value: colorValue };
+	return { defaultValue: colorValue };
+}
+function InputGroupInput({ size = "medium", className, ref, ...props }) {
+	const inputRef = useRef(null), [uncontrolledColorValue, setUncontrolledColorValue] = useState(getStringValue(props.defaultValue) || getStringValue(props.value) || DEFAULT_COLOR);
+	if (props.type === "color") {
+		const isControlled = props.value !== void 0, colorValue = getColorValue(isControlled, props.value, uncontrolledColorValue), { onChange, defaultValue: _defaultValue, value: _value, ...colorProps } = props, handleColorChange = (event) => {
+			if (!isControlled) setUncontrolledColorValue(event.currentTarget.value);
+			onChange?.(event);
+		}, handleColorRef = (node) => {
+			inputRef.current = node;
+			if (typeof ref === "function") {
+				ref(node);
+				return;
+			}
+			if (ref && typeof ref === "object") Object.assign(ref, { current: node });
+		};
+		return /* @__PURE__ */ jsxs("button", {
+			"aria-label": `${colorValue}, open color picker`,
+			className: cn("relative flex size-full items-center justify-start hover:cursor-pointer", className),
+			disabled: props.disabled,
+			onClick: () => inputRef.current?.click(),
+			type: "button",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("absolute top-1/2 left-0 aspect-square h-7/12 -translate-y-1/2", size === "small" && "rounded-md", size === "medium" && "rounded-lg", size === "large" && "rounded-xl"),
+					style: { backgroundColor: colorValue }
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					className: "peer pointer-events-none invisible absolute top-lg",
+					...getColorInputProps(isControlled, colorValue),
+					onChange: handleColorChange,
+					ref: handleColorRef,
+					type: "color",
+					...colorProps
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: cn("text-left", size === "small" && "pr-xs pl-lg style-text-default--1", size === "medium" && "pl-[calc(var(--ixia-spacing-lg)+6px)] style-text-default-0", size === "large" && "pl-2xl style-text-default-1"),
+					children: colorValue
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsx(Input, {
+		className: cn("w-full grow text-ellipsis outline-none placeholder:opacity-60 disabled:cursor-not-allowed", className),
+		ref,
+		...props
+	});
+}
+// src/components/input-group/input-group-separator.tsx
+function InputGroupSeparator({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		className: cn("h-2/4", className),
+		ref,
+		...props
+	});
+}
+// src/components/input-group/index.ts
+const InputGroup = Object.assign(InputGroup$1, {
+	Addon: InputGroupAddon,
+	Input: InputGroupInput,
+	Separator: InputGroupSeparator
+});
+export { InputGroupAddon as i, InputGroupSeparator as n, InputGroupInput as r, InputGroup as t };
+
+//# sourceMappingURL=input-group-CgdazGrY.js.map

package/dist/input-group-CgdazGrY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-CgdazGrY.js","names":["InputGroup","BaseInput","InputGroupRoot"],"sources":["../src/components/input-group/input-group.tsx","../src/components/input-group/input-group.types.ts","../src/components/input-group/input-group-addon.tsx","../src/components/input-group/input-group-input.tsx","../src/components/input-group/input-group-separator.tsx","../src/components/input-group/index.ts"],"sourcesContent":["import { cn } from '@/utils/cn'\n\nimport { inputVariants } from '../input/input.types'\nimport type { InputGroupProps } from './input-group.types'\n\nexport function InputGroup({ variant, size, className, ref, ...props }: InputGroupProps) {\n  return <div className={cn(inputVariants({ size, variant }), className)} ref={ref} {...props} />\n}\n","import type { Input as BaseInput } from '@base-ui/react/input'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nimport type { inputVariants } from '../input/input.types'\nimport type { Separator } from '../separator'\n\nconst inputGroupAddonVariants = cva(\n  'inline-flex items-center gap-2xs text-on-surface-variant not-first:pl-2xs group-aria-invalid:text-error-on-container',\n  {\n    defaultVariants: {\n      size: 'medium',\n    },\n    variants: {\n      size: {\n        large: 'style-text-default-1 [&>svg]:size-md',\n        medium: 'style-text-default-0 [&>svg]:size-sm',\n        small: 'style-text-default--1 [&>svg]:size-xs',\n      },\n    },\n  },\n)\n\ntype InputGroupAddonProps = React.ComponentProps<'div'> &\n  VariantProps<typeof inputGroupAddonVariants>\ntype InputGroupInputProps = Omit<React.ComponentProps<typeof BaseInput>, 'size'> &\n  VariantProps<typeof inputVariants>\ntype InputGroupProps = React.ComponentProps<'div'> & VariantProps<typeof inputVariants>\ntype InputGroupSeparatorProps = React.ComponentProps<typeof Separator>\n\nexport type {\n  InputGroupAddonProps,\n  InputGroupInputProps,\n  InputGroupProps,\n  InputGroupSeparatorProps,\n}\nexport { inputGroupAddonVariants }\n","import { cn } from '@/utils/cn'\n\nimport { inputGroupAddonVariants } from './input-group.types'\nimport type { InputGroupAddonProps } from './input-group.types'\n\nexport function InputGroupAddon({ size, className, ref, ...props }: InputGroupAddonProps) {\n  return <div className={cn(inputGroupAddonVariants({ size }), className)} ref={ref} {...props} />\n}\n","import { Input as BaseInput } from '@base-ui/react/input'\nimport { useRef, useState } from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { InputGroupInputProps } from './input-group.types'\n\nconst DEFAULT_COLOR = '#000000'\n\nfunction getStringValue(value: unknown): string | undefined {\n  if (typeof value === 'string') {\n    return value\n  }\n  return undefined\n}\n\nfunction getColorValue(\n  isControlled: boolean,\n  controlledValue: unknown,\n  uncontrolledValue: string,\n): string {\n  if (isControlled) {\n    return getStringValue(controlledValue) || DEFAULT_COLOR\n  }\n  return uncontrolledValue || DEFAULT_COLOR\n}\n\nfunction getColorInputProps(isControlled: boolean, colorValue: string) {\n  if (isControlled) {\n    return { value: colorValue }\n  }\n  return { defaultValue: colorValue }\n}\n\nexport function InputGroupInput({\n  size = 'medium',\n  className,\n  ref,\n  ...props\n}: InputGroupInputProps) {\n  const inputRef = useRef<HTMLInputElement>(null),\n    [uncontrolledColorValue, setUncontrolledColorValue] = useState<string>(\n      getStringValue(props.defaultValue) || getStringValue(props.value) || DEFAULT_COLOR,\n    )\n\n  if (props.type === 'color') {\n    const isControlled = props.value !== undefined,\n      colorValue = getColorValue(isControlled, props.value, uncontrolledColorValue),\n      { onChange, defaultValue: _defaultValue, value: _value, ...colorProps } = props,\n      handleColorChange: NonNullable<typeof onChange> = (event) => {\n        if (!isControlled) {\n          setUncontrolledColorValue(event.currentTarget.value)\n        }\n\n        onChange?.(event)\n      },\n      handleColorRef = (node: HTMLInputElement | null) => {\n        inputRef.current = node\n\n        if (typeof ref === 'function') {\n          ref(node)\n          return\n        }\n\n        if (ref && typeof ref === 'object') {\n          Object.assign(ref, { current: node })\n        }\n      }\n\n    return (\n      <button\n        aria-label={`${colorValue}, open color picker`}\n        className={cn(\n          'relative flex size-full items-center justify-start hover:cursor-pointer',\n          className,\n        )}\n        disabled={props.disabled}\n        onClick={() => inputRef.current?.click()}\n        type=\"button\"\n      >\n        <div\n          className={cn(\n            'absolute top-1/2 left-0 aspect-square h-7/12 -translate-y-1/2',\n            size === 'small' && 'rounded-md',\n            size === 'medium' && 'rounded-lg',\n            size === 'large' && 'rounded-xl',\n          )}\n          style={{\n            backgroundColor: colorValue,\n          }}\n        />\n        <BaseInput\n          className=\"peer pointer-events-none invisible absolute top-lg\"\n          {...getColorInputProps(isControlled, colorValue)}\n          onChange={handleColorChange}\n          ref={handleColorRef}\n          type=\"color\"\n          {...colorProps}\n        />\n        <p\n          className={cn(\n            'text-left',\n            size === 'small' && 'pr-xs pl-lg style-text-default--1',\n            size === 'medium' && 'pl-[calc(var(--ixia-spacing-lg)+6px)] style-text-default-0',\n            size === 'large' && 'pl-2xl style-text-default-1',\n          )}\n        >\n          {colorValue}\n        </p>\n      </button>\n    )\n  }\n\n  return (\n    <BaseInput\n      className={cn(\n        'w-full grow text-ellipsis outline-none placeholder:opacity-60 disabled:cursor-not-allowed',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { Separator } from '../separator'\nimport type { InputGroupSeparatorProps } from './input-group.types'\n\nexport function InputGroupSeparator({ className, ref, ...props }: InputGroupSeparatorProps) {\n  return <Separator className={cn('h-2/4', className)} ref={ref} {...props} />\n}\n","import { InputGroup as InputGroupRoot } from './input-group'\nimport { InputGroupAddon } from './input-group-addon'\nimport { InputGroupInput } from './input-group-input'\nimport { InputGroupSeparator } from './input-group-separator'\n\nconst InputGroup = Object.assign(InputGroupRoot, {\n  Addon: InputGroupAddon,\n  Input: InputGroupInput,\n  Separator: InputGroupSeparator,\n})\n\nexport type {\n  InputGroupAddonProps,\n  InputGroupInputProps,\n  InputGroupProps,\n  InputGroupSeparatorProps,\n} from './input-group.types'\nexport { InputGroupAddon } from './input-group-addon'\nexport { InputGroupInput } from './input-group-input'\nexport { InputGroupSeparator } from './input-group-separator'\n\nexport { InputGroup }\n"],"mappings":";;;;;;;;AAKA,SAAgBA,aAAW,EAAE,SAAS,MAAM,WAAW,KAAK,GAAG,SAA0B;CACvF,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,cAAc;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAAQ;EAAK,GAAI;CAAQ,CAAA;AAChG;;ACAA,MAAM,0BAA0B,IAC9B,wHACA;CACE,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,OAAO;CACT,EACF;AACF,CACF;;AChBA,SAAgB,gBAAgB,EAAE,MAAM,WAAW,KAAK,GAAG,SAA+B;CACxF,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,wBAAwB,EAAE,KAAK,CAAC,GAAG,SAAS;EAAQ;EAAK,GAAI;CAAQ,CAAA;AACjG;;ACAA,MAAM,gBAAgB;AAEtB,SAAS,eAAe,OAAoC;CAC1D,IAAI,OAAO,UAAU,UACnB,OAAO;AAGX;AAEA,SAAS,cACP,cACA,iBACA,mBACQ;CACR,IAAI,cACF,OAAO,eAAe,eAAe,KAAK;CAE5C,OAAO,qBAAqB;AAC9B;AAEA,SAAS,mBAAmB,cAAuB,YAAoB;CACrE,IAAI,cACF,OAAO,EAAE,OAAO,WAAW;CAE7B,OAAO,EAAE,cAAc,WAAW;AACpC;AAEA,SAAgB,gBAAgB,EAC9B,OAAO,UACP,WACA,KACA,GAAG,SACoB;CACvB,MAAM,WAAW,OAAyB,IAAI,GAC5C,CAAC,wBAAwB,6BAA6B,SACpD,eAAe,MAAM,YAAY,KAAK,eAAe,MAAM,KAAK,KAAK,aACvE;CAEF,IAAI,MAAM,SAAS,SAAS;EAC1B,MAAM,eAAe,MAAM,UAAU,KAAA,GACnC,aAAa,cAAc,cAAc,MAAM,OAAO,sBAAsB,GAC5E,EAAE,UAAU,cAAc,eAAe,OAAO,QAAQ,GAAG,eAAe,OAC1E,qBAAmD,UAAU;GAC3D,IAAI,CAAC,cACH,0BAA0B,MAAM,cAAc,KAAK;GAGrD,WAAW,KAAK;EAClB,GACA,kBAAkB,SAAkC;GAClD,SAAS,UAAU;GAEnB,IAAI,OAAO,QAAQ,YAAY;IAC7B,IAAI,IAAI;IACR;GACF;GAEA,IAAI,OAAO,OAAO,QAAQ,UACxB,OAAO,OAAO,KAAK,EAAE,SAAS,KAAK,CAAC;EAExC;EAEF,OACE,qBAAC,UAAD;GACE,cAAY,GAAG,WAAW;GAC1B,WAAW,GACT,2EACA,SACF;GACA,UAAU,MAAM;GAChB,eAAe,SAAS,SAAS,MAAM;GACvC,MAAK;GARP,UAAA;IAUE,oBAAC,OAAD;KACE,WAAW,GACT,iEACA,SAAS,WAAW,cACpB,SAAS,YAAY,cACrB,SAAS,WAAW,YACtB;KACA,OAAO,EACL,iBAAiB,WACnB;IACD,CAAA;IACD,oBAACC,OAAD;KACE,WAAU;KACV,GAAI,mBAAmB,cAAc,UAAU;KAC/C,UAAU;KACV,KAAK;KACL,MAAK;KACL,GAAI;IACL,CAAA;IACD,oBAAC,KAAD;KACE,WAAW,GACT,aACA,SAAS,WAAW,qCACpB,SAAS,YAAY,8DACrB,SAAS,WAAW,6BACtB;KAEC,UAAA;IACA,CAAA;GACG;;CAEZ;CAEA,OACE,oBAACA,OAAD;EACE,WAAW,GACT,6FACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACtHA,SAAgB,oBAAoB,EAAE,WAAW,KAAK,GAAG,SAAmC;CAC1F,OAAO,oBAAC,WAAD;EAAW,WAAW,GAAG,SAAS,SAAS;EAAQ;EAAK,GAAI;CAAQ,CAAA;AAC7E;;ACFA,MAAM,aAAa,OAAO,OAAOC,cAAgB;CAC/C,OAAO;CACP,OAAO;CACP,WAAW;AACb,CAAC"}

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

@@ -0,0 +1,13 @@
+import { OTPField } from "@base-ui/react";
+type InputOTPProps = React.ComponentProps<typeof OTPField.Root>;
+type InputOTPSlotProps = React.ComponentProps<typeof OTPField.Input>;
+type InputOtpSeparatorProps = React.ComponentProps<typeof OTPField.Separator>;
+declare function InputOTP$1({ children, className, id, ref, ...props }: InputOTPProps): import("react").JSX.Element;
+export declare function InputOtpSeparator({ className, children, ref, ...props }: InputOtpSeparatorProps): import("react").JSX.Element;
+export declare function InputOTPSlot({ className, ...props }: InputOTPSlotProps): import("react").JSX.Element;
+declare const InputOTP: typeof InputOTP$1 & {
+  Separator: typeof InputOtpSeparator;
+  Slot: typeof InputOTPSlot;
+};
+export { InputOTP, type InputOTPProps, type InputOTPSlotProps, type InputOtpSeparatorProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/input-otp/index.js

@@ -0,0 +1,44 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { n as Icon } from "../icon-D3JWfCa2.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { OTPField } from "@base-ui/react";
+// src/components/input-otp/input-otp.tsx
+function InputOTP$1({ children, className, id, ref, ...props }) {
+	const generatedId = useId(), fieldId = id ?? generatedId;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
+		htmlFor: fieldId,
+		className: "sr-only",
+		children: "One-time password"
+	}), /* @__PURE__ */ jsx(OTPField.Root, {
+		id: fieldId,
+		className: cn("group flex items-center gap-2xs has-disabled:opacity-30", className),
+		ref,
+		...props,
+		children
+	})] });
+}
+// src/components/input-otp/input-otp-separator.tsx
+function InputOtpSeparator({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(OTPField.Separator, {
+		className: cn("flex items-center justify-center text-on-surface-variant", className),
+		ref,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, { name: "minus" })
+	});
+}
+// src/components/input-otp/input-otp-slot.tsx
+function InputOTPSlot({ className, ...props }) {
+	return /* @__PURE__ */ jsx(OTPField.Input, {
+		className: cn("relative h-lg w-md rounded-md bg-surface text-center style-text-default-0 shadow-2xs outline outline-transparent transition-colors hover:outline-border-strong focus:outline-brand-border-strong", className),
+		...props
+	});
+}
+// src/components/input-otp/index.ts
+const InputOTP = Object.assign(InputOTP$1, {
+	Separator: InputOtpSeparator,
+	Slot: InputOTPSlot
+});
+export { InputOTP, InputOTPSlot, InputOtpSeparator };
+
+//# sourceMappingURL=index.js.map

package/dist/input-otp/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["InputOTP","InputOTPRoot"],"sources":["../../src/components/input-otp/input-otp.tsx","../../src/components/input-otp/input-otp-separator.tsx","../../src/components/input-otp/input-otp-slot.tsx","../../src/components/input-otp/index.ts"],"sourcesContent":["import { OTPField } from '@base-ui/react'\nimport { useId } from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { InputOTPProps } from './input-otp.types'\n\nexport function InputOTP({ children, className, id, ref, ...props }: InputOTPProps) {\n  const generatedId = useId(),\n    fieldId = id ?? generatedId\n  return (\n    <>\n      <label htmlFor={fieldId} className=\"sr-only\">\n        One-time password\n      </label>\n      <OTPField.Root\n        id={fieldId}\n        className={cn('group flex items-center gap-2xs has-disabled:opacity-30', className)}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </OTPField.Root>\n    </>\n  )\n}\n","import { OTPField } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport { Icon } from '../icon'\nimport type { InputOtpSeparatorProps } from './input-otp.types'\n\nexport function InputOtpSeparator({ className, children, ref, ...props }: InputOtpSeparatorProps) {\n  return (\n    <OTPField.Separator\n      className={cn('flex items-center justify-center text-on-surface-variant', className)}\n      ref={ref}\n      {...props}\n    >\n      {children ?? <Icon name=\"minus\" />}\n    </OTPField.Separator>\n  )\n}\n","import { OTPField } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { InputOTPSlotProps } from './input-otp.types'\n\nexport function InputOTPSlot({ className, ...props }: InputOTPSlotProps) {\n  return (\n    <OTPField.Input\n      className={cn(\n        'relative h-lg w-md rounded-md bg-surface text-center style-text-default-0 shadow-2xs outline outline-transparent transition-colors hover:outline-border-strong focus:outline-brand-border-strong',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n","import { InputOTP as InputOTPRoot } from './input-otp'\nimport { InputOtpSeparator } from './input-otp-separator'\nimport { InputOTPSlot } from './input-otp-slot'\n\nconst InputOTP = Object.assign(InputOTPRoot, {\n  Separator: InputOtpSeparator,\n  Slot: InputOTPSlot,\n})\n\nexport type { InputOTPProps, InputOTPSlotProps, InputOtpSeparatorProps } from './input-otp.types'\nexport { InputOTPSlot } from './input-otp-slot'\nexport { InputOtpSeparator } from './input-otp-separator'\n\nexport { InputOTP }\n"],"mappings":";;;;;;AAOA,SAAgBA,WAAS,EAAE,UAAU,WAAW,IAAI,KAAK,GAAG,SAAwB;CAClF,MAAM,cAAc,MAAM,GACxB,UAAU,MAAM;CAClB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS;EAAS,WAAU;EAAU,UAAA;CAEtC,CAAA,GACP,oBAAC,SAAS,MAAV;EACE,IAAI;EACJ,WAAW,GAAG,2DAA2D,SAAS;EAC7E;EACL,GAAI;EAEH;CACY,CAAA,CACf,EAAA,CAAA;AAEN;;AClBA,SAAgB,kBAAkB,EAAE,WAAW,UAAU,KAAK,GAAG,SAAiC;CAChG,OACE,oBAAC,SAAS,WAAV;EACE,WAAW,GAAG,4DAA4D,SAAS;EAC9E;EACL,GAAI;EAEH,UAAA,YAAY,oBAAC,MAAD,EAAM,MAAK,QAAS,CAAA;CACf,CAAA;AAExB;;ACXA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA4B;CACvE,OACE,oBAAC,SAAS,OAAV;EACE,WAAW,GACT,oMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;ACZA,MAAM,WAAW,OAAO,OAAOC,YAAc;CAC3C,WAAW;CACX,MAAM;AACR,CAAC"}

package/dist/input.types-816rEVWU.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+import { Input } from "@base-ui/react/input";
+declare const formatFileSize: (bytes: number) => string, inputVariants: (props?: ({
+  size?: "large" | "medium" | "small" | null | undefined;
+  variant?: "ghost" | "outline" | "primary" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InputProps = VariantProps<typeof inputVariants> & Omit<ComponentProps<typeof Input>, 'size'> & {
+  fileUploadButtonLabel?: string;
+  fileUploadButtonIcon?: React.ReactNode;
+  maxFiles?: number;
+  maxFileSize?: number;
+  clearFilesLabel?: string;
+  filesSelectedLabel?: (count: number) => string;
+  maxFilesErrorLabel?: (maxFiles: number) => string;
+  maxFileSizeErrorLabel?: (fileName: string, maxFileSize: string) => string;
+  compact?: boolean;
+};
+export { inputVariants as n, InputProps as t };
+//# sourceMappingURL=input.types-816rEVWU.d.ts.map

package/dist/input.types-D0gyoaQv.js

@@ -0,0 +1,48 @@
+import { cva } from "class-variance-authority";
+// src/components/input/input.types.tsx
+const BYTES_PER_KILOBYTE = 1e3;
+const INITIAL_UNIT_INDEX = 0;
+const INTEGER_PRECISION = 0;
+const FRACTIONAL_PRECISION = 1;
+const UNIT_INDEX_INCREMENT = 1;
+const getPrecision = (size) => {
+	if (Number.isInteger(size)) return INTEGER_PRECISION;
+	return FRACTIONAL_PRECISION;
+};
+const formatFileSize = (bytes) => {
+	if (bytes < BYTES_PER_KILOBYTE) return `${bytes} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let size = bytes / BYTES_PER_KILOBYTE, unitIndex = INITIAL_UNIT_INDEX;
+	while (size >= BYTES_PER_KILOBYTE && unitIndex < units.length - UNIT_INDEX_INCREMENT) {
+		size /= BYTES_PER_KILOBYTE;
+		unitIndex += UNIT_INDEX_INCREMENT;
+	}
+	return `${size.toFixed(getPrecision(size))} ${units[unitIndex]}`;
+};
+const inputVariants = cva("group flex w-full items-center text-ellipsis caret-brand-border-strong outline outline-transparent transition-all placeholder:opacity-60 focus-within:outline-brand-border-strong not-focus-within:hover:outline-border-strong disabled:cursor-not-allowed aria-invalid:bg-error-container aria-invalid:text-error-on-container aria-invalid:caret-error-border-strong aria-invalid:outline-error-border aria-invalid:focus-within:outline-error-border-strong aria-invalid:not-focus-within:hover:outline-error-border data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50", {
+	defaultVariants: {
+		size: "medium",
+		variant: "primary"
+	},
+	variants: {
+		size: {
+			large: "h-2xl gap-xs rounded-2xl px-md style-text-prose-1",
+			medium: "h-xl gap-2xs rounded-xl px-sm style-text-prose-0",
+			small: "h-lg gap-3xs rounded-lg pr-3xs pl-xs style-text-prose--1"
+		},
+		variant: {
+			ghost: "bg-transparent",
+			outline: "bg-transparent outline outline-border",
+			primary: "bg-surface shadow-2xs",
+			secondary: "bg-neutral-container"
+		}
+	}
+});
+export { inputVariants as n, formatFileSize as t };
+
+//# sourceMappingURL=input.types-D0gyoaQv.js.map

package/dist/input.types-D0gyoaQv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.types-D0gyoaQv.js","names":[],"sources":["../src/components/input/input.types.tsx"],"sourcesContent":["import type { Input as BaseInput } from '@base-ui/react/input'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\nimport type { ComponentProps } from 'react'\n\nconst BYTES_PER_KILOBYTE = 1000,\n  INITIAL_UNIT_INDEX = 0,\n  INTEGER_PRECISION = 0,\n  FRACTIONAL_PRECISION = 1,\n  UNIT_INDEX_INCREMENT = 1,\n  getPrecision = (size: number): number => {\n    if (Number.isInteger(size)) {\n      return INTEGER_PRECISION\n    }\n    return FRACTIONAL_PRECISION\n  },\n  formatFileSize = (bytes: number): string => {\n    if (bytes < BYTES_PER_KILOBYTE) {\n      return `${bytes} B`\n    }\n\n    const units = ['KB', 'MB', 'GB', 'TB']\n    let size = bytes / BYTES_PER_KILOBYTE,\n      unitIndex = INITIAL_UNIT_INDEX\n\n    while (size >= BYTES_PER_KILOBYTE && unitIndex < units.length - UNIT_INDEX_INCREMENT) {\n      size /= BYTES_PER_KILOBYTE\n      unitIndex += UNIT_INDEX_INCREMENT\n    }\n\n    return `${size.toFixed(getPrecision(size))} ${units[unitIndex]}`\n  },\n  inputVariants = cva(\n    'group flex w-full items-center text-ellipsis caret-brand-border-strong outline outline-transparent transition-all placeholder:opacity-60 focus-within:outline-brand-border-strong not-focus-within:hover:outline-border-strong disabled:cursor-not-allowed aria-invalid:bg-error-container aria-invalid:text-error-on-container aria-invalid:caret-error-border-strong aria-invalid:outline-error-border aria-invalid:focus-within:outline-error-border-strong aria-invalid:not-focus-within:hover:outline-error-border data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',\n    {\n      defaultVariants: {\n        size: 'medium',\n        variant: 'primary',\n      },\n      variants: {\n        size: {\n          large: 'h-2xl gap-xs rounded-2xl px-md style-text-prose-1',\n          medium: 'h-xl gap-2xs rounded-xl px-sm style-text-prose-0',\n          small: 'h-lg gap-3xs rounded-lg pr-3xs pl-xs style-text-prose--1',\n        },\n        variant: {\n          ghost: 'bg-transparent',\n          outline: 'bg-transparent outline outline-border',\n          primary: 'bg-surface shadow-2xs',\n          secondary: 'bg-neutral-container',\n        },\n      },\n    },\n  )\n\ntype InputProps = VariantProps<typeof inputVariants> &\n  Omit<ComponentProps<typeof BaseInput>, 'size'> & {\n    fileUploadButtonLabel?: string\n    fileUploadButtonIcon?: React.ReactNode\n    maxFiles?: number\n    maxFileSize?: number\n    clearFilesLabel?: string\n    filesSelectedLabel?: (count: number) => string\n    maxFilesErrorLabel?: (maxFiles: number) => string\n    maxFileSizeErrorLabel?: (fileName: string, maxFileSize: string) => string\n    compact?: boolean\n  }\n\nexport { formatFileSize, inputVariants, type InputProps }\n"],"mappings":";;AAKA,MAAM,qBAAqB;AACzB,MAAA,qBAAqB;AACrB,MAAA,oBAAoB;AACpB,MAAA,uBAAuB;AACvB,MAAA,uBAAuB;AACvB,MAAA,gBAAgB,SAAyB;CACvC,IAAI,OAAO,UAAU,IAAI,GACvB,OAAO;CAET,OAAO;AACT;AACA,MAAA,kBAAkB,UAA0B;CAC1C,IAAI,QAAQ,oBACV,OAAO,GAAG,MAAM;CAGlB,MAAM,QAAQ;EAAC;EAAM;EAAM;EAAM;CAAI;CACrC,IAAI,OAAO,QAAQ,oBACjB,YAAY;CAEd,OAAO,QAAQ,sBAAsB,YAAY,MAAM,SAAS,sBAAsB;EACpF,QAAQ;EACR,aAAa;CACf;CAEA,OAAO,GAAG,KAAK,QAAQ,aAAa,IAAI,CAAC,EAAE,GAAG,MAAM;AACtD;AACA,MAAA,gBAAgB,IACd,mkBACA;CACE,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;EACT;EACA,SAAS;GACP,OAAO;GACP,SAAS;GACT,SAAS;GACT,WAAW;EACb;CACF;AACF,CACF"}

package/dist/kbd/index.d.ts

@@ -0,0 +1,9 @@
+type KbdProps = React.ComponentProps<'div'>;
+type KbdGroupProps = React.ComponentProps<'div'>;
+declare function Kbd$1({ className, children, ref, ...props }: KbdProps): import("react").JSX.Element;
+export declare function KbdGroup({ className, ref, ...props }: KbdGroupProps): import("react").JSX.Element;
+declare const Kbd: typeof Kbd$1 & {
+  Group: typeof KbdGroup;
+};
+export { Kbd, type KbdGroupProps, type KbdProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/kbd/index.js

@@ -0,0 +1,25 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { t as trimTextChildren } from "../trim-text-children-CQRFg2fL.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/kbd/kbd.tsx
+function Kbd$1({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("inline-flex h-md items-center justify-center rounded-full bg-neutral-container-high px-2xs align-middle style-text-default--2 whitespace-nowrap text-neutral-on-container select-none has-[svg]:size-md has-[svg]:p-0 [&>svg]:size-sm", className),
+		ref,
+		...props,
+		children: trimTextChildren(children)
+	});
+}
+// src/components/kbd/kbd-group.tsx
+function KbdGroup({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center gap-2xs", className),
+		ref,
+		...props
+	});
+}
+// src/components/kbd/index.ts
+const Kbd = Object.assign(Kbd$1, { Group: KbdGroup });
+export { Kbd, KbdGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/kbd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Kbd","KbdRoot"],"sources":["../../src/components/kbd/kbd.tsx","../../src/components/kbd/kbd-group.tsx","../../src/components/kbd/index.ts"],"sourcesContent":["import { cn } from '@/utils/cn'\nimport { trimTextChildren } from '@/utils/trim-text-children'\n\nimport type { KbdProps } from './kbd.types'\n\nexport function Kbd({ className, children, ref, ...props }: KbdProps) {\n  return (\n    <div\n      className={cn(\n        'inline-flex h-md items-center justify-center rounded-full bg-neutral-container-high px-2xs align-middle style-text-default--2 whitespace-nowrap text-neutral-on-container select-none has-[svg]:size-md has-[svg]:p-0 [&>svg]:size-sm',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      {trimTextChildren(children)}\n    </div>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { KbdGroupProps } from './kbd.types'\n\nexport function KbdGroup({ className, ref, ...props }: KbdGroupProps) {\n  return (\n    <div\n      className={cn('flex items-center justify-center gap-2xs', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { Kbd as KbdRoot } from './kbd'\nimport { KbdGroup } from './kbd-group'\n\nconst Kbd = Object.assign(KbdRoot, {\n  Group: KbdGroup,\n})\n\nexport type { KbdGroupProps, KbdProps } from './kbd.types'\nexport { KbdGroup } from './kbd-group'\nexport { Kbd }\n"],"mappings":";;;;AAKA,SAAgBA,MAAI,EAAE,WAAW,UAAU,KAAK,GAAG,SAAmB;CACpE,OACE,oBAAC,OAAD;EACE,WAAW,GACT,yOACA,SACF;EACK;EACL,GAAI;EAEH,UAAA,iBAAiB,QAAQ;CACvB,CAAA;AAET;;ACdA,SAAgB,SAAS,EAAE,WAAW,KAAK,GAAG,SAAwB;CACpE,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,4CAA4C,SAAS;EAC9D;EACL,GAAI;CACL,CAAA;AAEL;;ACTA,MAAM,MAAM,OAAO,OAAOC,OAAS,EACjC,OAAO,SACT,CAAC"}

package/dist/label/index.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from "class-variance-authority";
+type LabelProps = React.ComponentProps<'label'> & VariantProps<typeof labelVariants>;
+declare const labelVariants: (props?: ({
+  size?: "large" | "medium" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function Label({ className, ref, size, ...props }: LabelProps): import("react").JSX.Element;
+export type { LabelProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/label/index.js

@@ -0,0 +1 @@
+export { t as Label } from "../label-BgpayDvN.js";

package/dist/label-BgpayDvN.js

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+// src/components/label/label.types.ts
+const labelVariants = cva("flex items-center gap-2xs select-none hover:cursor-pointer", {
+	defaultVariants: { size: "medium" },
+	variants: { size: {
+		large: "style-text-default-1",
+		medium: "style-text-default-0",
+		small: "style-text-default--1"
+	} }
+});
+// src/components/label/label.tsx
+function Label({ className, ref, size, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		className: labelVariants({
+			className,
+			size
+		}),
+		"data-slot": "label",
+		htmlFor: props.htmlFor,
+		ref,
+		...props
+	});
+}
+export { Label as t };
+
+//# sourceMappingURL=label-BgpayDvN.js.map

package/dist/label-BgpayDvN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-BgpayDvN.js","names":[],"sources":["../src/components/label/label.types.ts","../src/components/label/label.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nexport type LabelProps = React.ComponentProps<'label'> & VariantProps<typeof labelVariants>\n\nexport const labelVariants = cva('flex items-center gap-2xs select-none hover:cursor-pointer', {\n  defaultVariants: {\n    size: 'medium',\n  },\n  variants: {\n    size: {\n      large: 'style-text-default-1',\n      medium: 'style-text-default-0',\n      small: 'style-text-default--1',\n    },\n  },\n})\n","import { labelVariants } from './label.types'\nimport type { LabelProps } from './label.types'\n\nexport function Label({ className, ref, size, ...props }: LabelProps) {\n  return (\n    <label\n      className={labelVariants({ className, size })}\n      data-slot=\"label\"\n      htmlFor={props.htmlFor}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;AAKA,MAAa,gBAAgB,IAAI,8DAA8D;CAC7F,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,OAAO;CACT,EACF;AACF,CAAC;;ACbD,SAAgB,MAAM,EAAE,WAAW,KAAK,MAAM,GAAG,SAAqB;CACpE,OACE,oBAAC,SAAD;EACE,WAAW,cAAc;GAAE;GAAW;EAAK,CAAC;EAC5C,aAAU;EACV,SAAS,MAAM;EACV;EACL,GAAI;CACL,CAAA;AAEL"}