@axzydev/axzy_ui_system 1.3.5 → 1.3.6

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "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/organisms/sidebar/sidebar.doc.mdx

@@ -13,13 +13,13 @@ Vertical navigation sidebar with collapsible submenus, tooltips when collapsed,
 |------|------|---------|-------------|
 | `navigationItems` | `ITNavigationItem[]` | — | Navigation structure: top-level items with optional sub-items. |
 | `isCollapsed` | `boolean` | `false` | Whether the sidebar is collapsed to icon-only mode. |
-| `onToggleCollapse` | `() => void` | — | Callback when the user toggles collapse via the toggle button. |
-| `visibleOnMobile` | `boolean` | `false` | Force sidebar visible on mobile breakpoints. |
+| `onToggleCollapse` | `() => void` | — | Accepted for API compatibility but never invoked by `ITSidebar`: the component renders no collapse toggle button (the rail expands on pointer hover). `ITLayout` still passes it through. |
+| `visibleOnMobile` | `boolean` | `false` | When `true`, the sidebar is always fully expanded (the collapsed 88px rail is disabled) and visible at every breakpoint. |
 | `onItemClick` | `(item: ITNavigationItem) => void` | — | Callback when a top-level navigation item is clicked. |
 | `onSubItemClick` | `(subitem: ITNavigationSubItem) => void` | — | Callback when a sub-navigation item is clicked. |
 | `subitemConnector` | `"dot" \| "\|" \| "none"` | `"dot"` | Visual connector style for sub-items. |
 | `className` | `string` | — | Additional CSS classes on the sidebar `<aside>`. |
-| `header` | `ReactNode` | — | Optional content rendered above the navigation list (e.g. a wordmark). Hidden while the sidebar is collapsed, and independent of the collapse toggle button, which is always visible in both states. |
+| `header` | `ReactNode` | — | Optional content rendered above the navigation list (e.g. a wordmark). Hidden while the sidebar is collapsed, so it only appears when the hover-expanded rail is shown. |
 
 ### ITNavigationItem
 
@@ -30,7 +30,7 @@ Vertical navigation sidebar with collapsible submenus, tooltips when collapsed,
 | `icon` | `ReactNode` | Icon rendered left of the label. |
 | `action` | `() => void` | Click handler for top-level items without submenus. |
 | `isActive` | `boolean` | Whether this item is active/highlighted. |
-| `subitems` | `ITNavigationSubItemEntry[]` | Plain sub-items or titled groups. |
+| `subitems` | `ITNavigationSubItemEntry[]` | Array of entries: plain sub-items or titled groups (`ITNavigationSubItemGroup`). |
 | `badge` | `string` | Badge text (e.g. notification count). |
 
 ### ITNavigationSubItem
