@exem-ui/react 0.3.4-next.20260622062509 → 0.3.4-next.20260623023915

package/dist/index.d.mts

@@ -635,6 +635,21 @@ type ModalComponent = typeof DialogPrimitive.Root & {
 };
 declare const Modal: ModalComponent;
 
+type SheetResizeOptions = {
+    /** @default true (객체를 전달한 경우) */
+    use?: boolean;
+    /** 최소 크기(px). 기본: left/right 400, top/bottom 300 */
+    minSize?: number;
+    /** 최대 크기(px 또는 '80%'). 퍼센트는 뷰포트 기준. @default '80%' */
+    maxSize?: number | string;
+    /** 기본 크기(px). 기본: left/right 800, top/bottom 600 */
+    defaultSize?: number;
+    /** 지정 시 localStorage에 크기를 저장/복원 */
+    storageKey?: string;
+    /** 드래그 종료 시 최종 크기(px) 콜백 */
+    onResize?: (size: number) => void;
+};
+
 type SheetSide = 'top' | 'right' | 'bottom' | 'left';
 type SheetRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
 type SheetTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
@@ -646,6 +661,11 @@ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
      * @default 'right'
      */
     side?: SheetSide;
+    /**
+     * 드래그 리사이징. `true` 또는 옵션 객체로 활성화.
+     * @default false
+     */
+    resizable?: boolean | SheetResizeOptions;
 };
 type SheetCloseProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
 type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {

package/dist/index.d.ts

@@ -635,6 +635,21 @@ type ModalComponent = typeof DialogPrimitive.Root & {
 };
 declare const Modal: ModalComponent;
 
+type SheetResizeOptions = {
+    /** @default true (객체를 전달한 경우) */
+    use?: boolean;
+    /** 최소 크기(px). 기본: left/right 400, top/bottom 300 */
+    minSize?: number;
+    /** 최대 크기(px 또는 '80%'). 퍼센트는 뷰포트 기준. @default '80%' */
+    maxSize?: number | string;
+    /** 기본 크기(px). 기본: left/right 800, top/bottom 600 */
+    defaultSize?: number;
+    /** 지정 시 localStorage에 크기를 저장/복원 */
+    storageKey?: string;
+    /** 드래그 종료 시 최종 크기(px) 콜백 */
+    onResize?: (size: number) => void;
+};
+
 type SheetSide = 'top' | 'right' | 'bottom' | 'left';
 type SheetRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
 type SheetTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
@@ -646,6 +661,11 @@ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
      * @default 'right'
      */
     side?: SheetSide;
+    /**
+     * 드래그 리사이징. `true` 또는 옵션 객체로 활성화.
+     * @default false
+     */
+    resizable?: boolean | SheetResizeOptions;
 };
 type SheetCloseProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
 type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {

package/dist/index.js

@@ -13,6 +13,7 @@ var reactDayPicker = require('react-day-picker');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var DialogPrimitive = require('@radix-ui/react-dialog');
+var reResizable = require('re-resizable');
 var sonner = require('sonner');
 
 function _interopNamespace(e) {
@@ -1886,13 +1887,131 @@ Modal.Actions.displayName = "Modal.Actions";
 Modal.Action.displayName = "Modal.Action";
 Modal.Title.displayName = "Modal.Title";
 Modal.Description.displayName = "Modal.Description";
+
+// src/sheet/sheetResize.ts
 var SHEET_EDGE_GAP = "[--sheet-edge-gap:40px]";
+var getAxis = (side) => side === "left" || side === "right" ? "horizontal" : "vertical";
+var getDefaults = (axis) => axis === "horizontal" ? { minSize: 400, maxSize: "80%", defaultSize: 800 } : { minSize: 300, maxSize: "80%", defaultSize: 600 };
+var resolveMaxSize = (maxSize, axis) => {
+  if (typeof maxSize === "number") {
+    return maxSize;
+  }
+  const value = Number.parseFloat(maxSize);
+  if (maxSize.trim().endsWith("%") && Number.isFinite(value)) {
+    return `${value}${axis === "horizontal" ? "vw" : "vh"}`;
+  }
+  return maxSize;
+};
+var STORAGE_PREFIX = "exem-ui:sheet-size:";
+var readStoredSize = (key) => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  try {
+    const raw = window.localStorage.getItem(STORAGE_PREFIX + key);
+    if (raw == null) {
+      return null;
+    }
+    const value = Number.parseFloat(raw);
+    return Number.isFinite(value) ? value : null;
+  } catch {
+    return null;
+  }
+};
+var writeStoredSize = (key, size) => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(STORAGE_PREFIX + key, String(size));
+  } catch {
+  }
+};
+var ENABLE_BY_SIDE = {
+  right: { left: true },
+  left: { right: true },
+  top: { bottom: true },
+  bottom: { top: true }
+};
+var HANDLE_EDGE_BY_SIDE = {
+  right: "left",
+  left: "right",
+  top: "bottom",
+  bottom: "top"
+};
+var SheetResizeHandle = ({ axis, active }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: utils.cn(
+      "group/sheet-handle flex h-full w-full items-center justify-center",
+      axis === "horizontal" ? "cursor-col-resize" : "cursor-row-resize"
+    ),
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils.cn(
+          "transition-colors group-hover/sheet-handle:bg-border-accent",
+          active ? "bg-border-accent" : "bg-border-primary",
+          axis === "horizontal" ? "h-full w-px" : "h-px w-full"
+        )
+      }
+    )
+  }
+);
+var SheetResizableBox = ({ side, options, children }) => {
+  const { minSize, maxSize, defaultSize, storageKey, onResize } = options;
+  const axis = getAxis(side);
+  const isHorizontal = axis === "horizontal";
+  const defaults = getDefaults(axis);
+  const resolvedMin = minSize ?? defaults.minSize;
+  const resolvedMax = resolveMaxSize(maxSize ?? defaults.maxSize, axis);
+  const [initialSize] = React.useState(() => {
+    const stored = storageKey ? readStoredSize(storageKey) : null;
+    return Math.max(stored ?? defaultSize ?? defaults.defaultSize, resolvedMin);
+  });
+  const [resizing, setResizing] = React.useState(false);
+  const handleResizeStop = (_event, _direction, refElement) => {
+    setResizing(false);
+    const next = isHorizontal ? refElement.offsetWidth : refElement.offsetHeight;
+    if (storageKey) {
+      writeStoredSize(storageKey, next);
+    }
+    onResize?.(next);
+  };
+  const handleComponent = {
+    [HANDLE_EDGE_BY_SIDE[side]]: /* @__PURE__ */ jsxRuntime.jsx(SheetResizeHandle, { axis, active: resizing })
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reResizable.Resizable,
+    {
+      enable: ENABLE_BY_SIDE[side],
+      defaultSize: isHorizontal ? { width: initialSize, height: "100%" } : { width: "100%", height: initialSize },
+      minWidth: isHorizontal ? resolvedMin : void 0,
+      maxWidth: isHorizontal ? resolvedMax : void 0,
+      minHeight: isHorizontal ? void 0 : resolvedMin,
+      maxHeight: isHorizontal ? void 0 : resolvedMax,
+      onResizeStart: () => setResizing(true),
+      onResizeStop: handleResizeStop,
+      handleComponent,
+      className: "flex min-h-0 flex-col bg-elevation-elevation-0 shadow-strong",
+      children
+    }
+  );
+};
+var SHEET_CONTENT_BASE = "fixed z-50 data-[state=open]:duration-300 data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
+var SHEET_CONTENT_BOX = "flex flex-col border-border-primary bg-elevation-elevation-0 shadow-strong";
 var SHEET_SIDE_CLASSES = {
   right: "inset-y-0 right-0 h-full w-[800px] max-w-[calc(100vw-var(--sheet-edge-gap))] border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
   left: "inset-y-0 left-0 h-full w-[800px] max-w-[calc(100vw-var(--sheet-edge-gap))] border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
   top: "inset-x-0 top-0 w-full h-auto max-h-[calc(100vh-var(--sheet-edge-gap))] border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
   bottom: "inset-x-0 bottom-0 w-full h-auto max-h-[calc(100vh-var(--sheet-edge-gap))] border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
 };
