@crossangle-org/cs-ui 0.2.6 → 0.2.7

package/dist/constants/cs-chart-option.constant.js

@@ -0,0 +1,105 @@
+import { getFillerColor } from "../lib/chart.util.js";
+import { csChartTooltipStyle } from "../components/tooltip/cs-tooltip.js";
+const CsChartBaseOptions = {
+  tooltip: {
+    className: csChartTooltipStyle,
+    borderColor: "transparent"
+  },
+  legend: {
+    bottom: 0,
+    icon: "circle",
+    itemWidth: 12,
+    itemHeight: 12,
+    itemGap: 12,
+    textStyle: {
+      color: "var(--chart-data-label-font)"
+    }
+  }
+};
+const CsLineChartTheme = {
+  line: {
+    symbol: "none",
+    symbolSize: 8,
+    itemStyle: {
+      borderWidth: 2
+    }
+  }
+};
+const CsChartAxisOptions = {
+  grid: {
+    containLabel: true,
+    top: 10,
+    bottom: 40,
+    left: 10,
+    right: 10,
+    borderColor: "var(--chart-wrapper-grid-color)",
+    show: false
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "var(--chart-wrapper-axis-color)"
+      }
+    },
+    axisLabel: {
+      color: "var(--chart-wrapper-label)"
+    },
+    splitLine: {
+      lineStyle: {
+        color: "var(--chart-wrapper-grid-color)"
+      }
+    }
+  },
+  yAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "var(--chart-wrapper-axis-color)"
+      }
+    },
+    axisLabel: {
+      color: "var(--chart-wrapper-label)"
+    },
+    splitLine: {
+      lineStyle: {
+        color: "var(--chart-wrapper-grid-color)"
+      }
+    }
+  }
+};
+const getCsChartZoomOptions = () => ({
+  dataZoom: [
+    {
+      type: "inside",
+      disabled: true,
+      start: 0,
+      end: 100
+    },
+    {
+      type: "slider",
+      show: false,
+      start: 0,
+      end: 100,
+      bottom: 20,
+      height: 24,
+      borderColor: "var(--chart-range-slider-track-border)",
+      backgroundColor: "var(--chart-range-slider-track-bg)",
+      fillerColor: getFillerColor(),
+      handleSize: "100%",
+      handleStyle: {
+        color: "var(--chart-range-slider-thumb-handle)",
+        borderColor: "var(--chart-range-slider-thumb-handle-border)",
+        borderWidth: 1
+      },
+      moveHandleStyle: {
+        color: "var(--chart-range-slider-thumb-bar)"
+      }
+    }
+  ]
+});
+export {
+  CsChartAxisOptions,
+  CsChartBaseOptions,
+  CsLineChartTheme,
+  getCsChartZoomOptions
+};
+//# sourceMappingURL=cs-chart-option.constant.js.map

