@tipp/ui 2.2.0 → 2.2.1

package/dist/atoms/index.d.ts

@@ -1,4 +1,4 @@
-export { AlertDialog, AspectRatio, Blockquote, BlockquoteProps, Box, BoxProps, Callout, CheckboxCards, Code, CodeProps, Container, ContainerProps, DataList, Em, EmProps, Flex, FlexProps, Grid, GridProps, HoverCard, IconButton, IconButtonProps, Inset, InsetProps, Kbd, KbdProps, Popover, Progress, ProgressProps, Quote, QuoteProps, Radio, RadioCards, RadioGroup, RadioProps, Button as RadixButton, ButtonProps as RadixButtonProps, Heading as RadixHeading, ScrollArea, ScrollAreaProps, Section, SectionProps, SegmentedControl, Separator, SeparatorProps, Skeleton, SkeletonProps, Spinner, SpinnerProps, Strong, StrongProps, Switch, SwitchProps, TabNav, Tabs } from '@radix-ui/themes';
+export { AlertDialog, AspectRatio, Blockquote, BlockquoteProps, Box, BoxProps, Callout, CheckboxCards, Code, CodeProps, Container, ContainerProps, DataList, Em, EmProps, Flex, FlexProps, Grid, GridProps, HoverCard, Inset, InsetProps, Kbd, KbdProps, Popover, Progress, ProgressProps, Quote, QuoteProps, Radio, RadioCards, RadioGroup, RadioProps, Button as RadixButton, ButtonProps as RadixButtonProps, Heading as RadixHeading, ScrollArea, ScrollAreaProps, Section, SectionProps, SegmentedControl, Separator, SeparatorProps, Skeleton, SkeletonProps, Spinner, SpinnerProps, Strong, StrongProps, Switch, SwitchProps, TabNav, Tabs } from '@radix-ui/themes';
 export { Avatar, AvatarProps } from './avatar.js';
 export { Badge, BadgeProps } from './badge.js';
 export { Button } from './button.js';
@@ -9,6 +9,7 @@ export { CheckboxGroup } from './check-box-group.js';
 export { Dialog } from './dialog.js';
 export { DropdownMenu } from './dropdown-menu.js';
 export { Heading, HeadingProps } from './heading.js';
+export { IconButton, IconButtonProps } from './icon-button.js';
 export { Link, LinkProps } from './link.js';
 export { ContentProps, Select, SelectRootProps } from './select.js';
 export { TextArea, TextAreaProps } from './text-area.js';

package/dist/atoms/index.js

@@ -3,6 +3,15 @@ import {
   Form,
   FormItem
 } from "../chunk-A5S42XBJ.js";
+import {
+  Switch
+} from "../chunk-OYM4XCHQ.js";
+import {
+  TabNav
+} from "../chunk-YJ7ZFOYL.js";
+import {
+  Tabs
+} from "../chunk-5ZITU5L7.js";
 import {
   TextArea
 } from "../chunk-3F45OPXG.js";
@@ -13,6 +22,15 @@ import {
   ToastContainer,
   toast
 } from "../chunk-26ZU5KUR.js";
+import {
+  ScrollArea
+} from "../chunk-MUPK4L3U.js";
+import {
+  Section
+} from "../chunk-MUNMDHRF.js";
+import {
+  SegmentedControl
+} from "../chunk-TVDKGMBI.js";
 import {
   Select
 } from "../chunk-AP52M2Z5.js";
@@ -26,14 +44,15 @@ import {
   Strong
 } from "../chunk-74DX4CU7.js";
 import {
-  Switch
-} from "../chunk-OYM4XCHQ.js";
+  List,
+  useList
+} from "../chunk-3SK5EPKI.js";
 import {
-  TabNav
-} from "../chunk-YJ7ZFOYL.js";
+  Pagination
+} from "../chunk-BXQCEPIO.js";
 import {
-  Tabs
-} from "../chunk-5ZITU5L7.js";
+  Popover
+} from "../chunk-5AVBYDPB.js";
 import {
   Progress
 } from "../chunk-365QMK4D.js";
@@ -50,14 +69,11 @@ import {
   Radio
 } from "../chunk-FPD73OHW.js";
 import {
-  ScrollArea
-} from "../chunk-MUPK4L3U.js";
-import {
-  Section
-} from "../chunk-MUNMDHRF.js";
+  Grid
+} from "../chunk-EGEQY3KT.js";
 import {
-  SegmentedControl
-} from "../chunk-TVDKGMBI.js";
+  HoverCard
+} from "../chunk-O3T3TM3V.js";
 import {
   Inset
 } from "../chunk-XQOL7UBI.js";
