@deepnoid/ui 0.1.20 → 0.1.22

package/dist/{chunk-LNYMVBV5.mjs → chunk-6OMHIMIA.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   table_body_default
-} from "./chunk-63WXGSTV.mjs";
+} from "./chunk-XRC5OUYQ.mjs";
 import {
   table_head_default
-} from "./chunk-3DPVPTHL.mjs";
+} from "./chunk-EAK5DVWA.mjs";
 import {
   scrollArea_default
 } from "./chunk-M37VBNB3.mjs";
 import {
   pagination_default
-} from "./chunk-EGHTZLZJ.mjs";
+} from "./chunk-IVK24VIL.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
@@ -36,7 +36,8 @@ var Table = forwardRef((originalProps, ref) => {
     rows,
     columns,
     size,
-    selectableRows,
+    rowCheckbox,
+    onRowClick,
     totalData,
     pagination,
     onPageChange,
@@ -73,7 +74,7 @@ var Table = forwardRef((originalProps, ref) => {
         {
           columns,
           size,
-          selectableRows,
+          rowCheckbox,
           isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
           onCheckAll: handleCheckAll,
           classNames,
@@ -87,8 +88,9 @@ var Table = forwardRef((originalProps, ref) => {
           rows,
           columns,
           size,
-          selectableRows,
+          rowCheckbox,
           checkedRows,
+          onRowClick,
           onCheckRow: handleCheck,
           emptyContent,
           isLoading,

package/dist/{chunk-3DPVPTHL.mjs → chunk-EAK5DVWA.mjs}

@@ -8,7 +8,7 @@ import {
 
 // src/components/table/table-head.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var TableHead = ({ columns, slots, size, selectableRows, isCheckedAll, classNames, onCheckAll }) => {
+var TableHead = ({ columns, slots, size, rowCheckbox, isCheckedAll, classNames, onCheckAll }) => {
   const handleClickCheckAll = (e) => {
     e.preventDefault();
     onCheckAll(!isCheckedAll);
@@ -27,7 +27,7 @@ var TableHead = ({ columns, slots, size, selectableRows, isCheckedAll, className
     },
     `${column.field}${index}thead`
   ));
-  const renderSelectAllCheckbox = () => selectableRows && /* @__PURE__ */ jsx("th", { className: slots.th({ class: classNames == null ? void 0 : classNames.th }), onClick: handleClickCheckAll, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(checkbox_default, { size, checked: isCheckedAll }) }) });
+  const renderSelectAllCheckbox = () => rowCheckbox && /* @__PURE__ */ jsx("th", { className: slots.th({ class: classNames == null ? void 0 : classNames.th }), onClick: handleClickCheckAll, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(checkbox_default, { size, checked: isCheckedAll }) }) });
   return /* @__PURE__ */ jsx("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ jsxs("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     renderColumnHeaders(),
     renderSelectAllCheckbox()

package/dist/{chunk-3BKCODIL.mjs → chunk-ICZTNO4V.mjs}

@@ -7,10 +7,10 @@ import {
 import { forwardRef, useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_COLUMN_CLASSES = [
-  "w-[120px] h-[50px] px-[10px] font-bold text-md text-body-foreground border-r border-neutral-light",
-  "px-[10px]"
+  "w-[120px] px-[10px] py-[9.5px] font-bold text-md text-body-foreground border-r border-neutral-light",
+  "px-[10px] py-[9.5px]"
 ];
-var FormTableRow = ({ columns, columnClasses = [] }) => /* @__PURE__ */ jsx("tr", { className: "border-neutral-light border-b", children: columns.map((col, index) => {
+var FormTableRow = ({ columns, columnClasses = [] }) => /* @__PURE__ */ jsx("tr", { className: "border-neutral-light min-h-[50px] border-b", children: columns.map((col, index) => {
   var _a;
   return /* @__PURE__ */ jsx("td", { className: (_a = columnClasses[index]) != null ? _a : DEFAULT_COLUMN_CLASSES[index], children: col }, index);
 }) });

package/dist/{chunk-EGHTZLZJ.mjs → chunk-IVK24VIL.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-JOCMCOEK.mjs";
+} from "./chunk-P5PJTJLY.mjs";
 import {
   Icon_default
 } from "./chunk-HWL7TPUN.mjs";

package/dist/chunk-MSAULFDB.mjs

@@ -0,0 +1,348 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-HWL7TPUN.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/select/select.tsx
+import { forwardRef, useMemo, useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Select = forwardRef((originalProps, ref) => {
+  var _a;
+  const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
+  const {
+    label,
+    options,
+    helperText,
+    errorText,
+    classNames,
+    defaultSelectedOptions = [],
+    onChange,
+    multiple,
+    ...inputProps
+  } = props;
+  const slots = useMemo(() => select({ ...variantProps }), [variantProps]);
+  const [selectedOptions, setSelectedOptions] = useState(defaultSelectedOptions);
+  const [targetRect, setTargetRect] = useState(null);
+  const [optionWrapperHeight, setOptionWrapperHeight] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const selectWrapperRef = useRef(null);
+  const optionWrapperRef = useRef(null);
+  const handleToggleSelect = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      setTimeout(() => setIsVisible(false), 150);
+    } else {
+      if (selectWrapperRef.current) {
+        const rect = selectWrapperRef.current.getBoundingClientRect();
+        setTargetRect(rect);
+        setIsVisible(true);
+        requestAnimationFrame(() => setIsOpen(true));
+      }
+    }
+  };
+  const calculatePositionWithScroll = (rect, height) => {
+    const scrollTop = window.scrollY;
+    const scrollLeft = window.scrollX;
+    const spaceBelow = window.innerHeight - (rect.y + rect.height + 4);
+    const spaceAbove = rect.y - 4;
+    const top = spaceBelow < height && spaceAbove > height ? rect.y - height - 4 : rect.y + rect.height + 4;
+    return {
+      top: top + scrollTop,
+      left: rect.x + scrollLeft
+    };
+  };
+  const handleChangeOption = (option) => {
+    let nextOptions;
+    if (multiple) {
+      const exists = selectedOptions.some((o) => o.key === option.key);
+      nextOptions = exists ? selectedOptions.filter((o) => o.key !== option.key) : [...selectedOptions, option];
+    } else {
+      nextOptions = [option];
+      setIsOpen(false);
+      setTimeout(() => setIsVisible(false), 150);
+    }
+    setSelectedOptions(nextOptions);
+    onChange == null ? void 0 : onChange(nextOptions);
+  };
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      var _a2;
+      if (optionWrapperRef.current && !optionWrapperRef.current.contains(e.target) && !((_a2 = selectWrapperRef.current) == null ? void 0 : _a2.contains(e.target))) {
+        setIsOpen(false);
+        setTimeout(() => setIsVisible(false), 150);
+      }
+    };
+    window.addEventListener("mousedown", handleClickOutside);
+    return () => window.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect(() => {
+    if (optionWrapperRef.current) {
+      setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
+    }
+  }, [targetRect]);
+  const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.value).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.value) || "";
+  const Option = ({
+    option,
+    isSelected,
+    onClick
+  }) => {
+    const slot = select({ ...variantProps, isSelected });
+    return /* @__PURE__ */ jsxs("div", { title: option.value, onClick, className: clsx(slot.option({ class: classNames == null ? void 0 : classNames.option })), children: [
+      option.value,
+      isSelected && /* @__PURE__ */ jsx(Icon_default, { name: "check", size: originalProps.size })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          slots.base({ class: classNames == null ? void 0 : classNames.base }),
+          variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+          /* @__PURE__ */ jsxs("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-expanded": isOpen,
+                className: clsx(
+                  slots.selectWrapper({ class: classNames == null ? void 0 : classNames.selectWrapper }),
+                  inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                ),
+                ref: selectWrapperRef,
+                onClick: handleToggleSelect,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ...inputProps,
+                      ref,
+                      className: clsx(
+                        slots.select({ class: classNames == null ? void 0 : classNames.select }),
+                        inputProps.readOnly ? "!text-body-foreground placeholder:text-body-foreground" : ""
+                      ),
+                      value: displayValue,
+                      readOnly: true,
+                      size: 0
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Icon_default,
+                    {
+                      name: "brace-up",
+                      size: originalProps.size,
+                      className: `transition-transform duration-200 ${isOpen ? "rotate-0" : "rotate-180"}`
+                    }
+                  )
+                ]
+              }
+            ),
+            helperText && !errorText && /* @__PURE__ */ jsx("p", { className: slots.helperText({ class: classNames == null ? void 0 : classNames.helperText }), children: helperText }),
+            errorText && /* @__PURE__ */ jsx("p", { className: clsx("error", slots.errorText({ class: classNames == null ? void 0 : classNames.errorText })), children: errorText })
+          ] })
+        ]
+      }
+    ),
+    isVisible && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: optionWrapperRef,
+          className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
+          style: {
+            position: "absolute",
+            top: position == null ? void 0 : position.top,
+            left: position == null ? void 0 : position.left,
+            width: targetRect == null ? void 0 : targetRect.width,
+            zIndex: 1e3,
+            opacity: isOpen ? 1 : 0,
+            transform: isOpen ? "translateY(0)" : "translateY(-0.25rem)",
+            transition: "opacity 150ms ease-out, transform 150ms ease-out"
+          },
+          children: options.map((option) => {
+            const isSelected = selectedOptions.some((o) => o.key === option.key);
+            return /* @__PURE__ */ jsx(
+              Option,
+              {
+                option,
+                isSelected,
+                onClick: () => handleChangeOption(option)
+              },
+              option.key
+            );
+          })
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+Select.displayName = "Select";
+var select_default = Select;
+var select = tv({
+  slots: {
+    base: ["group/select", "flex"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
+    selectWrapper: [
+      "flex",
+      "items-center",
+      "justify-between",
+      "border",
+      "cursor-pointer",
+      "text-neutral-main",
+      "hover:bg-trans-soft",
+      "group-has-[p.error]/select:border-danger-main",
+      "group-has-[p.error]/select:bg-danger-soft",
+      "group-has-[p.error]/select:text-danger-main",
+      "group-has-[p.error]/select:hover:bg-danger-soft"
+    ],
+    select: [
+      "bg-transparent",
+      "w-full",
+      "outline-none",
+      "placeholder:text-neutral-main",
+      "text-neutral-dark",
+      "group-has-[p.error]/select:text-danger-main",
+      "group-has-[p.error]/select:placeholder:text-danger-main"
+    ],
+    optionsWrapper: ["border", "rounded", "bg-white", "shadow", "overflow-auto"],
+    option: ["flex", "justify-between", "items-center", "cursor-pointer"],
+    helperText: ["text-neutral-main"],
+    errorText: ["text-danger-main"],
+    readonly: ["pointer-events-none", "!bg-trans-soft"]
+  },
+  variants: {
+    color: {
+      primary: {
+        selectWrapper: ["hover:text-primary-main"],
+        option: ["hover:bg-primary-soft", "hover:text-primary-main"]
+      },
+      secondary: {
+        selectWrapper: ["hover:text-secondary-main"],
+        select: ["text-secondary-main"],
+        option: ["hover:bg-secondary-soft", "hover:text-secondary-main"]
+      }
+    },
+    size: {
+      sm: {
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        wrapper: ["gap-[4px]"],
+        selectWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
+        select: ["text-sm"],
+        option: ["px-[4px]", "py-[3px]", "text-sm"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
+      },
+      md: {
+        base: ["text-md", "gap-[6px]", "rounded-md"],
+        label: ["text-md"],
+        wrapper: ["gap-[6px]"],
+        selectWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
+        select: ["text-md"],
+        option: ["px-[6px]", "py-[5.5px]", "text-md"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
+      },
+      lg: {
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        wrapper: ["gap-[8px]"],
+        selectWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
+        select: ["text-lg"],
+        option: ["px-[8px]", "py-[8px]", "text-lg"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
+      },
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        wrapper: ["gap-[10px]"],
+        selectWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
+        select: ["text-xl"],
+        option: ["px-[10px]", "py-[11.5px]"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
+      }
+    },
+    direction: {
+      vertical: "",
+      horizon: ""
+    },
+    full: {
+      true: {
+        base: ["w-full"],
+        wrapper: ["w-full"],
+        selectWrapper: ["w-full"]
+      }
+    },
+    disabled: {
+      true: {
+        base: ["pointer-events-none"],
+        selectWrapper: [
+          "bg-neutral-soft",
+          "border-neutral-light",
+          "group-has-[p.error]/select:text-danger-light",
+          "group-has-[p.error]/select:bg-danger-soft",
+          "group-has-[p.error]/select:border-danger-light"
+        ],
+        select: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/select:text-danger-light",
+          "group-has-[p.error]/select:placeholder:text-danger-light"
+        ],
+        helperText: ["!text-neutral-light"],
+        errorText: ["!text-danger-light"]
+      }
+    },
+    isSelected: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      isSelected: true,
+      class: {
+        option: "bg-primary-soft text-primary-main"
+      }
+    },
+    {
+      color: "secondary",
+      isSelected: true,
+      class: {
+        option: "bg-secondary-soft text-secondary-main"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    disabled: false,
+    readonly: false
+  }
+});
+
+export {
+  select_default
+};

package/dist/{chunk-JOCMCOEK.mjs → chunk-P5PJTJLY.mjs}

@@ -98,7 +98,18 @@ var Input = forwardRef((originalProps, ref) => {
               ),
               children: [
                 startContent && renderStartContent(),
-                /* @__PURE__ */ jsx("input", { ...inputProps, ref: ref || inputRef, className: slots.input({ class: classNames == null ? void 0 : classNames.input }), size: 0 }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...inputProps,
+                    ref: ref || inputRef,
+                    className: clsx(
+                      slots.input({ class: classNames == null ? void 0 : classNames.input }),
+                      inputProps.readOnly ? "!text-body-foreground placeholder:text-body-foreground" : ""
+                    ),
+                    size: 0
+                  }
+                ),
                 renderEndContent()
               ]
             }
@@ -146,7 +157,7 @@ var inputStyle = tv(
       ],
       helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
       errorText: ["text-danger-main"],
-      readonly: ["pointer-events-none"]
+      readonly: ["pointer-events-none", "!text-body-foreground"]
     },
     variants: {
       variant: {

package/dist/{chunk-63WXGSTV.mjs → chunk-XRC5OUYQ.mjs}

@@ -15,9 +15,10 @@ var TableBody = ({
   columns,
   rows,
   size,
-  selectableRows,
+  rowCheckbox,
   checkedRows,
   onCheckRow,
+  onRowClick,
   emptyContent,
   isLoading,
   classNames,
@@ -58,21 +59,30 @@ var TableBody = ({
     [classNames == null ? void 0 : classNames.td, generateColumnStyles, slots]
   );
   const hasRows = rows.length > 0;
-  const colSpan = (columns.length || 1) + (selectableRows ? 1 : 0);
+  const colSpan = (columns.length || 1) + (rowCheckbox ? 1 : 0);
   return /* @__PURE__ */ jsxs("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: [
     !isLoading && hasRows && rows.map((row, rowIndex) => {
       const isRowChecked = checkedRows.has(rowIndex);
-      return /* @__PURE__ */ jsxs("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "aria-checked": isRowChecked, children: [
-        columns.map((column) => /* @__PURE__ */ createElement("td", { ...getCellProps(column, row), key: column.field })),
-        selectableRows && /* @__PURE__ */ jsx("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
-          checkbox_default,
-          {
-            size,
-            checked: isRowChecked,
-            onChange: (e) => onCheckRow(rowIndex, e.target.checked)
-          }
-        ) }) })
-      ] }, rowIndex);
+      return /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
+          "aria-checked": isRowChecked,
+          onClick: () => onRowClick ? onRowClick(row) : void 0,
+          children: [
+            columns.map((column) => /* @__PURE__ */ createElement("td", { ...getCellProps(column, row), key: column.field })),
+            rowCheckbox && /* @__PURE__ */ jsx("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+              checkbox_default,
+              {
+                size,
+                checked: isRowChecked,
+                onChange: (e) => onCheckRow(rowIndex, e.target.checked)
+              }
+            ) }) })
+          ]
+        },
+        rowIndex
+      );
     }),
     !isLoading && !hasRows && emptyContent && /* @__PURE__ */ jsx("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "border-none"), children: /* @__PURE__ */ jsx("td", { colSpan, className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) })
   ] });