package/dist/constants/cs-chart-option.constant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-chart-option.constant.js","sources":["../../src/constants/cs-chart-option.constant.ts"],"sourcesContent":["import { IXChartBodyProps } from \"x-charts/components/chart/x-charts-body\";\nimport { csChartTooltipStyle } from \"../components/tooltip\";\nimport { getFillerColor } from '../lib/chart.util';\n\nexport const CsChartBaseOptions: IXChartBodyProps['customOptions'] = {\n  tooltip: {\n   className: csChartTooltipStyle,\n   borderColor: \"transparent\"\n  },\n  legend: {\n    bottom: 0,\n    icon: 'circle',\n    itemWidth: 12,\n    itemHeight: 12,\n    itemGap: 12,\n    textStyle: {\n      color: 'var(--chart-data-label-font)',\n    }\n  }\n}\n\nexport const CsLineChartTheme = {\n  line: {\n    symbol: 'none',\n    symbolSize: 8,\n    itemStyle: {\n      borderWidth: 2\n    }\n  }\n}\n\nexport const CsChartAxisOptions: IXChartBodyProps['customOptions'] = {\n  grid: {\n    containLabel: true,\n    top: 10,\n    bottom: 40,\n    left: 10,\n    right: 10,\n    borderColor: 'var(--chart-wrapper-grid-color)',\n    show: false\n  },\n  xAxis: {\n    axisLine: {\n      lineStyle: {\n        color: 'var(--chart-wrapper-axis-color)'\n      }\n    },\n    axisLabel: {\n      color: 'var(--chart-wrapper-label)'\n    },\n    splitLine: {\n      lineStyle: {\n        color: 'var(--chart-wrapper-grid-color)'\n      }\n    }\n  },\n  yAxis: {\n    axisLine: {\n      lineStyle: {\n        color: 'var(--chart-wrapper-axis-color)'\n      }\n    },\n    axisLabel: {\n      color: 'var(--chart-wrapper-label)'\n    },\n    splitLine: {\n      lineStyle: {\n        color: 'var(--chart-wrapper-grid-color)'\n      }\n    }\n  }\n}\n\nexport const getCsChartZoomOptions = (): IXChartBodyProps['customOptions'] => ({\n  dataZoom: [\n    {\n      type: 'inside',\n      disabled: true,\n      start: 0,\n      end: 100\n    },\n    {\n      type: 'slider',\n      show: false,\n      start: 0,\n      end: 100,\n      bottom: 20,\n      height: 24,\n      borderColor: 'var(--chart-range-slider-track-border)',\n      backgroundColor: 'var(--chart-range-slider-track-bg)',\n      fillerColor: getFillerColor(),\n      handleSize: '100%',\n      handleStyle: {\n        color: 'var(--chart-range-slider-thumb-handle)',\n        borderColor: 'var(--chart-range-slider-thumb-handle-border)',\n        borderWidth: 1\n      },\n      moveHandleStyle: {\n         color: 'var(--chart-range-slider-thumb-bar)',\n      },\n    }\n  ]\n})"],"names":[],"mappings":";;AAIO,MAAM,qBAAwD;AAAA,EACnE,SAAS;AAAA,IACR,WAAW;AAAA,IACX,aAAa;AAAA,EAAA;AAAA,EAEd,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ;AAEO,MAAM,qBAAwD;AAAA,EACnE,MAAM;AAAA,IACJ,cAAc;AAAA,IACd,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EAAA;AAAA,EAER,OAAO;AAAA,IACL,UAAU;AAAA,MACR,WAAW;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,WAAW;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAET,WAAW;AAAA,MACT,WAAW;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EACF;AAAA,EAEF,OAAO;AAAA,IACL,UAAU;AAAA,MACR,WAAW;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,WAAW;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAET,WAAW;AAAA,MACT,WAAW;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EACF;AAEJ;AAEO,MAAM,wBAAwB,OAA0C;AAAA,EAC7E,UAAU;AAAA,IACR;AAAA,MACE,MAAM;AAAA,MACN,UAAU;AAAA,MACV,OAAO;AAAA,MACP,KAAK;AAAA,IAAA;AAAA,IAEP;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,aAAa,eAAA;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,QACX,OAAO;AAAA,QACP,aAAa;AAAA,QACb,aAAa;AAAA,MAAA;AAAA,MAEf,iBAAiB;AAAA,QACd,OAAO;AAAA,MAAA;AAAA,IACV;AAAA,EACF;AAEJ;"}

package/dist/cs-ui.css

@@ -837,7 +837,7 @@
     --toast-error-description: var(--font-color-secondary-default);
     --toast-error-icon: var(--color-state-error-default);
     --calendar-date-picker-radius: var(--radius-medium);
-    --calendar-days-week-font: var(--font-color-onbrand-default);
+    --calendar-days-week-font: var(--font-color-primary-default);
     --calendar-date-picker-padding-x: var(--spacing-component-padding-md);
     --calendar-date-picker-padding-y: var(--spacing-component-padding-md);
     --calendar-date-picker-icon-size: var(--icon-size-medium);
@@ -4829,6 +4829,10 @@
     color: var(--color-green-700);
   }
 
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
+
   .text-red-700 {
     color: var(--color-red-700);
   }
@@ -7504,11 +7508,6 @@
     height: var(--toggle-common-icon-size);
   }
 
-  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
-    width: calc(var(--spacing) * 4);
-    height: calc(var(--spacing) * 4);
-  }
-
   .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6 svg:not([class*="size-"]) {
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
@@ -8856,93 +8855,3 @@
     height: 0;
   }
 }
