@axzydev/axzy_ui_system 1.3.5 → 1.4.0

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/App.tsx

@@ -35,6 +35,7 @@ import {
 import {
   ButtonShowcase,
   InputShowcase,
+  InputNumberShowcase,
   SelectShowcase,
   SearchSelectShowcase,
   DatePickerShowcase,
@@ -48,6 +49,7 @@ import {
   MaskedInputShowcase,
   MultiSelectShowcase,
   ChipInputShowcase,
+  SegmentedControlShowcase,
 } from "./showcases/FormShowcases";
 import {
   TableShowcase,
@@ -261,6 +263,8 @@ function App() {
         return <ButtonShowcase />;
       case "input":
         return <InputShowcase />;
+      case "inputnumber":
+        return <InputNumberShowcase />;
       case "select":
         return <SelectShowcase />;
       case "searchselect":
@@ -281,6 +285,8 @@ function App() {
         return <CalendarShowcase />;
       case "slidetoggle":
         return <SlideToggleShowcase />;
+      case "segmentedcontrol":
+        return <SegmentedControlShowcase />;
       case "dropfile":
         return <DropfileShowcase />;
       case "wysiwyg":

package/src/components/atoms/input/input.props.ts

@@ -18,6 +18,11 @@ export interface ITInputProps {
   label?: string;
   /** Enable currency formatting for number inputs (MX locale) */
   currencyFormat?: boolean;
+  /**
+   * Decimal places allowed for number inputs. `0` restricts to integers.
+   * @default currencyFormat ? 2 : 0
+   */
+  decimals?: number;
   /** Placeholder text */
   placeholder?: string;
   /** Current input value */

package/src/components/atoms/input/input.tsx

@@ -66,11 +66,14 @@ export default function ITInput({
   max,
   readOnly = false,
   focusContent,
-  size = "md"
+  size = "md",
+  decimals
 }: ITInputProps) {
   const isCheckboxOrRadio = type === "checkbox" || type === "radio";
   const isNumberType = type === "number";
   const isTextArea = type === "textarea";
+  // Currency inputs default to 2 decimals; plain numbers to integers.
+  const decimalPlaces = decimals ?? (currencyFormat ? 2 : 0);
 
   const [displayValue, setDisplayValue] = useState<string>("");
   const [isFocused, setIsFocused] = useState(false);
@@ -146,14 +149,18 @@ export default function ITInput({
 
       if (currencyFormat) {
         return num.toLocaleString("es-MX", {
-          minimumFractionDigits: 2,
-          maximumFractionDigits: 2,
+          minimumFractionDigits: decimalPlaces,
+          maximumFractionDigits: decimalPlaces,
         });
       }
 
+      if (decimalPlaces > 0) {
+        return num.toFixed(decimalPlaces);
+      }
+
       return num.toString();
     },
-    [currencyFormat]
+    [currencyFormat, decimalPlaces]
   );
 
   const unformatValue = useCallback(
@@ -204,13 +211,13 @@ useEffect(() => {
       return;
     }
 
-    if (!currencyFormat && (key === "." || key === ",")) {
+    if (decimalPlaces === 0 && (key === "." || key === ",")) {
       e.preventDefault();
       return;
     }
 
     if (
-      currencyFormat &&
+      decimalPlaces > 0 &&
       (key === "." || key === ",") &&
       currentValue.includes(".")
     ) {
@@ -223,7 +230,7 @@ useEffect(() => {
       }
     }
 
-    const allowedCharsRegex = currencyFormat ? /^[0-9.,]$/ : /^[0-9]$/;
+    const allowedCharsRegex = decimalPlaces > 0 ? /^[0-9.,]$/ : /^[0-9]$/;
     // If it's a mobile key event like Unidentified, we bypass the regex check safely
     if (key !== "Unidentified" && !allowedCharsRegex.test(key)) {
       e.preventDefault();
@@ -256,7 +263,7 @@ const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
   let rawValue = e.target.value;
   let cleanedValue = "";
 
-  if (currencyFormat) {
+  if (decimalPlaces > 0) {
     if (rawValue.includes(",") && rawValue.includes(".")) {
       rawValue = rawValue.replace(/,/g, ""); 
     } else if (rawValue.includes(",")) {
@@ -266,9 +273,9 @@ const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     cleanedValue = rawValue.replace(/[^0-9.]/g, "");
     const parts = cleanedValue.split(".");
     if (parts.length > 1) {
-      // Keep only first dot, and restrict decimals to 2 digits
-      const decimals = parts.slice(1).join("").substring(0, 2);
-      cleanedValue = parts[0] + "." + decimals;
+      // Keep only the first dot and restrict decimals to the allowed digits
+      const decimalPart = parts.slice(1).join("").substring(0, decimalPlaces);
+      cleanedValue = parts[0] + "." + decimalPart;
     }
   } else {
     cleanedValue = rawValue.replace(/[^0-9]/g, "");
@@ -282,7 +289,7 @@ const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!formatNumber) {
       valueToSend = cleanedValue; 
     } else if (cleanedValue !== "") {
-      if (currencyFormat) {
+      if (decimalPlaces > 0) {
         const numericValue = parseFloat(cleanedValue);
         if (!isNaN(numericValue)) {
           // ALWAYS send string representation to avoid dropping trailing decimals
@@ -374,7 +381,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     let valueToSend: number | string | undefined = undefined;
 
     let cleanedValue = "";
-    if (currencyFormat) {
+    if (decimalPlaces > 0) {
       cleanedValue = currentValue.replace(/[^0-9.]/g, "");
       const parts = cleanedValue.split(".");
       if (parts.length > 2) {
@@ -385,7 +392,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
       cleanedValue = currentValue.replace(/[^0-9]/g, "");
     }
 
-    const parsed = currencyFormat
+    const parsed = decimalPlaces > 0
       ? parseFloat(cleanedValue)
       : parseInt(cleanedValue, 10);
 
@@ -430,7 +437,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
 };
 
   const currentLength = isNumberType
-    ? (currencyFormat ? displayValue.replace(/[.,]/g, "") : displayValue).length
+    ? (decimalPlaces > 0 ? displayValue.replace(/[.,]/g, "") : displayValue).length
     : typeof value === "string"
     ? value.length
     : String(value ?? "").length;
@@ -541,7 +548,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
                       }
                       inputMode={
                         isNumberType
-                          ? currencyFormat
+                          ? decimalPlaces > 0
                             ? "decimal"
                             : "numeric"
                           : undefined
@@ -562,7 +569,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
                       }
                       onKeyDown={isNumberType ? handleKeyDown : onKeyDown}
                       readOnly={readOnly}
-                      maxLength={isNumberType && !currencyFormat ? maxLength : undefined}
+                      maxLength={isNumberType && decimalPlaces === 0 ? maxLength : undefined}
                       minLength={minLength}
                       min={min}
                       max={max}

package/src/components/atoms/input-number/input-number.doc.mdx

@@ -0,0 +1,74 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as StoriesData from './input-number.stories';
+
+<Meta of={StoriesData} />
+
+# ITInputNumber
+
+Numeric field that always renders currency-style formatting (thousand separators + fixed decimals) and emits a real `number` through `onChange` / `onBlur`. Built on top of `ITInput`, so it inherits label, validation, sizes, icons and theming.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | required | Field name used for form identification. |
+| `value` | `number \| null` | `undefined` | Current numeric value. |
+| `onChange` | `(value: number \| undefined, event) => void` | required | Called with the parsed value on every change. |
+| `onBlur` | `(value: number \| undefined, event) => void` | `undefined` | Called on blur with the parsed (and clamped) value. |
+| `decimals` | `number` | `2` | Decimal places allowed. `0` restricts to integers. |
+| `prefix` | `string` | `undefined` | Text prefix rendered inside the field (e.g. `"$"`). Ignored when `iconLeft` is set. |
+| `label` | `string` | `undefined` | Label displayed above the input. |
+| `placeholder` | `string` | `undefined` | Placeholder text. |
+| `min` | `number` | `undefined` | Minimum value; lower values are clamped on blur. |
+| `max` | `number` | `undefined` | Maximum value; higher values are clamped on blur. |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size preset. |
+| `disabled` | `boolean` | `false` | Disable the input. |
+| `readOnly` | `boolean` | `false` | Render the input in read-only mode. |
+| `required` | `boolean` | `false` | Mark the field as required. |
+| `touched` | `boolean` | `undefined` | Whether the field has been touched by the user. |
+| `error` | `string \| boolean` | `undefined` | Validation error (`true` = generic message). |
+| `iconLeft` / `iconRight` | `ReactNode` | `undefined` | Icons rendered inside the field. |
+| `containerClassName` | `string` | `undefined` | Additional classes for the outer container. |
+| `labelClassName` | `string` | `undefined` | Additional classes for the label. |
+| `className` | `string` | `undefined` | Additional classes for the input element. |
+| `autoFocus` | `boolean` | `false` | Auto-focus on mount. |
+| `focusContent` | `boolean` | `false` | Select all content on click. |
+| `onKeyDown` | `(event) => void` | `undefined` | Keydown handler for the underlying input. |
+
+## Usage
+
+```tsx
+import { ITInputNumber } from '@axzydev/axzy_ui_system';
+
+<ITInputNumber
+  name="amount"
+  label="Monto"
+  value={amount}
+  prefix="$"
+  onChange={(value) => setAmount(value)}
+/>
+
+<ITInputNumber
+  name="qty"
+  label="Cantidad"
+  decimals={0}
+  min={1}
+  max={99}
+  value={qty}
+  onChange={(value) => setQty(value)}
+/>
+```
+
+## Notes
+
+- The emitted value is a `number` (or `undefined` when the field is empty) — no `parseFloat` needed by the consumer.
+- Formatting is always on: thousand separators while blurred, raw digits while typing.
+- Use `decimals={0}` for integers only.
+- Values are clamped to `min`/`max` on blur.
+- `prefix` is a convenience over `iconLeft`; pass `iconLeft` directly for any custom node.
+
+## Stories
+
+<Primary />
+<Controls />
+<Stories />

package/src/components/atoms/input-number/input-number.props.ts

@@ -0,0 +1,66 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from "react";
+import { SizesTypes } from "@/types/sizes.types";
+
+/**
+ * Props for the ITInputNumber component.
+ *
+ * Same surface as `ITInput` for numeric entry, but the value is always
+ * formatted as currency (thousand separators + decimals) and emitted as a
+ * real `number` instead of a string.
+ */
+export interface ITInputNumberProps {
+  /** Field name used for form identification. */
+  name: string;
+  /** Current numeric value. Pass `null`/`undefined` for "empty". */
+  value?: number | null;
+  /**
+   * Called with the parsed value on every change.
+   * Receives `undefined` when the field is empty, plus the original input event.
+   */
+  onChange: (value: number | undefined, event: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Called on blur with the parsed (and min/max clamped) value, plus the
+   * original focus event.
+   */
+  onBlur?: (value: number | undefined, event: FocusEvent<HTMLInputElement>) => void;
+  /** Number of decimal places allowed. `0` restricts to integers. @default 2 */
+  decimals?: number;
+  /** Text prefix rendered inside the field, e.g. `"$"`. Ignored when `iconLeft` is set. */
+  prefix?: string;
+  /** Label displayed above the input. */
+  label?: string;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Minimum numeric value. Values below are clamped on blur. */
+  min?: number;
+  /** Maximum numeric value. Values above are clamped on blur. */
+  max?: number;
+  /** Size preset: "sm" | "md" | "lg". @default "md" */
+  size?: SizesTypes;
+  /** Disable the input. @default false */
+  disabled?: boolean;
+  /** Render the input in read-only mode. @default false */
+  readOnly?: boolean;
+  /** Mark the field as required. @default false */
+  required?: boolean;
+  /** Whether the field has been touched by the user. */
+  touched?: boolean;
+  /** Validation error. Pass `true` for a generic message, or a string for a custom one. */
+  error?: string | boolean;
+  /** Icon element rendered on the left side of the input. Takes precedence over `prefix`. */
+  iconLeft?: ReactNode;
+  /** Icon element rendered on the right side of the input. */
+  iconRight?: ReactNode;
+  /** Additional CSS classes for the outer container. */
+  containerClassName?: string;
+  /** Additional CSS classes for the label. */
+  labelClassName?: string;
+  /** Additional CSS classes for the input element. */
+  className?: string;
+  /** Auto-focus the input on mount. @default false */
+  autoFocus?: boolean;
+  /** Select all content on click. @default false */
+  focusContent?: boolean;
+  /** Keydown handler for the underlying input. */
+  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+}

package/src/components/atoms/input-number/input-number.stories.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { FaDollarSign } from 'react-icons/fa';
+import ITInputNumber from '@/components/atoms/input-number/input-number';
+import { ITInputNumberProps } from './input-number.props';
+
+const meta: Meta<typeof ITInputNumber> = {
+  title: 'Components/Form Elements/ITInputNumber',
+  component: ITInputNumber,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    decimals: { control: 'number' },
+    disabled: { control: 'boolean' },
+    error: { control: 'text' },
+    min: { control: 'number' },
+    max: { control: 'number' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ITInputNumber>;
+
+/** Wrapper that keeps the value in state so the story reflects real usage. */
+const Interactive = (props: Partial<ITInputNumberProps> & Pick<ITInputNumberProps, 'name'>) => {
+  const [value, setValue] = useState<number | null>(null);
+  return (
+    <div className="w-80">
+      <ITInputNumber
+        label="Monto"
+        placeholder="0.00"
+        {...props}
+        value={value}
+        onChange={(next) => setValue(next ?? null)}
+      />
+      <p className="mt-2 text-xs font-mono text-slate-500">
+        value: {value === null ? 'null' : `${value} (${typeof value})`}
+      </p>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => <Interactive name="amount" />,
+};
+
+export const WithPrefix: Story = {
+  render: () => <Interactive name="amount-prefix" prefix="$" />,
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <Interactive name="amount-icon" iconLeft={<FaDollarSign className="text-slate-400" />} />
+  ),
+};
+
+export const InitialValue: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(1234.5);
+    return (
+      <div className="w-80">
+        <ITInputNumber
+          name="amount-initial"
+          label="Monto inicial"
+          prefix="$"
+          value={value}
+          onChange={(next) => setValue(next ?? null)}
+        />
+        <p className="mt-2 text-xs font-mono text-slate-500">value: {value === null ? 'null' : value}</p>
+      </div>
+    );
+  },
+};
+
+export const IntegersOnly: Story = {
+  render: () => <Interactive name="quantity" label="Cantidad" decimals={0} />,
+};
+
+export const WithBounds: Story = {
+  render: () => <Interactive name="bounded" label="Entre 10 y 500" min={10} max={500} />,
+};
+
+export const WithError: Story = {
+  render: () => (
+    <Interactive
+      name="amount-error"
+      label="Monto"
+      prefix="$"
+      touched
+      error="El monto es obligatorio"
+    />
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-80">
+      <ITInputNumber name="amount-disabled" label="Monto" value={1234.5} disabled onChange={() => {}} />
+    </div>
+  ),
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="w-80">
+      <ITInputNumber name="amount-readonly" label="Monto" prefix="$" value={98765.43} readOnly onChange={() => {}} />
+    </div>
+  ),
+};

package/src/components/atoms/input-number/input-number.tsx

@@ -0,0 +1,86 @@
+import { ChangeEvent, FocusEvent } from "react";
+import ITInput from "@/components/atoms/input/input";
+import ITText from "@/components/atoms/text/text";
+import { ITInputNumberProps } from "./input-number.props";
+
+/** Parse a display value ("1,234.50", 1234.5, "") into a number, or `undefined` when empty. */
+function parseNumber(raw: unknown): number | undefined {
+  if (raw === undefined || raw === null) return undefined;
+  if (typeof raw === "number") return Number.isFinite(raw) ? raw : undefined;
+  const cleaned = String(raw).replace(/,/g, "").trim();
+  if (cleaned === "" || cleaned === "-" || cleaned === ".") return undefined;
+  const parsed = Number(cleaned);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+/**
+ * Numeric field that always renders currency-style formatting (thousand
+ * separators + fixed decimals) and emits a real `number`.
+ *
+ * Built on top of `ITInput`: it is the same field, but `onChange`/`onBlur`
+ * already receive the parsed value, so consumers can do math directly instead
+ * of converting strings first.
+ *
+ * @example
+ * ```tsx
+ * <ITInputNumber
+ *   name="amount"
+ *   label="Monto"
+ *   value={amount}
+ *   prefix="$"
+ *   onChange={(value) => setAmount(value)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Enteros (sin decimales) con límites
+ * <ITInputNumber
+ *   name="qty"
+ *   label="Cantidad"
+ *   decimals={0}
+ *   min={1}
+ *   max={99}
+ *   value={qty}
+ *   onChange={(value) => setQty(value)}
+ * />
+ * ```
+ */
+export default function ITInputNumber({
+  value,
+  onChange,
+  onBlur,
+  decimals = 2,
+  prefix,
+  iconLeft,
+  ...rest
+}: ITInputNumberProps) {
+  const resolvedIconLeft =
+    iconLeft ??
+    (prefix ? (
+      <ITText as="span" className="text-secondary-500 text-xs font-semibold">
+        {prefix}
+      </ITText>
+    ) : undefined);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(parseNumber(event.target.value), event);
+  };
+
+  return (
+    <ITInput
+      {...rest}
+      type="number"
+      currencyFormat
+      formatNumber
+      decimals={decimals}
+      iconLeft={resolvedIconLeft}
+      value={value ?? ""}
+      onChange={handleChange}
+      onBlur={(event) => {
+        const input = event.target as HTMLInputElement;
+        onBlur?.(parseNumber(input.value), event as FocusEvent<HTMLInputElement>);
+      }}
+    />
+  );
+}

package/src/components/molecules/date-picker/datePicker.tsx

@@ -292,6 +292,7 @@ export default function ITDatePicker({
         createPortal(
           <div
             ref={panelRef}
+            data-it-floating="true"
             className={clsx(
               calendarClassName,
               range ? "w-[320px]" : "w-[280px]"

package/src/components/molecules/dropdown-menu/dropdown-menu.tsx

@@ -172,6 +172,7 @@ export default function ITDropdownMenu({
         createPortal(
           <div
             ref={panelRef}
+            data-it-floating="true"
             role="menu"
             aria-label={triggerLabel}
             style={panelStyle}

package/src/components/molecules/multi-select/multi-select.tsx

@@ -323,6 +323,7 @@ export default function ITMultiSelect({
           createPortal(
             <div
               ref={panelRef}
+              data-it-floating="true"
               role="listbox"
               aria-multiselectable="true"
               style={panelStyle}

package/src/components/molecules/search-select/search-select.tsx

@@ -283,6 +283,7 @@ export default function ITSearchSelect({
           createPortal(
             <div
               ref={panelRef}
+              data-it-floating="true"
               style={panelStyle}
               className="bg-white dark:bg-slate-900 border border-secondary-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top"
             >

package/src/components/molecules/time-picker/timePicker.tsx

@@ -217,6 +217,7 @@ export default function ITTimePicker({
       {isOpen && !disabled && createPortal(
         <div 
           ref={dropdownRef}
+          data-it-floating="true"
           className="bg-white border border-secondary-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown"
           style={panelStyle}
         >

package/src/components/organisms/dialog/dialog.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta } from '@storybook/react';
 import ITDialog from '@/components/organisms/dialog/dialog';
+import ITSearchSelect from '@/components/molecules/search-select/search-select';
 import { useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
 import ITButton from '@/components/atoms/button/button';
 
 const meta = {
@@ -76,3 +78,49 @@ export const LongContent: any = {
     className: 'w-[600px]',
   } as any,
 };
+
+// Dialog opened on mount but controlled, so an unexpected close is observable.
+const DialogWithSearchSelect = () => {
+  const [fruit, setFruit] = useState('');
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <ITDialog isOpen={isOpen} onClose={() => setIsOpen(false)} title="Fruta favorita">
+      <ITSearchSelect
+        label="Fruta"
+        placeholder="Busca una fruta..."
+        options={[
+          { value: 'apple', label: 'Apple' },
+          { value: 'banana', label: 'Banana' },
+        ]}
+        value={fruit}
+        onChange={(next) => setFruit(String(next))}
+      />
+    </ITDialog>
+  );
+};
+
+/**
+ * Regression test: floating panels (selects, pickers, menus) are portaled to
+ * `<body>`, so they live outside the dialog DOM. Picking an option there must
+ * not count as a click outside the dialog.
+ *
+ * Note the whole dialog and its dropdown are portaled, so they are queried
+ * from `document.body` instead of the story canvas.
+ */
+export const FloatingPanelInsideDialog: any = {
+  render: () => <DialogWithSearchSelect />,
+  play: async () => {
+    const view = within(document.body);
+
+    const input = await view.findByPlaceholderText('Busca una fruta...');
+    await userEvent.click(input);
+
+    await userEvent.click(await view.findByText('Banana'));
+
+    // The dialog must still be mounted after picking an option.
+    await expect(view.getByText('Fruta favorita')).toBeVisible();
+    await expect((input as HTMLInputElement).value).toBe('Banana');
+  },
+};
+