@@ -68,15 +84,28 @@ import {
   Link
 } from "../chunk-TQOQC4PZ.js";
 import {
-  List,
-  useList
-} from "../chunk-3SK5EPKI.js";
+  DataList
+} from "../chunk-VTJZMOSP.js";
 import {
-  Pagination
-} from "../chunk-U2QL5DES.js";
+  Dialog
+} from "../chunk-22326A76.js";
 import {
-  Popover
-} from "../chunk-5AVBYDPB.js";
+  Heading
+} from "../chunk-34OQDUQR.js";
+import {
+  Content,
+  Drawer,
+  Root,
+  Trigger
+} from "../chunk-ZMHUWLB2.js";
+import "../chunk-DDUKEE5E.js";
+import {
+  Separator
+} from "../chunk-HYITAA4J.js";
+import "../chunk-U7N2PWMO.js";
+import {
+  IconButton
+} from "../chunk-ZOFENAZJ.js";
 import {
   DropdownMenu
 } from "../chunk-HYE34QEM.js";
@@ -94,11 +123,14 @@ import {
   FieldErrorWrapper
 } from "../chunk-KXF3A4OR.js";
 import {
-  Grid
-} from "../chunk-EGEQY3KT.js";
+  Callout
+} from "../chunk-B6XJN6EC.js";
 import {
-  HoverCard
-} from "../chunk-O3T3TM3V.js";
+  Card
+} from "../chunk-HEDMSFPW.js";
+import {
+  CheckboxCards
+} from "../chunk-MIMJ7LON.js";
 import {
   CheckboxGroup
 } from "../chunk-RMTJMZBQ.js";
@@ -115,28 +147,14 @@ import {
   Container
 } from "../chunk-Q37G2GS6.js";
 import {
-  DataList
-} from "../chunk-VTJZMOSP.js";
-import {
-  Dialog
-} from "../chunk-CVRGXNMT.js";
-import {
-  Heading
-} from "../chunk-34OQDUQR.js";
-import {
-  Content,
-  Drawer,
-  Root,
-  Trigger
-} from "../chunk-RHZT4IHH.js";
-import "../chunk-DDUKEE5E.js";
+  AutoSizingInput
+} from "../chunk-XTHDFSN3.js";
 import {
-  Separator
-} from "../chunk-HYITAA4J.js";
-import "../chunk-U7N2PWMO.js";
+  Avatar
+} from "../chunk-FC7WH2S6.js";
 import {
-  IconButton
-} from "../chunk-O3DNDMV3.js";
+  Badge
+} from "../chunk-FCIHNIOH.js";
 import {
   Blockquote
 } from "../chunk-YGL6SWKN.js";
@@ -155,18 +173,9 @@ import {
 } from "../chunk-25HMMI7R.js";
 import {
   Button
-} from "../chunk-AFPH32MF.js";
+} from "../chunk-BW46WIN5.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-ZD7MNMED.js";
-import {
-  Callout
-} from "../chunk-B6XJN6EC.js";
-import {
-  Card
-} from "../chunk-HEDMSFPW.js";
-import {
-  CheckboxCards
-} from "../chunk-MIMJ7LON.js";
 import "../chunk-V5XKNSCK.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-PVL7SJYR.js";
