@axzydev/axzy_ui_system 1.3.4 → 1.3.6

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -38,7 +38,11 @@
     "bundle": "tsup src/index.ts && node scripts/build-css.mjs",
     "watch": "tsup src/index.ts --watch",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "ext:catalog": "node vscode-extension/scripts/generate-catalog.mjs",
+    "ext:build": "node vscode-extension/esbuild.mjs",
+    "ext:typecheck": "tsc --noEmit -p vscode-extension/tsconfig.json",
+    "ext:package": "node vscode-extension/esbuild.mjs && cd vscode-extension && npx --yes @vscode/vsce package --no-dependencies"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -81,6 +85,8 @@
     "vitest": "^4.0.18",
     "playwright": "^1.58.0",
     "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18"
+    "@vitest/coverage-v8": "^4.0.18",
+    "@types/vscode": "1.85.0",
+    "esbuild": "^0.25.0"
   }
 }

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/table/table.doc.mdx

@@ -11,7 +11,7 @@ Basic data table with column definitions, sorting, and configurable visual varia
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `columns` | `Column<T>[]` | — | Column definitions: key, label, type, sortable, filter, render, actions, plus layout fields `width` (`number` px or CSS `string`), `minWidth` (px), `align` (`"left" \| "center" \| "right"`), and `truncate` (ellipsis + native `title`). |
+| `columns` | `Column<T>[]` | — | Column definitions: key, label, type, sortable, filter, render, actions, plus layout fields `width` (`number` px or CSS `string`), `minWidth` (px), `align` (`"left" \| "center" \| "right"`), `truncate` (ellipsis + native `title`), and `pinned` (`"left" \| "right"`). |
 | `data` | `T[]` | `[]` | Row data array. |
 | `variant` | `"default" \| "striped" \| "bordered"` | `"default"` | Visual style variant. |
 | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Font-size preset (does not change padding). |
@@ -42,6 +42,7 @@ Basic data table with column definitions, sorting, and configurable visual varia
 | `minWidth` | `number` | — | Minimum column width in px, applied to header and body cells via inline style. |
 | `align` | `"left" \| "center" \| "right"` | `"left"` | Horizontal alignment of the column's header and cells. |
 | `truncate` | `boolean` | `false` | Truncates overflowing cell content with an ellipsis and exposes the raw string/number via the native `title` attribute. |
+| `pinned` | `"left" \| "right"` | `undefined` | Freezes the column to the given horizontal edge while the table scrolls sideways. `"left"` keeps it flush to the left edge, `"right"` to the right edge. Omit to leave the column unpinned (identical to the previous behavior). Offsets accumulate from each preceding pinned column's pixel `width` / `minWidth`, so give every pinned column of a side a pixel `width`. The pinned cell gets an opaque background (row background + row hover) and a 1px separator shadow on its frozen edge. One pinned column per side is the supported contract. |
 | `filter` | `true \| "catalog" \| "search" \| "date" \| "date-range"` | `false` | Filter control rendered in the header. `true` = text/number input (or boolean toggle when `type: "boolean"`); `"catalog"` = `ITSelect` fed by `catalogOptions.data`; `"search"` = `ITSearchSelect` typeahead fed by `catalogOptions.data` (optional `catalogOptions.onSearch` for server-side search); `"date"` / `"date-range"` = `ITDatePicker` single/range, bounded by `dateFilterOptions`. |
 
 ## Usage
@@ -85,6 +86,15 @@ const fixedColumns = [
 ];
 
 <ITTable columns={fixedColumns} data={data} layout="fixed" density="compact" />