+var SHEET_RESIZE_SIDE_CLASSES = {
+  right: "inset-y-0 right-0 max-w-[calc(100vw-var(--sheet-edge-gap))] data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
+  left: "inset-y-0 left-0 max-w-[calc(100vw-var(--sheet-edge-gap))] data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
+  top: "inset-x-0 top-0 max-h-[calc(100vh-var(--sheet-edge-gap))] data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+  bottom: "inset-x-0 bottom-0 max-h-[calc(100vh-var(--sheet-edge-gap))] data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
+};
 var SheetContext = React.createContext({ side: "right" });
 var SheetRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
 var Sheet = SheetRoot;
@@ -1917,7 +2036,9 @@ Sheet.Overlay = React.forwardRef(
   )
 );
 Sheet.Content = React.forwardRef(
-  ({ className, children, side = "right", onInteractOutside, ...props }, ref) => {
+  ({ className, children, side = "right", resizable = false, onInteractOutside, ...props }, ref) => {
+    const resizeOptions = typeof resizable === "object" ? resizable : { use: resizable };
+    const isResizable = resizeOptions.use ?? true;
     const shouldPreventDismissForSelect = (target) => {
       const isSelectOpen = Boolean(
         document.querySelector('[data-radix-select-content][data-state="open"]')
@@ -1945,17 +2066,14 @@ Sheet.Content = React.forwardRef(
         {
           ref,
           className: utils.cn(
-            // 공통 스타일 (Modal Content 토큰, radius 제외)
-            "fixed z-50 flex flex-col border-border-primary bg-elevation-elevation-0 shadow-strong data-[state=open]:duration-300 data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-            // 가장자리 여백 CSS 변수 정의 (side 클래스의 max-w/max-h가 참조)
+            SHEET_CONTENT_BASE,
             SHEET_EDGE_GAP,
-            // side별 위치/크기/슬라이드
-            SHEET_SIDE_CLASSES[side],
+            isResizable ? SHEET_RESIZE_SIDE_CLASSES[side] : utils.cn(SHEET_CONTENT_BOX, SHEET_SIDE_CLASSES[side]),
             className
           ),
           ...props,
           onInteractOutside: handleInteractOutside,
-          children
+          children: isResizable ? /* @__PURE__ */ jsxRuntime.jsx(SheetResizableBox, { side, options: resizeOptions, children }) : children
         }
       )
     ] }) });