@tipp/ui 0.1.5 → 0.1.7

package/dist/index.cjs

@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -49,19 +61,20 @@ var src_exports = {};
 __export(src_exports, {
   AlertDialog: () => import_themes.AlertDialog,
   AspectRatio: () => import_themes2.AspectRatio,
-  Avatar: () => import_themes3.Avatar,
-  Badge: () => import_themes4.Badge,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
   Blockquote: () => import_themes5.Blockquote,
   BookmarkIcon: () => import_react_icons.BookmarkIcon,
   Box: () => import_themes6.Box,
-  Button: () => import_themes7.Button,
+  Button: () => Button,
   Callout: () => import_themes8.Callout,
   Card: () => import_themes9.Card,
   ChatBubbleIcon: () => import_react_icons.ChatBubbleIcon,
-  Checkbox: () => import_themes10.Checkbox,
+  Checkbox: () => Checkbox,
   CheckboxCards: () => import_themes11.CheckboxCards,
-  CheckboxGroup: () => import_themes12.CheckboxGroup,
+  CheckboxGroup: () => CheckboxGroup,
   Code: () => import_themes13.Code,
+  Collapse: () => Collapse,
   Container: () => import_themes14.Container,
   DataList: () => import_themes15.DataList,
   DatePicker: () => DatePicker,
@@ -71,40 +84,42 @@ __export(src_exports, {
   Em: () => import_themes18.Em,
   ExclamationTriangleIcon: () => import_react_icons.ExclamationTriangleIcon,
   ExitIcon: () => import_react_icons.ExitIcon,
+  ExpandTable: () => ExpandTable,
   Flex: () => import_themes19.Flex,
   Grid: () => import_themes20.Grid,
-  Heading: () => import_themes21.Heading,
-  HoverCard: () => import_themes22.HoverCard,
-  IconButton: () => import_themes23.IconButton,
+  Heading: () => Heading2,
+  HoverCard: () => import_themes23.HoverCard,
+  IconButton: () => import_themes24.IconButton,
   InfoCircledIcon: () => import_react_icons.InfoCircledIcon,
-  Inset: () => import_themes24.Inset,
-  Kbd: () => import_themes25.Kbd,
-  Link: () => import_themes26.Link,
+  Inset: () => import_themes25.Inset,
+  Kbd: () => import_themes26.Kbd,
+  Link: () => Link,
   MagnifyingGlassIcon: () => import_react_icons.MagnifyingGlassIcon,
   PlusIcon: () => import_react_icons.PlusIcon,
-  Popover: () => import_themes27.Popover,
-  Progress: () => import_themes28.Progress,
-  Quote: () => import_themes29.Quote,
-  Radio: () => import_themes30.Radio,
-  RadioCards: () => import_themes31.RadioCards,
-  RadioGroup: () => import_themes32.RadioGroup,
-  ScrollArea: () => import_themes33.ScrollArea,
-  Section: () => import_themes34.Section,
-  SegmentedControl: () => import_themes35.SegmentedControl,
-  Select: () => import_themes36.Select,
-  Separator: () => import_themes37.Separator,
-  Skeleton: () => import_themes38.Skeleton,
-  Strong: () => import_themes39.Strong,
-  Switch: () => import_themes40.Switch,
-  TabNav: () => import_themes41.TabNav,
-  Tabs: () => import_themes42.Tabs,
-  Text: () => import_themes44.Text,
-  TextArea: () => import_themes43.TextArea,
-  TextField: () => import_themes45.TextField,
+  Popover: () => import_themes29.Popover,
+  Progress: () => import_themes30.Progress,
+  Quote: () => import_themes31.Quote,
+  Radio: () => import_themes32.Radio,
+  RadioCards: () => import_themes33.RadioCards,
+  RadioGroup: () => import_themes34.RadioGroup,
+  ScrollArea: () => import_themes35.ScrollArea,
+  Section: () => import_themes36.Section,
+  SegmentedControl: () => import_themes37.SegmentedControl,
+  Select: () => import_themes38.Select,
+  Separator: () => import_themes39.Separator,
+  Skeleton: () => import_themes40.Skeleton,
+  Strong: () => import_themes41.Strong,
+  Switch: () => import_themes42.Switch,
+  TabNav: () => import_themes43.TabNav,
+  Tabs: () => import_themes44.Tabs,
+  Text: () => Text,
+  TextArea: () => import_themes45.TextArea,
+  TextField: () => import_themes47.TextField,
   ThemeProvider: () => ThemeProvider,
-  Tooltip: () => import_themes46.Tooltip,
+  Tooltip: () => import_themes48.Tooltip,
+  createColumnHelper: () => import_react_table2.createColumnHelper,
   uiProps: () => uiProps,
-  useThemeContext: () => import_themes48.useThemeContext
+  useThemeContext: () => import_themes50.useThemeContext
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -116,9 +131,64 @@ var import_themes2 = require("@radix-ui/themes");
 
 // src/atoms/avatar.tsx
 var import_themes3 = require("@radix-ui/themes");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Avatar = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const _a = props, { children, size, variant = "soft" } = _a, rest = __objRest(_a, ["children", "size", "variant"]);
+    const radixSize = (0, import_react.useMemo)(() => {
+      switch (size) {
+        case "small":
+          return "1";
+        case "medium":
+          return "2";
+        case "large":
+          return "3";
+        case "full":
+          return "4";
+        default:
+          return size;
+      }
+    }, [size]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes3.Avatar, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, variant, children }));
+  }
+);
+Avatar.displayName = "Avatar";
 
 // src/atoms/badge.tsx
 var import_themes4 = require("@radix-ui/themes");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Badge = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size, color } = _a, rest = __objRest(_a, ["size", "color"]);
