@comitor/ui 1.11.0 → 2.1.0

package/dist/lib/visually-hidden-input.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+function VisuallyHiddenInput(props) {
+  const { control, value, checked, bubbles = true, type = "hidden", style, ...inputProps } = props;
+  const isCheckInput = React.useMemo(() => type === "checkbox" || type === "radio" || type === "switch", [type]);
+  const inputRef = React.useRef(null);
+  const prevValueRef = React.useRef({
+    value: isCheckInput ? checked : value,
+    previous: isCheckInput ? checked : value
+  });
+  const prevValue = React.useMemo(() => {
+    const currentValue = isCheckInput ? checked : value;
+    if (prevValueRef.current.value !== currentValue) {
+      prevValueRef.current.previous = prevValueRef.current.value;
+      prevValueRef.current.value = currentValue;
+    }
+    return prevValueRef.current.previous;
+  }, [isCheckInput, value, checked]);
+  const [controlSize, setControlSize] = React.useState({});
+  React.useLayoutEffect(() => {
+    if (!control) {
+      setControlSize({});
+      return;
+    }
+    setControlSize({
+      width: control.offsetWidth,
+      height: control.offsetHeight
+    });
+    if (typeof window === "undefined") return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (!Array.isArray(entries) || !entries.length) return;
+      const entry = entries[0];
+      if (!entry) return;
+      let width;
+      let height;
+      if ("borderBoxSize" in entry) {
+        const borderSizeEntry = entry.borderBoxSize;
+        const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+        width = borderSize.inlineSize;
+        height = borderSize.blockSize;
+      } else {
+        width = control.offsetWidth;
+        height = control.offsetHeight;
+      }
+      setControlSize({ width, height });
+    });
+    resizeObserver.observe(control, { box: "border-box" });
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [control]);
+  React.useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const inputProto = window.HTMLInputElement.prototype;
+    const propertyKey = isCheckInput ? "checked" : "value";
+    const eventType = isCheckInput ? "click" : "input";
+    const currentValue = isCheckInput ? checked : value;
+    const serializedCurrentValue = isCheckInput ? checked : typeof value === "object" && value !== null ? JSON.stringify(value) : value;
+    const descriptor = Object.getOwnPropertyDescriptor(inputProto, propertyKey);
+    const setter = descriptor?.set;
+    if (prevValue !== currentValue && setter) {
+      const event = new Event(eventType, { bubbles });
+      setter.call(input, serializedCurrentValue);
+      input.dispatchEvent(event);
+    }
+  }, [prevValue, value, checked, bubbles, isCheckInput]);
+  const composedStyle = React.useMemo(() => {
+    return {
+      ...style,
+      ...controlSize.width !== void 0 && controlSize.height !== void 0 ? controlSize : {},
+      border: 0,
+      clip: "rect(0 0 0 0)",
+      clipPath: "inset(50%)",
+      height: "1px",
+      margin: "-1px",
+      overflow: "hidden",
+      padding: 0,
+      position: "absolute",
+      whiteSpace: "nowrap",
+      width: "1px"
+    };
+  }, [style, controlSize]);
+  const [initialValue] = React.useState(
+    () => isCheckInput ? void 0 : typeof value === "object" && value !== null ? JSON.stringify(value) : value === void 0 || value === null ? void 0 : String(value)
+  );
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      ...inputProps,
+      ref: inputRef,
+      "aria-hidden": isCheckInput,
+      tabIndex: -1,
+      defaultChecked: isCheckInput ? checked : void 0,
+      defaultValue: initialValue,
+      style: composedStyle
+    }
+  );
+}
+export {
+  VisuallyHiddenInput
+};
+//# sourceMappingURL=visually-hidden-input.js.map

