@ktnpm_devops/react-component 0.2.1 → 0.4.0

package/dist/index6.cjs

@@ -1,68 +1,22 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const truncateWithEllipsis = (value, maxLength = 36) => {
-  if (value.length <= maxLength) return value;
-  if (maxLength <= 3) return value.slice(0, maxLength);
-  return `${value.slice(0, maxLength - 3)}...`;
-};
-const formatNumber = (value, options) => Number.isFinite(value) ? value.toLocaleString(void 0, options) : "0";
-const formatBytes = (value) => {
-  if (!Number.isFinite(value) || value === 0) return "0 B";
-  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
-  let index = 0;
-  let current = Math.abs(value);
-  while (current >= 1024 && index < units.length - 1) {
-    current /= 1024;
-    index += 1;
-  }
-  const formatted = current.toFixed(current >= 10 || index === 0 ? 0 : 1);
-  return `${value < 0 ? "-" : ""}${formatted} ${units[index]}`;
-};
-const DATETIME_FORMATTERS = /* @__PURE__ */ new Map();
-const getDateTimeFormatter = (timeZone, withSeconds) => {
-  const key = `${timeZone}-${withSeconds ? "s" : "n"}`;
-  const cached = DATETIME_FORMATTERS.get(key);
-  if (cached) return cached;
-  const formatter = new Intl.DateTimeFormat(void 0, {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: withSeconds ? "2-digit" : void 0,
-    hour12: false,
-    timeZone
-  });
-  DATETIME_FORMATTERS.set(key, formatter);
-  return formatter;
-};
-const formatDataTimestamp = (value, options = {}) => {
-  const { fallback = "Unknown", withSeconds = false, timeZone = "UTC", showTimeZoneLabel = false } = options;
-  if (!value) return fallback;
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return typeof value === "string" ? value : fallback;
-  const formatter = getDateTimeFormatter(timeZone, withSeconds);
-  const formatted = formatter.format(date);
-  return showTimeZoneLabel ? `${formatted} ${timeZone}` : formatted;
-};
-const formatLocalISOString = (date) => {
-  const pad = (n) => `${n}`.padStart(2, "0");
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
-};
-const generateUUID = () => {
-  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
-    return crypto.randomUUID();
-  }
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-    const r = Math.random() * 16 | 0;
-    const v = c === "x" ? r : r & 3 | 8;
-    return v.toString(16);
-  });
-};
-exports.formatBytes = formatBytes;
-exports.formatDataTimestamp = formatDataTimestamp;
-exports.formatLocalISOString = formatLocalISOString;
-exports.formatNumber = formatNumber;
-exports.generateUUID = generateUUID;
-exports.truncateWithEllipsis = truncateWithEllipsis;
+const react = require("react");
+function useResizeObserver(ref) {
+  const [size, setSize] = react.useState({ width: 0, height: 0 });
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        const { width, height } = entry.contentRect;
+        setSize({ width, height });
+      }
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+}
+exports.useResizeObserver = useResizeObserver;
 //# sourceMappingURL=index6.cjs.map

