@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-CBYJXDW4.js

@@ -0,0 +1,258 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/TreeSelect.tsx
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var TREESELECT_KEYS = /* @__PURE__ */ new Set([
+  "value",
+  "treeData",
+  "placeholder",
+  "size",
+  "disabled",
+  "clearable",
+  "multiple",
+  "showSearch",
+  "notFoundText",
+  "defaultExpandAll",
+  "onChange"
+]);
+var TreeSelect = (props) => {
+  const {
+    value,
+    treeData = [],
+    placeholder = "Please select",
+    size = "md",
+    disabled = false,
+    clearable = false,
+    multiple = false,
+    showSearch = false,
+    notFoundText = "No data",
+    defaultExpandAll = false,
+    className,
+    onChange,
+    ...rest
+  } = props;
+  const divProps = {};
+  for (const key of Object.keys(rest)) {
+    if (!TREESELECT_KEYS.has(key)) {
+      divProps[key] = rest[key];
+    }
+  }
+  const instanceId = _react.useId.call(void 0, );
+  const listboxId = `tiger-treeselect-listbox-${instanceId}`;
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  const [searchQuery, setSearchQuery] = _react.useState.call(void 0, "");
+  const [expandedKeys, setExpandedKeys] = _react.useState.call(void 0, 
+    () => defaultExpandAll ? new Set(_tigercatcore.getAllTreeSelectKeys.call(void 0, treeData)) : /* @__PURE__ */ new Set()
+  );
+  const containerRef = _react.useRef.call(void 0, null);
+  const displayLabel = _react.useMemo.call(void 0, () => _tigercatcore.getTreeSelectDisplayLabel.call(void 0, treeData, value), [treeData, value]);
+  const showClearButton = clearable && !disabled && value !== void 0 && (Array.isArray(value) ? value.length > 0 : value !== "");
+  const matchedKeys = _react.useMemo.call(void 0, () => {
+    if (!searchQuery) return null;
+    return _tigercatcore.filterTreeSelectNodes.call(void 0, treeData, searchQuery);
+  }, [treeData, searchQuery]);
+  const effectiveExpandedKeys = _nullishCoalesce(matchedKeys, () => ( expandedKeys));
+  const flatNodes = _react.useMemo.call(void 0, 
+    () => _tigercatcore.flattenTreeSelectNodes.call(void 0, treeData, effectiveExpandedKeys),
+    [treeData, effectiveExpandedKeys]
+  );
+  const visibleNodes = _react.useMemo.call(void 0, () => {
+    if (!matchedKeys) return flatNodes;
+    return flatNodes.filter((f) => matchedKeys.has(f.node.key));
+  }, [flatNodes, matchedKeys]);
+  function openDropdown() {
+    if (disabled) return;
+    setIsOpen(true);
+  }
+  function closeDropdown() {
+    setIsOpen(false);
+    setSearchQuery("");
+  }
+  function toggleDropdown() {
+    if (isOpen) closeDropdown();
+    else openDropdown();
+  }
+  function toggleExpand(key, e) {
+    e.stopPropagation();
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+  function isSelected(key) {
+    if (multiple && Array.isArray(value)) {
+      return value.includes(key);
+    }
+    return value === key;
+  }
+  function handleNodeSelect(node) {
+    if (node.disabled) return;
+    if (multiple) {
+      const current = Array.isArray(value) ? [...value] : [];
+      const idx = current.indexOf(node.key);
+      if (idx >= 0) current.splice(idx, 1);
+      else current.push(node.key);
+      _optionalChain([onChange, 'optionalCall', _ => _(current)]);
+    } else {
+      _optionalChain([onChange, 'optionalCall', _2 => _2(node.key)]);
+      closeDropdown();
+    }
+  }
+  function handleClear(e) {
+    e.stopPropagation();
+    _optionalChain([onChange, 'optionalCall', _3 => _3(multiple ? [] : void 0)]);
+  }
+  function handleKeyDown(e) {
+    const action = _tigercatcore.getPickerTriggerKeyAction.call(void 0, e.key, isOpen);
+    if (action === "none") return;
+    e.preventDefault();
+    if (action === "toggle") {
+      if (isOpen) closeDropdown();
+      else openDropdown();
+    } else if (action === "open") {
+      openDropdown();
+    } else if (action === "close") {
+      closeDropdown();
+    }
+  }
+  _react.useEffect.call(void 0, () => {
+    if (!isOpen) return;
+    function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        closeDropdown();
+      }
+    }
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [isOpen]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: containerRef, className: _tigercatcore.classNames.call(void 0, _tigercatcore.treeSelectBaseClasses, className), ...divProps, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        type: "button",
+        className: _tigercatcore.getTreeSelectTriggerClasses.call(void 0, size, disabled, isOpen),
+        ..._tigercatcore.getPickerComboboxAria.call(void 0, { expanded: isOpen, listboxId }),
+        disabled,
+        onClick: toggleDropdown,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: _tigercatcore.classNames.call(void 0, 
+                "flex-1 truncate",
+                !displayLabel ? "text-[var(--tiger-treeselect-placeholder,var(--tiger-text-muted,#9ca3af))]" : ""
+              ),
+              children: displayLabel || placeholder
+            }
+          ),
+          showClearButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
+              "aria-label": "Clear selection",
+              onClick: handleClear,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  viewBox: _tigercatcore.icon20ViewBox,
+                  fill: "currentColor",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: _tigercatcore.closeSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+                }
+              )
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-text-muted,#9ca3af)] pointer-events-none", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "svg",
+            {
+              className: "w-4 h-4 transition-transform",
+              viewBox: _tigercatcore.icon20ViewBox,
+              fill: "currentColor",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: _tigercatcore.chevronDownSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+            }
+          ) })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ..._tigercatcore.getPickerListboxAria.call(void 0, { id: listboxId }), className: _tigercatcore.treeSelectDropdownClasses, children: [
+      showSearch && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          type: "text",
+          className: _tigercatcore.treeSelectSearchClasses,
+          placeholder: "Search...",
+          value: searchQuery,
+          "aria-label": "Search tree",
+          onChange: (e) => setSearchQuery(e.target.value)
+        }
+      ),
+      visibleNodes.length > 0 ? visibleNodes.map((flatNode) => {
+        const { node, level, hasChildren, isExpanded } = flatNode;
+        const selected = isSelected(node.key);
+        const indent = level * 20;
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            ..._tigercatcore.getPickerOptionAria.call(void 0, { selected, disabled: !!node.disabled }),
+            className: _tigercatcore.getTreeSelectNodeClasses.call(void 0, selected, !!node.disabled, size),
+            style: { paddingLeft: `${indent + 8}px` },
+            onClick: (e) => {
+              e.stopPropagation();
+              handleNodeSelect(node);
+            },
+            children: [
+              hasChildren ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "span",
+                {
+                  className: _tigercatcore.classNames.call(void 0, 
+                    "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
+                    isExpanded ? "rotate-90" : ""
+                  ),
+                  onClick: (e) => toggleExpand(node.key, e),
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3 h-3", viewBox: _tigercatcore.icon20ViewBox, fill: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "path",
+                    {
+                      d: _tigercatcore.chevronRightSolidIcon20PathD,
+                      fillRule: "evenodd",
+                      clipRule: "evenodd"
+                    }
+                  ) })
+                }
+              ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-4 mr-1" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-1 truncate", children: node.label })
+            ]
+          },
+          String(node.key)
+        );
+      }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.treeSelectEmptyClasses, children: notFoundText })
+    ] })
+  ] });
+};
+
+
+
+exports.TreeSelect = TreeSelect;

