@danxbot/ui 7.3.1 → 7.4.1

package/dist/types/components/NumberInput.d.ts

@@ -19,6 +19,22 @@ declare const numberInput: import("tailwind-variants").TVReturnType<{
             stepper: string;
         };
     };
+    /**
+     * Centered is the field's own long-standing look — a value read the way a
+     * calculator or a stepper shows one, and unchanged for every existing
+     * caller (SG-907 adds this variant; it does not touch the default). A
+     * data-entry field reads the opposite way: left-aligned, like every other
+     * text box beside it, so a column of them lines up on their leading edge
+     * rather than swimming around a shared centre.
+     */
+    align: {
+        center: {
+            input: string;
+        };
+        start: {
+            input: string;
+        };
+    };
 }, {
     group: string[];
     input: string[];
@@ -42,6 +58,22 @@ declare const numberInput: import("tailwind-variants").TVReturnType<{
             stepper: string;
         };
     };
+    /**
+     * Centered is the field's own long-standing look — a value read the way a
+     * calculator or a stepper shows one, and unchanged for every existing
+     * caller (SG-907 adds this variant; it does not touch the default). A
+     * data-entry field reads the opposite way: left-aligned, like every other
+     * text box beside it, so a column of them lines up on their leading edge
+     * rather than swimming around a shared centre.
+     */
+    align: {
+        center: {
+            input: string;
+        };
+        start: {
+            input: string;
+        };
+    };
 }, {
     group: string[];
     input: string[];
@@ -65,13 +97,50 @@ declare const numberInput: import("tailwind-variants").TVReturnType<{
             stepper: string;
         };
     };
+    /**
+     * Centered is the field's own long-standing look — a value read the way a
+     * calculator or a stepper shows one, and unchanged for every existing
+     * caller (SG-907 adds this variant; it does not touch the default). A
+     * data-entry field reads the opposite way: left-aligned, like every other
+     * text box beside it, so a column of them lines up on their leading edge
+     * rather than swimming around a shared centre.
+     */
+    align: {
+        center: {
+            input: string;
+        };
+        start: {
+            input: string;
+        };
+    };
 }, {
     group: string[];
     input: string[];
     stepper: string[];
     scrub: string;
 }>>;
