moduix 0.10.0 → 0.11.1

package/dist/components/NumberField/NumberField.cjs

@@ -0,0 +1,82 @@
+const require_Icons = require("../../icons/ui/Icons.cjs");
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_NumberField_module = require("./NumberField.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_number_field = require("@base-ui/react/number-field");
+//#region src/components/NumberField/NumberField.tsx
+const DEFAULT_DECREMENT_LABEL = "Decrease value";
+const DEFAULT_INCREMENT_LABEL = "Increase value";
+function NumberFieldRoot({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.Root, {
+		"data-slot": "number-field-root",
+		className: require_mergeClassName.mergeClassName(className, require_NumberField_module.default.root),
+		...props
+	});
+}
+function NumberField({ className, children, decrementLabel = DEFAULT_DECREMENT_LABEL, incrementLabel = DEFAULT_INCREMENT_LABEL, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NumberFieldRoot, {
+		className,
+		...props,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NumberFieldGroup, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberFieldDecrement, { "aria-label": decrementLabel }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberFieldInput, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberFieldIncrement, { "aria-label": incrementLabel })
+		] })]
+	});
+}
+function NumberFieldScrubArea({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.ScrubArea, {
+		"data-slot": "number-field-scrub-area",
+		className: require_mergeClassName.mergeClassName(className, require_NumberField_module.default.scrubArea),
+		...props
+	});
+}
+function NumberFieldScrubAreaCursor({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.ScrubAreaCursor, {
+		"data-slot": "number-field-scrub-area-cursor",
+		className: require_mergeClassName.mergeClassName(className, require_NumberField_module.default.scrubAreaCursor),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.ScrubCursorIcon, {})
+	});
+}
+function NumberFieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.Group, {
+		"data-slot": "number-field-group",
+		className: require_mergeClassName.mergeClassName(className, require_NumberField_module.default.group),
+		...props
+	});
+}
+function NumberFieldDecrement({ className, children, "aria-label": ariaLabel = DEFAULT_DECREMENT_LABEL, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.Decrement, {
+		"data-slot": "number-field-decrement",
+		"aria-label": ariaLabel,
+		className: require_mergeClassName.mergeClassName(className, require_NumberField_module.default.decrement),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.MinusIcon, {})
+	});
+}
+function NumberFieldInput({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.Input, {
+		"data-slot": "number-field-input",
+		className: require_mergeClassName.mergeClassName(className, require_NumberField_module.default.input),
+		...props
+	});
+}
+function NumberFieldIncrement({ className, children, "aria-label": ariaLabel = DEFAULT_INCREMENT_LABEL, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.Increment, {
+		"data-slot": "number-field-increment",
+		"aria-label": ariaLabel,
+		className: require_mergeClassName.mergeClassName(className, require_NumberField_module.default.increment),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.PlusIcon, {})
+	});
+}
+//#endregion
+exports.NumberField = NumberField;
+exports.NumberFieldDecrement = NumberFieldDecrement;
+exports.NumberFieldGroup = NumberFieldGroup;
+exports.NumberFieldIncrement = NumberFieldIncrement;
+exports.NumberFieldInput = NumberFieldInput;
+exports.NumberFieldRoot = NumberFieldRoot;
+exports.NumberFieldScrubArea = NumberFieldScrubArea;
+exports.NumberFieldScrubAreaCursor = NumberFieldScrubAreaCursor;

package/dist/components/NumberField/NumberField.css