+    const radixSize = (0, import_react2.useMemo)(() => {
+      switch (size) {
+        case "small":
+          return "1";
+        case "large":
+          return "3";
+        default:
+          return "1";
+      }
+    }, [size]);
+    const radixColor = (0, import_react2.useMemo)(() => {
+      switch (color) {
+        case "error":
+          return "red";
+        case "neutral":
+          return "gray";
+        case "success":
+          return "green";
+        case "accent":
+        default:
+          return void 0;
+      }
+    }, [color]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes4.Badge, __spreadProps(__spreadValues({}, rest), { color: radixColor, ref, size: radixSize }));
+  }
+);
+Badge.displayName = "Badge";
 
 // src/atoms/blockquote.tsx
 var import_themes5 = require("@radix-ui/themes");
@@ -128,6 +198,27 @@ var import_themes6 = require("@radix-ui/themes");
 
 // src/atoms/button.tsx
 var import_themes7 = require("@radix-ui/themes");
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Button = (0, import_react3.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size } = _a, restProps = __objRest(_a, ["size"]);
+    const radixSize = (0, import_react3.useMemo)(() => {
+      switch (size) {
+        case "small":
+          return "2";
+        case "medium":
+          return "3";
+        case "large":
+          return "4";
+        default:
+          return "3";
+      }
+    }, [size]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes7.Button, __spreadProps(__spreadValues({}, restProps), { ref, size: radixSize }));
+  }
+);
+Button.displayName = "Button";
 
 // src/atoms/call-out.tsx
 var import_themes8 = require("@radix-ui/themes");
@@ -137,12 +228,53 @@ var import_themes9 = require("@radix-ui/themes");
 
 // src/atoms/check-box.tsx
 var import_themes10 = require("@radix-ui/themes");
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Checkbox = (0, import_react4.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
+    const radixSize = (0, import_react4.useMemo)(() => {
+      switch (size) {
+        case "small":
+          return "1";
+        case "medium":
+          return "2";
+        case "large":
+          return "3";
+      }
+    }, [size]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes10.Checkbox, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize }));
+  }
+);
+Checkbox.displayName = "Checkbox";
 
 // src/atoms/check-box-card.tsx
 var import_themes11 = require("@radix-ui/themes");
 
 // src/atoms/check-box-group.tsx
 var import_themes12 = require("@radix-ui/themes");
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Root = (0, import_react5.forwardRef)((props, ref) => {
+  const _a = props, { children, size } = _a, rest = __objRest(_a, ["children", "size"]);
+  const groupSize = (0, import_react5.useMemo)(() => {
+    switch (size) {
+      case "small":
+        return "1";
+      case "large":
+        return "3";
+      case "medium":
+      default:
+        return "2";
+    }
+  }, [size]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes12.CheckboxGroup.Root, __spreadProps(__spreadValues({}, rest), { ref, size: groupSize, children }));
+});
+Root.displayName = "CheckboxGroup.Root";
+var CheckboxGroup = {
+  Root,
+  Item: import_themes12.CheckboxGroup.Item
+};
 
 // src/atoms/code.tsx
 var import_themes13 = require("@radix-ui/themes");