package/dist/lib/visually-hidden-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/visually-hidden-input.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (`components/visually-hidden-input.tsx`) — MIT, © 2024 Sadman Sakib.\n *\n * Ô `<input>` ẩn đứng thay cho một control tự dựng (Rating, TimePicker, KeyValue, PhoneInput…) để\n * control đó tham gia được `<form>` thật: có `name`, có mặt trong `FormData`, và phát sự kiện\n * `input`/`click` nổi bọt mỗi khi giá trị đổi — nhờ vậy `onChange` của form bên ngoài vẫn nghe được.\n */\n\nimport * as React from \"react\";\n\ntype InputValue = string[] | string;\n\ninterface VisuallyHiddenInputProps<T = InputValue>\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"value\" | \"checked\" | \"onReset\"> {\n  value?: T;\n  checked?: boolean;\n  control: HTMLElement | null;\n  bubbles?: boolean;\n}\n\nfunction VisuallyHiddenInput<T = InputValue>(props: VisuallyHiddenInputProps<T>) {\n  const { control, value, checked, bubbles = true, type = \"hidden\", style, ...inputProps } = props;\n\n  const isCheckInput = React.useMemo(() => type === \"checkbox\" || type === \"radio\" || type === \"switch\", [type]);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const prevValueRef = React.useRef<{\n    value: T | boolean | undefined;\n    previous: T | boolean | undefined;\n  }>({\n    value: isCheckInput ? checked : value,\n    previous: isCheckInput ? checked : value\n  });\n\n  const prevValue = React.useMemo(() => {\n    const currentValue = isCheckInput ? checked : value;\n    if (prevValueRef.current.value !== currentValue) {\n      prevValueRef.current.previous = prevValueRef.current.value;\n      prevValueRef.current.value = currentValue;\n    }\n    return prevValueRef.current.previous;\n  }, [isCheckInput, value, checked]);\n\n  const [controlSize, setControlSize] = React.useState<{\n    width?: number;\n    height?: number;\n  }>({});\n\n  React.useLayoutEffect(() => {\n    if (!control) {\n      setControlSize({});\n      return;\n    }\n\n    setControlSize({\n      width: control.offsetWidth,\n      height: control.offsetHeight\n    });\n\n    if (typeof window === \"undefined\") return;\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (!Array.isArray(entries) || !entries.length) return;\n\n      const entry = entries[0];\n      if (!entry) return;\n\n      let width: number;\n      let height: number;\n\n      if (\"borderBoxSize\" in entry) {\n        const borderSizeEntry = entry.borderBoxSize;\n        const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;\n        width = borderSize.inlineSize;\n        height = borderSize.blockSize;\n      } else {\n        width = control.offsetWidth;\n        height = control.offsetHeight;\n      }\n\n      setControlSize({ width, height });\n    });\n\n    resizeObserver.observe(control, { box: \"border-box\" });\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [control]);\n\n  React.useEffect(() => {\n    const input = inputRef.current;\n    if (!input) return;\n\n    const inputProto = window.HTMLInputElement.prototype;\n    const propertyKey = isCheckInput ? \"checked\" : \"value\";\n    const eventType = isCheckInput ? \"click\" : \"input\";\n    const currentValue = isCheckInput ? checked : value;\n\n    const serializedCurrentValue = isCheckInput\n      ? checked\n      : typeof value === \"object\" && value !== null\n        ? JSON.stringify(value)\n        : value;\n\n    const descriptor = Object.getOwnPropertyDescriptor(inputProto, propertyKey);\n\n    const setter = descriptor?.set;\n\n    if (prevValue !== currentValue && setter) {\n      const event = new Event(eventType, { bubbles });\n      setter.call(input, serializedCurrentValue);\n      input.dispatchEvent(event);\n    }\n  }, [prevValue, value, checked, bubbles, isCheckInput]);\n\n  const composedStyle = React.useMemo<React.CSSProperties>(() => {\n    return {\n      ...style,\n      ...(controlSize.width !== undefined && controlSize.height !== undefined ? controlSize : {}),\n      border: 0,\n      clip: \"rect(0 0 0 0)\",\n      clipPath: \"inset(50%)\",\n      height: \"1px\",\n      margin: \"-1px\",\n      overflow: \"hidden\",\n      padding: 0,\n      position: \"absolute\",\n      whiteSpace: \"nowrap\",\n      width: \"1px\"\n    };\n  }, [style, controlSize]);\n\n  /*\n   * ⚠ Khác thượng nguồn: bản gốc chỉ ghi giá trị vào ô khi nó ĐỔI (effect ở trên so với lần trước),\n   * còn lượt render đầu thì không ghi gì — nên một form gửi đi khi người dùng CHƯA chạm vào control\n   * mang chuỗi rỗng thay cho giá trị mặc định (Rating `defaultValue={3}` gửi `rating=\"\"`). Đã thấy\n   * đúng như vậy ở render phía server. `defaultValue` chỉ đặt giá trị BAN ĐẦU; mọi lần đổi sau vẫn\n   * đi qua setter + sự kiện như cũ.\n   */\n  const [initialValue] = React.useState(() =>\n    isCheckInput\n      ? undefined\n      : typeof value === \"object\" && value !== null\n        ? JSON.stringify(value)\n        : value === undefined || value === null\n          ? undefined\n          : String(value)\n  );\n\n  return (\n    <input\n      type={type}\n      {...inputProps}\n      ref={inputRef}\n      aria-hidden={isCheckInput}\n      tabIndex={-1}\n      defaultChecked={isCheckInput ? checked : undefined}\n      defaultValue={initialValue}\n      style={composedStyle}\n    />\n  );\n}\n\nexport { VisuallyHiddenInput };\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comitor/ui",
-  "version": "1.11.0",
+  "version": "2.1.0",
   "description": "Comitor design system — Shadcn/UI tùy biến theo brand Comitor + component dùng chung cho hệ sinh thái SaaS (Tasks, Chat, CRM, HR…)",
   "license": "MIT",
   "type": "module",
