@deepnoid/ui 0.1.30 → 0.1.31

package/dist/components/table/index.js

@@ -737,11 +737,12 @@ var TableBody = ({
   classNames,
   className
 }) => {
-  const getCellStyle = (col) => ({
-    width: col.width ? `${col.width}px` : void 0,
-    minWidth: col.minWidth ? `${col.minWidth}px` : void 0,
-    maxWidth: col.maxWidth ? `${col.maxWidth}px` : void 0,
-    height: col.height ? `${col.height}px` : void 0
+  const getCellStyle = (column) => ({
+    width: column.width ? `${column.width}px` : void 0,
+    minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
+    maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
+    height: column.height ? `${column.height}px` : void 0,
+    textAlign: column.align || "center"
   });
   const renderTdSkeleton = (key) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
   const renderCheckboxCell = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -758,16 +759,16 @@ var TableBody = ({
   ] }, `skeleton-${rowIndex}`);
   const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
   const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), onClick: () => onRowClick == null ? void 0 : onRowClick(row), children: [
-    columns.map((col, colIdx) => {
+    columns.map((column, colIdx) => {
       var _a;
-      const value = row[col.field];
-      const formattedValue = ((_a = col.valueFormatter) == null ? void 0 : _a.call(col, { value, field: col.field })) || value;
-      const content = col.renderCell ? col.renderCell({ id: row.id, field: col.field, value, formattedValue, row }) : formattedValue;
+      const value = row[column.field];
+      const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
+      const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "td",
         {
-          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), col.className),
-          style: getCellStyle(col),
+          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
+          style: getCellStyle(column),
           children: content
         },
         `${rowIndex}-${colIdx}`
@@ -813,7 +814,7 @@ var usePagination = ({ currentPage, totalPage, groupSize, handleChangePage }) =>
 var usePagination_default = usePagination;
 
 // src/components/input/input.tsx
-var import_react3 = __toESM(require("react"));
+var import_react3 = require("react");
 
 // src/components/icon/template.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -4805,19 +4806,22 @@ var Input = (0, import_react3.forwardRef)((originalProps, ref) => {
   const slots = (0, import_react3.useMemo)(() => inputStyle({ ...variantProps }), [variantProps]);
   const getContentProps = (0, import_react3.useCallback)(
     () => ({
-      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      className: clsx(
+        slots.content({ class: classNames == null ? void 0 : classNames.content }),
+        inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+      ),
       size: originalProps.size
     }),
     [slots, classNames, originalProps.size]
   );
   const renderStartContent = () => {
-    if (import_react3.default.isValidElement(startContent)) {
+    if ((0, import_react3.isValidElement)(startContent)) {
       const existingProps = startContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react3.default.cloneElement(startContent, mergedProps);
+      return (0, import_react3.cloneElement)(startContent, mergedProps);
     } else {
       const contentProps = getContentProps();
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ...contentProps, children: startContent });
@@ -4836,13 +4840,13 @@ var Input = (0, import_react3.forwardRef)((originalProps, ref) => {
     }
   );
   const renderContentWithIcon = () => {
-    if (import_react3.default.isValidElement(endContent)) {
+    if ((0, import_react3.isValidElement)(endContent)) {
       const existingProps = endContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react3.default.cloneElement(endContent, mergedProps);
+      return (0, import_react3.cloneElement)(endContent, mergedProps);
     } else if (errorMessage) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
@@ -4877,20 +4881,17 @@ var Input = (0, import_react3.forwardRef)((originalProps, ref) => {
             {
               className: clsx(
                 slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
-                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                inputProps.readOnly ? slots.readonlyWrapper({ class: classNames == null ? void 0 : classNames.readonlyWrapper }) : ""
               ),
               children: [
                 startContent && renderStartContent(),
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "input",
                   {
-                    ...inputProps,
                     ref: ref || inputRef,
+                    ...inputProps,
                     readOnly: props.readOnly,
-                    className: clsx(
-                      slots.input({ class: classNames == null ? void 0 : classNames.input }),
-                      inputProps.readOnly ? "!text-body-foreground placeholder:!text-body-foreground" : ""
-                    ),
+                    className: clsx(slots.input({ class: classNames == null ? void 0 : classNames.input })),
                     size: 0
                   }
                 ),
@@ -4898,7 +4899,16 @@ var Input = (0, import_react3.forwardRef)((originalProps, ref) => {
               ]
             }
           ),
-          helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
+          helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "p",
+            {
+              className: clsx(
+                slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }),
+                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+              ),
+              children: helperMessage
+            }
+          ),
           errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
         ] })
       ]
@@ -4910,12 +4920,12 @@ var input_default = Input;
 var inputStyle = tv(
   {
     slots: {
-      base: ["group/input", "flex select-none"],
+      base: ["group/input", "flex", "select-none"],
       vertical: ["flex-col"],
       horizon: ["flex-row", "gap-0"],
       label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
       innerWrapper: ["flex", "flex-col"],
-      inputWrapper: ["flex", "items-center", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
+      inputWrapper: ["flex", "items-center", "duration-200", "group-has-[p.error]/input:!bg-danger-soft"],
       input: [
         "w-full",
         "h-full",
@@ -4924,8 +4934,8 @@ var inputStyle = tv(
         "placeholder:text-neutral-main",
         "outline-none",
         "focus:ring-0",
-        "group-has-[:hover]/input:text-neutral-dark",
-        "group-has-[:hover]/input:placeholder:text-neutral-dark",
+        "group-has-[:hover]/input:!text-neutral-dark",
+        "group-has-[:hover]/input:placeholder:!text-neutral-dark",
         "group-has-[:focus]/input:text-neutral-dark",
         "group-has-[:focus]/input:placeholder:text-neutral-dark",
         "group-has-[p.error]/input:text-danger-main",
@@ -4941,13 +4951,22 @@ var inputStyle = tv(
       ],
       helperMessage: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
       errorMessage: ["text-danger-main"],
-      readonly: ["pointer-events-none", "!text-body-foreground"]
+      readonlyWrapper: [
+        "pointer-events-none",
+        "!text-body-foreground",
+        "placeholder:!text-body-foreground",
+        "group-has-[p.error]/input:!text-danger-main",
+        "group-has-[p.error]/input:placeholder:!text-danger-main",
+        "[&>input]:!text-body-foreground",
+        "[&>input]:placeholder:!text-body-foreground"
+      ],
+      readonly: []
     },
     variants: {
       variant: {
         solid: {
           inputWrapper: ["border-transparent", "bg-trans-soft"],
-          readonly: ["!bg-trans-light"]
+          readonlyWrapper: ["!bg-trans-light"]
         },
         outline: {
           inputWrapper: [
@@ -4956,7 +4975,7 @@ var inputStyle = tv(
             "group-has-[:focus]/input:bg-body-background",
             "group-has-[p.error]/input:border-danger-main"
           ],
-          readonly: ["!bg-trans-soft"]
+          readonlyWrapper: ["!bg-trans-soft"]
         },
         underline: {
           inputWrapper: [
@@ -4966,30 +4985,31 @@ var inputStyle = tv(
             "group-has-[:focus]/input:bg-body-background",
             "group-has-[p.error]/input:border-danger-main"
           ],
-          readonly: ["!bg-trans-soft"]
+          readonlyWrapper: ["!bg-trans-soft"]
         }
       },
       color: {
         primary: {
           content: [
-            "group-has-[:focus]/input:text-primary-main",
-            "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
+            "group-has-[:focus]/input:!text-primary-main",
+            "group-has-[p.error]:not(input:focus):hover/input:!text-primary-main"
           ],
           helperMessage: [
-            "group-has-[:focus]/input:text-primary-main",
-            "group-has-[:focus:hover]/input:text-primary-main",
-            "group-has-[:focus]/input:hover:text-primary-main"
-          ]
+            "group-has-[:focus]/input:!text-primary-main",
+            "group-has-[:focus:hover]/input:!text-primary-main",
+            "group-has-[:focus]/input:hover:!text-primary-main"
+          ],
+          readonly: ["!text-primary-main"]
         },
         secondary: {
           content: [
-            "group-has-[:focus]/input:text-secondary-main",
-            "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
+            "group-has-[:focus]/input:!text-secondary-main",
+            "group-has-[p.error]:not(input:focus):hover/input:!text-secondary-main"
           ],
           helperMessage: [
-            "group-has-[:focus]/input:text-secondary-main",
-            "group-has-[:focus:hover]/input:text-secondary-main",
-            "group-has-[:focus]/input:hover:text-secondary-main"
+            "group-has-[:focus]/input:!text-secondary-main",
+            "group-has-[:focus:hover]/input:!text-secondary-main",
+            "group-has-[:focus]/input:hover:!text-secondary-main"
           ]
         }
       },
@@ -5040,14 +5060,14 @@ var inputStyle = tv(
       },
       disabled: {
         true: {
-          inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
+          inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "group-has-[p.error]/input:!text-danger-light"],
           input: [
-            "text-neutral-light",
-            "placeholder:text-neutral-light",
-            "group-has-[p.error]/input:text-danger-light",
-            "group-has-[p.error]/input:placeholder:text-danger-light"
+            "!text-neutral-light",
+            "placeholder:!text-neutral-light",
+            "group-has-[p.error]/input:!text-danger-light",
+            "group-has-[p.error]/input:placeholder:!text-danger-light"
           ],
-          content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
+          content: ["!text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
           helperMessage: ["!text-neutral-light"],
           errorMessage: ["!text-danger-light"]
         }
@@ -5114,7 +5134,11 @@ var inputStyle = tv(
         disabled: true,
         variant: ["outline", "underline"],
         class: {
-          inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
+          inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:!border-danger-light"],
+          content: [
+            "group-has-[p.error]/input:!text-danger-light",
+            "group-has-[p.error]/input:placeholder:!text-danger-light"
+          ]
         }
       }
     ],

package/dist/components/table/index.mjs

@@ -2,21 +2,21 @@
 import "../../chunk-DX3KXNP6.mjs";
 import {
   table_default
-} from "../../chunk-GLMM253Q.mjs";
+} from "../../chunk-EBRCE7XY.mjs";
 import {
   definition_table_default
 } from "../../chunk-6TIIBU7J.mjs";
-import "../../chunk-CEZQCD6Z.mjs";
+import "../../chunk-LWRK5TPZ.mjs";
 import "../../chunk-P7YYNA6L.mjs";
 import "../../chunk-DQRAFUDA.mjs";
 import "../../chunk-M37VBNB3.mjs";
 import "../../chunk-MZ76AA76.mjs";
 import "../../chunk-6PN3DGOE.mjs";
 import "../../chunk-7B7LRG5J.mjs";
-import "../../chunk-QM4ZSQYX.mjs";
+import "../../chunk-CVQM3T2X.mjs";
 import "../../chunk-F3HENRVM.mjs";
 import "../../chunk-2GCSFWHD.mjs";
-import "../../chunk-VCVQMPC7.mjs";
+import "../../chunk-AIIMJZ7L.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
 import "../../chunk-D6QI3DJG.mjs";
 import "../../chunk-ZYIIXWVY.mjs";

package/dist/components/table/table-body.js

@@ -679,11 +679,12 @@ var TableBody = ({
   classNames,
   className
 }) => {
-  const getCellStyle = (col) => ({
-    width: col.width ? `${col.width}px` : void 0,
-    minWidth: col.minWidth ? `${col.minWidth}px` : void 0,
-    maxWidth: col.maxWidth ? `${col.maxWidth}px` : void 0,
-    height: col.height ? `${col.height}px` : void 0
+  const getCellStyle = (column) => ({
+    width: column.width ? `${column.width}px` : void 0,
+    minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
+    maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
+    height: column.height ? `${column.height}px` : void 0,
+    textAlign: column.align || "center"
   });
   const renderTdSkeleton = (key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
   const renderCheckboxCell = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -700,16 +701,16 @@ var TableBody = ({
   ] }, `skeleton-${rowIndex}`);
   const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
   const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), onClick: () => onRowClick == null ? void 0 : onRowClick(row), children: [
-    columns.map((col, colIdx) => {
+    columns.map((column, colIdx) => {
       var _a;
-      const value = row[col.field];
-      const formattedValue = ((_a = col.valueFormatter) == null ? void 0 : _a.call(col, { value, field: col.field })) || value;
-      const content = col.renderCell ? col.renderCell({ id: row.id, field: col.field, value, formattedValue, row }) : formattedValue;
+      const value = row[column.field];
+      const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
+      const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "td",
         {
-          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), col.className),
-          style: getCellStyle(col),
+          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
+          style: getCellStyle(column),
           children: content
         },
         `${rowIndex}-${colIdx}`

package/dist/components/table/table-body.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   table_body_default
-} from "../../chunk-CEZQCD6Z.mjs";
+} from "../../chunk-LWRK5TPZ.mjs";
 import "../../chunk-MZ76AA76.mjs";
 import "../../chunk-6PN3DGOE.mjs";
 import "../../chunk-QZ3LVYJW.mjs";

package/dist/components/table/table.d.mts

@@ -206,10 +206,11 @@ type ValueFormatterParams<V = any> = {
     value: V;
 };
 type TableRow<R extends RowValue = RowValue> = R;
+type Align = "center" | "left" | "right";
 type TableColumn<R extends RowValue = RowValue, V = any, F = V> = {
     field: string;
     headerName?: string | ReactElement;
-    align?: "left" | "center" | "right";
+    align?: Align;
     width?: number;
     minWidth?: number;
     maxWidth?: number;

package/dist/components/table/table.d.ts

@@ -206,10 +206,11 @@ type ValueFormatterParams<V = any> = {
     value: V;
 };
 type TableRow<R extends RowValue = RowValue> = R;
+type Align = "center" | "left" | "right";
 type TableColumn<R extends RowValue = RowValue, V = any, F = V> = {
     field: string;
     headerName?: string | ReactElement;
-    align?: "left" | "center" | "right";
+    align?: Align;
     width?: number;
     minWidth?: number;
     maxWidth?: number;

package/dist/components/table/table.js

@@ -734,11 +734,12 @@ var TableBody = ({
   classNames,
   className
 }) => {
-  const getCellStyle = (col) => ({
-    width: col.width ? `${col.width}px` : void 0,
-    minWidth: col.minWidth ? `${col.minWidth}px` : void 0,
-    maxWidth: col.maxWidth ? `${col.maxWidth}px` : void 0,
-    height: col.height ? `${col.height}px` : void 0
+  const getCellStyle = (column) => ({
+    width: column.width ? `${column.width}px` : void 0,
+    minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
+    maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
+    height: column.height ? `${column.height}px` : void 0,
+    textAlign: column.align || "center"
   });
   const renderTdSkeleton = (key) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
   const renderCheckboxCell = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -755,16 +756,16 @@ var TableBody = ({
   ] }, `skeleton-${rowIndex}`);
   const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
   const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), onClick: () => onRowClick == null ? void 0 : onRowClick(row), children: [
-    columns.map((col, colIdx) => {
+    columns.map((column, colIdx) => {
       var _a;
-      const value = row[col.field];
-      const formattedValue = ((_a = col.valueFormatter) == null ? void 0 : _a.call(col, { value, field: col.field })) || value;
-      const content = col.renderCell ? col.renderCell({ id: row.id, field: col.field, value, formattedValue, row }) : formattedValue;
+      const value = row[column.field];
+      const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
+      const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "td",
         {
-          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), col.className),
-          style: getCellStyle(col),
+          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
+          style: getCellStyle(column),
           children: content
         },
         `${rowIndex}-${colIdx}`
@@ -810,7 +811,7 @@ var usePagination = ({ currentPage, totalPage, groupSize, handleChangePage }) =>
 var usePagination_default = usePagination;
 
 // src/components/input/input.tsx
-var import_react3 = __toESM(require("react"));
+var import_react3 = require("react");
 
 // src/components/icon/template.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -4802,19 +4803,22 @@ var Input = (0, import_react3.forwardRef)((originalProps, ref) => {
   const slots = (0, import_react3.useMemo)(() => inputStyle({ ...variantProps }), [variantProps]);
   const getContentProps = (0, import_react3.useCallback)(
     () => ({
-      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      className: clsx(
+        slots.content({ class: classNames == null ? void 0 : classNames.content }),
+        inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+      ),
       size: originalProps.size
     }),
     [slots, classNames, originalProps.size]
   );
   const renderStartContent = () => {
-    if (import_react3.default.isValidElement(startContent)) {
+    if ((0, import_react3.isValidElement)(startContent)) {
       const existingProps = startContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react3.default.cloneElement(startContent, mergedProps);
+      return (0, import_react3.cloneElement)(startContent, mergedProps);
     } else {
       const contentProps = getContentProps();
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ...contentProps, children: startContent });
@@ -4833,13 +4837,13 @@ var Input = (0, import_react3.forwardRef)((originalProps, ref) => {
     }
   );
   const renderContentWithIcon = () => {
-    if (import_react3.default.isValidElement(endContent)) {
+    if ((0, import_react3.isValidElement)(endContent)) {
       const existingProps = endContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react3.default.cloneElement(endContent, mergedProps);
+      return (0, import_react3.cloneElement)(endContent, mergedProps);
     } else if (errorMessage) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
@@ -4874,20 +4878,17 @@ var Input = (0, import_react3.forwardRef)((originalProps, ref) => {
             {
               className: clsx(
                 slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
-                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                inputProps.readOnly ? slots.readonlyWrapper({ class: classNames == null ? void 0 : classNames.readonlyWrapper }) : ""
               ),
               children: [
                 startContent && renderStartContent(),
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "input",
                   {
-                    ...inputProps,
                     ref: ref || inputRef,
+                    ...inputProps,
                     readOnly: props.readOnly,
-                    className: clsx(
-                      slots.input({ class: classNames == null ? void 0 : classNames.input }),
-                      inputProps.readOnly ? "!text-body-foreground placeholder:!text-body-foreground" : ""
-                    ),
+                    className: clsx(slots.input({ class: classNames == null ? void 0 : classNames.input })),
                     size: 0
                   }
                 ),
@@ -4895,7 +4896,16 @@ var Input = (0, import_react3.forwardRef)((originalProps, ref) => {
               ]
             }
           ),
-          helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
+          helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "p",
+            {
+              className: clsx(
+                slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }),
+                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+              ),
+              children: helperMessage
+            }
+          ),
           errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
         ] })
       ]
@@ -4907,12 +4917,12 @@ var input_default = Input;
 var inputStyle = tv(
   {
     slots: {
-      base: ["group/input", "flex select-none"],
+      base: ["group/input", "flex", "select-none"],
       vertical: ["flex-col"],
       horizon: ["flex-row", "gap-0"],
       label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
       innerWrapper: ["flex", "flex-col"],
-      inputWrapper: ["flex", "items-center", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
+      inputWrapper: ["flex", "items-center", "duration-200", "group-has-[p.error]/input:!bg-danger-soft"],
       input: [
         "w-full",
         "h-full",
@@ -4921,8 +4931,8 @@ var inputStyle = tv(
         "placeholder:text-neutral-main",
         "outline-none",
         "focus:ring-0",
-        "group-has-[:hover]/input:text-neutral-dark",
-        "group-has-[:hover]/input:placeholder:text-neutral-dark",
+        "group-has-[:hover]/input:!text-neutral-dark",
+        "group-has-[:hover]/input:placeholder:!text-neutral-dark",
         "group-has-[:focus]/input:text-neutral-dark",
         "group-has-[:focus]/input:placeholder:text-neutral-dark",
         "group-has-[p.error]/input:text-danger-main",
@@ -4938,13 +4948,22 @@ var inputStyle = tv(
       ],
       helperMessage: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
       errorMessage: ["text-danger-main"],
-      readonly: ["pointer-events-none", "!text-body-foreground"]
+      readonlyWrapper: [
+        "pointer-events-none",
+        "!text-body-foreground",
+        "placeholder:!text-body-foreground",
+        "group-has-[p.error]/input:!text-danger-main",
+        "group-has-[p.error]/input:placeholder:!text-danger-main",
+        "[&>input]:!text-body-foreground",
+        "[&>input]:placeholder:!text-body-foreground"
+      ],
+      readonly: []
     },
     variants: {
       variant: {
         solid: {
           inputWrapper: ["border-transparent", "bg-trans-soft"],
-          readonly: ["!bg-trans-light"]
+          readonlyWrapper: ["!bg-trans-light"]
         },
         outline: {
           inputWrapper: [
@@ -4953,7 +4972,7 @@ var inputStyle = tv(
             "group-has-[:focus]/input:bg-body-background",
             "group-has-[p.error]/input:border-danger-main"
           ],
-          readonly: ["!bg-trans-soft"]
+          readonlyWrapper: ["!bg-trans-soft"]
         },
         underline: {
           inputWrapper: [
@@ -4963,30 +4982,31 @@ var inputStyle = tv(
             "group-has-[:focus]/input:bg-body-background",
             "group-has-[p.error]/input:border-danger-main"
           ],
-          readonly: ["!bg-trans-soft"]
+          readonlyWrapper: ["!bg-trans-soft"]
         }
       },
       color: {
         primary: {
           content: [
-            "group-has-[:focus]/input:text-primary-main",
-            "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
+            "group-has-[:focus]/input:!text-primary-main",
+            "group-has-[p.error]:not(input:focus):hover/input:!text-primary-main"
           ],
           helperMessage: [
-            "group-has-[:focus]/input:text-primary-main",
-            "group-has-[:focus:hover]/input:text-primary-main",
-            "group-has-[:focus]/input:hover:text-primary-main"
-          ]
+            "group-has-[:focus]/input:!text-primary-main",
+            "group-has-[:focus:hover]/input:!text-primary-main",
+            "group-has-[:focus]/input:hover:!text-primary-main"
+          ],
+          readonly: ["!text-primary-main"]
         },
         secondary: {
           content: [
-            "group-has-[:focus]/input:text-secondary-main",
-            "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
+            "group-has-[:focus]/input:!text-secondary-main",
+            "group-has-[p.error]:not(input:focus):hover/input:!text-secondary-main"
           ],
           helperMessage: [
-            "group-has-[:focus]/input:text-secondary-main",
-            "group-has-[:focus:hover]/input:text-secondary-main",
-            "group-has-[:focus]/input:hover:text-secondary-main"
+            "group-has-[:focus]/input:!text-secondary-main",
+            "group-has-[:focus:hover]/input:!text-secondary-main",
+            "group-has-[:focus]/input:hover:!text-secondary-main"
           ]
         }
       },
@@ -5037,14 +5057,14 @@ var inputStyle = tv(
       },
       disabled: {
         true: {
-          inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
+          inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "group-has-[p.error]/input:!text-danger-light"],
           input: [
-            "text-neutral-light",
-            "placeholder:text-neutral-light",
-            "group-has-[p.error]/input:text-danger-light",
-            "group-has-[p.error]/input:placeholder:text-danger-light"
+            "!text-neutral-light",
+            "placeholder:!text-neutral-light",
+            "group-has-[p.error]/input:!text-danger-light",
+            "group-has-[p.error]/input:placeholder:!text-danger-light"
           ],
-          content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
+          content: ["!text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
           helperMessage: ["!text-neutral-light"],
           errorMessage: ["!text-danger-light"]
         }
@@ -5111,7 +5131,11 @@ var inputStyle = tv(
         disabled: true,
         variant: ["outline", "underline"],
         class: {
-          inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
+          inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:!border-danger-light"],
+          content: [
+            "group-has-[p.error]/input:!text-danger-light",
+            "group-has-[p.error]/input:placeholder:!text-danger-light"
+          ]
         }
       }
     ],