@tipp/ui 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -0,0 +1,931 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  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 });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AlertDialog: () => import_themes.AlertDialog,
+  AspectRatio: () => import_themes2.AspectRatio,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  Blockquote: () => import_themes5.Blockquote,
+  BookmarkFilledIcon: () => import_react_icons.BookmarkFilledIcon,
+  BookmarkIcon: () => import_react_icons.BookmarkIcon,
+  Box: () => import_themes6.Box,
+  Button: () => Button,
+  Callout: () => import_themes8.Callout,
+  Card: () => import_themes9.Card,
+  ChatBubbleIcon: () => import_react_icons.ChatBubbleIcon,
+  Checkbox: () => Checkbox,
+  CheckboxCards: () => import_themes11.CheckboxCards,
+  CheckboxGroup: () => CheckboxGroup,
+  ChevronLeftIcon: () => import_react_icons.ChevronLeftIcon,
+  ChevronRightIcon: () => import_react_icons.ChevronRightIcon,
+  Code: () => import_themes13.Code,
+  Collapse: () => Collapse,
+  Container: () => import_themes14.Container,
+  DataList: () => import_themes15.DataList,
+  DatePicker: () => DatePicker,
+  Dialog: () => import_themes16.Dialog,
+  DotsHorizontalIcon: () => import_react_icons.DotsHorizontalIcon,
+  DropdownMenu: () => import_themes17.DropdownMenu,
+  EllipsisTooltip: () => EllipsisTooltip,
+  Em: () => import_themes18.Em,
+  ExclamationTriangleIcon: () => import_react_icons.ExclamationTriangleIcon,
+  ExitIcon: () => import_react_icons.ExitIcon,
+  ExpandTable: () => ExpandTable,
+  FieldErrorWrapper: () => FieldErrorWrapper,
+  Flex: () => import_themes19.Flex,
+  Grid: () => import_themes20.Grid,
+  Heading: () => Heading2,
+  HoverCard: () => import_themes23.HoverCard,
+  IconButton: () => import_themes24.IconButton,
+  InfoCircledIcon: () => import_react_icons.InfoCircledIcon,
+  Inset: () => import_themes25.Inset,
+  Kbd: () => import_themes26.Kbd,
+  Link: () => Link,
+  MagnifyingGlassIcon: () => import_react_icons.MagnifyingGlassIcon,
+  MixerHorizontalIcon: () => import_react_icons.MixerHorizontalIcon,
+  Pagination: () => Pagination,
+  PlusIcon: () => import_react_icons.PlusIcon,
+  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,
+  Spinner: () => import_themes49.Spinner,
+  Strong: () => import_themes41.Strong,
+  Switch: () => import_themes42.Switch,
+  TabNav: () => import_themes43.TabNav,
+  Tabs: () => import_themes44.Tabs,
+  TextArea: () => import_themes45.TextArea,
+  TextField: () => import_themes47.TextField,
+  ThemeProvider: () => ThemeProvider,
+  Tooltip: () => import_themes48.Tooltip,
+  Typo: () => Typo,
+  createColumnHelper: () => import_react_table2.createColumnHelper,
+  uiProps: () => uiProps,
+  useThemeContext: () => import_themes51.useThemeContext
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/atoms/alert-dialog.tsx
+var import_themes = require("@radix-ui/themes");
+
+// src/atoms/aspect-ratio.tsx
+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");
+
+// src/atoms/box.tsx
+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");
+
+// src/atoms/card.tsx
+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");
+
+// src/atoms/container.tsx
+var import_themes14 = require("@radix-ui/themes");
+
+// src/atoms/data-list.tsx
+var import_themes15 = require("@radix-ui/themes");
+
+// src/atoms/date-picker/index.tsx
+var import_react6 = require("react");
+var import_react_datepicker = __toESM(require("react-datepicker"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DatePicker = (0, import_react6.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_datepicker.default,
+      __spreadProps(__spreadValues({}, props), {
+        open: true,
+        ref,
+        wrapperClassName: "tipp_datePicker"
+      })
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+// src/atoms/dialog.tsx
+var import_themes16 = require("@radix-ui/themes");
+
+// src/atoms/dropdown-menu.tsx
+var import_themes17 = require("@radix-ui/themes");
+
+// src/atoms/em.tsx
+var import_themes18 = require("@radix-ui/themes");
+
+// src/atoms/flex.tsx
+var import_themes19 = require("@radix-ui/themes");
+
+// src/atoms/grid.tsx
+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_themes23 = require("@radix-ui/themes");
+
+// src/atoms/icon-button.tsx
+var import_themes24 = require("@radix-ui/themes");
+
+// src/atoms/inset.tsx
+var import_themes25 = require("@radix-ui/themes");
+
+// src/atoms/kbd.tsx
+var import_themes26 = require("@radix-ui/themes");
+
+// src/atoms/link.tsx
+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_themes29 = require("@radix-ui/themes");
+
+// src/atoms/progress.tsx
+var import_themes30 = require("@radix-ui/themes");
+
+// src/atoms/quote.tsx
+var import_themes31 = require("@radix-ui/themes");
+
+// src/atoms/radio.tsx
+var import_themes32 = require("@radix-ui/themes");
+
+// src/atoms/radio-cards.tsx
+var import_themes33 = require("@radix-ui/themes");
+
+// src/atoms/radio-group.tsx
+var import_themes34 = require("@radix-ui/themes");
+
+// src/atoms/scroll-area.tsx
+var import_themes35 = require("@radix-ui/themes");
+
+// src/atoms/section.tsx
+var import_themes36 = require("@radix-ui/themes");
+
+// src/atoms/segmented-control.tsx
+var import_themes37 = require("@radix-ui/themes");
+
+// src/atoms/select.tsx
+var import_themes38 = require("@radix-ui/themes");
+
+// src/atoms/separator.tsx
+var import_themes39 = require("@radix-ui/themes");
+
+// src/atoms/skeleton.tsx
+var import_themes40 = require("@radix-ui/themes");
+
+// src/atoms/strong.tsx
+var import_themes41 = require("@radix-ui/themes");
+
+// src/atoms/switch.tsx
+var import_themes42 = require("@radix-ui/themes");
+
+// src/atoms/tab-nav.tsx
+var import_themes43 = require("@radix-ui/themes");
+
+// src/atoms/tabs.tsx
+var import_themes44 = require("@radix-ui/themes");
+
+// src/atoms/text-area.tsx
+var import_themes45 = require("@radix-ui/themes");
+
+// src/atoms/typo.tsx
+var import_themes46 = require("@radix-ui/themes");
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Typo = (0, import_react9.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
+    const radixSize = (0, import_react9.useMemo)(() => {
+      if (size !== void 0)
+        return size;
+      switch (variant) {
+        case "caption":
+          return "1";
+        case "subtitle":
+          return "3";
+        case "body":
+        default:
+          return "2";
+      }
+    }, [size, variant]);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes46.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+  }
+);
+Typo.displayName = "Typo";
+
+// src/atoms/text-field.tsx
+var import_themes47 = require("@radix-ui/themes");
+
+// src/atoms/tooltip.tsx
+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/atoms/spinner.tsx
+var import_themes49 = require("@radix-ui/themes");
+
+// src/atoms/pagination.tsx
+var import_react11 = require("react");
+
+// src/icon.ts
+var import_react_icons = require("@radix-ui/react-icons");
+
+// src/atoms/pagination.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Pagination(props) {
+  const { onChange, count = 0 } = props;
+  const siblingCount = 2;
+  const [page, setPage] = (0, import_react11.useState)(() => props.page || props.defaultPage || 1);
+  const visibleItems = (0, import_react11.useMemo)(() => {
+    let start = Math.max(1, page - siblingCount);
+    let end = Math.min(count, page + siblingCount);
+    if (page - siblingCount <= 0 && end < count) {
+      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);
+    } else if (page + siblingCount > count && start > 1) {
+      start = Math.max(1, start - (page + siblingCount - count));
+    }
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page]);
+  (0, import_react11.useEffect)(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  (0, import_react11.useEffect)(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  const onClickPrev = (0, import_react11.useCallback)(() => {
+    setPage((prev) => Math.max(1, prev - 1));
+  }, []);
+  const onClickNext = (0, import_react11.useCallback)(() => {
+    setPage((prev) => Math.min(count, prev + 1));
+  }, [count]);
+  const moveButtonProps = {
+    variant: "ghost",
+    size: "3",
+    style: { borderRadius: "50%" }
+  };
+  const iconSize = {
+    height: 24,
+    width: 24
+  };
+  const prevDisabled = (0, import_react11.useMemo)(() => {
+    return page - siblingCount <= 1;
+  }, [page]);
+  const nextDisabled = (0, import_react11.useMemo)(() => {
+    return page + siblingCount >= count;
+  }, [count, page]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_themes19.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_themes24.IconButton,
+      __spreadProps(__spreadValues({
+        disabled: prevDisabled,
+        onClick: onClickPrev
+      }, moveButtonProps), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize))
+      })
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes19.Flex, { gap: "1", children: visibleItems.map((item) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          className: `page-button ${item === page ? "active" : ""}`,
+          onClick: () => {
+            setPage(item);
+          },
+          type: "button",
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typo, { variant: "body", children: item })
+        },
+        item
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_themes24.IconButton,
+      __spreadProps(__spreadValues({
+        disabled: nextDisabled,
+        onClick: onClickNext
+      }, moveButtonProps), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize))
+      })
+    )
+  ] });
+}
+
+// src/atoms/field-error-wrapper.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function FieldErrorWrapper({
+  children,
+  error
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_themes19.Flex, { direction: "column", gap: "1", children: [
+    children,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Typo, { color: "red", variant: "caption", children: error }) : null
+  ] });
+}
+
+// src/atoms/ellipsis-tooltip.tsx
+var import_react12 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function EllipsisTooltip(props) {
+  const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
+  const ref = (0, import_react12.useRef)(null);
+  const [tooltipDisplay, setTooltipDisplay] = (0, import_react12.useState)(
+    "none"
+  );
+  (0, import_react12.useEffect)(() => {
+    if (ref.current) {
+      const typo = ref.current;
+      const mouseOver = () => {
+        if (typo.clientHeight < typo.scrollHeight) {
+          setTooltipDisplay("block");
+        }
+      };
+      const mouseOut = () => {
+        setTooltipDisplay("none");
+      };
+      ref.current.addEventListener("mouseenter", mouseOver);
+      ref.current.addEventListener("mouseleave", mouseOut);
+    }
+  }, [children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes48.Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Typo,
+    __spreadProps(__spreadValues({}, rest), {
+      ref,
+      style: __spreadValues({
+        width: "100%",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        WebkitLineClamp: lineClamp,
+        display: "-webkit-box",
+        WebkitBoxOrient: "vertical",
+        wordBreak: "break-word"
+      }, style),
+      children
+    })
+  ) });
+}
+
+// src/molecules/expand-table/index.tsx
+var import_react_table2 = require("@tanstack/react-table");
+var import_react14 = require("react");
+
+// src/icons/down.tsx
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var TriangleArrowDownIcon = React8.forwardRef(
+  (_a, forwardedRef) => {
+    var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.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 React9 = __toESM(require("react"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var TriangleArrowUpIcon = React9.forwardRef(
+  (_a, forwardedRef) => {
+    var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.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_react13 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Row(props) {
+  const { row, ExpandComp, gridColTemp } = props;
+  const [open, setOpen] = (0, import_react13.useState)(false);
+  const onClickRow = (0, import_react13.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_runtime16.jsxs)(
+    "div",
+    {
+      className: `tr-wrapper ${ExpandComp ? "expandable" : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "button",
+          {
+            className: "tr",
+            onClick: onClickRow,
+            style: { gridTemplateColumns: gridColTemp },
+            type: "button",
+            children: row.getVisibleCells().map((cell) => {
+              var _a, _b;
+              const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
+              return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                "div",
+                {
+                  className: "td",
+                  style: {
+                    minWidth: autoSize ? void 0 : cell.column.getSize(),
+                    flexGrow: autoSize ? 1 : void 0
+                  },
+                  children: [
+                    (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
+                    ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      cell.column.columnDef.meta.OpenBtn,
+                      {
+                        data: row.original,
+                        open,
+                        setIsOpen: setOpen
+                      }
+                    ) : null
+                  ]
+                },
+                cell.id
+              );
+            })
+          },
+          `tr_${row.id}`
+        ),
+        ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ExpandComp, { row }) }) }) : null
+      ]
+    },
+    `tr-wrapper_${row.id}`
+  );
+}
+
+// src/molecules/expand-table/index.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function ExpandTable(props) {
+  const { data, columns, ExpandComp, placeholder, onRowClick } = props;
+  const [sorting, setSorting] = (0, import_react14.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 gridColTemp = (0, import_react14.useMemo)(() => {
+    return columns.map((col) => {
+      var _a;
+      if ((_a = col.meta) == null ? void 0 : _a.autoSize)
+        return "1fr";
+      return `${col.size || 150}px`;
+    }).join(" ");
+  }, [columns]);
+  const rowModels = getRowModel();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "expand-table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        className: "tr",
+        style: { gridTemplateColumns: gridColTemp },
+        children: headerGroup.headers.map((header) => {
+          const sortable = header.column.getCanSort();
+          const sortedState = header.column.getIsSorted();
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "th", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            "button",
+            {
+              onClick: header.column.getToggleSortingHandler(),
+              style: sortable ? { cursor: "pointer" } : void 0,
+              type: "button",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ) }),
+                sortable ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                  import_themes19.Flex,
+                  {
+                    direction: "column",
+                    style: { marginLeft: "var(--space-2)" },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                        TriangleArrowUpIcon,
+                        {
+                          color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                        TriangleArrowDownIcon,
+                        {
+                          color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
+                        }
+                      )
+                    ]
+                  }
+                ) : null
+              ]
+            }
+          ) }, header.id);
+        })
+      },
+      headerGroup.id
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "tbody", children: [
+      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes19.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
+      rowModels.rows.map((row) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          Row,
+          {
+            ExpandComp,
+            gridColTemp,
+            onRowClick,
+            row
+          },
+          `row_${row.id}`
+        );
+      })
+    ] })
+  ] });
+}
+
+// src/theme/theme-provider.tsx
+var import_themes50 = require("@radix-ui/themes");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ThemeProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes50.Theme, __spreadValues({ accentColor: "iris", radius: "large" }, props));
+}
+
+// src/theme/use-theme.tsx
+var import_themes51 = require("@radix-ui/themes");
+
+// src/ui-props/index.ts
+var uiProps = __toESM(require("@radix-ui/themes/dist/cjs/props/index.js"), 1);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlertDialog,
+  AspectRatio,
+  Avatar,
+  Badge,
+  Blockquote,
+  BookmarkFilledIcon,
+  BookmarkIcon,
+  Box,
+  Button,
+  Callout,
+  Card,
+  ChatBubbleIcon,
+  Checkbox,
+  CheckboxCards,
+  CheckboxGroup,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  Code,
+  Collapse,
+  Container,
+  DataList,
+  DatePicker,
+  Dialog,
+  DotsHorizontalIcon,
+  DropdownMenu,
+  EllipsisTooltip,
+  Em,
+  ExclamationTriangleIcon,
+  ExitIcon,
+  ExpandTable,
+  FieldErrorWrapper,
+  Flex,
+  Grid,
+  Heading,
+  HoverCard,
+  IconButton,
+  InfoCircledIcon,
+  Inset,
+  Kbd,
+  Link,
+  MagnifyingGlassIcon,
+  MixerHorizontalIcon,
+  Pagination,
+  PlusIcon,
+  Popover,
+  Progress,
+  Quote,
+  Radio,
+  RadioCards,
+  RadioGroup,
+  ScrollArea,
+  Section,
+  SegmentedControl,
+  Select,
+  Separator,
+  Skeleton,
+  Spinner,
+  Strong,
+  Switch,
+  TabNav,
+  Tabs,
+  TextArea,
+  TextField,
+  ThemeProvider,
+  Tooltip,
+  Typo,
+  createColumnHelper,
+  uiProps,
+  useThemeContext
+});
+//# sourceMappingURL=index.cjs.map