-pre code.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 1em
-}
-code.hljs {
-  padding: 3px 5px
-}
-/*
-
-Atom One Dark by Daniel Gamage
-Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
-
-base:    #282c34
-mono-1:  #abb2bf
-mono-2:  #818896
-mono-3:  #5c6370
-hue-1:   #56b6c2
-hue-2:   #61aeee
-hue-3:   #c678dd
-hue-4:   #98c379
-hue-5:   #e06c75
-hue-5-2: #be5046
-hue-6:   #d19a66
-hue-6-2: #e6c07b
-
-*/
-.hljs {
-  color: #abb2bf;
-  background: #282c34
-}
-.hljs-comment,
-.hljs-quote {
-  color: #5c6370;
-  font-style: italic
-}
-.hljs-doctag,
-.hljs-keyword,
-.hljs-formula {
-  color: #c678dd
-}
-.hljs-section,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-deletion,
-.hljs-subst {
-  color: #e06c75
-}
-.hljs-literal {
-  color: #56b6c2
-}
-.hljs-string,
-.hljs-regexp,
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta .hljs-string {
-  color: #98c379
-}
-.hljs-attr,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-type,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-number {
-  color: #d19a66
-}
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-title {
-  color: #61aeee
-}
-.hljs-built_in,
-.hljs-title.class_,
-.hljs-class .hljs-title {
-  color: #e6c07b
-}
-.hljs-emphasis {
-  font-style: italic
-}
-.hljs-strong {
-  font-weight: bold
-}
-.hljs-link {
-  text-decoration: underline
-}

package/dist/hooks/use-accordion.js

@@ -0,0 +1,54 @@
+"use client";
+import { useMemo, useState, useCallback } from "react";
+const useAccordion = (itemKeys, options) => {
+  const { initialOpenedItems = [], defaultOpenAll = false } = options ?? {};
+  const initialState = useMemo(() => {
+    if (defaultOpenAll) {
+      return itemKeys;
+    }
+    return initialOpenedItems;
+  }, []);
+  const [openedItems, setOpenedItems] = useState(initialState);
+  const allKeys = useMemo(
+    () => itemKeys,
+    [itemKeys]
+  );
+  const toggleAccordion = useCallback((value) => {
+    setOpenedItems(
+      (prev) => prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]
+    );
+  }, []);
+  const openAllAccordions = useCallback(() => {
+    setOpenedItems(allKeys);
+  }, [allKeys]);
+  const closeAllAccordions = useCallback(() => {
+    setOpenedItems([]);
+  }, []);
+  const toggleAllAccordions = useCallback(() => {
+    setOpenedItems(
+      (prev) => prev.length === allKeys.length ? [] : allKeys
+    );
+  }, [allKeys]);
+  const isOpenedAll = useMemo(
+    () => openedItems.length === allKeys.length && allKeys.length > 0,
+    [openedItems.length, allKeys.length]
+  );
+  const isOpened = useCallback(
+    (value) => openedItems.includes(value),
+    [openedItems]
+  );
+  return {
+    openedItems,
+    setOpenedItems,
+    toggleAccordion,
+    openAllAccordions,
+    closeAllAccordions,
+    toggleAllAccordions,
+    isOpenedAll,
+    isOpened
+  };
+};
+export {
+  useAccordion
+};
+//# sourceMappingURL=use-accordion.js.map