-export interface NumberInputProps extends Omit<NumberField.Root.Props, "className" | "render">, VariantProps<typeof numberInput> {
+/**
+ * The five props below are declared here, EXPLICITLY, rather than left to flow through the
+ * `Omit<NumberField.Root.Props, ...>` this interface otherwise extends (SG-907).
+ *
+ * `NumberField.Root` renders a `<div>` — `aria-label`/`aria-labelledby`/`aria-describedby` are
+ * universal ARIA attributes TypeScript accepts on any element, so they type-checked and silently
+ * landed on that wrapping div, never reaching the `<input>` a screen reader (or
+ * `getByRole("textbox", { name })`) actually reads the accessible name from. `placeholder` was
+ * worse: `NumberFieldRootProps` never declared it at all, so a caller could not pass one through
+ * this component regardless of which element it would have reached. Both are fixed the same way
+ * — destructured out of the props this component accepts from its caller, forwarded to
+ * `NumberField.Input` below, which is exactly where `<input>`-shaped props belong.
+ *
+ * `name` stays out of this list on purpose. It is already declared on `NumberFieldRootProps`
+ * itself (not inherited from the generic div props the way the three ARIA attributes are), and
+ * Base UI's own `NumberField.Root` reads it to name a HIDDEN native `<input type="hidden">` it
+ * renders for real form submission — never the visible text `<input>`, which the library
+ * deliberately gives no `name` of its own so a form posts the field exactly once. Moving `name`
+ * onto the visible input here would give the form two same-named inputs instead of fixing
+ * anything.
+ */
+export interface NumberInputProps extends Omit<NumberField.Root.Props, "className" | "render" | "aria-label" | "aria-labelledby" | "aria-describedby">, VariantProps<typeof numberInput> {
     className?: string;
     /** Hide the +/− buttons — for a field driven by typing or scrubbing alone. */
     hideSteppers?: boolean;
@@ -83,6 +152,26 @@ export interface NumberInputProps extends Omit<NumberField.Root.Props, "classNam
      */
     scrubLabel?: string;
     ref?: Ref<HTMLDivElement>;
+    /** The accessible name — reaches the `<input>` itself, never the wrapping group (SG-907). */
+    "aria-label"?: string;
+    /** @see `aria-label`'s own note above — same fix, same reason. */
+    "aria-labelledby"?: string;
+    /** @see `aria-label`'s own note above — same fix, same reason. */
+    "aria-describedby"?: string;
+    /** What an empty field says. Reaches the `<input>` — `NumberFieldRootProps` never had one. */
+    placeholder?: string;
+    /**
+     * Whether a decimal separator may be typed or pasted at all.
+     *
+     * Base UI's own `NumberField` keeps the decimal key typeable even under an integer-only
+     * `format` (its own source: "must stay typeable regardless of whether the format renders a
+     * fraction") and instead ROUNDS a typed fraction away on blur — `3.7` silently becomes `4`,
+     * which is a value the reviewer never typed. `allowDecimal={false}` refuses the keystroke (and
+     * a pasted fraction) outright, so nothing the reviewer entered is ever changed behind their
+     * back. Defaults to `false` exactly when `format?.maximumFractionDigits === 0` — an
+     * integer-only format refuses a decimal point unless a caller explicitly asks otherwise.
+     */
+    allowDecimal?: boolean;
 }
-export declare function NumberInput({ size, className, hideSteppers, scrubLabel, ref, ...props }: NumberInputProps): import("react").JSX.Element;
+export declare function NumberInput({ size, align, className, hideSteppers, scrubLabel, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, placeholder, allowDecimal, onKeyDown, onPaste, ...props }: NumberInputProps): import("react").JSX.Element;
 export {};

package/dist/types/components/TriStateSwitch.d.ts

@@ -0,0 +1,69 @@
+import { type VariantProps } from "tailwind-variants";
+declare const track: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.25rem*var(--ui-scale))] [--tri-w:calc(3.125rem*var(--ui-scale))]";
+        md: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.5rem*var(--ui-scale))] [--tri-w:calc(3.75rem*var(--ui-scale))]";
+        lg: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.75rem*var(--ui-scale))] [--tri-w:calc(4.375rem*var(--ui-scale))]";
+    };
+    state: {
+        no: "border-border bg-switch-track-off";
+        unset: "border-dashed border-border-strong bg-transparent";
+        yes: "border-accent bg-accent";
+    };
+    disabled: {
+        true: "cursor-not-allowed opacity-45";
+        false: "";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.25rem*var(--ui-scale))] [--tri-w:calc(3.125rem*var(--ui-scale))]";
+        md: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.5rem*var(--ui-scale))] [--tri-w:calc(3.75rem*var(--ui-scale))]";
+        lg: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.75rem*var(--ui-scale))] [--tri-w:calc(4.375rem*var(--ui-scale))]";
+    };
+    state: {
+        no: "border-border bg-switch-track-off";
+        unset: "border-dashed border-border-strong bg-transparent";
+        yes: "border-accent bg-accent";
+    };
+    disabled: {
+        true: "cursor-not-allowed opacity-45";
+        false: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.25rem*var(--ui-scale))] [--tri-w:calc(3.125rem*var(--ui-scale))]";
+        md: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.5rem*var(--ui-scale))] [--tri-w:calc(3.75rem*var(--ui-scale))]";
+        lg: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.75rem*var(--ui-scale))] [--tri-w:calc(4.375rem*var(--ui-scale))]";
+    };
+    state: {
+        no: "border-border bg-switch-track-off";
+        unset: "border-dashed border-border-strong bg-transparent";
+        yes: "border-accent bg-accent";
+    };
+    disabled: {
+        true: "cursor-not-allowed opacity-45";
+        false: "";
+    };
+}, undefined>>;
+export type TriStateSwitchSize = NonNullable<VariantProps<typeof track>["size"]>;
+export interface TriStateSwitchProps {
+    /** `true` Yes, `false` No, `null` not answered. */
+    value: boolean | null;
+    onValueChange: (value: boolean | null) => void;
+    /** The question being answered — the group's accessible name. Required. */
+    "aria-label": string;
+    /** The words for each stop, read aloud and shown in the caption. */
+    labels?: {
+        yes?: string;
+        no?: string;
+        unset?: string;
+    };
+    /** Shows the current state's word beside the track. @default true */
+    showCaption?: boolean;
+    disabled?: boolean;
+    /** @default "md" */
+    size?: TriStateSwitchSize;
+    className?: string;
+}
+export declare function TriStateSwitch({ value, onValueChange, "aria-label": ariaLabel, labels, showCaption, disabled, size, className, }: TriStateSwitchProps): import("react").JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -27,6 +27,7 @@ export { SettingRow, SettingGroup, type SettingRowProps, type SettingGroupProps,
 export { DescriptionList, DescriptionListItem, type DescriptionListProps, type DescriptionListItemProps, type DescriptionListEntry, } from "./components/DescriptionList";
 export { ConnectionCard, type ConnectionCardProps, type ConnectionHealth, } from "./components/ConnectionCard";
 export { Checkbox, Switch, Radio, RadioGroup, CheckboxField, SwitchField, RadioField, RadioCard, type CheckboxProps, type SwitchProps, type RadioProps, type RadioGroupProps, type CheckboxFieldProps, type SwitchFieldProps, type RadioFieldProps, type RadioCardProps, } from "./components/Choice";
+export { TriStateSwitch, type TriStateSwitchProps, type TriStateSwitchSize, } from "./components/TriStateSwitch";
 export { Dialog, DialogClose, AlertDialog, type DialogProps, type AlertDialogProps, } from "./components/Dialog";
 export { Popover, PopoverClose, Tooltip, TooltipProvider, type PopoverProps, type TooltipProps, } from "./components/Popover";
 export { Toaster, ToastProvider, useToast, type ToasterProps, type ToastProviderProps, type ToastOptions, type ToastTone, } from "./components/Toast";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "7.3.1",
+  "version": "7.4.1",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",