@@ -154,12 +286,12 @@ var import_themes14 = require("@radix-ui/themes");
 var import_themes15 = require("@radix-ui/themes");
 
 // src/atoms/date-picker/index.tsx
-var import_react = require("react");
+var import_react6 = require("react");
 var import_react_datepicker = __toESM(require("react-datepicker"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var DatePicker = (0, import_react.forwardRef)(
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DatePicker = (0, import_react6.forwardRef)(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_react_datepicker.default,
       __spreadProps(__spreadValues({}, props), {
         open: true,
@@ -188,91 +320,371 @@ var import_themes20 = require("@radix-ui/themes");
 
 // src/atoms/heading.tsx
 var import_themes21 = require("@radix-ui/themes");
+var import_react7 = require("react");
+var import_themes22 = require("@radix-ui/themes");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Heading2(props) {
+  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
+  const radixSize = (0, import_react7.useMemo)(() => {
+    switch (variant) {
+      case "subtitle1":
+        return "4";
+      case "heading1":
+        return "7";
+      case "heading2":
+        return "6";
+      case "heading3":
+        return "5";
+      default:
+        return size;
+    }
+  }, [size, variant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes21.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+}
 
 // src/atoms/hover-card.tsx
-var import_themes22 = require("@radix-ui/themes");
+var import_themes23 = require("@radix-ui/themes");
 
 // src/atoms/icon-button.tsx
-var import_themes23 = require("@radix-ui/themes");
+var import_themes24 = require("@radix-ui/themes");
 
 // src/atoms/inset.tsx
-var import_themes24 = require("@radix-ui/themes");
+var import_themes25 = require("@radix-ui/themes");
 
 // src/atoms/kbd.tsx
-var import_themes25 = require("@radix-ui/themes");
+var import_themes26 = require("@radix-ui/themes");
 
 // src/atoms/link.tsx
-var import_themes26 = require("@radix-ui/themes");
+var import_themes27 = require("@radix-ui/themes");
+var import_react8 = require("react");
+var import_themes28 = require("@radix-ui/themes");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Link(props) {
+  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
+  const radixSize = (0, import_react8.useMemo)(() => {
+    switch (variant) {
+      case "caption":
+        return "1";
+      case "body":
+        return "2";
+      case "subtitle":
+        return "3";
+      default:
+        return size;
+    }
+  }, [size, variant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes27.Link, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+}
 
 // src/atoms/popover.tsx
-var import_themes27 = require("@radix-ui/themes");
+var import_themes29 = require("@radix-ui/themes");
 
 // src/atoms/progress.tsx
-var import_themes28 = require("@radix-ui/themes");
+var import_themes30 = require("@radix-ui/themes");
 
 // src/atoms/quote.tsx
-var import_themes29 = require("@radix-ui/themes");
+var import_themes31 = require("@radix-ui/themes");
 
 // src/atoms/radio.tsx
-var import_themes30 = require("@radix-ui/themes");
+var import_themes32 = require("@radix-ui/themes");
 
 // src/atoms/radio-cards.tsx
-var import_themes31 = require("@radix-ui/themes");
+var import_themes33 = require("@radix-ui/themes");
 
 // src/atoms/radio-group.tsx
-var import_themes32 = require("@radix-ui/themes");
+var import_themes34 = require("@radix-ui/themes");
 
 // src/atoms/scroll-area.tsx
-var import_themes33 = require("@radix-ui/themes");
+var import_themes35 = require("@radix-ui/themes");
 
 // src/atoms/section.tsx
-var import_themes34 = require("@radix-ui/themes");
+var import_themes36 = require("@radix-ui/themes");
 
 // src/atoms/segmented-control.tsx
-var import_themes35 = require("@radix-ui/themes");
+var import_themes37 = require("@radix-ui/themes");
 
 // src/atoms/select.tsx
-var import_themes36 = require("@radix-ui/themes");
+var import_themes38 = require("@radix-ui/themes");
 
 // src/atoms/separator.tsx
-var import_themes37 = require("@radix-ui/themes");
+var import_themes39 = require("@radix-ui/themes");
 
 // src/atoms/skeleton.tsx
-var import_themes38 = require("@radix-ui/themes");
+var import_themes40 = require("@radix-ui/themes");
 
 // src/atoms/strong.tsx
-var import_themes39 = require("@radix-ui/themes");
+var import_themes41 = require("@radix-ui/themes");
 
 // src/atoms/switch.tsx
-var import_themes40 = require("@radix-ui/themes");
+var import_themes42 = require("@radix-ui/themes");
 
 // src/atoms/tab-nav.tsx
-var import_themes41 = require("@radix-ui/themes");
+var import_themes43 = require("@radix-ui/themes");
 
 // src/atoms/tabs.tsx
-var import_themes42 = require("@radix-ui/themes");
+var import_themes44 = require("@radix-ui/themes");
 
 // src/atoms/text-area.tsx
-var import_themes43 = require("@radix-ui/themes");
+var import_themes45 = require("@radix-ui/themes");
 
 // src/atoms/text.tsx
-var import_themes44 = require("@radix-ui/themes");
+var import_themes46 = require("@radix-ui/themes");
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Text(props) {
+  const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
+  const radixSize = (0, import_react9.useMemo)(() => {
+    switch (variant) {
+      case "caption":
+        return "1";
+      case "subtitle":
+        return "3";
+      case "body":
+        return "2";
+      default:
+        return size;
+    }
+  }, [size, variant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes46.Text, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+}
 
 // src/atoms/text-field.tsx
-var import_themes45 = require("@radix-ui/themes");
+var import_themes47 = require("@radix-ui/themes");
 
 // src/atoms/tooltip.tsx
-var import_themes46 = require("@radix-ui/themes");
+var import_themes48 = require("@radix-ui/themes");
+
+// src/atoms/collapse.tsx
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Collapse(props) {
+  const { children } = props;
+  const [open, setOpen] = (0, import_react10.useState)(() => {
+    return props.open || props.defaultOpen || false;
+  });
+  (0, import_react10.useEffect)(() => {
+    if (props.open === void 0)
+      return;
+    setOpen(props.open);
+  }, [props.open]);
+  const ref = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
+    if (!ref.current)
+      return;
+    ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : "0";
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "collapse", ref, children });
+}
+
+// src/molecules/expand-table/index.tsx
+var import_react_table2 = require("@tanstack/react-table");
+var import_react12 = require("react");
+
+// src/icons/down.tsx
+var React6 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TriangleArrowDownIcon = React6.forwardRef(
+  (_a, forwardedRef) => {
+    var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "svg",
+      __spreadProps(__spreadValues({
+        fill: "none",
+        height: "7",
+        viewBox: "0 0 8 7",
+        width: "8",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, props), {
+        ref: forwardedRef,
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "path",
+          {
+            d: "M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z",
+            fill: color
+          }
+        )
+      })
+    );
+  }
+);
+TriangleArrowDownIcon.displayName = "ArrowDownIcon";
+
+// src/icons/up.tsx
+var React7 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var TriangleArrowUpIcon = React7.forwardRef(
+  (_a, forwardedRef) => {
+    var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "svg",
+      __spreadProps(__spreadValues({
+        fill: "none",
+        height: "7",
+        viewBox: "0 0 8 7",
+        width: "8",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, props), {
+        ref: forwardedRef,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M0.891555 6.1875L7.10845 6.1875C7.80261 6.1875 8.1771 5.37328 7.72534 4.84623L4.6169 1.21971C4.29263 0.841403 3.70737 0.841403 3.3831 1.21971L0.274659 4.84623C-0.177095 5.37328 0.197393 6.1875 0.891555 6.1875Z",
+            fill: color
+          }
+        )
+      })
+    );
+  }
+);
+TriangleArrowUpIcon.displayName = "ArrowUpIcon";
+
+// src/molecules/expand-table/row.tsx
+var import_react_table = require("@tanstack/react-table");
+var import_react11 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Row(props) {
+  const { row, ExpandComp } = props;
+  const [open, setOpen] = (0, import_react11.useState)(false);
+  const onClickRow = (0, import_react11.useCallback)(() => {
+    var _a;
+    (_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
+    setOpen((prev) => !prev);
+  }, [props, row.original]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: `tr-wrapper ${ExpandComp ? "expandable" : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            className: "tr",
+            onClick: onClickRow,
+            type: "button",
+            children: row.getVisibleCells().map((cell) => {
+              var _a;
+              return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "div",
+                {
+                  className: "td",
+                  style: { width: cell.column.getSize() },
+                  children: [
+                    (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
+                    ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      cell.column.columnDef.meta.OpenBtn,
+                      {
+                        data: row.original,
+                        open,
+                        setIsOpen: setOpen
+                      }
+                    ) : null
+                  ]
+                },
+                cell.id
+              );
+            })
+          },
+          `tr_${row.id}`
+        ),
+        ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ExpandComp, { row }) }) }) : null
+      ]
+    },
+    `tr-wrapper_${row.id}`
+  );
+}
+
+// src/molecules/expand-table/index.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function ExpandTable(props) {
+  const { data, columns, ExpandComp, placeholder, onRowClick } = props;
+  const [sorting, setSorting] = (0, import_react12.useState)([]);
+  const { getRowModel, getHeaderGroups } = (0, import_react_table2.useReactTable)({
+    data: data || [],
+    columns,
+    getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
+    getSortedRowModel: (0, import_react_table2.getSortedRowModel)(),
+    state: {
+      sorting
+    },
+    onSortingChange: setSorting
+  });
+  const rowModels = getRowModel();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "expand-table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "tr", children: headerGroup.headers.map((header) => {
+      const sortable = header.column.getCanSort();
+      const sortedState = header.column.getIsSorted();
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "div",
+        {
+          className: "th",
+          style: {
+            width: header.getSize()
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "button",
+            {
+              onClick: header.column.getToggleSortingHandler(),
+              style: sortable ? { cursor: "pointer" } : void 0,
+              type: "button",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { variant: "body", children: (0, import_react_table2.flexRender)(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ) }),
+                sortable ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                  import_themes19.Flex,
+                  {
+                    direction: "column",
+                    style: { marginLeft: "var(--space-2)" },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        TriangleArrowUpIcon,
+                        {
+                          color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        TriangleArrowDownIcon,
+                        {
+                          color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
+                        }
+                      )
+                    ]
+                  }
+                ) : null
+              ]
+            }
+          )
+        },
+        header.id
+      );
+    }) }, headerGroup.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "tbody", children: [
+      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes19.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
+      rowModels.rows.map((row) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Row,
+          {
+            ExpandComp,
+            onRowClick,
+            row
+          },
+          `row_${row.id}`
+        );
+      })
+    ] })
+  ] });
+}
 
 // src/theme/theme-provider.tsx
-var import_themes47 = require("@radix-ui/themes");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_themes49 = require("@radix-ui/themes");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ThemeProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes47.Theme, __spreadValues({ accentColor: "iris" }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes49.Theme, __spreadValues({ accentColor: "iris", radius: "large" }, props));
 }
 
 // src/theme/use-theme.tsx
-var import_themes48 = require("@radix-ui/themes");
+var import_themes50 = require("@radix-ui/themes");
 
 // src/ui-props/index.ts
 var uiProps = __toESM(require("@radix-ui/themes/dist/cjs/props/index.js"), 1);
@@ -296,6 +708,7 @@ var import_react_icons = require("@radix-ui/react-icons");
   CheckboxCards,
   CheckboxGroup,
   Code,
+  Collapse,
   Container,
   DataList,
   DatePicker,
@@ -305,6 +718,7 @@ var import_react_icons = require("@radix-ui/react-icons");
   Em,
   ExclamationTriangleIcon,
   ExitIcon,
+  ExpandTable,
   Flex,
   Grid,
   Heading,
@@ -337,6 +751,7 @@ var import_react_icons = require("@radix-ui/react-icons");
   TextField,
   ThemeProvider,
   Tooltip,
+  createColumnHelper,
   uiProps,
   useThemeContext
 });