package/dist/hooks/use-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-accordion.js","sources":["../../src/hooks/use-accordion.tsx"],"sourcesContent":["'use client'\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState } from 'react'\n\nexport interface UseCsAccordionOptions {\n  /** 초기 열림 상태 (기본값: []) */\n  initialOpenedItems?: string[]\n  /** 초기에 모두 열림 상태로 시작 (기본값: false) */\n  defaultOpenAll?: boolean\n}\n\nexport interface ReturnUseCsAccordion {\n  openedItems: string[]\n  setOpenedItems: Dispatch<SetStateAction<string[]>>\n  toggleAccordion: (value: string) => void\n  openAllAccordions: () => void\n  closeAllAccordions: () => void\n  toggleAllAccordions: () => void\n  isOpenedAll: boolean\n  isOpened: (value: string) => boolean\n}\n\n/**\n * CsAccordion 컴포넌트와 함께 사용하는 훅으로, 아코디언의 열림/닫힘 상태를 관리합니다.\n * \n * @var `openedItems` 열린 아코디언의 key 배열\n * @var `setOpenedItems` 열린 아코디언의 key 배열의 setter 함수\n * @var `toggleAccordion` 특정 아코디언을 토글하는 함수\n * @var `openAllAccordions` 모든 아코디언을 여는 함수\n * @var `closeAllAccordions` 모든 아코디언을 닫는 함수\n * @var `toggleAllAccordions` 모든 아코디언을 토글하는 함수 (모두 열림 → 모두 닫힘, 그 외 → 모두 열림)\n * @var `isOpenedAll` 모든 아코디언이 열려있는지 여부\n * @var `isOpened` 특정 아코디언이 열려있는지 확인하는 함수\n * \n * @example ```tsx\n * // 기본 사용법\n * const itemKeys = ['1', '2', '3']\n * \n * const {\n *   openedItems,\n *   setOpenedItems,\n *   toggleAllAccordions,\n *   isOpenedAll\n * } = useCsAccordion(itemKeys)\n * \n * return (\n *   <>\n *     <CsButton onClick={toggleAllAccordions}>\n *       {isOpenedAll ? <Minimize2 /> : <Maximize2 />}\n *       {isOpenedAll ? 'Collapse All' : 'Expand All'}\n *     </CsButton>\n *     \n *     <CsAccordion\n *       type=\"multiple\"\n *       value={openedItems}\n *       onValueChange={setOpenedItems}\n *     >\n *       {items.map((item) => (\n *         <CsAccordionItem key={item.id} value={item.id}>\n *           <CsAccordionTrigger>{item.title}</CsAccordionTrigger>\n *           <CsAccordionContent>{item.content}</CsAccordionContent>\n *         </CsAccordionItem>\n *       ))}\n *     </CsAccordion>\n *   </>\n * )\n * ```\n * \n * @example ```tsx\n * // 초기 상태 설정\n * const { openedItems, setOpenedItems } = useCsAccordion(itemKeys, {\n *   defaultOpenAll: true // 초기에 모두 열림\n * })\n * \n * // 또는\n * const { openedItems, setOpenedItems } = useCsAccordion(itemKeys, {\n *   initialOpenedItems: ['1', '3'] // 특정 아이템만 열림\n * })\n * ```\n * \n * @param {string[]} itemKeys 아코디언 아이템의 key 배열\n * @param {UseCsAccordionOptions} options 옵션\n * @returns {ReturnUseCsAccordion}\n */\n\nexport const useAccordion = (\n  itemKeys: string[],\n  options?: UseCsAccordionOptions\n): ReturnUseCsAccordion => {\n  const { initialOpenedItems = [], defaultOpenAll = false } = options ?? {}\n\n  // 초기 상태 설정\n  const initialState = useMemo(() => {\n    if (defaultOpenAll) {\n      return itemKeys\n    }\n    return initialOpenedItems\n  }, []) // 의도적으로 빈 배열 - 초기 마운트 시에만 실행\n\n  const [openedItems, setOpenedItems] = useState<string[]>(initialState)\n\n  // 모든 아이템의 key 배열을 메모이제이션\n  const allKeys = useMemo(\n    () => itemKeys,\n    [itemKeys]\n  )\n\n  // 특정 아코디언 토글\n  const toggleAccordion = useCallback((value: string) => {\n    setOpenedItems((prev) =>\n      prev.includes(value)\n        ? prev.filter((item) => item !== value)\n        : [...prev, value]\n    )\n  }, [])\n\n  // 모든 아코디언 열기\n  const openAllAccordions = useCallback(() => {\n    setOpenedItems(allKeys)\n  }, [allKeys])\n\n  // 모든 아코디언 닫기\n  const closeAllAccordions = useCallback(() => {\n    setOpenedItems([])\n  }, [])\n\n  // 모든 아코디언 토글 (모두 열림 → 닫힘, 그 외 → 열림)\n  const toggleAllAccordions = useCallback(() => {\n    setOpenedItems((prev) =>\n      prev.length === allKeys.length ? [] : allKeys\n    )\n  }, [allKeys])\n\n  // 모든 아코디언이 열려있는지 확인\n  const isOpenedAll = useMemo(\n    () => openedItems.length === allKeys.length && allKeys.length > 0,\n    [openedItems.length, allKeys.length]\n  )\n\n  // 특정 아코디언이 열려있는지 확인\n  const isOpened = useCallback(\n    (value: string) => openedItems.includes(value),\n    [openedItems]\n  )\n\n  return {\n    openedItems,\n    setOpenedItems,\n    toggleAccordion,\n    openAllAccordions,\n    closeAllAccordions,\n    toggleAllAccordions,\n    isOpenedAll,\n    isOpened,\n  }\n}\n\n"],"names":[],"mappings":";;AAyFE,MAAA,eAAQ,CAAA,UAAqB,YAAI;AAGjC,QAAM,EAAA,qBAAuB,CAAA,GAAA,iBAAM,MAAA,IAAA,WAAA,CAAA;AACjC,QAAI,eAAA,QAAgB,MAAA;AAClB,wBAAO;AACT,aAAA;AAAA,IACA;AACF,WAAK;AAAA,EAEL,GAAA,CAAA,CAAA;AAGA,QAAM,CAAA,aAAU,cAAA,IAAA,SAAA,YAAA;AAAA,kBACR;AAAA,IACN,MAAC;AAAA,IACH,CAAA,QAAA;AAAA,EAGA;AACE,QAAA,kBAAA,YAAA,CAAA,UAAA;AAAA;AAAA,MAIA,CAAA,SAAA,KAAA,SAAA,KAAA,IAAA,KAAA,OAAA,CAAA,SAAA,SAAA,KAAA,IAAA,CAAA,GAAA,MAAA,KAAA;AAAA,IACF;AAAA,EAGA,GAAA,CAAA,CAAA;AACE,QAAA,oBAAsB,YAAA,MAAA;AACxB,mBAAY,OAAA;AAAA,EAGZ,GAAA,CAAA,OAAM,CAAA;AACJ,QAAA,qBAAiB,YAAA,MAAA;AACnB,mBAAK,CAAA,CAAA;AAAA,EAGL,GAAA,CAAA,CAAA;AACE,QAAA,sBAAA,YAAA,MAAA;AAAA;AAAA,MAEA,CAAA,SAAA,KAAA,WAAA,QAAA,SAAA,CAAA,IAAA;AAAA,IACF;AAAA,EAGA,GAAA,CAAA,OAAM,CAAA;AAAc,QAClB,cAAkB;AAAA,IAClB,MAAC,uBAA4B,QAAM,UAAA,QAAA,SAAA;AAAA,IACrC,CAAA,YAAA,QAAA,QAAA,MAAA;AAAA,EAGA;AAAiB,mBACI;AAAA,IACnB,CAAC,UAAA,YAAW,SAAA,KAAA;AAAA,IACd,CAAA,WAAA;AAAA,EAEA;AAAO,SACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACF;AAAA,EACF;;"}

package/dist/hooks/use-infinite-scroll.js

@@ -0,0 +1,40 @@
+"use client";
+import { useRef, useEffect } from "react";
+function useInfiniteScroll({
+  fetchMore,
+  hasMore,
+  isFetching,
+  threshold = 200
+}) {
+  const observerRef = useRef(null);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const first = entries[0];
+        if (first.isIntersecting && hasMore && !isFetching) {
+          fetchMore();
+        }
+      },
+      {
+        root: null,
+        // viewport
+        rootMargin: `${threshold}px`,
+        threshold: 0.1
+      }
+    );
+    const currentTarget = observerRef.current;
+    if (currentTarget) {
+      observer.observe(currentTarget);
+    }
+    return () => {
+      if (currentTarget) {
+        observer.unobserve(currentTarget);
+      }
+    };
+  }, [fetchMore, hasMore, isFetching, threshold]);
+  return { scrollContainerRef: observerRef };
+}
+export {
+  useInfiniteScroll
+};
+//# sourceMappingURL=use-infinite-scroll.js.map