package/dist/index6.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index6.cjs","sources":["../src/utils/format.ts"],"sourcesContent":["export const truncateWithEllipsis = (value: string, maxLength = 36) => {\n  if (value.length <= maxLength) return value;\n  if (maxLength <= 3) return value.slice(0, maxLength);\n  return `${value.slice(0, maxLength - 3)}...`;\n};\n\nexport const formatNumber = (value: number, options?: Intl.NumberFormatOptions) =>\n  Number.isFinite(value) ? value.toLocaleString(undefined, options) : '0';\n\nexport const formatBytes = (value: number): string => {\n  if (!Number.isFinite(value) || value === 0) return '0 B';\n  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];\n  let index = 0;\n  let current = Math.abs(value);\n  while (current >= 1024 && index < units.length - 1) {\n    current /= 1024;\n    index += 1;\n  }\n  const formatted = current.toFixed(current >= 10 || index === 0 ? 0 : 1);\n  return `${value < 0 ? '-' : ''}${formatted} ${units[index]}`;\n};\n\ninterface FormatDataTimestampOptions {\n  fallback?: string;\n  withSeconds?: boolean;\n  timeZone?: string;\n  showTimeZoneLabel?: boolean;\n}\n\nconst DATETIME_FORMATTERS = new Map<string, Intl.DateTimeFormat>();\n\nconst getDateTimeFormatter = (timeZone: string, withSeconds: boolean) => {\n  const key = `${timeZone}-${withSeconds ? 's' : 'n'}`;\n  const cached = DATETIME_FORMATTERS.get(key);\n  if (cached) return cached;\n  const formatter = new Intl.DateTimeFormat(undefined, {\n    year: 'numeric',\n    month: '2-digit',\n    day: '2-digit',\n    hour: '2-digit',\n    minute: '2-digit',\n    second: withSeconds ? '2-digit' : undefined,\n    hour12: false,\n    timeZone,\n  });\n  DATETIME_FORMATTERS.set(key, formatter);\n  return formatter;\n};\n\nexport const formatDataTimestamp = (\n  value: string | null | undefined,\n  options: FormatDataTimestampOptions = {},\n): string => {\n  const { fallback = 'Unknown', withSeconds = false, timeZone = 'UTC', showTimeZoneLabel = false } =\n    options;\n  if (!value) return fallback;\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return typeof value === 'string' ? value : fallback;\n  const formatter = getDateTimeFormatter(timeZone, withSeconds);\n  const formatted = formatter.format(date);\n  return showTimeZoneLabel ? `${formatted} ${timeZone}` : formatted;\n};\n\nexport const formatLocalISOString = (date: Date): string => {\n  const pad = (n: number) => `${n}`.padStart(2, '0');\n  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;\n};\n\nexport const generateUUID = (): string => {\n  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {\n    return crypto.randomUUID();\n  }\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n    const r = (Math.random() * 16) | 0;\n    const v = c === 'x' ? r : (r & 0x3) | 0x8;\n    return v.toString(16);\n  });\n};\n"],"names":[],"mappings":";;AAAO,MAAM,uBAAuB,CAAC,OAAe,YAAY,OAAO;AACrE,MAAI,MAAM,UAAU,UAAW,QAAO;AACtC,MAAI,aAAa,EAAG,QAAO,MAAM,MAAM,GAAG,SAAS;AACnD,SAAO,GAAG,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC;AACzC;AAEO,MAAM,eAAe,CAAC,OAAe,YAC1C,OAAO,SAAS,KAAK,IAAI,MAAM,eAAe,QAAW,OAAO,IAAI;AAE/D,MAAM,cAAc,CAAC,UAA0B;AACpD,MAAI,CAAC,OAAO,SAAS,KAAK,KAAK,UAAU,EAAG,QAAO;AACnD,QAAM,QAAQ,CAAC,KAAK,MAAM,MAAM,MAAM,MAAM,IAAI;AAChD,MAAI,QAAQ;AACZ,MAAI,UAAU,KAAK,IAAI,KAAK;AAC5B,SAAO,WAAW,QAAQ,QAAQ,MAAM,SAAS,GAAG;AAClD,eAAW;AACX,aAAS;AAAA,EACX;AACA,QAAM,YAAY,QAAQ,QAAQ,WAAW,MAAM,UAAU,IAAI,IAAI,CAAC;AACtE,SAAO,GAAG,QAAQ,IAAI,MAAM,EAAE,GAAG,SAAS,IAAI,MAAM,KAAK,CAAC;AAC5D;AASA,MAAM,0CAA0B,IAAA;AAEhC,MAAM,uBAAuB,CAAC,UAAkB,gBAAyB;AACvE,QAAM,MAAM,GAAG,QAAQ,IAAI,cAAc,MAAM,GAAG;AAClD,QAAM,SAAS,oBAAoB,IAAI,GAAG;AAC1C,MAAI,OAAQ,QAAO;AACnB,QAAM,YAAY,IAAI,KAAK,eAAe,QAAW;AAAA,IACnD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ,cAAc,YAAY;AAAA,IAClC,QAAQ;AAAA,IACR;AAAA,EAAA,CACD;AACD,sBAAoB,IAAI,KAAK,SAAS;AACtC,SAAO;AACT;AAEO,MAAM,sBAAsB,CACjC,OACA,UAAsC,OAC3B;AACX,QAAM,EAAE,WAAW,WAAW,cAAc,OAAO,WAAW,OAAO,oBAAoB,MAAA,IACvF;AACF,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,MAAI,OAAO,MAAM,KAAK,QAAA,CAAS,EAAG,QAAO,OAAO,UAAU,WAAW,QAAQ;AAC7E,QAAM,YAAY,qBAAqB,UAAU,WAAW;AAC5D,QAAM,YAAY,UAAU,OAAO,IAAI;AACvC,SAAO,oBAAoB,GAAG,SAAS,IAAI,QAAQ,KAAK;AAC1D;AAEO,MAAM,uBAAuB,CAAC,SAAuB;AAC1D,QAAM,MAAM,CAAC,MAAc,GAAG,CAAC,GAAG,SAAS,GAAG,GAAG;AACjD,SAAO,GAAG,KAAK,YAAA,CAAa,IAAI,IAAI,KAAK,SAAA,IAAa,CAAC,CAAC,IAAI,IAAI,KAAK,SAAS,CAAC,IAAI,IAAI,KAAK,SAAA,CAAU,CAAC,IAAI,IAAI,KAAK,WAAA,CAAY,CAAC,IAAI,IAAI,KAAK,WAAA,CAAY,CAAC;AAC7J;AAEO,MAAM,eAAe,MAAc;AACxC,MAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY;AAC5E,WAAO,OAAO,WAAA;AAAA,EAChB;AACA,SAAO,uCAAuC,QAAQ,SAAS,CAAC,MAAM;AACpE,UAAM,IAAK,KAAK,OAAA,IAAW,KAAM;AACjC,UAAM,IAAI,MAAM,MAAM,IAAK,IAAI,IAAO;AACtC,WAAO,EAAE,SAAS,EAAE;AAAA,EACtB,CAAC;AACH;;;;;;;"}
+{"version":3,"file":"index6.cjs","sources":["../src/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect, useState, type RefObject } from 'react';\n\ninterface Size {\n  width: number;\n  height: number;\n}\n\n/** Observes the size of the element referenced by `ref` via ResizeObserver. */\nexport function useResizeObserver<T extends HTMLElement>(ref: RefObject<T | null>): Size {\n  const [size, setSize] = useState<Size>({ width: 0, height: 0 });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (entry) {\n        const { width, height } = entry.contentRect;\n        setSize({ width, height });\n      }\n    });\n\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref]);\n\n  return size;\n}\n"],"names":["useState","useEffect"],"mappings":";;;AAQO,SAAS,kBAAyC,KAAgC;AACvF,QAAM,CAAC,MAAM,OAAO,IAAIA,MAAAA,SAAe,EAAE,OAAO,GAAG,QAAQ,GAAG;AAE9DC,QAAAA,UAAU,MAAM;AACd,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,QAAS;AAEd,UAAM,WAAW,IAAI,eAAe,CAAC,YAAY;AAC/C,YAAM,QAAQ,QAAQ,CAAC;AACvB,UAAI,OAAO;AACT,cAAM,EAAE,OAAO,OAAA,IAAW,MAAM;AAChC,gBAAQ,EAAE,OAAO,QAAQ;AAAA,MAC3B;AAAA,IACF,CAAC;AAED,aAAS,QAAQ,OAAO;AACxB,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,GAAG,CAAC;AAER,SAAO;AACT;;"}