@@ -188,15 +197,6 @@ import {
 import {
   AspectRatio
 } from "../chunk-EAXUQEO5.js";
-import {
-  AutoSizingInput
-} from "../chunk-XTHDFSN3.js";
-import {
-  Avatar
-} from "../chunk-FC7WH2S6.js";
-import {
-  Badge
-} from "../chunk-FCIHNIOH.js";
 import "../chunk-2NMEKWO5.js";
 export {
   AlertDialog,

package/dist/atoms/pagination.cjs

@@ -62,7 +62,7 @@ __export(pagination_exports, {
   Pagination: () => Pagination
 });
 module.exports = __toCommonJS(pagination_exports);
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/icon.ts
 var import_react_icons = require("@radix-ui/react-icons");
@@ -549,14 +549,77 @@ var CircleChatIcon = React13.forwardRef(
 CircleChatIcon.displayName = "CircleChatIcon";
 
 // src/atoms/icon-button.tsx
+var import_react = require("react");
+var import_clsx = require("clsx");
 var import_themes = require("@radix-ui/themes");
 
+// src/utils/convert-button-size.ts
+var convertSizeStr = (size) => {
+  switch (size) {
+    case "small":
+      return "1";
+    case "medium":
+      return "2";
+    case "large":
+      return "3";
+    default:
+      return "2";
+  }
+};
+var convertSizeResponse = (size) => {
+  if (typeof size === "string" || typeof size === "undefined") {
+    return convertSizeStr(size);
+  }
+  const radixSize = {};
+  let key = "initial";
+  for (key in size) {
+    radixSize[key] = convertSizeStr(size[key]);
+  }
+  return radixSize;
+};
+var convertSize = (size) => {
+  if (typeof size === "string") {
+    return convertSizeStr(size);
+  }
+  return convertSizeResponse(size);
+};
+
+// src/atoms/icon-button.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var IconButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
+    const radixSize = (0, import_react.useMemo)(() => {
+      return convertSize(size);
+    }, [size]);
+    const radixVariant = (0, import_react.useMemo)(() => {
+      if (variant === "transparent") return "ghost";
+      return variant;
+    }, [variant]);
+    const className = (0, import_react.useMemo)(() => {
+      return (0, import_clsx.clsx)(props.className, { transparent: variant === "transparent" });
+    }, [props.className, variant]);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_themes.IconButton,
+      __spreadProps(__spreadValues({
+        style,
+        variant: radixVariant
+      }, restProps), {
+        className,
+        ref,
+        size: radixSize
+      })
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
 // src/atoms/flex.tsx
 var import_themes2 = require("@radix-ui/themes");
 
 // src/atoms/typo.tsx
 var import_themes3 = require("@radix-ui/themes");
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/utils/map-with-responsive.ts
 var mapWithResponsive = (args) => {
@@ -577,11 +640,11 @@ var mapWithResponsive = (args) => {
 };
 
 // src/atoms/typo.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Typo = (0, import_react.forwardRef)(
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Typo = (0, import_react2.forwardRef)(
   (props, ref) => {
     const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
-    const radixSize = (0, import_react.useMemo)(() => {
+    const radixSize = (0, import_react2.useMemo)(() => {
       if (size !== void 0) return size;
       if (variant === void 0) return "2";
       return mapWithResponsive({
@@ -599,17 +662,17 @@ var Typo = (0, import_react.forwardRef)(
         }
       });
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
   }
 );
 Typo.displayName = "Typo";
 
 // src/atoms/pagination.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Pagination(props) {
   const { onChange, count = 0, siblingCount = 2 } = props;
-  const [page, setPage] = (0, import_react2.useState)(() => props.page || props.defaultPage || 1);
-  const visibleItems = (0, import_react2.useMemo)(() => {
+  const [page, setPage] = (0, import_react3.useState)(() => props.page || props.defaultPage || 1);
+  const visibleItems = (0, import_react3.useMemo)(() => {
     let start = Math.max(1, page - siblingCount);
     let end = Math.min(count, page + siblingCount);
     if (page - siblingCount <= 0 && end < count) {
@@ -619,42 +682,42 @@ function Pagination(props) {
     }
     return Array.from({ length: end - start + 1 }, (_, i) => i + start);
   }, [count, page, siblingCount]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     onChange == null ? void 0 : onChange(page);
   }, [onChange, page]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (props.page) {
       setPage(props.page);
     }
   }, [props.page]);
-  const prev = (0, import_react2.useMemo)(() => {
+  const prev = (0, import_react3.useMemo)(() => {
     const p = page - 1;
     return p < 1 ? void 0 : p;
   }, [page]);
-  const next = (0, import_react2.useMemo)(() => {
+  const next = (0, import_react3.useMemo)(() => {
     const n = page + 1;
     return n > count ? void 0 : n;
   }, [count, page]);
-  const onClickPrev = (0, import_react2.useCallback)(() => {
+  const onClickPrev = (0, import_react3.useCallback)(() => {
     prev && setPage(prev);
   }, [prev]);
-  const onClickNext = (0, import_react2.useCallback)(() => {
+  const onClickNext = (0, import_react3.useCallback)(() => {
     next && setPage(next);
   }, [next]);
-  const doublePrev = (0, import_react2.useMemo)(() => {
+  const doublePrev = (0, import_react3.useMemo)(() => {
     if (!visibleItems.length) return;
     return Math.max(0, visibleItems[0] - 1);
   }, [visibleItems]);
-  const onClickDoublePrev = (0, import_react2.useCallback)(() => {
+  const onClickDoublePrev = (0, import_react3.useCallback)(() => {
     doublePrev && setPage(doublePrev);
   }, [doublePrev]);
-  const doubleNext = (0, import_react2.useMemo)(() => {
+  const doubleNext = (0, import_react3.useMemo)(() => {
     if (!visibleItems.length) return;
     const n = visibleItems[visibleItems.length - 1] + 1;
     if (n > count) return;
     return Math.min(count, n);
   }, [count, visibleItems]);
-  const onClickDoubleNext = (0, import_react2.useCallback)(() => {
+  const onClickDoubleNext = (0, import_react3.useCallback)(() => {
     doubleNext && setPage(doubleNext);
   }, [doubleNext]);
   const iconSize = {
@@ -663,22 +726,22 @@ function Pagination(props) {
   };
   const moveButtonProps = {
     variant: "ghost",
-    size: "3",
+    size: "large",
     style: { borderRadius: "50%" }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_themes2.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_themes.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes2.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      IconButton,
       __spreadProps(__spreadValues({
         disabled: !doublePrev,
         onClick: onClickDoublePrev
       }, moveButtonProps), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_icons.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes.IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes2.Flex, { gap: "1", children: visibleItems.map((item) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes2.Flex, { gap: "1", children: visibleItems.map((item) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
           className: `page-button ${item === page ? "active" : ""}`,
@@ -686,19 +749,19 @@ function Pagination(props) {
             setPage(item);
           },
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typo, { variant: "body", children: item })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Typo, { variant: "body", children: item })
         },
         item
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes.IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize)) })),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_themes.IconButton,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      IconButton,
       __spreadProps(__spreadValues({
         disabled: !doubleNext,
         onClick: onClickDoubleNext
       }, moveButtonProps), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_icons.DoubleArrowRightIcon, __spreadValues({}, iconSize))
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons.DoubleArrowRightIcon, __spreadValues({}, iconSize))
       })
     )
   ] });