package/dist/hooks/use-infinite-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-scroll.js","sources":["../../src/hooks/use-infinite-scroll.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef } from 'react';\n\ninterface UseInfiniteScrollProps {\n  fetchMore: () => void;\n  hasMore: boolean;\n  isFetching: boolean;\n  threshold?: number; // IntersectionObserver의 rootMargin으로 사용 (px 단위)\n  useWindowScroll?: boolean; // 하위 호환성을 위해 남겨둠 (사용 안 함)\n}\n\nexport function useInfiniteScroll<T extends HTMLElement = HTMLDivElement>({\n  fetchMore,\n  hasMore,\n  isFetching,\n  threshold = 200,\n}: UseInfiniteScrollProps) {\n  const observerRef = useRef<T>(null);\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const first = entries[0];\n        if (first.isIntersecting && hasMore && !isFetching) {\n          fetchMore();\n        }\n      },\n      {\n        root: null, // viewport\n        rootMargin: `${threshold}px`,\n        threshold: 0.1,\n      }\n    );\n\n    const currentTarget = observerRef.current;\n    if (currentTarget) {\n      observer.observe(currentTarget);\n    }\n\n    return () => {\n      if (currentTarget) {\n        observer.unobserve(currentTarget);\n      }\n    };\n  }, [fetchMore, hasMore, isFetching, threshold]);\n\n  return { scrollContainerRef: observerRef }; // 호환성을 위해 이름 유지 (실제로는 sentinel ref)\n}\n"],"names":[],"mappings":";;AAY0E,SACxE,kBAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACF,YAA2B;AACzB;AAEA,QAAA,cAAgB,OAAA,IAAA;AACd,YAAM;AAAe,qBACN,IAAA;AAAA,MACX,CAAA,YAAM;AACN,sBAAU,QAAA,CAAA;AACR,oCAAU,WAAA,CAAA,YAAA;AACZ,oBAAA;AAAA,QACF;AAAA,MACA;AAAA,MAAA;AAAA,QACQ,MAAA;AAAA;AAAA,QAEN,YAAW,GAAA,SAAA;AAAA,QAAA,WAAA;AAAA,MAEf;AAAA,IAEA;AACA,0BAAmB,YAAA;AACjB,QAAA,eAAiB;AACnB,eAAA,QAAA,aAAA;AAAA,IAEA;AACE;AACE,UAAA,eAAS;AACX,iBAAA,UAAA,aAAA;AAAA,MACF;AAAA;EAGF,GAAA,CAAA,WAAS,SAAA,qBAAgC,CAAA;AAC3C,SAAA,EAAA,oBAAA,YAAA;;"}

package/dist/hooks/use-laptop.js

@@ -0,0 +1,20 @@
+"use client";
+import * as React from "react";
+const LAPTOP_BREAKPOINT = 1600;
+function useIsLaptop() {
+  const [isLaptop, setIsLaptop] = React.useState(void 0);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${LAPTOP_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsLaptop(window.innerWidth < LAPTOP_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsLaptop(window.innerWidth < LAPTOP_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isLaptop;
+}
+export {
+  useIsLaptop
+};
+//# sourceMappingURL=use-laptop.js.map

package/dist/hooks/use-laptop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-laptop.js","sources":["../../src/hooks/use-laptop.tsx"],"sourcesContent":["'use client'\n\nimport * as React from \"react\"\n\n// Matches --breakpoint-laptop in packages/cs-ui/src/styles/globals.css\nconst LAPTOP_BREAKPOINT = 1600\n\nexport function useIsLaptop() {\n  const [isLaptop, setIsLaptop] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${LAPTOP_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsLaptop(window.innerWidth < LAPTOP_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsLaptop(window.innerWidth < LAPTOP_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isLaptop\n}\n"],"names":[],"mappings":";;AAOO,MAAA,oBAAuB;AAC5B,SAAO,cAAU;AAEjB,QAAM,CAAA,UAAU,WAAM,IAAA,MAAA,SAAA,MAAA;AACpB,kBAAY;AACZ,UAAM,MAAA,OAAW,WAAM,eAAA,oBAAA,CAAA,KAAA;AACrB,qBAAY,MAAO;AACrB,kBAAA,OAAA,aAAA,iBAAA;AAAA,IACA;AACA,yBAAmB;AACnB,qDAA+C;AACjD,WAAK,MAAA,IAAA,oBAAA,UAAA,QAAA;AAAA,EAEL,GAAA,CAAA,CAAA;AACF,SAAA,CAAA,CAAA;;"}

package/dist/hooks/use-mobile.js

@@ -0,0 +1,20 @@
+"use client";
+import * as React from "react";
+const MOBILE_BREAKPOINT = 840;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(void 0);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+export {
+  useIsMobile
+};
+//# sourceMappingURL=use-mobile.js.map

package/dist/hooks/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.js","sources":["../../src/hooks/use-mobile.tsx"],"sourcesContent":["'use client'\n\nimport * as React from \"react\"\n\n// Matches --breakpoint-max-mobile in packages/cs-ui/src/styles/globals.css\nconst MOBILE_BREAKPOINT = 840\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n"],"names":[],"mappings":";;AAOO,MAAA,oBAAuB;AAC5B,SAAO,cAAU;AAEjB,QAAM,CAAA,UAAU,WAAM,IAAA,MAAA,SAAA,MAAA;AACpB,kBAAY;AACZ,UAAM,MAAA,OAAW,WAAM,eAAA,oBAAA,CAAA,KAAA;AACrB,qBAAY,MAAO;AACrB,kBAAA,OAAA,aAAA,iBAAA;AAAA,IACA;AACA,yBAAmB;AACnB,qDAA+C;AACjD,WAAK,MAAA,IAAA,oBAAA,UAAA,QAAA;AAAA,EAEL,GAAA,CAAA,CAAA;AACF,SAAA,CAAA,CAAA;;"}

