@tipp/ui 1.4.17 → 1.4.19

package/dist/molecules/expand-table/row.js

@@ -2,64 +2,64 @@ import {
   Row
 } from "../../chunk-PCWEW2UL.js";
 import "../../chunk-KTVZ4KLX.js";
-import "../../chunk-OHBL3CTQ.js";
+import "../../chunk-DWCPI2UN.js";
+import "../../chunk-TTYPIX4R.js";
+import "../../chunk-YY45YYJE.js";
+import "../../chunk-CYYWMYE7.js";
+import "../../chunk-3JRNKBMN.js";
+import "../../chunk-HYITAA4J.js";
+import "../../chunk-5H3YPCZK.js";
 import "../../chunk-FR2GDOU2.js";
 import "../../chunk-74DX4CU7.js";
 import "../../chunk-OYM4XCHQ.js";
 import "../../chunk-YJ7ZFOYL.js";
 import "../../chunk-5ZITU5L7.js";
-import "../../chunk-TTYPIX4R.js";
-import "../../chunk-YY45YYJE.js";
-import "../../chunk-CYYWMYE7.js";
+import "../../chunk-365QMK4D.js";
+import "../../chunk-YO3BQW6S.js";
+import "../../chunk-6IVCARWS.js";
 import "../../chunk-6DJOIRMF.js";
 import "../../chunk-FPD73OHW.js";
 import "../../chunk-ZKZDVS7G.js";
 import "../../chunk-MUNMDHRF.js";
 import "../../chunk-TVDKGMBI.js";
-import "../../chunk-3JRNKBMN.js";
-import "../../chunk-HYITAA4J.js";
-import "../../chunk-5H3YPCZK.js";
+import "../../chunk-O3T3TM3V.js";
 import "../../chunk-XQOL7UBI.js";
 import "../../chunk-TULWX7D6.js";
 import "../../chunk-SIM6HKVI.js";
-import "../../chunk-G6ITJNH2.js";
+import "../../chunk-RWJ7HBJY.js";
+import "../../chunk-O3DNDMV3.js";
 import "../../chunk-5AVBYDPB.js";
-import "../../chunk-365QMK4D.js";
-import "../../chunk-YO3BQW6S.js";
-import "../../chunk-6IVCARWS.js";
+import "../../chunk-UC627KGO.js";
+import "../../chunk-4WFMOFN2.js";
+import "../../chunk-WKFZ5MMN.js";
+import "../../chunk-ACVANQJ4.js";
 import "../../chunk-2DZ2Y3JI.js";
-import "../../chunk-DJN2IEY6.js";
+import "../../chunk-QDZS4B6A.js";
+import "../../chunk-52MVZ6AN.js";
 import "../../chunk-25HMMI7R.js";
 import "../../chunk-EGEQY3KT.js";
 import "../../chunk-HK224ADT.js";
-import "../../chunk-O3T3TM3V.js";
-import "../../chunk-O3DNDMV3.js";
+import "../../chunk-MIMJ7LON.js";
+import "../../chunk-IQEEPHOY.js";
+import "../../chunk-LHCDPZ5E.js";
 import "../../chunk-OHMOP5PV.js";
 import "../../chunk-LZJR77Q2.js";
 import "../../chunk-Q37G2GS6.js";
 import "../../chunk-VTJZMOSP.js";
 import "../../chunk-2VD5Y72N.js";
-import "../../chunk-UC627KGO.js";
-import "../../chunk-4WFMOFN2.js";
-import "../../chunk-WKFZ5MMN.js";
-import "../../chunk-ACVANQJ4.js";
-import "../../chunk-52MVZ6AN.js";
+import "../../chunk-3SSSCLJ5.js";
+import "../../chunk-EWD4AO5N.js";
+import "../../chunk-YGL6SWKN.js";
 import "../../chunk-4Y5BEXVN.js";
 import "../../chunk-U7JPP7WJ.js";
 import "../../chunk-LQY4RKWI.js";
 import "../../chunk-ZD7MNMED.js";
 import "../../chunk-B6XJN6EC.js";
 import "../../chunk-UVKNLJDZ.js";
-import "../../chunk-MIMJ7LON.js";
-import "../../chunk-IQEEPHOY.js";
-import "../../chunk-LHCDPZ5E.js";
-import "../../chunk-FWNTKFWE.js";
+import "../../chunk-F77ES5Y3.js";
 import "../../chunk-J242TTFH.js";
 import "../../chunk-EAXUQEO5.js";
 import "../../chunk-YJCCE5WP.js";