package/dist/index6.js

@@ -1,68 +1,22 @@
-const truncateWithEllipsis = (value, maxLength = 36) => {
-  if (value.length <= maxLength) return value;
-  if (maxLength <= 3) return value.slice(0, maxLength);
-  return `${value.slice(0, maxLength - 3)}...`;
-};
-const formatNumber = (value, options) => Number.isFinite(value) ? value.toLocaleString(void 0, options) : "0";
-const formatBytes = (value) => {
-  if (!Number.isFinite(value) || value === 0) return "0 B";
-  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
-  let index = 0;
-  let current = Math.abs(value);
-  while (current >= 1024 && index < units.length - 1) {
-    current /= 1024;
-    index += 1;
-  }
-  const formatted = current.toFixed(current >= 10 || index === 0 ? 0 : 1);
-  return `${value < 0 ? "-" : ""}${formatted} ${units[index]}`;
-};
-const DATETIME_FORMATTERS = /* @__PURE__ */ new Map();
-const getDateTimeFormatter = (timeZone, withSeconds) => {
-  const key = `${timeZone}-${withSeconds ? "s" : "n"}`;
-  const cached = DATETIME_FORMATTERS.get(key);
-  if (cached) return cached;
-  const formatter = new Intl.DateTimeFormat(void 0, {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: withSeconds ? "2-digit" : void 0,
-    hour12: false,
-    timeZone
-  });
-  DATETIME_FORMATTERS.set(key, formatter);
-  return formatter;
-};
-const formatDataTimestamp = (value, options = {}) => {
-  const { fallback = "Unknown", withSeconds = false, timeZone = "UTC", showTimeZoneLabel = false } = options;
-  if (!value) return fallback;
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return typeof value === "string" ? value : fallback;
-  const formatter = getDateTimeFormatter(timeZone, withSeconds);
-  const formatted = formatter.format(date);
-  return showTimeZoneLabel ? `${formatted} ${timeZone}` : formatted;
-};
-const formatLocalISOString = (date) => {
-  const pad = (n) => `${n}`.padStart(2, "0");
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
-};
-const generateUUID = () => {
-  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
-    return crypto.randomUUID();
-  }
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-    const r = Math.random() * 16 | 0;
-    const v = c === "x" ? r : r & 3 | 8;
-    return v.toString(16);
-  });
-};
+import { useState, useEffect } from "react";
+function useResizeObserver(ref) {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        const { width, height } = entry.contentRect;
+        setSize({ width, height });
+      }
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+}
 export {
-  formatBytes,
-  formatDataTimestamp,
-  formatLocalISOString,
-  formatNumber,
-  generateUUID,
-  truncateWithEllipsis
+  useResizeObserver
 };
 //# sourceMappingURL=index6.js.map

