@axzydev/axzy_ui_system 1.2.16 → 1.3.1

package/src/components/molecules/accordion/accordion.tsx

@@ -0,0 +1,123 @@
+import clsx from "clsx";
+import { useState } from "react";
+import { FaChevronDown } from "react-icons/fa";
+import { ITAccordionProps } from "./accordion.props";
+import ITText from "@/components/atoms/text/text";
+
+/**
+ * Collapsible sections for FAQs, settings panels, and long content.
+ *
+ * Works uncontrolled (`defaultOpenIds`) or controlled (`openIds` + `onChange`).
+ * Supports single-open (default) or multiple-open mode, and animates the body
+ * with a CSS grid-rows transition (no JS height measurement).
+ *
+ * @example
+ * <ITAccordion
+ *   items={[
+ *     { id: "a", title: "¿Qué es AXZY?", content: "Un sistema de componentes." },
+ *     { id: "b", title: "¿Cómo instalo?", content: "pnpm add @axzydev/axzy_ui_system" },
+ *   ]}
+ *   defaultOpenIds={["a"]}
+ * />
+ */
+export default function ITAccordion({
+  items,
+  allowMultiple = false,
+  defaultOpenIds = [],
+  openIds,
+  onChange,
+  variant = "separated",
+  className,
+  itemClassName,
+}: ITAccordionProps) {
+  const [internalOpen, setInternalOpen] = useState<string[]>(defaultOpenIds);
+  const isControlled = openIds !== undefined;
+  const currentOpen = isControlled ? openIds : internalOpen;
+
+  const toggle = (id: string) => {
+    const isOpen = currentOpen.includes(id);
+    let next: string[];
+    if (isOpen) {
+      next = currentOpen.filter((x) => x !== id);
+    } else {
+      next = allowMultiple ? [...currentOpen, id] : [id];
+    }
+    if (!isControlled) setInternalOpen(next);
+    onChange?.(next);
+  };
+
+  const wrapperClass =
+    variant === "separated"
+      ? clsx("flex flex-col gap-2", className)
+      : clsx(
+          "rounded-xl border border-secondary-200 dark:border-slate-700 overflow-hidden",
+          className
+        );
+
+  return (
+    <div className={wrapperClass}>
+      {items.map((item, index) => {
+        const isOpen = currentOpen.includes(item.id);
+        const panelId = `it-accordion-panel-${item.id}`;
+        const buttonId = `it-accordion-button-${item.id}`;
+        const itemClass = clsx(
+          variant === "separated" &&
+            "rounded-xl border border-secondary-200 dark:border-slate-700 overflow-hidden bg-white dark:bg-slate-900",
+          variant === "bordered" &&
+            index > 0 &&
+            "border-t border-secondary-200 dark:border-slate-700",
+          item.disabled && "opacity-50",
+          itemClassName
+        );
+
+        return (
+          <div key={item.id} className={itemClass}>
+            <h3 className="m-0">
+              <button
+                type="button"
+                id={buttonId}
+                aria-expanded={isOpen}
+                aria-controls={panelId}
+                disabled={item.disabled}
+                onClick={() => toggle(item.id)}
+                className={clsx(
+                  "w-full flex items-center gap-3 px-4 py-3 text-left transition-colors",
+                  "text-sm font-semibold text-secondary-800 dark:text-slate-100",
+                  "hover:bg-secondary-50 dark:hover:bg-slate-800",
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-400",
+                  item.disabled && "cursor-not-allowed hover:bg-transparent"
+                )}
+              >
+                {item.icon && <span className="shrink-0 text-secondary-500">{item.icon}</span>}
+                <ITText as="span" className="flex-1">{item.title}</ITText>
+                <FaChevronDown
+                  size={12}
+                  className={clsx(
+                    "shrink-0 text-secondary-400 transition-transform duration-200",
+                    isOpen && "rotate-180"
+                  )}
+                />
+              </button>
+            </h3>
+
+            <div
+              id={panelId}
+              role="region"
+              aria-labelledby={buttonId}
+              className={clsx(
+                "grid transition-all duration-200 ease-in-out",
+                isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+              )}
+            >
+              <div className="overflow-hidden">
+                <div className="px-4 pb-4 pt-1 text-sm text-secondary-600 dark:text-slate-300">
+                  {item.content}
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/molecules/calendar/calendar.doc.mdx

@@ -61,7 +61,8 @@ import { ITCalendar } from '@axzydev/axzy_ui_system';
 - **month** — Traditional month grid with date picker, single and range selection modes.
 - **week** — 7-column time grid from 6 AM to 10 PM with event overlays and drag-to-select range.
 - **day** — Single-column time grid for focused daily scheduling.
-- **years** — Click the month/year header to switch to a year selection view (12-year grid).
+- **years** — Click the year in the header to switch to a year selection view (12-year grid).
+- **months** — Click the month name in the header (or pick a year) to switch to a month selection view (12-month grid, same style as the year grid). Flow: header → year → month → days.
 - Uses `date-fns` with Spanish locale (`es`) for month and weekday names.
 - Month view supports `minDate`/`maxDate` boundaries — out-of-range dates are disabled and dimmed.
 - Events render as colored bars in week/day views with customizable `color` prop.

package/src/components/molecules/calendar/calendar.tsx

@@ -78,7 +78,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
   const mode = modeProp || (onChange ? 'month' : 'week');
   
   const [currentDate, setCurrentDate] = useState(value || new Date());
-  const [view, setView] = useState<'calendar' | 'years'>('calendar');
+  const [view, setView] = useState<'calendar' | 'years' | 'months'>('calendar');
 
   // Selection/Accent colors based on variant
   const getVariantStyles = () => {
@@ -96,6 +96,25 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
     if (value) setCurrentDate(value);
   }, [value]);
 
+  // Shift the view year while keeping the day-of-month safe (clamped to target month).
+  const shiftYear = (yearDelta: number) => {
+    setCurrentDate((d) => {
+      const year = d.getFullYear() + yearDelta;
+      const daysInTarget = new Date(year, d.getMonth() + 1, 0).getDate();
+      return new Date(year, d.getMonth(), Math.min(d.getDate(), daysInTarget));
+    });
+  };
+
+  // Jump to a month of the currently viewed year (day-of-month clamped).
+  const pickMonth = (monthIndex: number) => {
+    setCurrentDate((d) => {
+      const year = d.getFullYear();
+      const daysInTarget = new Date(year, monthIndex + 1, 0).getDate();
+      return new Date(year, monthIndex, Math.min(d.getDate(), daysInTarget));
+    });
+    setView('calendar');
+  };
+
   // Navigation handlers
   const handleNext = () => {
     if (view === 'years') {
@@ -104,6 +123,8 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
         newDate.setFullYear(d.getFullYear() + 12);
         return newDate;
       });
+    } else if (view === 'months') {
+      shiftYear(1);
     } else if (mode === 'month') {
       setCurrentDate((d) => addMonths(d, 1));
     } else if (mode === 'day') {
@@ -120,7 +141,9 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
         newDate.setFullYear(d.getFullYear() - 12);
         return newDate;
       });
-     } else if (mode === 'month') {
+     } else if (view === 'months') {
+      shiftYear(-1);
+    } else if (mode === 'month') {
       setCurrentDate((d) => addMonths(d, -1));
     } else if (mode === 'day') {
       setCurrentDate((d) => addDays(d, -1));
@@ -249,6 +272,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
   // ----------------------------------------------------------------------
   const startYear = currentDate.getFullYear() - 6;
   const years = Array.from({ length: 12 }, (_, i) => startYear + i);
+  const months = Array.from({ length: 12 }, (_, i) => i);
 
   // ----------------------------------------------------------------------
   // Render
@@ -277,25 +301,50 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
           borderBottomColor: 'var(--it-calendar-border, #e2e8f0)'
         }}
       >
-        <ITText
-            as="h2"
-            className="text-sm font-bold capitalize cursor-pointer transition-colors select-none px-2 py-1 rounded"
-            style={{ 
-              color: 'var(--it-calendar-header-text, #1e293b)',
-            }}
-             onClick={() => setView(view === 'calendar' ? 'years' : 'calendar')}
-             onMouseEnter={(e) => {
-               e.currentTarget.style.backgroundColor = 'var(--it-calendar-header-hover, #f1f5f9)';
-             }}
-             onMouseLeave={(e) => {
-               e.currentTarget.style.backgroundColor = 'transparent';
-             }}
-        >
-          {view === 'years' 
-            ? `${years[0]} - ${years[years.length - 1]}` 
-            : format(currentDate, 'MMMM yyyy', { locale: es })
-          }
-        </ITText>
+        {view === 'years' ? (
+          <ITText
+              as="h2"
+              className="text-sm font-bold select-none px-2 py-1"
+              style={{ 
+                color: 'var(--it-calendar-header-text, #1e293b)',
+              }}
+          >
+            {`${years[0]} - ${years[years.length - 1]}`}
+          </ITText>
+        ) : (
+          <div className="flex items-center">
+            {view !== 'months' && (
+              <button
+                type="button"
+                onClick={() => setView('months')}
+                className="text-sm font-bold capitalize select-none px-2 py-1 rounded transition-colors"
+                style={{ color: 'var(--it-calendar-header-text, #1e293b)' }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.backgroundColor = 'var(--it-calendar-header-hover, #f1f5f9)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.backgroundColor = 'transparent';
+                }}
+              >
+                {format(currentDate, 'MMMM', { locale: es })}
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => setView('years')}
+              className="text-sm font-bold select-none px-2 py-1 rounded transition-colors"
+              style={{ color: 'var(--it-calendar-header-text, #1e293b)' }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = 'var(--it-calendar-header-hover, #f1f5f9)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = 'transparent';
+              }}
+            >
+              {format(currentDate, 'yyyy')}
+            </button>
+          </div>
+        )}
         <div className="flex items-center gap-1">
           <button 
             onClick={handlePrev} 