package/dist/components/input/index.js

@@ -4441,7 +4441,18 @@ var Input = (0, import_react.forwardRef)((originalProps, ref) => {
               ),
               children: [
                 startContent && renderStartContent(),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ...inputProps, ref: ref || inputRef, className: slots.input({ class: classNames == null ? void 0 : classNames.input }), size: 0 }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    ...inputProps,
+                    ref: ref || inputRef,
+                    className: clsx(
+                      slots.input({ class: classNames == null ? void 0 : classNames.input }),
+                      inputProps.readOnly ? "!text-body-foreground placeholder:text-body-foreground" : ""
+                    ),
+                    size: 0
+                  }
+                ),
                 renderEndContent()
               ]
             }
@@ -4489,7 +4500,7 @@ var inputStyle = tv(
       ],
       helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
       errorText: ["text-danger-main"],
-      readonly: ["pointer-events-none"]
+      readonly: ["pointer-events-none", "!text-body-foreground"]
     },
     variants: {
       variant: {

package/dist/components/input/index.mjs

@@ -2,7 +2,7 @@
 import "../../chunk-2GCSFWHD.mjs";
 import {
   input_default
-} from "../../chunk-JOCMCOEK.mjs";
+} from "../../chunk-P5PJTJLY.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-HWL7TPUN.mjs";
 import "../../chunk-3IU2RPSM.mjs";

package/dist/components/input/input.js

@@ -4440,7 +4440,18 @@ var Input = (0, import_react.forwardRef)((originalProps, ref) => {
               ),
               children: [
                 startContent && renderStartContent(),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ...inputProps, ref: ref || inputRef, className: slots.input({ class: classNames == null ? void 0 : classNames.input }), size: 0 }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    ...inputProps,
+                    ref: ref || inputRef,
+                    className: clsx(
+                      slots.input({ class: classNames == null ? void 0 : classNames.input }),
+                      inputProps.readOnly ? "!text-body-foreground placeholder:text-body-foreground" : ""
+                    ),
+                    size: 0
+                  }
+                ),
                 renderEndContent()
               ]
             }