package/dist/index6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index6.js","sources":["../src/utils/format.ts"],"sourcesContent":["export const truncateWithEllipsis = (value: string, maxLength = 36) => {\n  if (value.length <= maxLength) return value;\n  if (maxLength <= 3) return value.slice(0, maxLength);\n  return `${value.slice(0, maxLength - 3)}...`;\n};\n\nexport const formatNumber = (value: number, options?: Intl.NumberFormatOptions) =>\n  Number.isFinite(value) ? value.toLocaleString(undefined, options) : '0';\n\nexport const formatBytes = (value: number): string => {\n  if (!Number.isFinite(value) || value === 0) return '0 B';\n  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];\n  let index = 0;\n  let current = Math.abs(value);\n  while (current >= 1024 && index < units.length - 1) {\n    current /= 1024;\n    index += 1;\n  }\n  const formatted = current.toFixed(current >= 10 || index === 0 ? 0 : 1);\n  return `${value < 0 ? '-' : ''}${formatted} ${units[index]}`;\n};\n\ninterface FormatDataTimestampOptions {\n  fallback?: string;\n  withSeconds?: boolean;\n  timeZone?: string;\n  showTimeZoneLabel?: boolean;\n}\n\nconst DATETIME_FORMATTERS = new Map<string, Intl.DateTimeFormat>();\n\nconst getDateTimeFormatter = (timeZone: string, withSeconds: boolean) => {\n  const key = `${timeZone}-${withSeconds ? 's' : 'n'}`;\n  const cached = DATETIME_FORMATTERS.get(key);\n  if (cached) return cached;\n  const formatter = new Intl.DateTimeFormat(undefined, {\n    year: 'numeric',\n    month: '2-digit',\n    day: '2-digit',\n    hour: '2-digit',\n    minute: '2-digit',\n    second: withSeconds ? '2-digit' : undefined,\n    hour12: false,\n    timeZone,\n  });\n  DATETIME_FORMATTERS.set(key, formatter);\n  return formatter;\n};\n\nexport const formatDataTimestamp = (\n  value: string | null | undefined,\n  options: FormatDataTimestampOptions = {},\n): string => {\n  const { fallback = 'Unknown', withSeconds = false, timeZone = 'UTC', showTimeZoneLabel = false } =\n    options;\n  if (!value) return fallback;\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return typeof value === 'string' ? value : fallback;\n  const formatter = getDateTimeFormatter(timeZone, withSeconds);\n  const formatted = formatter.format(date);\n  return showTimeZoneLabel ? `${formatted} ${timeZone}` : formatted;\n};\n\nexport const formatLocalISOString = (date: Date): string => {\n  const pad = (n: number) => `${n}`.padStart(2, '0');\n  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;\n};\n\nexport const generateUUID = (): string => {\n  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {\n    return crypto.randomUUID();\n  }\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n    const r = (Math.random() * 16) | 0;\n    const v = c === 'x' ? r : (r & 0x3) | 0x8;\n    return v.toString(16);\n  });\n};\n"],"names":[],"mappings":"AAAO,MAAM,uBAAuB,CAAC,OAAe,YAAY,OAAO;AACrE,MAAI,MAAM,UAAU,UAAW,QAAO;AACtC,MAAI,aAAa,EAAG,QAAO,MAAM,MAAM,GAAG,SAAS;AACnD,SAAO,GAAG,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC;AACzC;AAEO,MAAM,eAAe,CAAC,OAAe,YAC1C,OAAO,SAAS,KAAK,IAAI,MAAM,eAAe,QAAW,OAAO,IAAI;AAE/D,MAAM,cAAc,CAAC,UAA0B;AACpD,MAAI,CAAC,OAAO,SAAS,KAAK,KAAK,UAAU,EAAG,QAAO;AACnD,QAAM,QAAQ,CAAC,KAAK,MAAM,MAAM,MAAM,MAAM,IAAI;AAChD,MAAI,QAAQ;AACZ,MAAI,UAAU,KAAK,IAAI,KAAK;AAC5B,SAAO,WAAW,QAAQ,QAAQ,MAAM,SAAS,GAAG;AAClD,eAAW;AACX,aAAS;AAAA,EACX;AACA,QAAM,YAAY,QAAQ,QAAQ,WAAW,MAAM,UAAU,IAAI,IAAI,CAAC;AACtE,SAAO,GAAG,QAAQ,IAAI,MAAM,EAAE,GAAG,SAAS,IAAI,MAAM,KAAK,CAAC;AAC5D;AASA,MAAM,0CAA0B,IAAA;AAEhC,MAAM,uBAAuB,CAAC,UAAkB,gBAAyB;AACvE,QAAM,MAAM,GAAG,QAAQ,IAAI,cAAc,MAAM,GAAG;AAClD,QAAM,SAAS,oBAAoB,IAAI,GAAG;AAC1C,MAAI,OAAQ,QAAO;AACnB,QAAM,YAAY,IAAI,KAAK,eAAe,QAAW;AAAA,IACnD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ,cAAc,YAAY;AAAA,IAClC,QAAQ;AAAA,IACR;AAAA,EAAA,CACD;AACD,sBAAoB,IAAI,KAAK,SAAS;AACtC,SAAO;AACT;AAEO,MAAM,sBAAsB,CACjC,OACA,UAAsC,OAC3B;AACX,QAAM,EAAE,WAAW,WAAW,cAAc,OAAO,WAAW,OAAO,oBAAoB,MAAA,IACvF;AACF,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,MAAI,OAAO,MAAM,KAAK,QAAA,CAAS,EAAG,QAAO,OAAO,UAAU,WAAW,QAAQ;AAC7E,QAAM,YAAY,qBAAqB,UAAU,WAAW;AAC5D,QAAM,YAAY,UAAU,OAAO,IAAI;AACvC,SAAO,oBAAoB,GAAG,SAAS,IAAI,QAAQ,KAAK;AAC1D;AAEO,MAAM,uBAAuB,CAAC,SAAuB;AAC1D,QAAM,MAAM,CAAC,MAAc,GAAG,CAAC,GAAG,SAAS,GAAG,GAAG;AACjD,SAAO,GAAG,KAAK,YAAA,CAAa,IAAI,IAAI,KAAK,SAAA,IAAa,CAAC,CAAC,IAAI,IAAI,KAAK,SAAS,CAAC,IAAI,IAAI,KAAK,SAAA,CAAU,CAAC,IAAI,IAAI,KAAK,WAAA,CAAY,CAAC,IAAI,IAAI,KAAK,WAAA,CAAY,CAAC;AAC7J;AAEO,MAAM,eAAe,MAAc;AACxC,MAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY;AAC5E,WAAO,OAAO,WAAA;AAAA,EAChB;AACA,SAAO,uCAAuC,QAAQ,SAAS,CAAC,MAAM;AACpE,UAAM,IAAK,KAAK,OAAA,IAAW,KAAM;AACjC,UAAM,IAAI,MAAM,MAAM,IAAK,IAAI,IAAO;AACtC,WAAO,EAAE,SAAS,EAAE;AAAA,EACtB,CAAC;AACH;"}
+{"version":3,"file":"index6.js","sources":["../src/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect, useState, type RefObject } from 'react';\n\ninterface Size {\n  width: number;\n  height: number;\n}\n\n/** Observes the size of the element referenced by `ref` via ResizeObserver. */\nexport function useResizeObserver<T extends HTMLElement>(ref: RefObject<T | null>): Size {\n  const [size, setSize] = useState<Size>({ width: 0, height: 0 });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (entry) {\n        const { width, height } = entry.contentRect;\n        setSize({ width, height });\n      }\n    });\n\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref]);\n\n  return size;\n}\n"],"names":[],"mappings":";AAQO,SAAS,kBAAyC,KAAgC;AACvF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAe,EAAE,OAAO,GAAG,QAAQ,GAAG;AAE9D,YAAU,MAAM;AACd,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,QAAS;AAEd,UAAM,WAAW,IAAI,eAAe,CAAC,YAAY;AAC/C,YAAM,QAAQ,QAAQ,CAAC;AACvB,UAAI,OAAO;AACT,cAAM,EAAE,OAAO,OAAA,IAAW,MAAM;AAChC,gBAAQ,EAAE,OAAO,QAAQ;AAAA,MAC3B;AAAA,IACF,CAAC;AAED,aAAS,QAAQ,OAAO;AACxB,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,GAAG,CAAC;AAER,SAAO;AACT;"}