@@ -114,10 +114,14 @@
     }
   },
   "dependencies": {
+    "@diceui/mention": "^1.0.0",
+    "@diceui/tags-input": "^1.0.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@floating-ui/react": "^0.27.20",
+    "@floating-ui/react-dom": "^2.1.9",
     "@radix-ui/react-accordion": "1.2.12",
     "@radix-ui/react-alert-dialog": "1.1.15",
     "@radix-ui/react-aspect-ratio": "1.1.8",

package/styles.css

@@ -1015,3 +1015,22 @@
   -webkit-mask-image: repeating-linear-gradient(135deg, #000 0 6px, transparent 6px 9px);
   mask-image: repeating-linear-gradient(135deg, #000 0 6px, transparent 6px 9px);
 }
+
+/* ─ VÒNG QUAY của `CircularProgress` ở trạng thái KHÔNG XÁC ĐỊNH (`value={null}`) ─
+   Port từ Dice UI cùng component. Cung 25% quay trọn một vòng mỗi 0,8s, bắt đầu từ 12 giờ
+   (-90deg) để khớp điểm xuất phát của cung ở trạng thái có giá trị. Component chỉ gắn hiệu ứng
+   dưới `motion-safe:`, nên người dùng bật `prefers-reduced-motion` thấy một cung đứng yên.
+   ⚠ Thiếu khối này thì vòng không xác định ĐỨNG YÊN mà không có lỗi nào — nó trông y như
+   "đang ở 25%", tức một con số sai chứ không phải một hiệu ứng hỏng. */
+@theme {
+  --animate-spin-around: spin-around 0.8s linear infinite;
+
+  @keyframes spin-around {
+    0% {
+      transform: rotate(-90deg);
+    }
+    100% {
+      transform: rotate(270deg);
+    }
+  }
+}

package/dist/data-grid/compose-refs.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/data-grid/compose-refs.ts"],"sourcesContent":["/**\n * @see https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx\n */\n\nimport * as React from \"react\";\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n  if (typeof ref === \"function\") {\n    return ref(value);\n  }\n\n  if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  return (node) => {\n    let hasCleanup = false;\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node);\n      if (!hasCleanup && typeof cleanup === \"function\") {\n        hasCleanup = true;\n      }\n      return cleanup;\n    });\n\n    // React <19 will log an error to the console if a callback ref returns a\n    // value. We don't use ref cleanups internally so this will only happen if a\n    // user's ref callback returns a value, which we only expect if they are\n    // using the cleanup functionality added in React 19.\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (typeof cleanup === \"function\") {\n            cleanup();\n          } else {\n            setRef(refs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  // biome-ignore lint/correctness/useExhaustiveDependencies: we don't want to re-run this callback when the refs change\n  return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n"],"mappings":"AAIA,YAAY,WAAW;AAQvB,SAAS,OAAU,KAAqB,OAAU;AAChD,MAAI,OAAO,QAAQ,YAAY;AAC7B,WAAO,IAAI,KAAK;AAAA,EAClB;AAEA,MAAI,QAAQ,QAAQ,QAAQ,QAAW;AACrC,QAAI,UAAU;AAAA,EAChB;AACF;AAMA,SAAS,eAAkB,MAA8C;AACvE,SAAO,CAAC,SAAS;AACf,QAAI,aAAa;AACjB,UAAM,WAAW,KAAK,IAAI,CAAC,QAAQ;AACjC,YAAM,UAAU,OAAO,KAAK,IAAI;AAChC,UAAI,CAAC,cAAc,OAAO,YAAY,YAAY;AAChD,qBAAa;AAAA,MACf;AACA,aAAO;AAAA,IACT,CAAC;AAMD,QAAI,YAAY;AACd,aAAO,MAAM;AACX,iBAAS,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;AACxC,gBAAM,UAAU,SAAS,CAAC;AAC1B,cAAI,OAAO,YAAY,YAAY;AACjC,oBAAQ;AAAA,UACV,OAAO;AACL,mBAAO,KAAK,CAAC,GAAG,IAAI;AAAA,UACtB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAMA,SAAS,mBAAsB,MAA8C;AAE3E,SAAO,MAAM,YAAY,YAAY,GAAG,IAAI,GAAG,IAAI;AACrD;","names":[]}