@@ -359,13 +408,41 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                                   newDate.setFullYear(year);
                                   return newDate;
                               });
-                              setView('calendar');
+                              setView('months');
                           }}
                       >
                           <ITText as="span">{year}</ITText>
                       </button>
                   ))}
               </div>
+        ) : view === 'months' ? (
+              <div className="p-4 grid grid-cols-4 gap-2">
+                  {months.map(monthIndex => {
+                      const isActive = monthIndex === currentDate.getMonth();
+                      return (
+                          <button
+                              key={monthIndex}
+                              type="button"
+                              className={cn(
+                                  "h-10 rounded-md text-sm font-medium transition-colors border border-transparent",
+                                  isActive
+                                    ? "bg-[var(--it-calendar-selected-bg)] text-[var(--it-calendar-selected-text)]"
+                                    : "hover:bg-[var(--it-calendar-today-bg)] hover:text-[var(--it-calendar-today-text)]"
+                              )}
+                              style={{
+                                  color: isActive
+                                    ? 'var(--it-calendar-selected-text, #ffffff)'
+                                    : 'var(--it-calendar-days-text, #334155)'
+                              }}
+                              onClick={() => pickMonth(monthIndex)}
+                          >
+                              <ITText as="span" className="capitalize">
+                                  {format(new Date(2000, monthIndex, 1), 'MMM', { locale: es })}
+                              </ITText>
+                          </button>
+                      );
+                  })}
+              </div>
         ) : mode === 'month' ? (
            <div className="p-4">
              {/* Weekday Headers */}
@@ -396,6 +473,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                       onClick={() => onChange && onChange(day)}
                       className={cn(
                         "h-10 w-full flex items-center justify-center rounded-md text-sm transition-colors relative",
+                        "text-[var(--it-calendar-days-text)] hover:bg-[var(--it-calendar-today-bg)] hover:text-[var(--it-calendar-today-text)]",
                         !isCurrentMonth && "opacity-40",
                         isDisabled && "opacity-20 cursor-not-allowed",
                       )}
@@ -406,12 +484,12 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                             ? 'var(--it-calendar-range-bg, #eff6ff)'
                             : isToday(day)
                               ? 'var(--it-calendar-today-bg, #eff6ff)'
-                              : 'transparent',
+                              : undefined,
                         color: isSelected || isRangeStart || isRangeEnd
                           ? 'var(--it-calendar-selected-text, #ffffff)'
                           : isToday(day)
                             ? 'var(--it-calendar-today-text, #2563eb)'
-                            : 'var(--it-calendar-days-text, #334155)',
+                            : undefined,
                         fontWeight: isSelected || isRangeStart || isRangeEnd || isToday(day) ? '700' : '400',
                       }}
                     >

