@serendie/ui 2.0.0-dev.202507240128 → 2.0.0-dev.202507240155

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../../styled-system/css';
+declare const TooltipStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "arrow" | "arrowTip", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "arrow" | "arrowTip">>;
+type TooltipVariantProps = RecipeVariantProps<typeof TooltipStyle>;
+export type TooltipProps = {
+    content: string;
+    children: React.ReactNode;
+    placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "right";
+    openDelay?: number;
+    closeDelay?: number;
+    disabled?: boolean;
+} & ComponentProps<"div"> & TooltipVariantProps;
+export declare const Tooltip: React.FC<TooltipProps>;
+export {};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,70 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import "../../styled-system/css/css.js";
+import { cx as y } from "../../styled-system/css/cx.js";
+import "../../styled-system/helpers.js";
+import { sva as f } from "../../styled-system/css/sva.js";
+import { TooltipRoot as w } from "../../node_modules/@ark-ui/react/dist/components/tooltip/tooltip-root.js";
+import { TooltipTrigger as T } from "../../node_modules/@ark-ui/react/dist/components/tooltip/tooltip-trigger.js";
+import { TooltipPositioner as g } from "../../node_modules/@ark-ui/react/dist/components/tooltip/tooltip-positioner.js";
+import { TooltipContent as h } from "../../node_modules/@ark-ui/react/dist/components/tooltip/tooltip-content.js";
+import { TooltipArrow as u } from "../../node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow.js";
+import { TooltipArrowTip as S } from "../../node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow-tip.js";
+const t = f({
+  slots: ["content", "arrow", "arrowTip"],
+  base: {
+    content: {
+      backgroundColor: "sd.system.color.component.inverseSurface",
+      color: "sd.system.color.component.inverseOnSurface",
+      borderRadius: "sd.system.dimension.radius.small",
+      px: "sd.system.dimension.spacing.extraSmall",
+      py: "sd.system.dimension.spacing.twoExtraSmall",
+      boxShadow: "sd.system.elevation.shadow.level3",
+      maxWidth: "200px",
+      textStyle: "sd.system.typography.body.extraSmall_expanded",
+      zIndex: 1e3
+    },
+    arrow: {
+      "--arrow-size": "8px",
+      "--arrow-background": "colors.sd.system.color.component.inverseSurface",
+      zIndex: 1001
+    }
+  }
+}), v = ({
+  content: e,
+  children: i,
+  placement: a = "top",
+  openDelay: n = 700,
+  closeDelay: m = 300,
+  disabled: p = !1,
+  className: l,
+  ...d
+}) => {
+  const [c, x] = t.splitVariantProps(d), r = t(c);
+  return /* @__PURE__ */ s(
+    w,
+    {
+      openDelay: n,
+      closeDelay: m,
+      positioning: { placement: a, arrowPadding: 8 },
+      disabled: p,
+      children: [
+        /* @__PURE__ */ o(T, { asChild: !0, children: i }),
+        /* @__PURE__ */ o(g, { children: /* @__PURE__ */ s(
+          h,
+          {
+            className: y(r.content, l),
+            ...x,
+            children: [
+              /* @__PURE__ */ o(u, { className: r.arrow, children: /* @__PURE__ */ o(S, { className: r.arrowTip }) }),
+              e
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+v.displayName = "Tooltip";
+export {
+  v as Tooltip
+};

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip.tsx';

package/dist/components/Tooltip/index.js

@@ -0,0 +1,4 @@
+import { Tooltip as r } from "./Tooltip.js";
+export {
+  r as Tooltip
+};

package/dist/index.d.ts

@@ -28,4 +28,5 @@ export * from './components/Tabs/index.ts';
 export * from './components/TextArea/index.ts';
 export * from './components/TextField/index.ts';
 export * from './components/Toast/index.ts';
+export * from './components/Tooltip/index.ts';
 export * from './components/TopAppBar/index.ts';

package/dist/index.js

@@ -2,7 +2,7 @@ import { SerendiePreset as e } from "./preset.js";
 import { Accordion as a } from "./components/Accordion/Accordion.js";
 import { AccordionGroup as m } from "./components/Accordion/AccordionGroup.js";
 import { Avatar as x, AvatarStyle as n } from "./components/Avatar/Avatar.js";
-import { Badge as f, BadgeCloseButton as s, BadgeStyle as d } from "./components/Badge/Badge.js";
+import { Badge as c, BadgeCloseButton as s, BadgeStyle as l } from "./components/Badge/Badge.js";
 import { Banner as h } from "./components/Banner/Banner.js";
 import { BottomNavigation as S } from "./components/BottomNavigation/BottomNavigation.js";
 import { BottomNavigationItem as g, BottomNavigationItemStyle as y } from "./components/BottomNavigation/BottomNavigationItem.js";
@@ -18,7 +18,7 @@ import { Drawer as oo } from "./components/Drawer/Drawer.js";
 import { DropdownMenu as eo, DropdownMenuStyle as to } from "./components/DropdownMenu/DropdownMenu.js";
 import { IconButton as po, IconButtonStyle as mo } from "./components/IconButton/IconButton.js";
 import { List as xo } from "./components/List/List.js";
-import { ListItem as co, ListItemStyle as fo } from "./components/List/ListItem.js";
+import { ListItem as fo, ListItemStyle as co } from "./components/List/ListItem.js";
 import { ModalDialog as lo } from "./components/ModalDialog/ModalDialog.js";
 import { NotificationBadge as Co } from "./components/NotificationBadge/NotificationBadge.js";
 import { Pagination as Bo, PaginationStyle as go } from "./components/Pagination/Pagination.js";
@@ -34,16 +34,17 @@ import { TabItem as Oo, TabItemStyle as Qo } from "./components/Tabs/TabItem.js"
 import { TextArea as Xo } from "./components/TextArea/TextArea.js";
 import { TextField as Zo } from "./components/TextField/TextField.js";
 import { Toast as $o, ToastStyle as or, toaster as rr } from "./components/Toast/Toast.js";
-import { TopAppBar as tr } from "./components/TopAppBar/TopAppBar.js";
-import { DataTableComponent as pr } from "./components/DataTable/DataTableComponent.js";
+import { Tooltip as tr } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as pr } from "./components/TopAppBar/TopAppBar.js";
+import { DataTableComponent as ir } from "./components/DataTable/DataTableComponent.js";
 export {
   a as Accordion,
   m as AccordionGroup,
   x as Avatar,
   n as AvatarStyle,
-  f as Badge,
+  c as Badge,
   s as BadgeCloseButton,
-  d as BadgeStyle,
+  l as BadgeStyle,
   h as Banner,
   S as BottomNavigation,
   g as BottomNavigationItem,
@@ -56,7 +57,7 @@ export {
   K as ChoiceBoxStyle,
   Q as DashboardWidget,
   X as DataTable,
-  pr as DataTableComponent,
+  ir as DataTableComponent,
   Z as Divider,
   _ as DividerStyle,
   oo as Drawer,
@@ -65,8 +66,8 @@ export {
   po as IconButton,
   mo as IconButtonStyle,
   xo as List,
-  co as ListItem,
-  fo as ListItemStyle,
+  fo as ListItem,
+  co as ListItemStyle,
   lo as ModalDialog,
   Co as NotificationBadge,
   Bo as Pagination,
@@ -93,7 +94,8 @@ export {
   Zo as TextField,
   $o as Toast,
   or as ToastStyle,
-  tr as TopAppBar,
+  tr as Tooltip,
+  pr as TopAppBar,
   q as checkboxCheckedIconCss,
   z as checkboxIconCss,
   E as checkboxUncheckedIconCss,

package/dist/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow-tip.js

@@ -0,0 +1,13 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { ark as e } from "../factory.js";
+import { useTooltipContext as s } from "./use-tooltip-context.js";
+import { mergeProps as f } from "../../../../../@zag-js/core/dist/index.js";
+const T = m((o, r) => {
+  const t = s(), p = f(t.getArrowTipProps(), o);
+  return /* @__PURE__ */ i(e.div, { ...p, ref: r });
+});
+T.displayName = "TooltipArrowTip";
+export {
+  T as TooltipArrowTip
+};

package/dist/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow.js

@@ -0,0 +1,13 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { ark as i } from "../factory.js";
+import { useTooltipContext as s } from "./use-tooltip-context.js";
+import { mergeProps as f } from "../../../../../@zag-js/core/dist/index.js";
+const l = e((o, r) => {
+  const t = s(), p = f(t.getArrowProps(), o);
+  return /* @__PURE__ */ m(i.div, { ...p, ref: r });
+});
+l.displayName = "TooltipArrow";
+export {
+  l as TooltipArrow
+};

package/dist/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-content.js

@@ -0,0 +1,15 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { composeRefs as s } from "../../utils/compose-refs.js";
+import { ark as i } from "../factory.js";
+import { usePresenceContext as f } from "../presence/use-presence-context.js";
+import { useTooltipContext as c } from "./use-tooltip-context.js";
+import { mergeProps as l } from "../../../../../@zag-js/core/dist/index.js";
+const u = p((r, e) => {
+  const t = c(), o = f(), n = l(t.getContentProps(), o.getPresenceProps(), r);
+  return o.unmounted ? null : /* @__PURE__ */ m(i.div, { ...n, ref: s(o.ref, e) });
+});
+u.displayName = "TooltipContent";
+export {
+  u as TooltipContent
+};

package/dist/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-positioner.js

@@ -0,0 +1,14 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { ark as p } from "../factory.js";
+import { usePresenceContext as s } from "../presence/use-presence-context.js";
+import { useTooltipContext as m } from "./use-tooltip-context.js";
+import { mergeProps as f } from "../../../../../@zag-js/core/dist/index.js";
+const c = n((o, r) => {
+  const e = m(), t = f(e.getPositionerProps(), o);
+  return s().unmounted ? null : /* @__PURE__ */ i(p.div, { ...t, ref: r });
+});
+c.displayName = "TooltipPositioner";
+export {
+  c as TooltipPositioner
+};

package/dist/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-root.js

@@ -0,0 +1,14 @@
+import { jsx as r } from "react/jsx-runtime";
+import { splitPresenceProps as m } from "../presence/split-presence-props.js";
+import { usePresence as n } from "../presence/use-presence.js";
+import { PresenceProvider as c } from "../presence/use-presence-context.js";
+import { useTooltip as l } from "./use-tooltip.js";
+import { TooltipProvider as P } from "./use-tooltip-context.js";
+import { mergeProps as f } from "../../../../../@zag-js/core/dist/index.js";
+const g = (e) => {
+  const [p, { children: t, ...s }] = m(e), o = l(s), i = n(f({ present: o.open }, p));
+  return /* @__PURE__ */ r(P, { value: o, children: /* @__PURE__ */ r(c, { value: i, children: t }) });
+};
+export {
+  g as TooltipRoot
+};

package/dist/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-trigger.js

@@ -0,0 +1,13 @@
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { ark as m } from "../factory.js";
+import { useTooltipContext as g } from "./use-tooltip-context.js";
+import { mergeProps as s } from "../../../../../@zag-js/core/dist/index.js";
+const f = i((o, r) => {
+  const t = g(), e = s(t.getTriggerProps(), o);
+  return /* @__PURE__ */ p(m.button, { ...e, ref: r });
+});
+f.displayName = "TooltipTrigger";
+export {
+  f as TooltipTrigger
+};

package/dist/node_modules/@ark-ui/react/dist/components/tooltip/use-tooltip-context.js

@@ -0,0 +1,10 @@
+import { createContext as o } from "../../utils/create-context.js";
+const [e, r] = o({
+  name: "TooltipContext",
+  hookName: "useTooltipContext",
+  providerName: "<TooltipProvider />"
+});
+export {
+  e as TooltipProvider,
+  r as useTooltipContext
+};

package/dist/node_modules/@ark-ui/react/dist/components/tooltip/use-tooltip.js

@@ -0,0 +1,17 @@
+import { useMachine as m, normalizeProps as s } from "../../../../../@zag-js/react/dist/index.js";
+import { machine as c, connect as p } from "../../../../../@zag-js/tooltip/dist/index.js";
+import { useId as u } from "react";
+import { useEnvironmentContext as a } from "../../providers/environment/use-environment-context.js";
+import { useLocaleContext as f } from "../../providers/locale/use-locale-context.js";
+const C = (o) => {
+  const t = u(), { getRootNode: e } = a(), { dir: r } = f(), n = {
+    id: t,
+    dir: r,
+    getRootNode: e,
+    ...o
+  }, i = m(c, n);
+  return p(i, s);
+};
+export {
+  C as useTooltip
+};