-import "../../chunk-3SSSCLJ5.js";
-import "../../chunk-EWD4AO5N.js";
-import "../../chunk-YGL6SWKN.js";
 import "../../chunk-N552FDTV.js";
 export {
   Row

package/dist/molecules/form.d.cts

@@ -8,7 +8,7 @@ declare const Form: {
     } & react.RefAttributes<HTMLDivElement>>;
     Label: react.ForwardRefExoticComponent<RadixForm.FormLabelProps & {
         /** label의 타입을 지정  */
-        variant?: "title" | "body" | undefined;
+        variant?: "body" | "title" | undefined;
     } & react.RefAttributes<HTMLLabelElement>>;
     Message: react.ForwardRefExoticComponent<RadixForm.FormMessageProps & react.RefAttributes<HTMLSpanElement>>;
     Control: react.ForwardRefExoticComponent<RadixForm.FormControlProps & react.RefAttributes<HTMLInputElement>>;

package/dist/molecules/form.d.ts

@@ -8,7 +8,7 @@ declare const Form: {
     } & react.RefAttributes<HTMLDivElement>>;
     Label: react.ForwardRefExoticComponent<RadixForm.FormLabelProps & {
         /** label의 타입을 지정  */
-        variant?: "title" | "body" | undefined;
+        variant?: "body" | "title" | undefined;
     } & react.RefAttributes<HTMLLabelElement>>;
     Message: react.ForwardRefExoticComponent<RadixForm.FormMessageProps & react.RefAttributes<HTMLSpanElement>>;
     Control: react.ForwardRefExoticComponent<RadixForm.FormControlProps & react.RefAttributes<HTMLInputElement>>;

package/dist/molecules/form.js

@@ -1,8 +1,8 @@
 import {
   Form
-} from "../chunk-OHBL3CTQ.js";
-import "../chunk-HK224ADT.js";
+} from "../chunk-DWCPI2UN.js";
 import "../chunk-52MVZ6AN.js";
+import "../chunk-HK224ADT.js";
 import "../chunk-N552FDTV.js";
 export {
   Form

package/dist/molecules/index.cjs

@@ -1067,7 +1067,8 @@ function TagSelector(props) {
     maxCount = 0,
     DropdownContainer = DefaultDropdownContainer,
     onChange,
-    size = "medium"
+    size = "medium",
+    readOnly
   } = props;
   const [selected, setSelected] = (0, import_react14.useState)(props.selected || []);
   const [value, setValue] = (0, import_react14.useState)("");
@@ -1234,60 +1235,66 @@ function TagSelector(props) {
         return "body";
     }
   }, [size]);
+  const focusClassName = focus ? " focused" : "";
+  const readOnlyClassName = readOnly ? " read-only" : "";
+  const readonlyContent = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes6.Flex, { gap: "1", children: selectedItem.map((item) => {
+    return tagRender ? tagRender(item) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Badge, { size: badgeSize, children: item.name }, item.id);
+  }) });
+  const editContent = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      import_themes6.Flex,
+      {
+        align: "center",
+        gap: "1",
+        maxWidth: "100%",
+        overflow: "hidden",
+        wrap: "wrap",
+        children: [
+          selectedItem.map((item) => {
+            return tagRender ? tagRender(item) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Badge, { size: badgeSize, children: [
+              item.name,
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                Button,
+                {
+                  onClick: () => {
+                    onDelete(item.id);
+                  },
+                  variant: "transparent",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.Cross1Icon, {})
+                }
+              )
+            ] }, item.id);
+          }),
+          placeholderVisible ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Typo, { color: "gray", variant: placeholderVariant, children: placeholder }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            AutoSizingInput,
+            {
+              onBlur,
+              onChange: onChangeValue,
+              onFocus,
+              onKeyDown: handleKeyDown,
+              ref: fieldRef,
+              value
+            }
+          )
+        ]
+      }
+    ),
+    focus ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.MagnifyingGlassIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.ChevronRightIcon, {})
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_themes11.Popover.Root, { open: Boolean(filteredOptions.length) && open, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes11.Popover.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes11.Popover.Trigger, { style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       import_themes7.Grid,
       {
         align: "center",
-        className: `tag-selector ${focus ? "focused" : ""} ${size}`,
+        className: `tag-selector ${size} ${focusClassName}${readOnlyClassName}`,
         columns: "1fr auto",
         gap: "1",
         onClick: () => {
           var _a;
-          return (_a = fieldRef.current) == null ? void 0 : _a.focus();
+          return !readOnly && ((_a = fieldRef.current) == null ? void 0 : _a.focus());
         },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-            import_themes6.Flex,
-            {
-              align: "center",
-              gap: "1",
-              maxWidth: "100%",
-              overflow: "hidden",
-              wrap: "wrap",
-              children: [
-                selectedItem.map((item) => {
-                  return tagRender ? tagRender(item) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Badge, { size: badgeSize, children: [
-                    item.name,
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                      Button,
-                      {
-                        onClick: () => {
-                          onDelete(item.id);
-                        },
-                        variant: "transparent",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.Cross1Icon, {})
-                      }
-                    )
-                  ] }, item.id);
-                }),
-                placeholderVisible ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Typo, { color: "gray", variant: placeholderVariant, children: placeholder }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  AutoSizingInput,
-                  {
-                    onBlur,
-                    onChange: onChangeValue,
-                    onFocus,
-                    onKeyDown: handleKeyDown,
-                    ref: fieldRef,
-                    value
-                  }
-                )
-              ]
-            }
-          ),
-          focus ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.MagnifyingGlassIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.ChevronRightIcon, {})
-        ]
+        children: readOnly ? readonlyContent : editContent
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(