@@ -4488,7 +4499,7 @@ var inputStyle = tv(
       ],
       helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
       errorText: ["text-danger-main"],
-      readonly: ["pointer-events-none"]
+      readonly: ["pointer-events-none", "!text-body-foreground"]
     },
     variants: {
       variant: {

package/dist/components/input/input.mjs

@@ -2,7 +2,7 @@
 import {
   inputStyle,
   input_default
-} from "../../chunk-JOCMCOEK.mjs";
+} from "../../chunk-P5PJTJLY.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-HWL7TPUN.mjs";
 import "../../chunk-3IU2RPSM.mjs";

package/dist/components/modal/index.mjs

@@ -13,9 +13,9 @@ import "../../chunk-6PNKRBUT.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-HWL7TPUN.mjs";
 import "../../chunk-WFMFC7R6.mjs";
+import "../../chunk-3IU2RPSM.mjs";
 import "../../chunk-SE5TU755.mjs";
 import "../../chunk-LL6F3WDX.mjs";
-import "../../chunk-3IU2RPSM.mjs";
 import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";

package/dist/components/modal/modal.mjs

@@ -12,9 +12,9 @@ import "../../chunk-6PNKRBUT.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-HWL7TPUN.mjs";
 import "../../chunk-WFMFC7R6.mjs";
+import "../../chunk-3IU2RPSM.mjs";
 import "../../chunk-SE5TU755.mjs";
 import "../../chunk-LL6F3WDX.mjs";
-import "../../chunk-3IU2RPSM.mjs";
 import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";

package/dist/components/pagination/index.js

@@ -4469,7 +4469,18 @@ var Input = (0, import_react2.forwardRef)((originalProps, ref) => {
               ),
               children: [
                 startContent && renderStartContent(),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ...inputProps, ref: ref || inputRef, className: slots.input({ class: classNames == null ? void 0 : classNames.input }), size: 0 }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    ...inputProps,
+                    ref: ref || inputRef,
+                    className: clsx(
+                      slots.input({ class: classNames == null ? void 0 : classNames.input }),
+                      inputProps.readOnly ? "!text-body-foreground placeholder:text-body-foreground" : ""
+                    ),
+                    size: 0
+                  }
+                ),
                 renderEndContent()
               ]
             }
@@ -4517,7 +4528,7 @@ var inputStyle = tv(
       ],
       helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
       errorText: ["text-danger-main"],
-      readonly: ["pointer-events-none"]
+      readonly: ["pointer-events-none", "!text-body-foreground"]
     },
     variants: {
       variant: {

package/dist/components/pagination/index.mjs

@@ -2,10 +2,10 @@
 import "../../chunk-7B7LRG5J.mjs";
 import {
   pagination_default
-} from "../../chunk-EGHTZLZJ.mjs";
+} from "../../chunk-IVK24VIL.mjs";
 import "../../chunk-F3HENRVM.mjs";
 import "../../chunk-2GCSFWHD.mjs";
-import "../../chunk-JOCMCOEK.mjs";
+import "../../chunk-P5PJTJLY.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-HWL7TPUN.mjs";
 import "../../chunk-3IU2RPSM.mjs";