@@ -0,0 +1,158 @@
+@layer ui.components {
+  .YMhIBW_root {
+    align-items: flex-start;
+    gap: var(--number-field-gap, var(--spacing-1));
+    width: var(--number-field-width, auto);
+    max-width: var(--number-field-max-width, none);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .YMhIBW_scrubArea {
+    align-items: center;
+    gap: var(--number-field-scrub-area-gap, var(--spacing-2));
+    color: var(--number-field-scrub-area-color, var(--color-foreground));
+    user-select: none;
+    cursor: ew-resize;
+    display: inline-flex;
+
+    &[data-disabled], &[data-readonly] {
+      cursor: default;
+      opacity: var(--number-field-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .YMhIBW_scrubAreaCursor {
+    width: var(--number-field-scrub-area-cursor-size, 1.5rem);
+    height: var(--number-field-scrub-area-cursor-size, 1.5rem);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .YMhIBW_group {
+    align-items: stretch;
+    display: inline-flex;
+  }
+
+  .YMhIBW_decrement, .YMhIBW_increment {
+    --_number-field-focus-ring-width: var(--number-field-focus-ring-width, var(--number-field-border-width, var(--border-width-sm)));
+    box-sizing: border-box;
+    width: var(--number-field-control-height, var(--size-lg));
+    min-width: var(--number-field-control-height, var(--size-lg));
+    height: var(--number-field-control-height, var(--size-lg));
+    border: var(--number-field-border-width, var(--border-width-sm))
+      var(--number-field-border-style, solid) var(--number-field-border-color, var(--color-border));
+    background-color: var(--number-field-button-bg, var(--color-background));
+    color: var(--number-field-button-color, var(--color-foreground));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default),
+      opacity var(--transition-default);
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--number-field-button-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active {
+      background-color: var(--number-field-button-bg-active, var(--number-field-button-bg-hover, var(--color-accent)));
+    }
+
+    &:focus-visible {
+      outline: var(--_number-field-focus-ring-width) solid
+        var(--number-field-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--_number-field-focus-ring-width) * -1);
+      z-index: 1;
+    }
+
+    &[data-disabled], &[data-readonly], &:disabled {
+      opacity: var(--number-field-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+
+    &[data-invalid] {
+      border-color: var(--number-field-border-color-invalid, var(--color-destructive));
+    }
+
+    & > svg {
+      width: var(--number-field-icon-size, .875rem);
+      height: var(--number-field-icon-size, .875rem);
+      flex-shrink: 0;
+    }
+  }
+
+  .YMhIBW_decrement {
+    border-radius: var(--number-field-radius, var(--radius-md)) 0 0
+      var(--number-field-radius, var(--radius-md));
+    border-right: 0;
+  }
+
+  .YMhIBW_increment {
+    border-radius: 0 var(--number-field-radius, var(--radius-md))
+      var(--number-field-radius, var(--radius-md)) 0;
+    border-left: 0;
+  }
+
+  .YMhIBW_input {
+    --_number-field-focus-ring-width: var(--number-field-focus-ring-width, var(--number-field-border-width, var(--border-width-sm)));
+    box-sizing: border-box;
+    width: var(--number-field-input-width, 6rem);
+    height: var(--number-field-control-height, var(--size-lg));
+    border-top: var(--number-field-border-width, var(--border-width-sm))
+      var(--number-field-border-style, solid) var(--number-field-border-color, var(--color-border));
+    border-bottom: var(--number-field-border-width, var(--border-width-sm))
+      var(--number-field-border-style, solid) var(--number-field-border-color, var(--color-border));
+    padding: var(--number-field-input-padding-y, .5rem)
+      var(--number-field-input-padding-x, .75rem);
+    background-color: var(--number-field-input-bg, var(--color-background));
+    color: var(--number-field-input-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--number-field-input-font-size, var(--text-md));
+    line-height: var(--number-field-input-line-height, var(--line-height-text-md));
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    outline: var(--_number-field-focus-ring-width) solid transparent;
+    outline-offset: calc(var(--_number-field-focus-ring-width) * -1);
+    transition: border-color var(--transition-default),
+      outline-color var(--transition-default),
+      opacity var(--transition-default);
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    margin: 0;
+
+    &:focus-visible {
+      outline-color: var(--number-field-focus-ring-color, var(--color-ring));
+      z-index: 1;
+    }
+
+    &[data-invalid] {
+      border-top-color: var(--number-field-border-color-invalid, var(--color-destructive));
+      border-bottom-color: var(--number-field-border-color-invalid, var(--color-destructive));
+    }
+
+    &[data-invalid]:focus-visible {
+      outline-color: var(--number-field-border-color-invalid, var(--color-destructive));
+    }
+
+    &[data-disabled], &[data-readonly] {
+      opacity: var(--number-field-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+}

package/dist/components/NumberField/NumberField.d.ts

@@ -1,13 +1,49 @@
-import { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';
-declare function NumberFieldRoot({ className, ...props }: NumberFieldPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
-declare function NumberField({ className, children, decrementLabel, incrementLabel, ...props }: NumberFieldPrimitive.Root.Props & {
-    decrementLabel?: string;
-    incrementLabel?: string;
-}): import("react/jsx-runtime").JSX.Element;
-declare function NumberFieldScrubArea({ className, ...props }: NumberFieldPrimitive.ScrubArea.Props): import("react/jsx-runtime").JSX.Element;
-declare function NumberFieldScrubAreaCursor({ className, children, ...props }: NumberFieldPrimitive.ScrubAreaCursor.Props): import("react/jsx-runtime").JSX.Element;
-declare function NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
-declare function NumberFieldDecrement({ className, children, 'aria-label': ariaLabel, ...props }: NumberFieldPrimitive.Decrement.Props): import("react/jsx-runtime").JSX.Element;
-declare function NumberFieldInput({ className, ...props }: NumberFieldPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
-declare function NumberFieldIncrement({ className, children, 'aria-label': ariaLabel, ...props }: NumberFieldPrimitive.Increment.Props): import("react/jsx-runtime").JSX.Element;
-export { NumberField, NumberFieldRoot, NumberFieldScrubArea, NumberFieldScrubAreaCursor, NumberFieldGroup, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement, };
+import { NumberField } from "@base-ui/react/number-field";
+
+//#region src/components/NumberField/NumberField.d.ts
+type NumberFieldProps = NumberField.Root.Props & {
+  decrementLabel?: string;
+  incrementLabel?: string;
+};
+declare function NumberFieldRoot({
+  className,
+  ...props
+}: NumberField.Root.Props): import("react").JSX.Element;
+declare function NumberField$1({
+  className,
+  children,
+  decrementLabel,
+  incrementLabel,
+  ...props
+}: NumberFieldProps): import("react").JSX.Element;
+declare function NumberFieldScrubArea({
+  className,
+  ...props
+}: NumberField.ScrubArea.Props): import("react").JSX.Element;
+declare function NumberFieldScrubAreaCursor({
+  className,
+  children,
+  ...props
+}: NumberField.ScrubAreaCursor.Props): import("react").JSX.Element;
+declare function NumberFieldGroup({
+  className,
+  ...props
+}: NumberField.Group.Props): import("react").JSX.Element;
+declare function NumberFieldDecrement({
+  className,
+  children,
+  'aria-label': ariaLabel,
+  ...props
+}: NumberField.Decrement.Props): import("react").JSX.Element;
+declare function NumberFieldInput({
+  className,
+  ...props
+}: NumberField.Input.Props): import("react").JSX.Element;
+declare function NumberFieldIncrement({
+  className,
+  children,
+  'aria-label': ariaLabel,
+  ...props
+}: NumberField.Increment.Props): import("react").JSX.Element;
+//#endregion
+export { NumberField$1 as NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, type NumberFieldProps, NumberFieldRoot, NumberFieldScrubArea, NumberFieldScrubAreaCursor };

package/dist/components/NumberField/NumberField.js

@@ -0,0 +1,75 @@
+import { MinusIcon, PlusIcon, ScrubCursorIcon } from "../../icons/ui/Icons.js";
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import NumberField_module_default from "./NumberField.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberField } from "@base-ui/react/number-field";
+//#region src/components/NumberField/NumberField.tsx
+const DEFAULT_DECREMENT_LABEL = "Decrease value";
+const DEFAULT_INCREMENT_LABEL = "Increase value";
+function NumberFieldRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField.Root, {
+		"data-slot": "number-field-root",
+		className: mergeClassName(className, NumberField_module_default.root),
+		...props
+	});
+}
+function NumberField$1({ className, children, decrementLabel = DEFAULT_DECREMENT_LABEL, incrementLabel = DEFAULT_INCREMENT_LABEL, ...props }) {
+	return /* @__PURE__ */ jsxs(NumberFieldRoot, {
+		className,
+		...props,
+		children: [children, /* @__PURE__ */ jsxs(NumberFieldGroup, { children: [
+			/* @__PURE__ */ jsx(NumberFieldDecrement, { "aria-label": decrementLabel }),
+			/* @__PURE__ */ jsx(NumberFieldInput, {}),
+			/* @__PURE__ */ jsx(NumberFieldIncrement, { "aria-label": incrementLabel })
+		] })]
+	});
+}
+function NumberFieldScrubArea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField.ScrubArea, {
+		"data-slot": "number-field-scrub-area",
+		className: mergeClassName(className, NumberField_module_default.scrubArea),
+		...props
+	});
+}
+function NumberFieldScrubAreaCursor({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField.ScrubAreaCursor, {
+		"data-slot": "number-field-scrub-area-cursor",
+		className: mergeClassName(className, NumberField_module_default.scrubAreaCursor),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ScrubCursorIcon, {})
+	});
+}
+function NumberFieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField.Group, {
+		"data-slot": "number-field-group",
+		className: mergeClassName(className, NumberField_module_default.group),
+		...props
+	});
+}
+function NumberFieldDecrement({ className, children, "aria-label": ariaLabel = DEFAULT_DECREMENT_LABEL, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField.Decrement, {
+		"data-slot": "number-field-decrement",
+		"aria-label": ariaLabel,
+		className: mergeClassName(className, NumberField_module_default.decrement),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(MinusIcon, {})
+	});
+}
+function NumberFieldInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField.Input, {
+		"data-slot": "number-field-input",
+		className: mergeClassName(className, NumberField_module_default.input),
+		...props
+	});
+}
+function NumberFieldIncrement({ className, children, "aria-label": ariaLabel = DEFAULT_INCREMENT_LABEL, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField.Increment, {
+		"data-slot": "number-field-increment",
+		"aria-label": ariaLabel,
+		className: mergeClassName(className, NumberField_module_default.increment),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
+	});
+}
+//#endregion
+export { NumberField$1 as NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, NumberFieldScrubArea, NumberFieldScrubAreaCursor };

package/dist/components/NumberField/NumberField.module.cjs

@@ -0,0 +1,13 @@
+import './NumberField.css';
+//#region src/components/NumberField/NumberField.module.css
+var NumberField_module_default = {
+	"decrement": "YMhIBW_decrement",
+	"group": "YMhIBW_group",
+	"increment": "YMhIBW_increment",
+	"input": "YMhIBW_input",
+	"root": "YMhIBW_root",
+	"scrubArea": "YMhIBW_scrubArea",
+	"scrubAreaCursor": "YMhIBW_scrubAreaCursor"
+};
+//#endregion
+exports.default = NumberField_module_default;

package/dist/components/NumberField/NumberField.module.js

@@ -0,0 +1,13 @@
+import './NumberField.css';
+//#region src/components/NumberField/NumberField.module.css
+var NumberField_module_default = {
+	"decrement": "YMhIBW_decrement",
+	"group": "YMhIBW_group",
+	"increment": "YMhIBW_increment",
+	"input": "YMhIBW_input",
+	"root": "YMhIBW_root",
+	"scrubArea": "YMhIBW_scrubArea",
+	"scrubAreaCursor": "YMhIBW_scrubAreaCursor"
+};
+//#endregion
+export { NumberField_module_default as default };

package/dist/components/NumberField/index.d.ts

@@ -1 +1 @@
-export { NumberField, NumberFieldRoot, NumberFieldScrubArea, NumberFieldScrubAreaCursor, NumberFieldGroup, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement, } from './NumberField';
+import { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldProps, NumberFieldRoot, NumberFieldScrubArea, NumberFieldScrubAreaCursor } from "./NumberField.js";

package/dist/components/OTPField/OTPField.cjs

@@ -0,0 +1,41 @@
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_OTPField_module = require("./OTPField.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_otp_field = require("@base-ui/react/otp-field");
+//#region src/components/OTPField/OTPField.tsx
+function OTPField({ children, className, length, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_otp_field.OTPFieldPreview.Root, {
+		"data-slot": "otp-field-root",
+		className: require_mergeClassName.mergeClassName(className, require_OTPField_module.default.root),
+		length,
+		...props,
+		children: children ?? renderDefaultInputs(length)
+	});
+}
+function OTPFieldInput({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_otp_field.OTPFieldPreview.Input, {
+		"data-slot": "otp-field-input",
+		className: require_mergeClassName.mergeClassName(className, require_OTPField_module.default.input),
+		...props
+	});
+}
+function OTPFieldSeparator({ className, ...props }) {
+	const { "aria-hidden": ariaHidden = true, role = "presentation", ...separatorProps } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_otp_field.OTPFieldPreview.Separator, {
+		"data-slot": "otp-field-separator",
+		"aria-hidden": ariaHidden,
+		role,
+		className: require_mergeClassName.mergeClassName(className, require_OTPField_module.default.separator),
+		...separatorProps
+	});
+}
+function getCharacterAriaLabel(index, length) {
+	return index === 0 ? void 0 : `Character ${index + 1} of ${length}`;
+}
+function renderDefaultInputs(length) {
+	return Array.from({ length }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OTPFieldInput, { "aria-label": getCharacterAriaLabel(index, length) }, index));
+}
+//#endregion
+exports.OTPField = OTPField;
+exports.OTPFieldInput = OTPFieldInput;
+exports.OTPFieldSeparator = OTPFieldSeparator;

package/dist/components/OTPField/OTPField.css

@@ -0,0 +1,78 @@
+@layer ui.components {
+  .aEYTXG_root {
+    align-items: center;
+    gap: var(--otp-field-gap, var(--spacing-2));
+    width: var(--otp-field-width, auto);
+    max-width: var(--otp-field-max-width, none);
+    display: inline-flex;
+
+    &[data-disabled], &[data-readonly] {
+      opacity: var(--otp-field-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .aEYTXG_input {
+    box-sizing: border-box;
+    width: var(--otp-field-input-width, var(--otp-field-input-size, 2.5rem));
+    min-width: var(--otp-field-input-width, var(--otp-field-input-size, 2.5rem));
+    height: var(--otp-field-input-height, var(--otp-field-input-size, 2.5rem));
+    border: var(--otp-field-border-width, var(--border-width-sm)) solid
+      var(--otp-field-border-color, var(--color-border));
+    border-radius: var(--otp-field-radius, var(--radius-md));
+    padding-block: var(--otp-field-input-padding-y, 0);
+    padding-inline: var(--otp-field-input-padding-x, 0);
+    background-color: var(--otp-field-bg, var(--color-background));
+    color: var(--otp-field-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--otp-field-font-size, var(--text-lg));
+    font-weight: var(--otp-field-font-weight, var(--weight-medium));
+    line-height: var(--otp-field-line-height, var(--line-height-text-lg));
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    outline: var(--otp-field-focus-ring-width, var(--otp-field-border-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: var(--otp-field-focus-ring-offset, -1px);
+    transition: border-color var(--otp-field-transition, var(--transition-default)),
+      outline-color var(--otp-field-transition, var(--transition-default)),
+      background-color var(--otp-field-transition, var(--transition-default));
+    margin: 0;
+
+    &::placeholder {
+      color: var(--otp-field-placeholder-color, var(--color-muted-foreground));
+    }
+
+    &:focus-visible {
+      outline-color: var(--otp-field-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-filled] {
+      background-color: var(--otp-field-bg-filled, var(--otp-field-bg, var(--color-background)));
+    }
+
+    &[data-invalid] {
+      border-color: var(--otp-field-border-color-invalid, var(--color-destructive));
+    }
+
+    &[data-invalid]:focus-visible {
+      outline-color: var(--otp-field-border-color-invalid, var(--color-destructive));
+    }
+
+    &[data-complete][data-filled] {
+      border-color: var(--otp-field-border-color-complete, var(--otp-field-border-color, var(--color-border)));
+    }
+
+    &[data-disabled], &[data-readonly] {
+      pointer-events: none;
+    }
+  }
+
+  .aEYTXG_separator {
+    width: var(--otp-field-separator-width, var(--otp-field-separator-size, 1rem));
+    height: var(--otp-field-separator-height, var(--otp-field-separator-size, 1rem));
+    color: var(--otp-field-separator-color, var(--color-muted-foreground));
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}

package/dist/components/OTPField/OTPField.d.ts

@@ -1,5 +1,19 @@
-import { OTPFieldPreview as OTPFieldPrimitive } from '@base-ui/react/otp-field';
-declare function OTPField({ children, className, length, ...props }: OTPFieldPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
-declare function OTPFieldInput({ className, ...props }: OTPFieldPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
-declare function OTPFieldSeparator({ className, ...props }: OTPFieldPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
-export { OTPField, OTPFieldInput, OTPFieldSeparator };
+import { OTPFieldPreview } from "@base-ui/react/otp-field";
+
+//#region src/components/OTPField/OTPField.d.ts
+declare function OTPField({
+  children,
+  className,
+  length,
+  ...props
+}: OTPFieldPreview.Root.Props): import("react").JSX.Element;
+declare function OTPFieldInput({
+  className,
+  ...props
+}: OTPFieldPreview.Input.Props): import("react").JSX.Element;
+declare function OTPFieldSeparator({
+  className,
+  ...props
+}: OTPFieldPreview.Separator.Props): import("react").JSX.Element;
+//#endregion
+export { OTPField, OTPFieldInput, OTPFieldSeparator };

package/dist/components/OTPField/OTPField.js

@@ -0,0 +1,39 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import OTPField_module_default from "./OTPField.module.js";
+import { jsx } from "react/jsx-runtime";
+import { OTPFieldPreview } from "@base-ui/react/otp-field";
+//#region src/components/OTPField/OTPField.tsx
+function OTPField({ children, className, length, ...props }) {
+	return /* @__PURE__ */ jsx(OTPFieldPreview.Root, {
+		"data-slot": "otp-field-root",
+		className: mergeClassName(className, OTPField_module_default.root),
+		length,
+		...props,
+		children: children ?? renderDefaultInputs(length)
+	});
+}
+function OTPFieldInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(OTPFieldPreview.Input, {
+		"data-slot": "otp-field-input",
+		className: mergeClassName(className, OTPField_module_default.input),
+		...props
+	});
+}
+function OTPFieldSeparator({ className, ...props }) {
+	const { "aria-hidden": ariaHidden = true, role = "presentation", ...separatorProps } = props;
+	return /* @__PURE__ */ jsx(OTPFieldPreview.Separator, {
+		"data-slot": "otp-field-separator",
+		"aria-hidden": ariaHidden,
+		role,
+		className: mergeClassName(className, OTPField_module_default.separator),
+		...separatorProps
+	});
+}
+function getCharacterAriaLabel(index, length) {
+	return index === 0 ? void 0 : `Character ${index + 1} of ${length}`;
+}
+function renderDefaultInputs(length) {
+	return Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(OTPFieldInput, { "aria-label": getCharacterAriaLabel(index, length) }, index));
+}
+//#endregion
+export { OTPField, OTPFieldInput, OTPFieldSeparator };

package/dist/components/OTPField/OTPField.module.cjs

@@ -0,0 +1,9 @@
+import './OTPField.css';
+//#region src/components/OTPField/OTPField.module.css
+var OTPField_module_default = {
+	"input": "aEYTXG_input",
+	"root": "aEYTXG_root",
+	"separator": "aEYTXG_separator"
+};
+//#endregion
+exports.default = OTPField_module_default;

package/dist/components/OTPField/OTPField.module.js

@@ -0,0 +1,9 @@
+import './OTPField.css';
+//#region src/components/OTPField/OTPField.module.css
+var OTPField_module_default = {
+	"input": "aEYTXG_input",
+	"root": "aEYTXG_root",
+	"separator": "aEYTXG_separator"
+};
+//#endregion
+export { OTPField_module_default as default };

package/dist/components/OTPField/index.d.ts

@@ -1 +1 @@
-export { OTPField, OTPFieldInput, OTPFieldSeparator } from './OTPField';
+import { OTPField, OTPFieldInput, OTPFieldSeparator } from "./OTPField.js";