@mondrianai/runyourai-design-system 0.0.6 → 0.0.7

package/dist/index.d.mts

@@ -5,7 +5,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as _radix_ui_react_context from '@radix-ui/react-context';
-import { PaginationState, OnChangeFn, RowSelectionState } from '@tanstack/react-table';
+import { RowSelectionState, OnChangeFn, SortingState } from '@tanstack/react-table';
 export { OnChangeFn, PaginationState, RowSelectionState, SortingState } from '@tanstack/react-table';
 
 declare const Accordion: React$1.ForwardRefExoticComponent<(Accordion$1.AccordionSingleProps | Accordion$1.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
@@ -642,6 +642,7 @@ type SidebarSubMenuItem = {
     isActive?: boolean;
     titleBadge?: string | number;
     onClick?: () => void;
+    isExternal?: boolean;
 };
 type SidebarMainMenuItem = {
     id: string;
@@ -762,13 +763,12 @@ interface TableColumn<T> {
     ellipsisTooltip?: (row: T) => React$1.ReactNode;
     cell: (row: T) => React$1.ReactNode;
 }
-/**
- * TanStack Table의 pagination 옵션을 그대로 노출.
- * 상세 동작은 TanStack Table 공식 문서 참고:
- * https://tanstack.com/table/latest/docs/api/features/pagination
- */
-interface TablePaginationConfig extends Partial<Pick<PaginationState, 'pageSize' | 'pageIndex'>> {
-    onPaginationChange?: OnChangeFn<PaginationState>;
+interface TablePaginationConfig {
+    pageSize?: number;
+    /** 현재 페이지 번호 (1-based). 외부에서 제어할 때 전달. */
+    currentPage?: number;
+    /** 페이지 변경 콜백 (1-based page). */
+    onPageChange?: (page: number) => void;
     /** 서버사이드 페이지네이션 시 true로 설정 */
     manualPagination?: boolean;
     /** manualPagination=true 일 때 전체 페이지 수 */
@@ -792,7 +792,7 @@ interface TableProps<T> {
     rowKey: keyof T | ((row: T) => string);
     /**
      * 페이지네이션 설정. 미전달 시 페이지네이션 비활성화.
-     * TanStack Table pagination 옵션을 그대로 수용.
+     * 외부 API는 1-based page를 사용하고, TanStack의 0-based pageIndex는 내부에서 변환한다.
      */
     pagination?: TablePaginationConfig;
     /**
@@ -816,6 +816,11 @@ interface TableProps<T> {
     rowActions?: (row: T) => React$1.ReactNode;
     /** 행 클릭 핸들러. enableRowSelection=true(편집 모드)일 때는 동작하지 않음. */
     onRowClick?: (row: T) => void;
+    /**
+     * 정렬 상태 변경 콜백. 서버사이드 정렬 연동에 사용.
+     * 빈 배열(정렬 해제)은 전달되지 않으므로 항상 최소 1개 항목 보장.
+     */
+    onSortingChange?: (sorting: SortingState) => void;
     className?: string;
 }
 declare function SortIcon({ direction }: {
@@ -828,7 +833,7 @@ interface PaginationProps {
     className?: string;
 }
 declare function Pagination({ currentPage, totalPages, onPageChange, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
-declare function Table<T>({ columns, data, rowKey, pagination, defaultSorting, loading, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, onRowClick, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T>({ columns, data, rowKey, pagination, defaultSorting, loading, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, onRowClick, onSortingChange, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 declare const TooltipProvider: React$1.FC<Tooltip$1.TooltipProviderProps>;
 interface TooltipProps extends Pick<React$1.ComponentPropsWithoutRef<typeof Tooltip$1.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'>, Omit<React$1.ComponentPropsWithoutRef<typeof Tooltip$1.Content>, 'children' | 'content'> {
@@ -1357,9 +1362,9 @@ interface TrashIconProps {
     className?: string;
 }
 /**
- * Trash icon — SVG downloaded directly from Figma design system.
+ * Trash-2 icon — SVG downloaded directly from Figma design system.
  * Uses stroke="currentColor" for CSS color control.
- * Source: figma.com/design/bNKDIZZAm8ByouCPBnlEye node 128:2740 (lucide/trash)
+ * Source: figma.com/design/bNKDIZZAm8ByouCPBnlEye node 128:2738 (lucide/trash-2)
  */
 declare function TrashIcon({ className }: TrashIconProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as _radix_ui_react_context from '@radix-ui/react-context';
-import { PaginationState, OnChangeFn, RowSelectionState } from '@tanstack/react-table';
+import { RowSelectionState, OnChangeFn, SortingState } from '@tanstack/react-table';
 export { OnChangeFn, PaginationState, RowSelectionState, SortingState } from '@tanstack/react-table';
 
 declare const Accordion: React$1.ForwardRefExoticComponent<(Accordion$1.AccordionSingleProps | Accordion$1.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
@@ -642,6 +642,7 @@ type SidebarSubMenuItem = {
     isActive?: boolean;
     titleBadge?: string | number;
     onClick?: () => void;
+    isExternal?: boolean;
 };
 type SidebarMainMenuItem = {
     id: string;
@@ -762,13 +763,12 @@ interface TableColumn<T> {
     ellipsisTooltip?: (row: T) => React$1.ReactNode;
     cell: (row: T) => React$1.ReactNode;
 }
-/**
- * TanStack Table의 pagination 옵션을 그대로 노출.
- * 상세 동작은 TanStack Table 공식 문서 참고:
- * https://tanstack.com/table/latest/docs/api/features/pagination
- */
-interface TablePaginationConfig extends Partial<Pick<PaginationState, 'pageSize' | 'pageIndex'>> {
-    onPaginationChange?: OnChangeFn<PaginationState>;
+interface TablePaginationConfig {
+    pageSize?: number;
+    /** 현재 페이지 번호 (1-based). 외부에서 제어할 때 전달. */
+    currentPage?: number;
+    /** 페이지 변경 콜백 (1-based page). */
+    onPageChange?: (page: number) => void;
     /** 서버사이드 페이지네이션 시 true로 설정 */
     manualPagination?: boolean;
     /** manualPagination=true 일 때 전체 페이지 수 */
@@ -792,7 +792,7 @@ interface TableProps<T> {
     rowKey: keyof T | ((row: T) => string);
     /**
      * 페이지네이션 설정. 미전달 시 페이지네이션 비활성화.
-     * TanStack Table pagination 옵션을 그대로 수용.
+     * 외부 API는 1-based page를 사용하고, TanStack의 0-based pageIndex는 내부에서 변환한다.
      */
     pagination?: TablePaginationConfig;
     /**
@@ -816,6 +816,11 @@ interface TableProps<T> {
     rowActions?: (row: T) => React$1.ReactNode;
     /** 행 클릭 핸들러. enableRowSelection=true(편집 모드)일 때는 동작하지 않음. */
     onRowClick?: (row: T) => void;
+    /**
+     * 정렬 상태 변경 콜백. 서버사이드 정렬 연동에 사용.
+     * 빈 배열(정렬 해제)은 전달되지 않으므로 항상 최소 1개 항목 보장.
+     */
+    onSortingChange?: (sorting: SortingState) => void;
     className?: string;
 }
 declare function SortIcon({ direction }: {
@@ -828,7 +833,7 @@ interface PaginationProps {
     className?: string;
 }
 declare function Pagination({ currentPage, totalPages, onPageChange, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
-declare function Table<T>({ columns, data, rowKey, pagination, defaultSorting, loading, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, onRowClick, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T>({ columns, data, rowKey, pagination, defaultSorting, loading, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, onRowClick, onSortingChange, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 declare const TooltipProvider: React$1.FC<Tooltip$1.TooltipProviderProps>;
 interface TooltipProps extends Pick<React$1.ComponentPropsWithoutRef<typeof Tooltip$1.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'>, Omit<React$1.ComponentPropsWithoutRef<typeof Tooltip$1.Content>, 'children' | 'content'> {
@@ -1357,9 +1362,9 @@ interface TrashIconProps {
     className?: string;
 }
 /**
- * Trash icon — SVG downloaded directly from Figma design system.
+ * Trash-2 icon — SVG downloaded directly from Figma design system.
  * Uses stroke="currentColor" for CSS color control.
- * Source: figma.com/design/bNKDIZZAm8ByouCPBnlEye node 128:2740 (lucide/trash)
+ * Source: figma.com/design/bNKDIZZAm8ByouCPBnlEye node 128:2738 (lucide/trash-2)
  */
 declare function TrashIcon({ className }: TrashIconProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -658,7 +658,7 @@ var import_class_variance_authority = require("class-variance-authority");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
   // Base — 모든 버튼 공통 스타일
-  "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg text-sm font-medium leading-5 tracking-tight whitespace-nowrap cursor-pointer select-none transition-[transform,opacity,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-auto disabled:opacity-50 disabled:active:scale-100 [&>svg]:size-4 [&>svg]:shrink-0",
+  "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg text-sm font-medium leading-5 tracking-tight whitespace-nowrap cursor-pointer select-none transition-[transform,opacity,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-auto disabled:bg-muted disabled:text-muted-foreground disabled:border-transparent disabled:shadow-none disabled:active:scale-100 [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       /**
@@ -4108,6 +4108,7 @@ function Sheet({ open, onClose, title, description, children, footer }) {
 
 // src/components/ui/sidebar.tsx
 var React21 = __toESM(require("react"));
+var import_lucide_react2 = require("lucide-react");
 
 // src/components/icons/custom/panel-left.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
@@ -4342,7 +4343,8 @@ function Sidebar({
                         className: "flex gap-2 h-8 items-center p-2 rounded-md hover:bg-sidebar-accent transition-colors",
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex items-center justify-center size-4 shrink-0 [&_svg]:size-full", children: item.icon }),
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex-1 min-w-0 text-sm font-normal leading-5 tracking-tight overflow-hidden text-ellipsis whitespace-nowrap text-foreground", children: item.title })
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex-1 min-w-0 text-sm font-normal leading-5 tracking-tight overflow-hidden text-ellipsis whitespace-nowrap text-foreground", children: item.title }),
+                          item.isExternal && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex items-center justify-center shrink-0 text-[#8C8C8C]", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react2.ArrowUpRight, { size: 12, strokeWidth: 1.5 }) })
                         ]
                       }
                     )
@@ -4885,7 +4887,7 @@ function Pagination({
                 onClick: () => onPageChange(currentPage - 1),
                 disabled: isPrevDisabled,
                 "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-                className: "cursor-pointer",
+                className: "cursor-pointer disabled:bg-transparent",
                 children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "chevron-left", className: "size-4" })
               }
             )
@@ -4929,7 +4931,7 @@ function Pagination({
                 onClick: () => onPageChange(currentPage + 1),
                 disabled: isNextDisabled,
                 "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-                className: "cursor-pointer",
+                className: "cursor-pointer disabled:bg-transparent",
                 children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "chevron-right", className: "size-4" })
               }
             )
@@ -4951,6 +4953,7 @@ function Table({
   onRowSelectionChange,
   rowActions,
   onRowClick,
+  onSortingChange,
   className
 }) {
   var _a, _b, _c;
@@ -4978,15 +4981,32 @@ function Table({
       }))) != null ? _a2 : [];
     }
   );
+  const handleSortingChange = React25.useCallback(
+    (updater) => {
+      setSorting((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        if (next.length > 0) onSortingChange == null ? void 0 : onSortingChange(next);
+        return next;
+      });
+    },
+    [onSortingChange]
+  );
   const [internalPagination, setInternalPagination] = React25.useState({
-    pageIndex: (_a = pagination == null ? void 0 : pagination.pageIndex) != null ? _a : 0,
+    pageIndex: ((_a = pagination == null ? void 0 : pagination.currentPage) != null ? _a : 1) - 1,
     pageSize: (_b = pagination == null ? void 0 : pagination.pageSize) != null ? _b : 10
   });
+  React25.useEffect(() => {
+    if ((pagination == null ? void 0 : pagination.currentPage) !== void 0) {
+      setInternalPagination((prev) => __spreadProps(__spreadValues({}, prev), {
+        pageIndex: pagination.currentPage - 1
+      }));
+    }
+  }, [pagination == null ? void 0 : pagination.currentPage]);
   const handlePaginationChange = (updater) => {
     var _a2;
     const next = typeof updater === "function" ? updater(internalPagination) : updater;
     setInternalPagination(next);
-    (_a2 = pagination == null ? void 0 : pagination.onPaginationChange) == null ? void 0 : _a2.call(pagination, updater);
+    (_a2 = pagination == null ? void 0 : pagination.onPageChange) == null ? void 0 : _a2.call(pagination, next.pageIndex + 1);
   };
   const isSelectionActive = enableRowSelection === true;
   const selectionColumn = React25.useMemo(
@@ -5041,7 +5061,7 @@ function Table({
       sorting
     }, hasPagination && { pagination: internalPagination }), isSelectionActive && { rowSelection: effectiveRowSelection }),
     getRowId: (row) => getRowKey(row),
-    onSortingChange: setSorting
+    onSortingChange: handleSortingChange
   }, hasPagination && { onPaginationChange: handlePaginationChange }), isSelectionActive && {
     enableRowSelection: true,
     onRowSelectionChange: handleRowSelectionChange
@@ -7406,7 +7426,7 @@ function TrashIcon({ className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
     "svg",
     {
-      viewBox: "-2.25 -1.25 24 24",
+      viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
       strokeLinecap: "round",
@@ -7414,7 +7434,7 @@ function TrashIcon({ className }) {
       strokeWidth: 1.5,
       "aria-hidden": true,
       className: cn("shrink-0", className),
-      children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("path", { d: "M0.75 4.75H18.75M16.75 4.75V18.75C16.75 19.75 15.75 20.75 14.75 20.75H4.75C3.75 20.75 2.75 19.75 2.75 18.75V4.75M5.75 4.75V2.75C5.75 1.75 6.75 0.75 7.75 0.75H11.75C12.75 0.75 13.75 1.75 13.75 2.75V4.75" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("path", { d: "M3 6H21M19 6V20C19 21 18 22 17 22H7C6 22 5 21 5 20V6M8 6V4C8 3 9 2 10 2H14C15 2 16 3 16 4V6M10 11V17M14 11V17" })
     }
   );
 }