package/dist/index60.cjs

@@ -1,30 +1,72 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-Kdtyn";
-const primary = "krc-primary-6l6aH";
-const secondary = "krc-secondary-29n8Y";
-const outline = "krc-outline-U1Mlr";
-const ghost = "krc-ghost-5wRsR";
-const danger = "krc-danger-gL4NM";
-const sm = "krc-sm-zP51s";
-const lg = "krc-lg-ZefGA";
+const root = "krc-root-HS837";
+const gapNone = "krc-gapNone-MmCvp";
+const gapXs = "krc-gapXs-Jketq";
+const gapSm = "krc-gapSm-BFLhK";
+const gapMd = "krc-gapMd--7IRg";
+const gapLg = "krc-gapLg-ehuIZ";
+const gapXl = "krc-gapXl-kNEyc";
+const alignStart = "krc-alignStart-q6fMC";
+const alignCenter = "krc-alignCenter-Py2Kt";
+const alignEnd = "krc-alignEnd-ialGn";
+const alignStretch = "krc-alignStretch-J-rq4";
+const alignBaseline = "krc-alignBaseline-Hg-4L";
+const justifyStart = "krc-justifyStart-tBqbD";
+const justifyCenter = "krc-justifyCenter-6QDaO";
+const justifyEnd = "krc-justifyEnd-2tbcB";
+const justifyBetween = "krc-justifyBetween-5W1AJ";
+const justifyAround = "krc-justifyAround-AMU1m";
+const justifyEvenly = "krc-justifyEvenly-Vj3C-";
+const wrap = "krc-wrap-Q4txZ";
+const nowrap = "krc-nowrap-BUcfT";
+const dirRow = "krc-dirRow-NBoPO";
+const dirColumn = "krc-dirColumn-gJ7qS";
 const styles = {
   root,
-  primary,
-  secondary,
-  outline,
-  ghost,
-  danger,
-  sm,
-  lg
+  gapNone,
+  gapXs,
+  gapSm,
+  gapMd,
+  gapLg,
+  gapXl,
+  alignStart,
+  alignCenter,
+  alignEnd,
+  alignStretch,
+  alignBaseline,
+  justifyStart,
+  justifyCenter,
+  justifyEnd,
+  justifyBetween,
+  justifyAround,
+  justifyEvenly,
+  wrap,
+  nowrap,
+  dirRow,
+  dirColumn
 };
