@umami/react-zen 0.64.0 → 0.65.0

package/dist/index.css

@@ -3119,12 +3119,73 @@ body a.Button_button__ZTY3M {
   }
 }
 
+/* virtual-css:css:34d15f1efb5cfdf86de5abea08f767ce */
+.Tooltip_tooltip__YmY4Z {
+  forced-color-adjust: none;
+  outline: none;
+}
+.Tooltip_bubble__MWE0N {
+  color: var(--light-color);
+  background: rgba(0, 0, 0, 0.8);
+  padding: var(--padding);
+  border-radius: var(--border-radius);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=top] {
+  margin-bottom: 8px;
+  --origin: translateY(4px);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=bottom] {
+  margin-top: 8px;
+  --origin: translateY(-4px);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=bottom] .Tooltip_arrow__OGM1M svg {
+  transform: rotate(180deg);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=right] {
+  margin-left: 8px;
+  --origin: translateX(-4px);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=right] .Tooltip_arrow__OGM1M svg {
+  transform: rotate(90deg);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=left] {
+  margin-right: 8px;
+  --origin: translateX(4px);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=left] .Tooltip_arrow__OGM1M svg {
+  transform: rotate(-90deg);
+}
+.Tooltip_tooltip__YmY4Z .Tooltip_arrow__OGM1M {
+  width: 8px;
+  height: 8px;
+}
+.Tooltip_tooltip__YmY4Z .Tooltip_arrow__OGM1M svg {
+  display: block;
+  fill: rgba(0, 0, 0, 0.8);
+}
+.Tooltip_tooltip__YmY4Z[data-entering] {
+  animation: Tooltip_slide__MGVmY 200ms;
+}
+.Tooltip_tooltip__YmY4Z[data-exiting] {
+  animation: Tooltip_slide__MGVmY 200ms reverse ease-in;
+}
+@keyframes Tooltip_slide__MGVmY {
+  from {
+    transform: var(--origin);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
 /* virtual-css:css:a37d08939f4c2e286eced2d454e614ea */
-.FloatingTooltip_tooltip__YTcxZ {
+.FloatingTooltip_floating__ZjM4N {
   position: fixed;
   pointer-events: none;
   z-index: 9999;
-  transform: translate(-50%, calc(-100% - 6px));
+  transform: translate(-50%, calc(-100% - 10px));
 }
 
 /* virtual-css:css:94870e251b7b77526d8ae103079be601 */
@@ -3599,73 +3660,6 @@ body a.Button_button__ZTY3M {
   cursor: pointer;
 }
 
-/* virtual-css:css:34d15f1efb5cfdf86de5abea08f767ce */
-.Tooltip_tooltip__ODVhY {
-  forced-color-adjust: none;
-  outline: none;
-}
-.Tooltip_bubble__OTMzY {
-  color: var(--light-color);
-  background: rgba(0, 0, 0, 0.8);
-  padding: var(--padding);
-  border-radius: var(--border-radius);
-}
-.Tooltip_floating__YWVjM {
-  position: fixed;
-  pointer-events: none;
-  z-index: 9999;
-  transform: translate(-50%, calc(-100% - 5px));
-}
-.Tooltip_tooltip__ODVhY[data-placement=top] {
-  margin-bottom: 8px;
-  --origin: translateY(4px);
-}
-.Tooltip_tooltip__ODVhY[data-placement=bottom] {
-  margin-top: 8px;
-  --origin: translateY(-4px);
-}
-.Tooltip_tooltip__ODVhY[data-placement=bottom] .Tooltip_arrow__ZmMyY svg {
-  transform: rotate(180deg);
-}
-.Tooltip_tooltip__ODVhY[data-placement=right] {
-  margin-left: 8px;
-  --origin: translateX(-4px);
-}
-.Tooltip_tooltip__ODVhY[data-placement=right] .Tooltip_arrow__ZmMyY svg {
-  transform: rotate(90deg);
-}
-.Tooltip_tooltip__ODVhY[data-placement=left] {
-  margin-right: 8px;
-  --origin: translateX(4px);
-}
-.Tooltip_tooltip__ODVhY[data-placement=left] .Tooltip_arrow__ZmMyY svg {
-  transform: rotate(-90deg);
-}
-.Tooltip_tooltip__ODVhY .Tooltip_arrow__ZmMyY {
-  width: 8px;
-  height: 8px;
-}
-.Tooltip_tooltip__ODVhY .Tooltip_arrow__ZmMyY svg {
-  display: block;
-  fill: rgba(0, 0, 0, 0.8);
-}
-.Tooltip_tooltip__ODVhY[data-entering] {
-  animation: Tooltip_slide__OWE0Z 200ms;
-}
-.Tooltip_tooltip__ODVhY[data-exiting] {
-  animation: Tooltip_slide__OWE0Z 200ms reverse ease-in;
-}
-@keyframes Tooltip_slide__OWE0Z {
-  from {
-    transform: var(--origin);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
 /* virtual-css:css:12d12fae43d9120371ddbb4f1c814f07 */
 .SideNav_sidenav__NTNmY {
   height: 100%;

package/dist/index.d.ts

@@ -5,6 +5,7 @@
 //   ../../react-hook-form
 //   ../../@/lib/types
 //   ../../@/components/toast/Toaster
+//   ../../@/components/Tooltip
 //   ../../@/components/Block
 
 declare module '@umami/react-zen' {
@@ -281,11 +282,13 @@ declare module '@umami/react-zen/Blockquote' {
 
 declare module '@umami/react-zen/Box' {
     import { HTMLAttributes } from 'react';
-    import { BackgroundColor, BorderSize, BorderRadius, BoxShadow, Spacing, Responsive, Position, Display, TextAlign, FlexGrow, FlexShrink, Top, Right, Bottom, Left, Overflow, AlignSelf, JustifySelf, FontColor } from '@/lib/types';
+    import { BackgroundColor, BorderSize, BorderRadius, BoxShadow, Spacing, Responsive, Position, Display, TextAlign, FlexGrow, FlexShrink, Top, Right, Bottom, Left, Overflow, AlignSelf, JustifySelf, FontColor, FontSize, FontWeight } from '@/lib/types';
     interface BoxProps extends HTMLAttributes<HTMLElement> {
         display?: Responsive<Display>;
         color?: FontColor;
         backgroundColor?: BackgroundColor;
+        fontSize?: Responsive<FontSize>;
+        fontWeight?: Responsive<FontWeight>;
         borderSize?: Responsive<BorderSize>;
         borderRadius?: Responsive<BorderRadius>;
         shadow?: Responsive<BoxShadow>;
@@ -330,7 +333,7 @@ declare module '@umami/react-zen/Box' {
         as?: string;
         asChild?: boolean;
     }
-    function Box({ display, color, backgroundColor, borderSize, borderRadius, shadow, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, overflowX, overflowY, width, minWidth, maxWidth, height, minHeight, maxHeight, position, align, top, right, bottom, left, flexBasis, flexGrow, flexShrink, gridArea, gridRow, gridColumn, order, as, asChild, className, style, children, ...props }: BoxProps): import("react").JSX.Element;
+    function Box({ display, color, backgroundColor, fontSize, fontWeight, borderSize, borderRadius, shadow, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, overflowX, overflowY, width, minWidth, maxWidth, height, minHeight, maxHeight, position, align, top, right, bottom, left, flexBasis, flexGrow, flexShrink, gridArea, gridRow, gridColumn, order, as, asChild, className, style, children, ...props }: BoxProps): import("react").JSX.Element;
     export { Box };
     export type { BoxProps };
 }
@@ -487,10 +490,10 @@ declare module '@umami/react-zen/Flexbox' {
 }
 
 declare module '@umami/react-zen/FloatingTooltip' {
-    import { ReactNode } from 'react';
-    export function FloatingTooltip({ children }: {
-        children: ReactNode;
-    }): import("react").JSX.Element;
+    import { TooltipBubbleProps } from '@/components/Tooltip';
+    export interface FloatingTooltipProps extends TooltipBubbleProps {
+    }
+    export function FloatingTooltip({ className, style, children, ...props }: FloatingTooltipProps): import("react").JSX.Element;
 }
 
 declare module '@umami/react-zen/Grid' {
@@ -968,17 +971,18 @@ declare module '@umami/react-zen/ToggleGroup' {
 }
 
 declare module '@umami/react-zen/Tooltip' {
-    import { ReactNode } from 'react';
+    import { HTMLAttributes } from 'react';
     import { TooltipProps as AriaTooltipProps } from 'react-aria-components';
     interface TooltipProps extends AriaTooltipProps {
         showArrow?: boolean;
     }
     function Tooltip({ children, className, showArrow, ...props }: TooltipProps): import("react").JSX.Element;
-    function TooltipBubble({ children }: {
-        children?: ReactNode;
-    }): import("react").JSX.Element;
+    interface TooltipBubbleProps extends HTMLAttributes<HTMLDivElement> {
+        showArrow?: boolean;
+    }
+    function TooltipBubble({ showArrow, children, ...props }: TooltipBubbleProps): import("react").JSX.Element;
     export { Tooltip, TooltipBubble };
-    export type { TooltipProps };
+    export type { TooltipProps, TooltipBubbleProps };
 }
 
 declare module '@umami/react-zen/ZenProvider' {