+
+// Pinned columns: freeze the first column left and the last one right
+const pinnedColumns = [
+  { key: 'id',      label: 'ID',      type: 'number',  width: 72,  pinned: 'left' },
+  { key: 'name',    label: 'Name',    type: 'string',  width: 240, truncate: true },
+  { key: 'actions', label: 'Actions', type: 'actions', width: 104, pinned: 'right' },
+];
+
+<ITTable columns={pinnedColumns} data={data} layout="fixed" density="compact" />
 ```
 
 ## Notes
@@ -97,6 +107,7 @@ const fixedColumns = [
 - When `onRowClick` is omitted no `cursor-pointer`, focus ring, `tabIndex`, or `role` is added.
 - `density` controls padding/row height (`compact` 33px / `normal` 45px / `comfortable` 53px at `size="md"`); `size` changes font-size and shifts the row height by the line box (sm 16px / md 20px / lg 28px).
 - **Anti horizontal scroll recipe:** `layout="fixed"` + a `width` on every column + `truncate` on long text + `density="compact"`. `width` accepts a `number` (px) or any CSS length string (`"20%"`, `"12rem"`). A `<colgroup>` is only emitted when at least one column defines a `width`.
+- **Pinned columns:** set `columns[].pinned: "left" | "right"` to freeze a column to that edge during horizontal scroll (`position: sticky`; the wrapper needs no `relative`). Omitting `pinned` renders exactly as before. Sticky offsets accumulate from each preceding pinned column's pixel `width` / `minWidth`; a non-px width contributes `minWidth ?? 0`, so give every pinned column of a side a pixel `width`. The pinned cell gets an opaque background (`--color-table-rowBg`, row hover `--color-table-rowHover`) and a 1px separator shadow on its frozen edge. Z-layering: pinned body cell `z-[1]` < sticky header `z-10` < pinned header `z-[15]`; it composes with `stickyHeader` and `virtualized`. One pinned column per side is the supported contract. Known limitation: with `variant="striped"` the opaque pinned background covers that column's stripe tint.
 - With the default `layout="auto"`, `min-w-max` stays active so column widths can still reflow as different cell content enters the window during vertical scroll. Use `layout="fixed"` + column `width` for stable widths.
 - `autoCardBreakpoint` swaps to the cards view when the container (not the viewport) is narrower than the given px value; the Table toggle is disabled while forced, the Cards toggle stays enabled.
 - **Virtualization** applies to the **table view only** — the cards view is never virtualized. It only pays off with a large page size: raise `defaultItemsPerPage` and `itemsPerPageOptions` (defaults are `10` and `[5, 10, 20]`). Rows are assumed to have a uniform `rowHeight`; use `truncate` + `layout="fixed"` for predictable heights.

package/src/components/molecules/table/table.props.ts

@@ -90,6 +90,23 @@ export interface Column<T = any> {
    * @default false
    */
   truncate?: boolean;
+  /**
+   * Pins this column to a horizontal edge so it stays visible while the table
+   * scrolls sideways.
+   *
+   * - `"left"` — freezes the column flush to the left edge.
+   * - `"right"` — freezes the column flush to the right edge.
+   *
+   * Omit to leave the column unpinned. When more than one column shares a side,
+   * sticky offsets accumulate from each preceding pinned column's `width` /
+   * `minWidth`; a column without a pixel width resolves to `0px`, so declare a
+   * pixel `width` on every pinned column of that side to avoid overlap. The
+   * pinned cell renders an opaque background (row background + row hover) and a
+   * 1px separator shadow on its frozen edge.
+   *
+   * @default undefined (column not pinned)
+   */
+  pinned?: "left" | "right";
 }
 
 export interface ITTableProps<T> {

package/src/components/molecules/table/table.stories.tsx

@@ -272,6 +272,51 @@ export const FixedLayoutWithWidths: Story = {
   } as any,
 };
 
+// Pixel widths force the total past the 520px wrapper, so the ID (left) and
+// Actions (right) columns stay frozen while the middle scrolls sideways.
+const pinnedColumns: Column<User>[] = [
+  { key: "id", label: "ID", type: "number", width: 72, minWidth: 56, align: "center", pinned: "left" },
+  { key: "name", label: "Name", type: "string", width: 240, truncate: true },
+  { key: "email", label: "Email", type: "string", width: 280, truncate: true },
+  { key: "balance", label: "Balance", type: "number", width: 160, currencyMX: true },
+  { key: "lastLogin", label: "Last login", type: "string", width: 160, truncate: true },
+  {
+    key: "isActive",
+    label: "Status",
+    type: "boolean",
+    width: 104,
+    align: "center",
+  },
+  {
+    key: "actions",
+    label: "Actions",
+    type: "actions",
+    width: 104,
+    pinned: "right",
+    actions: () => (
+      <ITButton size="sm" variant="text" color="danger" ariaLabel="Delete">
+        <FaTrash />
+      </ITButton>
+    ),
+  },
+];
+
+export const PinnedColumns: Story = {
+  render: (args: any) => (
+    <div style={{ width: 520 }} className="rounded-lg border border-dashed border-slate-300">
+      <ITTable {...args} />
+    </div>
+  ),
+  args: {
+    columns: pinnedColumns,
+    data: mockData.slice(0, 6),
+    title: "Pinned left (ID) & right (Actions)",
+    layout: "fixed",
+    density: "compact",
+    defaultItemsPerPage: 6,
+  } as any,
+};
+
 export const AutoCardsNarrowContainer: Story = {
   render: (args: any) => (
     <div style={{ width: 420 }} className="rounded-lg border border-dashed border-slate-300">