package/src/components/molecules/chip-input/chip-input.doc.mdx

@@ -0,0 +1,44 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as StoriesData from './chip-input.stories';
+
+<Meta of={StoriesData} />
+
+# ITChipInput
+
+Free-text input that turns entered values into removable tags (chips).
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string[]` | — | Current tags (controlled). |
+| `onChange` | `(values: string[]) => void` | — | Fired with the next list of tags. |
+| `label` | `string` | — | Label above the control. |
+| `placeholder` | `string` | `"Escribe y presiona Enter"` | Input placeholder. |
+| `delimiters` | `string[]` | `["Enter", ","]` | Keys that commit a tag. |
+| `maxTags` | `number` | — | Maximum number of tags. |
+| `allowDuplicates` | `boolean` | `false` | Allows repeated tags. |
+| `validate` | `(value) => string \| undefined` | — | Rejects a tag with a message. |
+| `color` | semantic color key | `"primary"` | Color of the tag chips. |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Control size. |
+| `disabled` / `required` / `touched` / `error` / `helpText` | — | — | Standard form states. |
+
+## Usage
+
+```tsx
+import { ITChipInput } from '@axzydev/axzy_ui_system';
+
+<ITChipInput label="Etiquetas" value={tags} onChange={setTags} />
+```
+
+## Notes
+
+- Commits tags on `Enter`, `,`, blur, or when pasting delimited text.
+- `Backspace` on an empty input removes the last tag.
+- Local errors (duplicate, max reached, `validate`) are shown inline.
+
+## Stories
+
+<Primary />
+<Controls />
+<Stories />

package/src/components/molecules/chip-input/chip-input.props.ts

@@ -0,0 +1,42 @@
+import { ColorsTypes } from "@/types/colors.types";
+import { SizesTypes } from "@/types/sizes.types";
+
+/** Props for the ITChipInput component. */
+export interface ITChipInputProps {
+  /** Name attribute for form integrations. */
+  name?: string;
+  /** Label displayed above the control. */
+  label?: string;
+  /** Placeholder for the text input. @default "Escribe y presiona Enter" */
+  placeholder?: string;
+  /** Current list of tags (controlled). */
+  value: string[];
+  /** Fired with the next list of tags. */
+  onChange?: (values: string[]) => void;
+  /** Fired when the control loses focus. */
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  /** Keys that commit the current text as a tag. @default ["Enter", ","] */
+  delimiters?: string[];
+  /** Maximum number of tags allowed. */
+  maxTags?: number;
+  /** Allows duplicated tags. @default false */
+  allowDuplicates?: boolean;
+  /** Returns an error string to reject the tag, or undefined if valid. */
+  validate?: (value: string) => string | undefined;
+  /** Color applied to the tag chips. @default "primary" */
+  color?: ColorsTypes;
+  /** Control size. Valid values: `"sm"`, `"md"`, `"lg"`. @default "md" */
+  size?: SizesTypes;
+  /** Disables the control. @default false */
+  disabled?: boolean;
+  /** Marks the field as required (red asterisk). @default false */
+  required?: boolean;
+  /** Whether the field has been touched (form validation). */
+  touched?: boolean;
+  /** Error message or boolean indicating an error state. */
+  error?: string | boolean;
+  /** Helper text shown below the control when there is no error. */
+  helpText?: string;
+  /** Additional CSS classes for the container. */
+  className?: string;
+}

package/src/components/molecules/chip-input/chip-input.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import ITChipInput from "@/components/molecules/chip-input/chip-input";
+
+const meta: Meta<typeof ITChipInput> = {
+  title: "Components/Form Elements/ITChipInput",
+  component: ITChipInput,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITChipInput>;
+
+const Wrapper = (args: any) => {
+  const [value, setValue] = useState<string[]>(args.value ?? []);
+  return (
+    <div className="w-[420px]">
+      <ITChipInput {...args} value={value} onChange={setValue} />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <Wrapper {...args} />,
+  args: { name: "tags", label: "Etiquetas", value: [] },
+};
+
+export const WithValues: Story = {
+  render: (args) => <Wrapper {...args} />,
+  args: { name: "tags", label: "Etiquetas", value: ["react", "typescript", "tailwind"] },
+};
+
+export const MaxTags: Story = {
+  render: (args) => <Wrapper {...args} />,
+  args: { name: "tags", label: "Máximo 3", value: ["uno", "dos"], maxTags: 3, helpText: "Máximo 3 etiquetas." },
+};
+
+export const WithValidation: Story = {
+  render: (args) => <Wrapper {...args} />,
+  args: {
+    name: "emails",
+    label: "Correos",
+    value: [],
+    placeholder: "correo@dominio.com",
+    validate: (v: string) => (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? undefined : "Correo inválido"),
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <Wrapper {...args} />,
+  args: { name: "tags", label: "Etiquetas", value: [], required: true, touched: true, error: true },
+};

package/src/components/molecules/chip-input/chip-input.tsx

@@ -0,0 +1,205 @@
+import clsx from "clsx";
+import { useRef, useState } from "react";
+import { ITChipInputProps } from "./chip-input.props";
+import { theme } from "@/theme/theme";
+import { inputFieldStyle } from "@/utils/styles";
+import ITChip from "@/components/atoms/chip/chip";
+import ITText from "@/components/atoms/text/text";
+
+/**
+ * Free-text input that turns entered values into removable tags (chips).
+ *
+ * Commits a tag on `Enter`/`,` (configurable via `delimiters`), on blur, or on
+ * paste of delimited text. Supports `maxTags`, dedupe control, and per-tag
+ * validation.
+ *
+ * @example
+ * <ITChipInput
+ *   label="Etiquetas"
+ *   value={tags}
+ *   onChange={setTags}
+ *   placeholder="Agrega una etiqueta..."
+ * />
+ */
+export default function ITChipInput({
+  name,
+  label,
+  placeholder = "Escribe y presiona Enter",
+  value,
+  onChange,
+  onBlur,
+  delimiters = ["Enter", ","],
+  maxTags,
+  allowDuplicates = false,
+  validate,
+  color = "primary",
+  size = "md",
+  disabled = false,
+  required = false,
+  touched,
+  error,
+  helpText,
+  className,
+}: ITChipInputProps) {
+  const [inputValue, setInputValue] = useState("");
+  const [localTouched, setLocalTouched] = useState(false);
+  const [localError, setLocalError] = useState<string | undefined>(undefined);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const inputTheme = (theme as any).input || {};
+
+  const isTouched = touched !== undefined ? touched : localTouched;
+  const externalError =
+    error !== undefined && error !== false
+      ? error === true
+        ? "Este campo es requerido"
+        : error
+      : required && value.length === 0
+      ? "Este campo es requerido"
+      : undefined;
+  const effectiveError = localError || externalError;
+  const hasError = isTouched && !!effectiveError;
+
+  const getControlStyle = (): React.CSSProperties => {
+    const style = inputFieldStyle(inputTheme, size, { width: "100%", cursor: "text" });
+    style.display = "flex";
+    style.flexWrap = "wrap";
+    style.alignItems = "center";
+    style.gap = "0.375rem";
+    style.minHeight = "2.5rem";
+
+    if (disabled) {
+      style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
+      style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
+      style.opacity = 0.7;
+      style.cursor = "not-allowed";
+    }
+    if (hasError) {
+      style.borderColor = inputTheme.error?.borderColor || "red";
+    } else if (isFocused) {
+      style.boxShadow = inputTheme.focus?.ring;
+      style.borderColor = inputTheme.focus?.borderColor;
+    }
+    return style;
+  };
+
+  const commitTag = (raw: string) => {
+    const tag = raw.trim();
+    if (!tag) return;
+    if (maxTags !== undefined && value.length >= maxTags) {
+      setLocalError(`Máximo ${maxTags} etiquetas`);
+      return;
+    }
+    if (!allowDuplicates && value.includes(tag)) {
+      setLocalError("Etiqueta duplicada");
+      return;
+    }
+    const validationError = validate?.(tag);
+    if (validationError) {
+      setLocalError(validationError);
+      return;
+    }
+    setLocalError(undefined);
+    onChange?.([...value, tag]);
+    setInputValue("");
+  };
+
+  const removeTag = (tag: string) => {
+    if (disabled) return;
+    onChange?.(value.filter((t) => t !== tag));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    if (delimiters.includes(e.key)) {
+      if (e.key !== "Enter") e.preventDefault();
+      commitTag(inputValue);
+    } else if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
+      removeTag(value[value.length - 1]);
+    } else if (localError) {
+      setLocalError(undefined);
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    const text = e.clipboardData.getData("text");
+    const separators = delimiters.filter((d) => d.length === 1);
+    if (separators.length && separators.some((s) => text.includes(s))) {
+      e.preventDefault();
+      const parts = text
+        .split(new RegExp(`[${separators.map((s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("")}]`))
+        .map((p) => p.trim())
+        .filter(Boolean);
+      parts.forEach((p) => commitTag(p));
+    }
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (inputValue.trim()) commitTag(inputValue);
+    setIsFocused(false);
+    setLocalTouched(true);
+    onBlur?.(e);
+  };
+
+  const handleContainerClick = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div className={clsx("w-full flex flex-col gap-1.5", className)}>
+      {label && (
+        <ITText
+          as="label"
+          className={clsx("text-sm font-medium text-secondary-700 dark:text-slate-300", {
+            "text-danger-500": hasError,
+          })}
+        >
+          <ITText as="span">{label}</ITText>
+          {required && <ITText as="span" className="text-danger-500 ml-1">*</ITText>}
+        </ITText>
+      )}
+
+      <div
+        onClick={handleContainerClick}
+        className={clsx(disabled && "cursor-not-allowed")}
+        style={getControlStyle()}
+      >
+        {value.map((tag) => (
+          <ITChip
+            key={tag}
+            label={tag}
+            color={color}
+            size="sm"
+            removable={!disabled}
+            onRemove={() => removeTag(tag)}
+          />
+        ))}
+
+        <input
+          ref={inputRef}
+          name={name}
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          onFocus={() => setIsFocused(true)}
+          onBlur={handleBlur}
+          disabled={disabled}
+          placeholder={value.length === 0 ? placeholder : ""}
+          autoComplete="off"
+          className="flex-1 min-w-[100px] bg-transparent outline-none border-none text-sm text-secondary-900 dark:text-slate-100"
+          style={{ padding: 0, fontSize: inputFieldStyle(inputTheme, size).fontSize }}
+        />
+      </div>
+
+      {hasError ? (
+        <ITText as="p" className="text-danger-500 text-xs mt-1">{effectiveError}</ITText>
+      ) : helpText ? (
+        <ITText as="p" className="text-xs text-secondary-500 dark:text-secondary-400">{helpText}</ITText>
+      ) : null}
+    </div>
+  );
+}