-exports.danger = danger;
+exports.alignBaseline = alignBaseline;
+exports.alignCenter = alignCenter;
+exports.alignEnd = alignEnd;
+exports.alignStart = alignStart;
+exports.alignStretch = alignStretch;
 exports.default = styles;
-exports.ghost = ghost;
-exports.lg = lg;
-exports.outline = outline;
-exports.primary = primary;
+exports.dirColumn = dirColumn;
+exports.dirRow = dirRow;
+exports.gapLg = gapLg;
+exports.gapMd = gapMd;
+exports.gapNone = gapNone;
+exports.gapSm = gapSm;
+exports.gapXl = gapXl;
+exports.gapXs = gapXs;
+exports.justifyAround = justifyAround;
+exports.justifyBetween = justifyBetween;
+exports.justifyCenter = justifyCenter;
+exports.justifyEnd = justifyEnd;
+exports.justifyEvenly = justifyEvenly;
+exports.justifyStart = justifyStart;
+exports.nowrap = nowrap;
 exports.root = root;
-exports.secondary = secondary;
-exports.sm = sm;
+exports.wrap = wrap;
 //# sourceMappingURL=index60.cjs.map

package/dist/index60.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index60.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index60.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index60.js

@@ -1,30 +1,72 @@
-const root = "krc-root-Kdtyn";
-const primary = "krc-primary-6l6aH";
-const secondary = "krc-secondary-29n8Y";
-const outline = "krc-outline-U1Mlr";
-const ghost = "krc-ghost-5wRsR";
-const danger = "krc-danger-gL4NM";
-const sm = "krc-sm-zP51s";
-const lg = "krc-lg-ZefGA";
+const root = "krc-root-HS837";
+const gapNone = "krc-gapNone-MmCvp";
+const gapXs = "krc-gapXs-Jketq";
+const gapSm = "krc-gapSm-BFLhK";
+const gapMd = "krc-gapMd--7IRg";
+const gapLg = "krc-gapLg-ehuIZ";
+const gapXl = "krc-gapXl-kNEyc";
+const alignStart = "krc-alignStart-q6fMC";
+const alignCenter = "krc-alignCenter-Py2Kt";
+const alignEnd = "krc-alignEnd-ialGn";
+const alignStretch = "krc-alignStretch-J-rq4";
+const alignBaseline = "krc-alignBaseline-Hg-4L";
+const justifyStart = "krc-justifyStart-tBqbD";
+const justifyCenter = "krc-justifyCenter-6QDaO";
+const justifyEnd = "krc-justifyEnd-2tbcB";
+const justifyBetween = "krc-justifyBetween-5W1AJ";
+const justifyAround = "krc-justifyAround-AMU1m";
+const justifyEvenly = "krc-justifyEvenly-Vj3C-";
+const wrap = "krc-wrap-Q4txZ";
+const nowrap = "krc-nowrap-BUcfT";
+const dirRow = "krc-dirRow-NBoPO";
+const dirColumn = "krc-dirColumn-gJ7qS";
 const styles = {
   root,
-  primary,
-  secondary,
-  outline,
-  ghost,
-  danger,
-  sm,
-  lg
+  gapNone,
+  gapXs,
+  gapSm,
+  gapMd,
+  gapLg,
+  gapXl,
+  alignStart,
+  alignCenter,
+  alignEnd,
+  alignStretch,
+  alignBaseline,
+  justifyStart,
+  justifyCenter,
+  justifyEnd,
+  justifyBetween,
+  justifyAround,
+  justifyEvenly,
+  wrap,
+  nowrap,
+  dirRow,
+  dirColumn
 };
 export {
-  danger,
+  alignBaseline,
+  alignCenter,
+  alignEnd,
+  alignStart,
+  alignStretch,
   styles as default,
-  ghost,
-  lg,
-  outline,
-  primary,
+  dirColumn,
+  dirRow,
+  gapLg,
+  gapMd,
+  gapNone,
+  gapSm,
+  gapXl,
+  gapXs,
+  justifyAround,
+  justifyBetween,
+  justifyCenter,
+  justifyEnd,
+  justifyEvenly,
+  justifyStart,
+  nowrap,
   root,
-  secondary,
-  sm
+  wrap
 };
 //# sourceMappingURL=index60.js.map