package/dist/{chunk-EBLAM3YP.mjs → chunk-CDRQSKXT.mjs}

@@ -1,18 +1,25 @@
-import { PieChart } from './chunk-QQDKQLHJ.mjs';
-import { useMemo } from 'react';
-import { getChartInnerRect, normalizeChartPadding, classNames } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  PieChart
+} from "./chunk-XBM76P27.mjs";
 
+// src/components/DonutChart.tsx
+import { useMemo } from "react";
+import {
+  classNames,
+  getChartInnerRect,
+  normalizeChartPadding
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var DONUT_PALETTE = [
-  "#5470c6",
-  "#91cc75",
-  "#fac858",
-  "#ee6666",
-  "#73c0de",
-  "#3ba272",
-  "#fc8452",
-  "#9a60b4",
-  "#ea7ccc"
+  "var(--tiger-chart-1,#5470c6)",
+  "var(--tiger-chart-2,#91cc75)",
+  "var(--tiger-chart-3,#fac858)",
+  "var(--tiger-chart-4,#ee6666)",
+  "var(--tiger-chart-5,#73c0de)",
+  "var(--tiger-chart-6,#3ba272)",
+  "var(--tiger-chart-1,#fc8452)",
+  "var(--tiger-chart-2,#9a60b4)",
+  "var(--tiger-chart-3,#ea7ccc)"
 ];
 var DonutChart = ({
   width = 320,
@@ -30,7 +37,7 @@ var DonutChart = ({
   labelFormatter,
   labelPosition = "inside",
   borderWidth = 0,
-  borderColor = "#ffffff",
+  borderColor = "var(--tiger-surface,#ffffff)",
   hoverOffset = 10,
   shadow = true,
   // Interaction props
@@ -56,6 +63,8 @@ var DonutChart = ({
   centerValue,
   centerLabel,
   animated: _animated = false,
+  // Visual modes (forwarded to PieChart, opt-in per PR-19k(b6/b7))
+  gradient = false,
   // Callbacks
   onHoveredIndexChange,
   onSelectedIndexChange,
@@ -115,6 +124,7 @@ var DonutChart = ({
         borderColor,
         hoverOffset,
         shadow,
+        gradient,
         hoverable,
         hoveredIndex,
         activeOpacity,
@@ -147,7 +157,13 @@ var DonutChart = ({
           transform: "translate(-50%, -50%)",
           textAlign: "center",
           pointerEvents: "none",
-          lineHeight: "1.3"
+          lineHeight: "1.3",
+          padding: "var(--tiger-chart-donut-center-padding, 0)",
+          borderRadius: "var(--tiger-radius-pill, 9999px)",
+          background: "var(--tiger-chart-donut-center-bg, transparent)",
+          boxShadow: "var(--tiger-chart-donut-center-shadow, none)",
+          backdropFilter: "var(--tiger-chart-donut-center-backdrop, none)",
+          WebkitBackdropFilter: "var(--tiger-chart-donut-center-backdrop, none)"
         },
         children: [
           centerValue !== void 0 && /* @__PURE__ */ jsx(
@@ -173,4 +189,7 @@ var DonutChart = ({
 };
 var DonutChart_default = DonutChart;
 
-export { DonutChart, DonutChart_default };
+export {
+  DonutChart,
+  DonutChart_default
+};

package/dist/{chunk-472D2S4R.mjs → chunk-CFQKUMZV.mjs}

@@ -1,7 +1,8 @@
-import { getContainerClasses } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
-
 // src/components/Container.tsx
+import {
+  getContainerClasses
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var Container = ({
   maxWidth = false,
   center = true,
@@ -20,4 +21,6 @@ var Container = ({
   return /* @__PURE__ */ jsx(Component, { ...props, className: containerClasses, children });
 };
 
-export { Container };
+export {
+  Container
+};

package/dist/chunk-CFZJOGGH.js

@@ -0,0 +1,273 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+
+
+var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
+
+// src/components/Drawer.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var CloseIcon = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "svg",
+  {
+    className: "w-5 h-5",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: _tigercatcore.closeIconViewBox,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "path",
+      {
+        strokeLinecap: _tigercatcore.closeIconPathStrokeLinecap,
+        strokeLinejoin: _tigercatcore.closeIconPathStrokeLinejoin,
+        strokeWidth: _tigercatcore.closeIconPathStrokeWidth,
+        d: _tigercatcore.closeIconPathD
+      }
+    )
+  }
+);
+var Drawer = ({
+  open = false,
+  placement = "right",
+  size = "md",
+  width,
+  title,
+  header,
+  closable = true,
+  mask = true,
+  maskClosable = true,
+  zIndex = 1e3,
+  className,
+  bodyClassName,
+  destroyOnClose = false,
+  onClose,
+  onOpenChange,
+  onAfterEnter,
+  onAfterLeave,
+  closeAriaLabel,
+  locale,
+  children,
+  footer,
+  style,
+  ...rest
+}) => {
+  const [hasBeenOpened, setHasBeenOpened] = _react2.default.useState(open);
+  _react.useEffect.call(void 0, () => {
+    if (open) setHasBeenOpened(true);
+  }, [open]);
+  const shouldRender = destroyOnClose ? open : hasBeenOpened;
+  const handleClose = _react.useCallback.call(void 0, () => {
+    _optionalChain([onOpenChange, 'optionalCall', _ => _(false)]);
+    _optionalChain([onClose, 'optionalCall', _2 => _2()]);
+  }, [onOpenChange, onClose]);
+  const handleMaskClick = _react.useCallback.call(void 0, 
+    (event) => {
+      if (_tigercatcore.shouldCloseOnMaskClick.call(void 0, event, maskClosable)) {
+        handleClose();
+      }
+    },
+    [maskClosable, handleClose]
+  );
+  _chunkSTTQ5LXXjs.useEscapeKey.call(void 0, { enabled: open, onEscape: handleClose });
+  _chunkSTTQ5LXXjs.useBodyScrollLock.call(void 0, { enabled: open });
+  const previousVisible = _react.useRef.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (open === previousVisible.current) return;
+    previousVisible.current = open;
+    const timer = window.setTimeout(() => {
+      if (open) {
+        _optionalChain([onAfterEnter, 'optionalCall', _3 => _3()]);
+      } else {
+        _optionalChain([onAfterLeave, 'optionalCall', _4 => _4()]);
+      }
+    }, _tigercatcore.ANIMATION_DURATION_MS);
+    return () => window.clearTimeout(timer);
+  }, [open, onAfterEnter, onAfterLeave]);
+  const reactId = _react.useId.call(void 0, );
+  const drawerId = _react.useMemo.call(void 0, () => `tiger-drawer-${reactId}`, [reactId]);
+  const titleId = `${drawerId}-title`;
+  const {
+    ["aria-labelledby"]: _ariaLabelledby,
+    role: _role,
+    tabIndex: _tabIndex,
+    ...dialogDivProps
+  } = rest;
+  const ariaLabelledby = _nullishCoalesce(rest["aria-labelledby"], () => ( (title || header ? titleId : void 0)));
+  const dialogRef = _react.useRef.call(void 0, null);
+  const closeButtonRef = _react.useRef.call(void 0, null);
+  const previousActiveElementRef = _react.useRef.call(void 0, null);
+  const touchStartRef = _react.useRef.call(void 0, null);
+  const touchCurrentRef = _react.useRef.call(void 0, null);
+  const resolvedCloseAriaLabel = _tigercatcore.resolveLocaleText.call(void 0, 
+    "Close drawer",
+    closeAriaLabel,
+    _optionalChain([locale, 'optionalAccess', _5 => _5.drawer, 'optionalAccess', _6 => _6.closeAriaLabel]),
+    _optionalChain([locale, 'optionalAccess', _7 => _7.common, 'optionalAccess', _8 => _8.closeText])
+  );
+  _react.useEffect.call(void 0, () => {
+    if (open) {
+      previousActiveElementRef.current = _tigercatcore.captureActiveElement.call(void 0, );
+      const timer = window.setTimeout(() => {
+        _tigercatcore.focusFirst.call(void 0, [closeButtonRef.current, dialogRef.current]);
+      }, 0);
+      return () => window.clearTimeout(timer);
+    }
+    _tigercatcore.restoreFocus.call(void 0, previousActiveElementRef.current);
+  }, [open]);
+  _chunkSTTQ5LXXjs.useFocusTrap.call(void 0, { enabled: open, containerRef: dialogRef });
+  const resetTouchGesture = _react.useCallback.call(void 0, () => {
+    touchStartRef.current = null;
+    touchCurrentRef.current = null;
+  }, []);
+  const handleTouchStart = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([dialogDivProps, 'access', _9 => _9.onTouchStart, 'optionalCall', _10 => _10(event)]);
+      if (!open) return;
+      const point = _tigercatcore.getGestureTouchPoint.call(void 0, event.touches);
+      touchStartRef.current = point;
+      touchCurrentRef.current = point;
+    },
+    [dialogDivProps, open]
+  );
+  const handleTouchMove = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([dialogDivProps, 'access', _11 => _11.onTouchMove, 'optionalCall', _12 => _12(event)]);
+      if (!touchStartRef.current) return;
+      const point = _tigercatcore.getGestureTouchPoint.call(void 0, event.touches);
+      if (point) {
+        touchCurrentRef.current = point;
+      }
+    },
+    [dialogDivProps]
+  );
+  const handleTouchEnd = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([dialogDivProps, 'access', _13 => _13.onTouchEnd, 'optionalCall', _14 => _14(event)]);
+      const gesture = _tigercatcore.resolveSwipeGesture.call(void 0, 
+        touchStartRef.current,
+        _nullishCoalesce(_tigercatcore.getGestureTouchPoint.call(void 0, event.changedTouches), () => ( touchCurrentRef.current)),
+        { minDistance: 48, minVelocity: 0.15 }
+      );
+      resetTouchGesture();
+      if (_tigercatcore.isDrawerSwipeCloseGesture.call(void 0, placement, gesture)) {
+        handleClose();
+      }
+    },
+    [dialogDivProps, handleClose, placement, resetTouchGesture]
+  );
+  const handleTouchCancel = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([dialogDivProps, 'access', _15 => _15.onTouchCancel, 'optionalCall', _16 => _16(event)]);
+      resetTouchGesture();
+    },
+    [dialogDivProps, resetTouchGesture]
+  );
+  const containerClasses = _tigercatcore.classNames.call(void 0, _tigercatcore.getDrawerContainerClasses.call(void 0, ), !open && "pointer-events-none");
+  const maskClasses = _tigercatcore.getDrawerMaskClasses.call(void 0, open);
+  const panelClasses = _tigercatcore.classNames.call(void 0, 
+    _tigercatcore.getDrawerPanelClasses.call(void 0, placement, open, size),
+    "flex flex-col",
+    className
+  );
+  const headerClasses = _tigercatcore.getDrawerHeaderClasses.call(void 0, );
+  const bodyClasses = _tigercatcore.getDrawerBodyClasses.call(void 0, bodyClassName);
+  const footerClasses = _tigercatcore.getDrawerFooterClasses.call(void 0, );
+  const closeButtonClasses = _tigercatcore.getDrawerCloseButtonClasses.call(void 0, );
+  const titleClasses = _tigercatcore.getDrawerTitleClasses.call(void 0, );
+  if (!shouldRender) {
+    return null;
+  }
+  const drawerContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: containerClasses,
+      style: { zIndex },
+      hidden: !open,
+      "aria-hidden": !open ? "true" : void 0,
+      "data-tiger-drawer-root": "",
+      children: [
+        mask && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: maskClasses,
+            onClick: handleMaskClick,
+            "aria-hidden": "true",
+            "data-tiger-drawer-mask": ""
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            className: panelClasses,
+            style: {
+              ...style,
+              ...width ? {
+                [placement === "left" || placement === "right" ? "width" : "height"]: typeof width === "number" ? `${width}px` : width
+              } : void 0
+            },
+            ...dialogDivProps,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": ariaLabelledby,
+            tabIndex: -1,
+            ref: dialogRef,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            onTouchCancel: handleTouchCancel,
+            "data-tiger-drawer": "",
+            children: [
+              (title || header || closable) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: headerClasses, children: [
+                (title || header) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: titleClasses, id: titleId, children: header || title }),
+                closable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    className: closeButtonClasses,
+                    onClick: handleClose,
+                    "aria-label": resolvedCloseAriaLabel,
+                    ref: closeButtonRef,
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseIcon, {})
+                  }
+                )
+              ] }),
+              children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: bodyClasses, children }),
+              footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: footerClasses, children: footer })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return _chunkSTTQ5LXXjs.renderBodyPortal.call(void 0, drawerContent);
+};
+
+
+
+exports.Drawer = Drawer;