package/dist/index.d.ts

@@ -224,19 +224,15 @@ export declare function CsCollapsibleContent({ ...props }: React.ComponentProps<
 
 export declare function CsCollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): JSX.Element;
 
-export declare function CsDataTable<T>(props: CsDataTableProps<T>): JSX.Element;
+export declare function CsDataBaseTable<T>(props: CsDataBaseTableProps<T>): JSX.Element;
 
-export declare interface CsDataTableProps<T> {
+export declare interface CsDataBaseTableProps<T> {
     columns: TableColumnDef<T>[];
     rows?: T[];
     expandable?: boolean;
-    isLoading?: boolean;
-    isError?: boolean;
     className?: string;
-    defaultRowSize?: number;
     subRowsName?: string;
     EmptyFallback?: ReactNode;
-    ErrorFallback?: ReactNode;
     defaultHeaderComp?: ComponentType<{
         column: any;
         children: React.ReactNode;
@@ -246,6 +242,15 @@ export declare interface CsDataTableProps<T> {
     isFetchingNextPage?: boolean;
 }
 
+export declare function CsDataTable<T>(props: CsDataTableProps<T>): JSX.Element;
+
+export declare interface CsDataTableProps<T> extends CsDataBaseTableProps<T> {
+    isLoading?: boolean;
+    isError?: boolean;
+    defaultRowSize?: number;
+    ErrorFallback?: ReactNode;
+}
+
 export declare function CsDatePicker({ children, className, ...props }: PropsWithChildren<CsCalendarProps>): default_2.JSX.Element;
 
 export declare type CsDatePickerProps = PropsWithChildren<CsCalendarProps>;
@@ -765,6 +770,14 @@ export declare type CsSkeletonProps = React.ComponentProps<"div"> & {
     radius?: 'default' | 'max';
 };
 
+export declare function CsSkeletonTable<T>({ columns, rowCount, className, }: CsSkeletonTableProps<T>): JSX.Element;
+
+export declare interface CsSkeletonTableProps<T> {
+    columns: TableColumnDef<T>[];
+    rowCount?: number;
+    className?: string;
+}
+
 export declare const csSkeletonVariants: (props?: ({
     radius?: "default" | "max" | null | undefined;
 } & ClassProp) | undefined) => string;