package/dist/index60.js.map

@@ -1 +1 @@
-{"version":3,"file":"index60.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index60.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index61.cjs

@@ -1,60 +1,27 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root--s1oD";
-const trigger = "krc-trigger-WMlNa";
-const active = "krc-active-O65lj";
-const triggerContent = "krc-triggerContent-JipmE";
-const chevron = "krc-chevron-J2Zsy";
-const label = "krc-label-lZlV-";
-const value = "krc-value-HsQrC";
-const clear = "krc-clear-bsi5j";
-const panel = "krc-panel--0odx";
-const searchContainer = "krc-searchContainer-WRS-U";
-const search = "krc-search-Dh3pY";
-const list = "krc-list-1RUtr";
-const noResults = "krc-noResults-Hin1U";
-const option = "krc-option-0mFGi";
-const focused = "krc-focused-0-7tE";
-const selected = "krc-selected-1zIqI";
-const optionLabel = "krc-optionLabel-pj-hL";
-const optionCount = "krc-optionCount-rVlCP";
+const root = "krc-root-cQSdQ";
+const disabled = "krc-disabled-mXUpZ";
+const active = "krc-active-c6Qv6";
+const collapsed = "krc-collapsed-zZjr3";
+const icon = "krc-icon-dmCQi";
+const label = "krc-label-ohVFC";
+const badge = "krc-badge-D8UnW";
 const styles = {
   root,
-  trigger,
+  disabled,
   active,
-  triggerContent,
-  chevron,
+  collapsed,
+  icon,
   label,
-  value,
-  clear,
-  panel,
-  searchContainer,
-  search,
-  list,
-  noResults,
-  option,
-  focused,
-  selected,
-  optionLabel,
-  optionCount
+  badge
 };
 exports.active = active;
-exports.chevron = chevron;
-exports.clear = clear;
+exports.badge = badge;
+exports.collapsed = collapsed;
 exports.default = styles;
-exports.focused = focused;
+exports.disabled = disabled;
+exports.icon = icon;
 exports.label = label;
-exports.list = list;
-exports.noResults = noResults;
-exports.option = option;
-exports.optionCount = optionCount;
-exports.optionLabel = optionLabel;
-exports.panel = panel;
 exports.root = root;
-exports.search = search;
-exports.searchContainer = searchContainer;
-exports.selected = selected;
-exports.trigger = trigger;
-exports.triggerContent = triggerContent;
-exports.value = value;
 //# sourceMappingURL=index61.cjs.map

package/dist/index61.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index61.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index61.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index61.js

@@ -1,60 +1,27 @@
-const root = "krc-root--s1oD";
-const trigger = "krc-trigger-WMlNa";
-const active = "krc-active-O65lj";
-const triggerContent = "krc-triggerContent-JipmE";
-const chevron = "krc-chevron-J2Zsy";
-const label = "krc-label-lZlV-";
-const value = "krc-value-HsQrC";
-const clear = "krc-clear-bsi5j";
-const panel = "krc-panel--0odx";
-const searchContainer = "krc-searchContainer-WRS-U";
-const search = "krc-search-Dh3pY";
-const list = "krc-list-1RUtr";
-const noResults = "krc-noResults-Hin1U";
-const option = "krc-option-0mFGi";
-const focused = "krc-focused-0-7tE";
-const selected = "krc-selected-1zIqI";
-const optionLabel = "krc-optionLabel-pj-hL";
-const optionCount = "krc-optionCount-rVlCP";
+const root = "krc-root-cQSdQ";
+const disabled = "krc-disabled-mXUpZ";
+const active = "krc-active-c6Qv6";
+const collapsed = "krc-collapsed-zZjr3";
+const icon = "krc-icon-dmCQi";
+const label = "krc-label-ohVFC";
+const badge = "krc-badge-D8UnW";
 const styles = {
   root,
-  trigger,
+  disabled,
   active,
-  triggerContent,
-  chevron,
+  collapsed,
+  icon,
   label,
-  value,
-  clear,
-  panel,
-  searchContainer,
-  search,
-  list,
-  noResults,
-  option,
-  focused,
-  selected,
-  optionLabel,
-  optionCount
+  badge
 };
 export {
   active,
-  chevron,
-  clear,
+  badge,
+  collapsed,
   styles as default,
-  focused,
+  disabled,
+  icon,
   label,
-  list,
-  noResults,
-  option,
-  optionCount,
-  optionLabel,
-  panel,
-  root,
-  search,
-  searchContainer,
-  selected,
-  trigger,
-  triggerContent,
-  value
+  root
 };
 //# sourceMappingURL=index61.js.map

package/dist/index61.js.map

@@ -1 +1 @@
-{"version":3,"file":"index61.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index61.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/index62.cjs

@@ -1,21 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-WL0sD";
-const left = "krc-left-9KFDB";
-const right = "krc-right-YmUbX";
-const divider = "krc-divider-jNOSU";
-const dividerHandle = "krc-dividerHandle-SoNqx";
+const root = "krc-root-rzEDE";
+const sidebar = "krc-sidebar-ediN2";
+const sidebarCollapsed = "krc-sidebarCollapsed--qs43";
+const main = "krc-main-E8utR";
+const filterBar = "krc-filterBar-O8ajX";
+const content = "krc-content-lY5l-";
 const styles = {
   root,
-  left,
-  right,
-  divider,
-  dividerHandle
+  sidebar,
+  sidebarCollapsed,
+  main,
+  filterBar,
+  content
 };
+exports.content = content;
 exports.default = styles;
-exports.divider = divider;
-exports.dividerHandle = dividerHandle;
-exports.left = left;
-exports.right = right;
+exports.filterBar = filterBar;
+exports.main = main;
 exports.root = root;
+exports.sidebar = sidebar;
+exports.sidebarCollapsed = sidebarCollapsed;
 //# sourceMappingURL=index62.cjs.map

package/dist/index62.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index62.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index62.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}