package/dist/data-grid/use-as-ref.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/data-grid/use-as-ref.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"./use-isomorphic-layout-effect.js\";\n\nfunction useAsRef<T>(props: T) {\n  const ref = React.useRef<T>(props);\n\n  useIsomorphicLayoutEffect(() => {\n    ref.current = props;\n  });\n\n  return ref;\n}\n\nexport { useAsRef };\n"],"mappings":"AAAA,YAAY,WAAW;AAEvB,SAAS,iCAAiC;AAE1C,SAAS,SAAY,OAAU;AAC7B,QAAM,MAAM,MAAM,OAAU,KAAK;AAEjC,4BAA0B,MAAM;AAC9B,QAAI,UAAU;AAAA,EAChB,CAAC;AAED,SAAO;AACT;","names":[]}

package/dist/data-grid/use-isomorphic-layout-effect.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/data-grid/use-isomorphic-layout-effect.ts"],"sourcesContent":["import * as React from \"react\";\n\nconst useIsomorphicLayoutEffect = typeof window !== \"undefined\" ? React.useLayoutEffect : React.useEffect;\n\nexport { useIsomorphicLayoutEffect };\n"],"mappings":"AAAA,YAAY,WAAW;AAEvB,MAAM,4BAA4B,OAAO,WAAW,cAAc,MAAM,kBAAkB,MAAM;","names":[]}

package/dist/data-grid/use-lazy-ref.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/data-grid/use-lazy-ref.ts"],"sourcesContent":["import * as React from \"react\";\n\nfunction useLazyRef<T>(fn: () => T): React.RefObject<T> {\n  const ref = React.useRef<T | null>(null);\n  if (ref.current === null) {\n    ref.current = fn();\n  }\n  return ref as React.RefObject<T>;\n}\n\nexport { useLazyRef };\n"],"mappings":"AAAA,YAAY,WAAW;AAEvB,SAAS,WAAc,IAAiC;AACtD,QAAM,MAAM,MAAM,OAAiB,IAAI;AACvC,MAAI,IAAI,YAAY,MAAM;AACxB,QAAI,UAAU,GAAG;AAAA,EACnB;AACA,SAAO;AACT;","names":[]}