@@ -77,7 +77,6 @@ const items = [
 <ITSidebar
   navigationItems={items}
   isCollapsed={false}
-  onToggleCollapse={toggleCollapse}
   subitemConnector="dot"
 />
 ```
@@ -104,17 +103,18 @@ const items = [
 ];
 ```
 
+Discriminate entries with `"items" in entry`. The heading style (uppercase, `0.68rem`, weight 700, `0.08em` tracking, `var(--it-sidebar-icon-color, var(--color-secondary-400))`) is applied by the component and cannot be overridden per group.
+
 ## Notes
 
-- The button lives above the scrollable `<nav>` (never inside it), so it stays in the tab order and visible in both states; it is centered in the 88px rail when collapsed and right-aligned when expanded.
-- The toggle is a real `<button type="button">` with `aria-expanded`, `aria-controls` pointing at the `<nav>` it controls, and a state-dependent `aria-label`/`title` ("Expandir/Colapsar barra lateral"). Its chevron rotates 180° when the sidebar is expanded, so one icon signals both directions.
-- There is no collapse toggle button: the collapsed rail expands and collapses automatically on pointer hover.
-- Collapsed mode shrinks to icon-only; tooltips show labels on hover with glassmorphism style.
-- Submenus expand/collapse with smooth transitions when a parent item is clicked.
+- There is no collapse toggle button: the collapsed 88px rail expands and collapses automatically on pointer hover (300 ms leave delay).
+- Collapsed mode shrinks to icon-only; a glassmorphism panel shows the item's sub-items on hover. For an item whose `subitems` contain groups, that panel **flattens** every group into one plain list and renders **no** group headings.
+- Submenus expand/collapse with smooth transitions when a parent item is clicked; the expanded submenu is animated with a `max-h` transition (cap `1000px`).
 - Active item highlighting uses a colored left-border accent and subtle background tint.
 - Badge support renders a notification-style counter on the item.
-- `subitemConnector` styles the visual link between parent and sub-items: `dot` (default), `|` (vertical bar), or `none`.
-- `visibleOnMobile` forces sidebar visibility on smaller screens for responsive layouts.
+- `subitemConnector` styles the visual link between parent and sub-items: `dot` (default), `|` (vertical bar), or `none`. Grouping does not change it: the `|` guide is a single `border-left` on the outer submenu `<ul>` only.
+- An active sub-item inside a group still auto-expands its parent, because auto-expand flattens groups the same way the collapsed flyout does.
+- `visibleOnMobile` forces the sidebar visible at every breakpoint and disables the collapsed rail, so it stays fully expanded.
 - Themed via CSS variables for consistent colors, shadows, and glassmorphism effects across light and dark modes.
 - Accessible by default: the `<nav>` is labelled and carries the `id` referenced by the toggle's `aria-controls`, the toggle exposes `aria-expanded` plus a visible `focus-visible` ring, group toggles expose `aria-expanded`/`aria-controls` and respond to Enter/Space, submenus are labelled `role="group"`, and the active sub-item carries `aria-current="page"`.
 - `subitems` accepts plain sub-items or titled groups (`label` + `items`); the group heading is rendered as a plain `<span>` inside a non-focusable `<div>`, so it is non-interactive and stays out of the tab order.

package/src/index.ts

@@ -36,6 +36,7 @@ import ITFormHeader from "./components/molecules/form-header/form-header";
 import ITGrid from "./components/atoms/grid/grid";
 import ITImage from "./components/atoms/image/image";
 import ITInput from "./components/atoms/input/input";
+import ITInputNumber from "./components/atoms/input-number/input-number";
 import ITNavbar from "./components/organisms/navbar/navbar";
 import ITPage from "./components/templates/page/page";
 import ITPageHeader from "./components/organisms/page-header/page-header";
@@ -90,6 +91,7 @@ import type { ITFormHeaderProps } from "./components/molecules/form-header/form-
 import type { ITGridProps } from "./components/atoms/grid/grid.props";
 import type { ITImageProps } from "./components/atoms/image/image.props";
 import type { ITInputProps } from "./components/atoms/input/input.props";
+import type { ITInputNumberProps } from "./components/atoms/input-number/input-number.props";
 import type { ITNavbarProps } from "./components/organisms/navbar/navbar.props";
 import type { ITPageProps } from "./components/templates/page/page.props";
 import type { ITPageHeaderProps } from "./components/organisms/page-header/page-header.props";
@@ -145,7 +147,7 @@ export {
   ITCard, ITCheckbox, ITChip, ITChipInput, ITConfirmDialog, ITDataTable, ITDatePicker,
   ITDropdownMenu, ITField, ITMaskedInput, ITMultiSelect,
   ITDialog, ITDivider, ITDrawer,
-  ITDropfile, ITEmptyState, ITFlex, ITFormBuilder, ITFormHeader, ITGrid, ITImage, ITInput, ITLayout,
+  ITDropfile, ITEmptyState, ITFlex, ITFormBuilder, ITFormHeader, ITGrid, ITImage, ITInput, ITInputNumber, ITLayout,
   ITLoader,   ITNavbar, ITPage, ITPageHeader, ITPagination, ITPopover, ITProgress,
   ITRadioGroup, ITSelect, ITSearchSelect,
   ITSearchTable,
@@ -169,7 +171,7 @@ export {
     ITDialogProps, ITDividerProps, ITDrawerProps,
     ITEmptyStateProps, ITFlexProps,
     ITFormBuilderProps, ITFormHeaderProps,
-    ITGridProps, ITImageProps, ITInputProps,
+    ITGridProps, ITImageProps, ITInputProps, ITInputNumberProps,
     ITLayoutProps, ITLoaderProps, ITNavbarProps,
     ITPageProps, ITPageHeaderProps,
     ITNavigationItem, ITNavigationSubItem,

package/src/sandbox/navigation.ts

@@ -56,6 +56,7 @@ export const SANDBOX_GROUPS: SandboxGroup[] = [
     subitems: [
       { id: "button", label: "ITButton" },
       { id: "input", label: "ITInput" },
+      { id: "inputnumber", label: "ITInputNumber" },
       { id: "select", label: "ITSelect" },
       { id: "searchselect", label: "ITSearchSelect" },
       { id: "multiselect", label: "ITMultiSelect" },
@@ -66,6 +67,7 @@ export const SANDBOX_GROUPS: SandboxGroup[] = [
       { id: "maskedinput", label: "ITMaskedInput" },
       { id: "calendar", label: "ITCalendar" },
       { id: "slidetoggle", label: "ITSlideToggle" },
+      { id: "segmentedcontrol", label: "ITSegmentedControl" },
       { id: "dropfile", label: "ITDropfile" },
       { id: "wysiwyg", label: "ITWysiwyg" },
       { id: "formbuilder", label: "ITFormBuilder" },