@central-ui/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,24 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { HTMLAttributes } from 'react';
+/**
+ * Compose Number and Unit inside Group to show a metric and its meaning. Number formats the supplied amount automatically; do not preformat it into text.
+ *
+ * @example Complete composition
+ * import { Metric } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <Metric.Group>
+ *       <Metric.Number>{128}</Metric.Number>
+ *       <Metric.Unit>orders this month</Metric.Unit>
+ *     </Metric.Group>
+ *   )
+ * }
+ */
+export declare function Group({ disableStyle, className, ...props }: HTMLAttributes<HTMLDivElement> & StyleProps): import("react").JSX.Element;
+export declare function Number({ disableStyle, children, className, ...props }: (Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> & {
+    /** Pass the amount; locale number formatting is applied automatically. */
+    children: number;
+}) & StyleProps): import("react").JSX.Element;
+export declare function Unit({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/metric/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/metric/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,EACpB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG,UAAU,+BAS7C;AAED,wBAAgB,MAAM,CAAC,EACrB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3D,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAC,GACA,UAAU,+BAWX;AAED,wBAAgB,IAAI,CAAC,EACnB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,oBAAoB,CAAC,GAAG,UAAU,+BASnD"}

package/dist/components/metric/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Compose Number and Unit inside Group to show a metric and its meaning. Number formats the supplied amount automatically; do not preformat it into text.
+ *
+ * @example Complete composition
+ * import { Metric } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <Metric.Group>
+ *       <Metric.Number>{128}</Metric.Number>
+ *       <Metric.Unit>orders this month</Metric.Unit>
+ *     </Metric.Group>
+ *   )
+ * }
+ */
+export function Group({ disableStyle, className, ...props }) {
+    return (_jsx("div", { "data-component": "metric-group", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+}
+export function Number({ disableStyle, children, className, ...props }) {
+    return (_jsx("p", { "data-component": "metric-number", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props, children: children.toLocaleString() }));
+}
+export function Unit({ disableStyle, className, ...props }) {
+    return (_jsx("p", { "data-component": "metric-unit", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+}
+//# sourceMappingURL=index.js.map

package/dist/components/metric/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metric/index.tsx"],"names":[],"mappings":";AAIA;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACoC;IAC5C,OAAO,CACL,gCACiB,cAAc,yBACR,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,EACrB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EAKE;IACV,OAAO,CACL,8BACiB,eAAe,yBACT,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,KAChB,KAAK,YAER,QAAQ,CAAC,cAAc,EAAE,GACxB,CACL,CAAA;AACH,CAAC;AAED,MAAM,UAAU,IAAI,CAAC,EACnB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EAC0C;IAClD,OAAO,CACL,8BACiB,aAAa,yBACP,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,105 @@
+import type { StyleProps } from '../../types/Style.ts';
+import { NumberField as BaseNumber } from '@base-ui/react/number-field';
+import type { LucideProps } from 'lucide-react';
+import type { ComponentProps, ReactElement } from 'react';
+export type RootProps = Omit<BaseNumber.Root.Props, 'className' | 'render'> & {
+    className?: string;
+    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
+    tone?: 'neutral' | 'valid' | 'invalid';
+};
+/**
+ * Configure value, bounds, and step on Root. IncrementButton and DecrementButton update the number automatically; no custom arithmetic handlers needed. Use ButtonsList to organize them beside Input, or behavior-only handlers for custom buttons.
+ *
+ * @example Complete composition
+ * import { NumberInput } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <NumberInput.Root defaultValue={2} min={0} max={20} step={1} name="quantity">
+ *       <NumberInput.Container>
+ *         <NumberInput.Label>Quantity</NumberInput.Label>
+ *         <NumberInput.InputGroup>
+ *           <NumberInput.Input />
+ *           <NumberInput.ButtonsList>
+ *             <NumberInput.IncrementButton aria-label="Increase quantity">
+ *               <NumberInput.IncrementButtonIcon />
+ *             </NumberInput.IncrementButton>
+ *             <NumberInput.DecrementButton aria-label="Decrease quantity">
+ *               <NumberInput.DecrementButtonIcon />
+ *             </NumberInput.DecrementButton>
+ *           </NumberInput.ButtonsList>
+ *         </NumberInput.InputGroup>
+ *         <NumberInput.Description>Choose a quantity.</NumberInput.Description>
+ *       </NumberInput.Container>
+ *     </NumberInput.Root>
+ *   )
+ * }
+ *
+ * @example Accept decimal increments
+ * // Bounds and step belong to Root, not custom increment/decrement click handlers.
+ * ;<NumberInput.Root min={0} max={10} step={0.25} defaultValue={1.5}>
+ *   {
+ *     // Rest of components here
+ *   }
+ * </NumberInput.Root>
+ */
+export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldInputProps, "form" | "className" | "defaultValue" | "id" | "name" | "disabled" | "value" | "render" | "required" | "readOnly"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
+export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export declare const Error: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export declare const Success: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    /** Choose the preset appearance; this does not add action behavior. */
+    variant?: "normal" | "emphasized";
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AddonText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+/** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
+export declare function AddonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
+    /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
+    children: ReactElement<ComponentProps<'svg'>>;
+}) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
+export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Built-in icon; no children needed. Use it inside its matching control. */
+export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<LucideProps, "children"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldGroupProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ButtonsList: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Formats the current number automatically. Omit children for the default display; customize only when the usual number formatting is insufficient. */
+export declare const ValueText: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "children"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const IncrementButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldIncrementProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
+export declare const IncrementHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldIncrementProps, "children" | "className" | "render"> & {
+    className?: string;
+    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
+    children: ReactElement;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
+export declare function IncrementButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
+    /** Omit for the supplied default icon; pass a child only to replace it. */
+    children?: ReactElement<ComponentProps<'svg'>>;
+}) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
+export declare const DecrementButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldDecrementProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
+export declare const DecrementHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldDecrementProps, "children" | "className" | "render"> & {
+    className?: string;
+    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
+    children: ReactElement;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
+export declare function DecrementButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
+    /** Omit for the supplied default icon; pass a child only to replace it. */
+    children?: ReactElement<ComponentProps<'svg'>>;
+}) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/numberinput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/numberinput/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/numberinput/index.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NumberField as BaseNumber } from '@base-ui/react/number-field';
+import { ChevronUp, ChevronDown, LoaderCircle } from 'lucide-react';
+import { useForwardClickToInput } from "../../utils/useForwardClickToInput.js";
+import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+/**
+ * Configure value, bounds, and step on Root. IncrementButton and DecrementButton update the number automatically; no custom arithmetic handlers needed. Use ButtonsList to organize them beside Input, or behavior-only handlers for custom buttons.
+ *
+ * @example Complete composition
+ * import { NumberInput } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <NumberInput.Root defaultValue={2} min={0} max={20} step={1} name="quantity">
+ *       <NumberInput.Container>
+ *         <NumberInput.Label>Quantity</NumberInput.Label>
+ *         <NumberInput.InputGroup>
+ *           <NumberInput.Input />
+ *           <NumberInput.ButtonsList>
+ *             <NumberInput.IncrementButton aria-label="Increase quantity">
+ *               <NumberInput.IncrementButtonIcon />
+ *             </NumberInput.IncrementButton>
+ *             <NumberInput.DecrementButton aria-label="Decrease quantity">
+ *               <NumberInput.DecrementButtonIcon />
+ *             </NumberInput.DecrementButton>
+ *           </NumberInput.ButtonsList>
+ *         </NumberInput.InputGroup>
+ *         <NumberInput.Description>Choose a quantity.</NumberInput.Description>
+ *       </NumberInput.Container>
+ *     </NumberInput.Root>
+ *   )
+ * }
+ *
+ * @example Accept decimal increments
+ * // Bounds and step belong to Root, not custom increment/decrement click handlers.
+ * ;<NumberInput.Root min={0} max={10} step={0.25} defaultValue={1.5}>
+ *   {
+ *     // Rest of components here
+ *   }
+ * </NumberInput.Root>
+ */
+export const Root = forwardRef(function Root({ id, tone = 'neutral', children, ...props }, ref) {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const [connections, setConnections] = useState({
+        descriptionIds: [],
+    });
+    return (_jsx(ToneProvider, { value: tone, children: _jsx(BaseNumber.Root, { ...props, id: inputId, ref: ref, render: (rootProps, state) => (_jsx(InputContext.Provider, { value: {
+                    ...state,
+                    inputId,
+                    connections,
+                    setConnections,
+                    min: props.min,
+                    max: props.max,
+                }, children: _jsx("div", { ...rootProps }) })), children: children }) }));
+});
+export const Input = forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+    const context = useInputContext();
+    const tone = useToneContext();
+    return (_jsx(BaseNumber.Input, { ...props, ref: ref, "data-tone": tone, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.connections.descriptionIds]
+            .filter(Boolean)
+            .join(' ') || undefined, "data-component": "numberinput-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export const Container = forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+    const attributes = usePartAttributes();
+    return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "numberinput-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
+export const Label = forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
+    const context = useInputContext();
+    const labelId = id ?? context.inputId + '-label';
+    const attributes = usePartAttributes();
+    useEffect(() => {
+        context.setConnections((current) => ({ ...current, labelId }));
+        return () => context.setConnections((current) => ({
+            ...current,
+            labelId: current.labelId === labelId ? undefined : current.labelId,
+        }));
+    }, [labelId, context.setConnections]);
+    return (_jsx("label", { ...attributes, ...props, id: labelId, ref: ref, htmlFor: context.inputId, "data-component": "numberinput-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export const Description = forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+    const messageId = useMessageId(id);
+    const attributes = usePartAttributes();
+    return (_jsx("div", { ...attributes, ...props, id: messageId, ref: ref, "data-component": "numberinput-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export const Error = forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
+    const messageId = useMessageId(id);
+    const attributes = usePartAttributes();
+    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "numberinput-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export const Success = forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
+    const messageId = useMessageId(id);
+    const attributes = usePartAttributes();
+    return (_jsx("div", { role: "status", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "numberinput-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export const Addon = forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
+    const attributes = usePartAttributes();
+    return (_jsx("div", { ...attributes, ...props, ref: ref, "data-variant": variant, "data-component": "numberinput-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export const AddonText = forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
+    const attributes = usePartAttributes();
+    return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "numberinput-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
+export function AddonIcon({ disableStyle, children, className, ...props }) {
+    const attributes = usePartAttributes();
+    return cloneElement(children, {
+        ...attributes,
+        ...props,
+        'aria-hidden': true,
+        strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
+        ...{
+            'data-component': 'numberinput-addonicon',
+            'data-style-disabled': disableStyle ? '' : undefined,
+        },
+        className: twMerge(children.props.className, className),
+    });
+}
+export const AddonButton = forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
+    const context = useInputContext();
+    const attributes = usePartAttributes();
+    return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "numberinput-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** Built-in icon; no children needed. Use it inside its matching control. */
+export const AddonLoadingIcon = forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
+    const attributes = usePartAttributes();
+    return (_jsx(LoaderCircle, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "numberinput-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export const InputGroup = forwardRef(function InputGroup({ disableStyle, className, onClick, ...props }, ref) {
+    const attributes = usePartAttributes();
+    const forwardClick = useForwardClickToInput('input:not([type="hidden"])', onClick);
+    return (_jsx(BaseNumber.Group, { ...attributes, ...props, ref: ref, onClick: forwardClick, "data-component": "numberinput-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export const ButtonsList = forwardRef(function ButtonsList({ disableStyle, className, ...props }, ref) {
+    const attributes = usePartAttributes();
+    return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "numberinput-buttonslist", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** Formats the current number automatically. Omit children for the default display; customize only when the usual number formatting is insufficient. */
+export const ValueText = forwardRef(function ValueText({ disableStyle, className, ...props }, ref) {
+    const context = useInputContext();
+    const attributes = usePartAttributes();
+    return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "numberinput-valuetext", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: context.inputValue }));
+});
+export const IncrementButton = forwardRef(function IncrementButton({ disableStyle, className, ...props }, ref) {
+    return (_jsx(BaseNumber.Increment, { ...props, ref: ref, "data-component": "numberinput-incrementbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
+export const IncrementHandler = forwardRef(function IncrementHandler({ children, ...props }, ref) {
+    return _jsx(BaseNumber.Increment, { ...props, ref: ref, render: children });
+});
+/** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
+export function IncrementButtonIcon({ disableStyle, children = _jsx(ChevronUp, {}), className, ...props }) {
+    const context = useInputContext();
+    const attributes = usePartAttributes();
+    const disabled = context.disabled ||
+        context.readOnly ||
+        (context.value !== null &&
+            context.max !== undefined &&
+            context.value >= context.max);
+    return cloneElement(children, {
+        ...attributes,
+        ...props,
+        ...{ ...{ 'data-disabled': disabled ? '' : undefined } },
+        'aria-hidden': true,
+        strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 2,
+        ...{
+            'data-component': 'numberinput-incrementbuttonicon',
+            'data-style-disabled': disableStyle ? '' : undefined,
+        },
+        className: twMerge(children.props.className, className),
+    });
+}
+export const DecrementButton = forwardRef(function DecrementButton({ disableStyle, className, ...props }, ref) {
+    return (_jsx(BaseNumber.Decrement, { ...props, ref: ref, "data-component": "numberinput-decrementbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
+export const DecrementHandler = forwardRef(function DecrementHandler({ children, ...props }, ref) {
+    return _jsx(BaseNumber.Decrement, { ...props, ref: ref, render: children });
+});
+/** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
+export function DecrementButtonIcon({ disableStyle, children = _jsx(ChevronDown, {}), className, ...props }) {
+    const context = useInputContext();
+    const attributes = usePartAttributes();
+    const disabled = context.disabled ||
+        context.readOnly ||
+        (context.value !== null &&
+            context.min !== undefined &&
+            context.value <= context.min);
+    return cloneElement(children, {
+        ...attributes,
+        ...props,
+        ...{ 'data-disabled': disabled ? '' : undefined },
+        'aria-hidden': true,
+        strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 2,
+        ...{
+            'data-component': 'numberinput-decrementbuttonicon',
+            'data-style-disabled': disableStyle ? '' : undefined,
+        },
+        className: twMerge(children.props.className, className),
+    });
+}
+const InputContext = createContext(null);
+function useInputContext() {
+    const context = useContext(InputContext);
+    if (!context)
+        throw new globalThis.Error('Parts must be inside Root');
+    return context;
+}
+function usePartAttributes() {
+    const context = useInputContext();
+    const tone = useToneContext();
+    return {
+        'data-disabled': context.disabled ? '' : undefined,
+        'data-readonly': context.readOnly ? '' : undefined,
+        'data-required': context.required ? '' : undefined,
+        'data-tone': tone,
+    };
+}
+function useMessageId(id) {
+    const generatedId = useId();
+    const messageId = id ?? generatedId;
+    const context = useInputContext();
+    useEffect(() => {
+        context.setConnections((current) => ({
+            ...current,
+            descriptionIds: [...current.descriptionIds, messageId],
+        }));
+        return () => context.setConnections((current) => ({
+            ...current,
+            descriptionIds: current.descriptionIds.filter((id) => id !== messageId),
+        }));
+    }, [messageId, context.setConnections]);
+    return messageId;
+}
+//# sourceMappingURL=index.js.map

package/dist/components/numberinput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/numberinput/index.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+import type { StyleProps } from '../../types/Style.ts';
+import { OTPField as BaseOtp } from '@base-ui/react/otp-field';
+import type { ReactNode } from 'react';
+export type RootProps = Omit<BaseOtp.Root.Props, 'className' | 'render'> & {
+    className?: string;
+    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
+    tone?: 'neutral' | 'valid' | 'invalid';
+};
+/**
+ * Configure length and value on Root. Render an Input for each callback invocation from List; slot order is managed automatically. Keyboard navigation and paste distribution are built in; do not split or synchronize the code yourself.
+ *
+ * @example Complete composition
+ * import { OtpInput } from '@central-ui/react'
+ * import { Fragment } from 'react'
+ *
+ * function Example() {
+ *   return (
+ *     <OtpInput.Root length={6} name="code" defaultValue="123">
+ *       <OtpInput.Container>
+ *         <OtpInput.Label>Verification code</OtpInput.Label>
+ *         <OtpInput.List>
+ *           {(index) => (
+ *             <Fragment key={index}>
+ *               <OtpInput.Input />
+ *               {index === 2 && <OtpInput.Separator />}
+ *             </Fragment>
+ *           )}
+ *         </OtpInput.List>
+ *         <OtpInput.Description>Enter the six-digit code.</OtpInput.Description>
+ *       </OtpInput.Container>
+ *     </OtpInput.Root>
+ *   )
+ * }
+ *
+ * @example Hide the code while it is entered
+ * // Keep the same List; do not replace its Inputs with password inputs yourself.
+ * ;<OtpInput.Root length={6} mask>
+ *   {
+ *     // Rest of components here
+ *   }
+ * </OtpInput.Root>
+ */
+export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").OTPFieldInputProps, "form" | "className" | "defaultValue" | "id" | "name" | "disabled" | "value" | "render" | "required" | "readOnly"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
+export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export declare const Error: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export declare const Success: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Calls children for each code slot. Render Input inside each callback; the component handles slot ordering and keyboard/paste behavior. */
+export declare const List: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
+    /** Render an Input for each slot. Use the index for keys or separator placement; input ordering is automatic. */
+    children: (index: number) => ReactNode;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SeparatorProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/otpinput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/otpinput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAU9D,OAAO,KAAK,EAAkB,SAAS,EAA4B,MAAM,OAAO,CAAA;AAGhF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;CACvC,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI,mHAiCf,CAAA;AACF,eAAO,MAAM,KAAK;gBAcE,MAAM;yEAyBxB,CAAA;AAEF,eAAO,MAAM,SAAS,uNAepB,CAAA;AACF,oHAAoH;AACpH,eAAO,MAAM,KAAK,oPA2BhB,CAAA;AAEF,eAAO,MAAM,WAAW,uNAiBtB,CAAA;AAEF,iHAAiH;AACjH,eAAO,MAAM,KAAK,uNAmBhB,CAAA;AAEF,iHAAiH;AACjH,eAAO,MAAM,OAAO,uNAmBlB,CAAA;AACF,6IAA6I;AAC7I,eAAO,MAAM,IAAI;IAGb,iHAAiH;cACvG,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS;uEAoBxC,CAAA;AACF,eAAO,MAAM,SAAS;gBAEwC,MAAM;uEAYlE,CAAA"}