@janbox/storefront-ui 1.0.0

package/dist/lib/time-picker/time-picker.js

@@ -0,0 +1,305 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useRef, useState, useCallback } from "react";
+import dayjs from "dayjs";
+import { isNil, uniqueId } from "lodash-es";
+import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
+import ClockIcon from "../../assets/svg/clock-time.svg.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { Floating } from "../floating/floating/floating.js";
+import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
+import { FloatingContent } from "../floating/floating-content/floating-content.js";
+import { cn } from "../../utils/stylesheet.js";
+import { Icon } from "../icon/icon.js";
+const TIME_FORMAT = "HH:mm";
+const TimePicker = ({
+  placeholder = "--:--",
+  onChange,
+  defaultValue,
+  value,
+  clearable,
+  onClear,
+  containerProps,
+  placement = "bottom-start",
+  open,
+  onOpenChange,
+  disabled,
+  ...rest
+}) => {
+  const floatingRef = useRef(null);
+  const windowScreen = useWindowScreen();
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
+  const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const [selectedDate, setSelectedDate] = useControllableState({
+    defaultValue,
+    value
+  });
+  const [hours] = useState(
+    Array.from({ length: 24 }, (_, index) => ({
+      value: index,
+      label: index.toString().padStart(2, "0")
+    }))
+  );
+  const [minutes] = useState(
+    Array.from({ length: 60 }, (_, index) => ({
+      value: index,
+      label: index.toString().padStart(2, "0")
+    }))
+  );
+  const prehandleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const estimateSize = useCallback(
+    (_index) => {
+      return rowMinHeight ?? 0;
+    },
+    [rowMinHeight]
+  );
+  const getItemKeyHour = useCallback(
+    (index) => {
+      const option = hours.at(index);
+      return option ? option.value.toString() : `${uniqueId}-${index}`;
+    },
+    [hours, uniqueId]
+  );
+  const getItemKeyMinute = useCallback(
+    (index) => {
+      const option = minutes.at(index);
+      return option ? option.value.toString() : `${uniqueId}-${index}`;
+    },
+    [hours, uniqueId]
+  );
+  const sizeOptions = {
+    apply({ elements }) {
+      const { width } = elements.reference.getBoundingClientRect();
+      Object.assign(elements.floating.style, {
+        minWidth: `${width}px`
+      });
+    }
+  };
+  const RowComponentHour = ({ row }) => {
+    const rowData = hours.at(row.index);
+    const onClick = (e) => {
+      e.preventDefault();
+      const preset = dayjs(selectedDate ?? /* @__PURE__ */ new Date()).set("hour", rowData == null ? void 0 : rowData.value).toDate();
+      setSelectedDate(preset);
+      onChange == null ? void 0 : onChange(preset);
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick,
+        css: {
+          paddingLeft: "0.5rem",
+          paddingRight: "0.5rem",
+          paddingTop: "0.25rem",
+          paddingBottom: "0.25rem",
+          borderRadius: "0.25rem",
+          width: "100%",
+          height: "100%",
+          "&:hover": { backgroundColor: "var(--ic-light)" },
+          ...dayjs(selectedDate).hour() === (rowData == null ? void 0 : rowData.value) ? {
+            backgroundColor: "var(--ic-blue-1s)",
+            fontWeight: 500,
+            color: "var(--ic-blue-6s)",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "var(--ic-blue-2s)"
+          } : {}
+        },
+        children: rowData == null ? void 0 : rowData.label
+      }
+    );
+  };
+  const RowComponentMinute = ({ row }) => {
+    const rowData = minutes.at(row.index);
+    const onClick = (e) => {
+      e.preventDefault();
+      const preset = dayjs(selectedDate ?? /* @__PURE__ */ new Date()).set("minute", rowData == null ? void 0 : rowData.value).toDate();
+      setSelectedDate(preset);
+      onChange == null ? void 0 : onChange(preset);
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick,
+        css: {
+          paddingLeft: "0.5rem",
+          paddingRight: "0.5rem",
+          paddingTop: "0.25rem",
+          paddingBottom: "0.25rem",
+          borderRadius: "0.25rem",
+          width: "100%",
+          height: "100%",
+          "&:hover": { backgroundColor: "var(--ic-light)" },
+          ...dayjs(selectedDate).minute() === (rowData == null ? void 0 : rowData.value) ? {
+            backgroundColor: "var(--ic-blue-1s)",
+            fontWeight: 500,
+            color: "var(--ic-blue-6s)",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "var(--ic-blue-2s)"
+          } : {}
+        },
+        children: rowData == null ? void 0 : rowData.label
+      }
+    );
+  };
+  const portalContentRenderer = () => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      css: {
+        display: "flex",
+        borderRadius: "0.5rem",
+        padding: "0.5rem",
+        backgroundColor: "var(--ic-white-6s)",
+        fontSize: getTypographyVar("sm").fontSize,
+        lineHeight: getTypographyVar("sm").lineHeight,
+        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "var(--ic-ink-1s)",
+        gap: "0.5rem"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            css: { display: "flex", flexDirection: "column", flex: "1 1 0%" },
+            children: /* @__PURE__ */ jsx(
+              VirtualizedList,
+              {
+                RowComponent: RowComponentHour,
+                options: {
+                  count: hours.length,
+                  estimateSize,
+                  getItemKey: getItemKeyHour
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            css: { display: "flex", flexDirection: "column", flex: "1 1 0%" },
+            children: /* @__PURE__ */ jsx(
+              VirtualizedList,
+              {
+                RowComponent: RowComponentMinute,
+                options: {
+                  count: hours.length,
+                  estimateSize,
+                  getItemKey: getItemKeyMinute
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onClear == null ? void 0 : onClear();
+  };
+  const getCss = (sizeVariant) => {
+    if (isNil(sizeVariant)) return {};
+    return getSizeVariantState(sizeVariant);
+  };
+  const createStyle = (screen) => {
+    const { css } = rest[screen] ?? {};
+    return {
+      ...css
+    };
+  };
+  const getIcon = () => {
+    var _a, _b;
+    if (selectedDate && clearable) {
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          xs: { size: getCss((_a = rest.xs) == null ? void 0 : _a.size).iconSize },
+          source: CloseIcon,
+          css: { color: disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" },
+          onClick: handleClear
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        source: ClockIcon,
+        xs: { size: getCss((_b = rest.xs) == null ? void 0 : _b.size).iconSize },
+        css: { color: disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx("div", { ...containerProps, css: { display: "flex", flexDirection: "column", width: "100%" }, className: cn(containerProps == null ? void 0 : containerProps.className), children: /* @__PURE__ */ jsxs(
+    Floating,
+    {
+      clickProps: {
+        enabled: true
+      },
+      dismissProps: {
+        enabled: true
+      },
+      sizeOptions,
+      placement,
+      open: isOpen,
+      onOpenChange: prehandleOpenChange,
+      ref: floatingRef,
+      children: [
+        /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            css: [
+              createStyle("sm"),
+              {
+                [mediaQuery("xs")]: createStyle("xs"),
+                [mediaQuery("sm")]: createStyle("sm"),
+                [mediaQuery("md")]: createStyle("md"),
+                [mediaQuery("lg")]: createStyle("lg")
+              }
+            ],
+            children: [
+              !selectedDate && !!placeholder && /* @__PURE__ */ jsx("span", { css: { color: "var(--ic-ink-4s)" }, children: placeholder }),
+              !!selectedDate && /* @__PURE__ */ jsx("span", { children: dayjs(selectedDate).format(TIME_FORMAT) }),
+              getIcon()
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            css: {
+              paddingTop: "0.5rem",
+              paddingBottom: "0.5rem",
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderRadius: "0.5rem",
+              boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+              fontSize: getTypographyVar("sm").fontSize,
+              lineHeight: getTypographyVar("sm").lineHeight,
+              backgroundColor: "var(--color-surface-default)"
+            },
+            children: portalContentRenderer()
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+export {
+  TimePicker
+};

package/dist/lib/time-picker/types.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'react';
+import { Placement, UseFloatingOptions } from '@floating-ui/react';
+import { PropsWithCSS, ResponsiveDesign, SizeVariant } from '../../types';
+export interface TimeResponsiveProps extends PropsWithCSS {
+    size?: Exclude<SizeVariant, 'lg'>;
+}
+type TimePickerBaseProps = {
+    defaultValue?: Date;
+    value?: Date | null;
+    onChange?: (date: Date) => void;
+    placeholder?: string;
+    clearable?: boolean;
+    onClear?: () => void;
+    containerProps?: JSX.IntrinsicElements['div'];
+    placement?: Placement;
+    onOpenChange?: UseFloatingOptions['onOpenChange'];
+    open?: boolean;
+    disabled?: boolean;
+};
+export type TimePickerProps = TimePickerBaseProps & ResponsiveDesign<TimeResponsiveProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/time-picker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC;AAED,KAAK,mBAAmB,GAAG;IACzB,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC"}

package/dist/lib/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export * from './tooltip';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/dist/lib/tooltip/tooltip.cjs

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const react$1 = require("@floating-ui/react");
+const lodashEs = require("lodash-es");
+const useControllableState = require("../../hooks/use-controllable-state.cjs");
+require("clsx");
+require("../../theme/palette.cjs");
+const theme_typography = require("../../theme/typography.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+function Tooltip({
+  children,
+  defaultOpen = false,
+  placement = "top",
+  open,
+  onOpenChange,
+  content,
+  className,
+  contentWidth,
+  enable = true,
+  handleClose,
+  arrowProps
+}) {
+  const [visible, setVisible] = useControllableState.useControllableState({
+    defaultValue: defaultOpen,
+    value: open
+  });
+  const triggerRef = react.useRef(null);
+  const arrowRef = react.useRef(null);
+  const handleOpenChange = (val, event, reason) => {
+    if (enable === "truncated" && (event == null ? void 0 : event.target)) {
+      const target = event.target;
+      const { width, height } = target.getBoundingClientRect();
+      const fullWidth = Math.max(target.scrollWidth, target.clientWidth) + (width - target.clientWidth);
+      const fullHeight = Math.max(target.scrollHeight, target.clientHeight) + (height - target.clientHeight);
+      if ([fullWidth <= width, fullHeight <= height].every(Boolean)) return;
+    }
+    setVisible(val);
+    onOpenChange == null ? void 0 : onOpenChange(val, event, reason);
+  };
+  const { refs, floatingStyles, context } = react$1.useFloating({
+    placement,
+    open: visible,
+    onOpenChange: handleOpenChange,
+    whileElementsMounted: react$1.autoUpdate,
+    middleware: [
+      react$1.offset(5),
+      react$1.flip({
+        crossAxis: placement.includes("-"),
+        fallbackAxisSideDirection: "start",
+        padding: 5
+      }),
+      react$1.shift({ padding: 5 }),
+      react$1.arrow({ element: arrowRef }),
+      react$1.size({
+        apply({ elements }) {
+          const { width } = elements.reference.getBoundingClientRect();
+          const styledWidth = contentWidth === "fit-parent" ? width : contentWidth;
+          const styles = {
+            maxWidth: lodashEs.isUndefined(styledWidth) ? "" : `${styledWidth}px`
+          };
+          Object.assign(elements.floating.style, styles);
+        }
+      })
+    ]
+  });
+  const hover = react$1.useHover(context, {
+    move: false,
+    handleClose: handleClose === "safe-polygon" ? react$1.safePolygon() : handleClose
+  });
+  const focus = react$1.useFocus(context);
+  const dismiss = react$1.useDismiss(context);
+  const role = react$1.useRole(context, { role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = react$1.useInteractions([hover, focus, dismiss, role]);
+  const ref = react$1.useMergeRefs([refs.setReference, lodashEs.get(children, "ref"), triggerRef]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    react.cloneElement(
+      children,
+      getReferenceProps({
+        ref,
+        ...children == null ? void 0 : children.props,
+        "data-state": visible ? "open" : "closed"
+      })
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: visible && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          ...floatingStyles
+        },
+        ref: refs.setFloating,
+        css: {
+          borderRadius: "0.5rem",
+          backgroundColor: "var(--color-neutral-600)",
+          paddingLeft: "0.75rem",
+          paddingRight: "0.75rem",
+          paddingTop: "0.5rem",
+          paddingBottom: "0.5rem",
+          fontSize: theme_typography.getTypographyVar("sm").fontSize,
+          lineHeight: theme_typography.getTypographyVar("sm").lineHeight,
+          fontWeight: 400,
+          color: "white"
+        },
+        className: stylesheet.cn(className),
+        ...getFloatingProps(),
+        children: [
+          content,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.FloatingArrow,
+            {
+              ...arrowProps,
+              css: { fill: "var(--color-neutral-600)" },
+              className: stylesheet.cn(arrowProps == null ? void 0 : arrowProps.className),
+              ref: arrowRef,
+              context
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+exports.Tooltip = Tooltip;

package/dist/lib/tooltip/tooltip.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { TooltipOptions } from './types';
+export declare function Tooltip({ children, defaultOpen, placement, open, onOpenChange, content, className, contentWidth, enable, handleClose, arrowProps, }: {
+    children: ReactNode;
+} & TooltipOptions): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/lib/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAuBvE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAMzC,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,WAAmB,EACnB,SAAiB,EACjB,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,YAAY,EACZ,MAAa,EACb,WAAW,EACX,UAAU,GACX,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,cAAc,oDA6G1C"}

package/dist/lib/tooltip/tooltip.js

@@ -0,0 +1,124 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef, cloneElement } from "react";
+import { useFloating, autoUpdate, offset, flip, shift, arrow, size, useHover, safePolygon, useFocus, useDismiss, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingArrow } from "@floating-ui/react";
+import { isUndefined, get } from "lodash-es";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import "clsx";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { cn } from "../../utils/stylesheet.js";
+function Tooltip({
+  children,
+  defaultOpen = false,
+  placement = "top",
+  open,
+  onOpenChange,
+  content,
+  className,
+  contentWidth,
+  enable = true,
+  handleClose,
+  arrowProps
+}) {
+  const [visible, setVisible] = useControllableState({
+    defaultValue: defaultOpen,
+    value: open
+  });
+  const triggerRef = useRef(null);
+  const arrowRef = useRef(null);
+  const handleOpenChange = (val, event, reason) => {
+    if (enable === "truncated" && (event == null ? void 0 : event.target)) {
+      const target = event.target;
+      const { width, height } = target.getBoundingClientRect();
+      const fullWidth = Math.max(target.scrollWidth, target.clientWidth) + (width - target.clientWidth);
+      const fullHeight = Math.max(target.scrollHeight, target.clientHeight) + (height - target.clientHeight);
+      if ([fullWidth <= width, fullHeight <= height].every(Boolean)) return;
+    }
+    setVisible(val);
+    onOpenChange == null ? void 0 : onOpenChange(val, event, reason);
+  };
+  const { refs, floatingStyles, context } = useFloating({
+    placement,
+    open: visible,
+    onOpenChange: handleOpenChange,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      flip({
+        crossAxis: placement.includes("-"),
+        fallbackAxisSideDirection: "start",
+        padding: 5
+      }),
+      shift({ padding: 5 }),
+      arrow({ element: arrowRef }),
+      size({
+        apply({ elements }) {
+          const { width } = elements.reference.getBoundingClientRect();
+          const styledWidth = contentWidth === "fit-parent" ? width : contentWidth;
+          const styles = {
+            maxWidth: isUndefined(styledWidth) ? "" : `${styledWidth}px`
+          };
+          Object.assign(elements.floating.style, styles);
+        }
+      })
+    ]
+  });
+  const hover = useHover(context, {
+    move: false,
+    handleClose: handleClose === "safe-polygon" ? safePolygon() : handleClose
+  });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+  const ref = useMergeRefs([refs.setReference, get(children, "ref"), triggerRef]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    cloneElement(
+      children,
+      getReferenceProps({
+        ref,
+        ...children == null ? void 0 : children.props,
+        "data-state": visible ? "open" : "closed"
+      })
+    ),
+    /* @__PURE__ */ jsx(FloatingPortal, { children: visible && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          ...floatingStyles
+        },
+        ref: refs.setFloating,
+        css: {
+          borderRadius: "0.5rem",
+          backgroundColor: "var(--color-neutral-600)",
+          paddingLeft: "0.75rem",
+          paddingRight: "0.75rem",
+          paddingTop: "0.5rem",
+          paddingBottom: "0.5rem",
+          fontSize: getTypographyVar("sm").fontSize,
+          lineHeight: getTypographyVar("sm").lineHeight,
+          fontWeight: 400,
+          color: "white"
+        },
+        className: cn(className),
+        ...getFloatingProps(),
+        children: [
+          content,
+          /* @__PURE__ */ jsx(
+            FloatingArrow,
+            {
+              ...arrowProps,
+              css: { fill: "var(--color-neutral-600)" },
+              className: cn(arrowProps == null ? void 0 : arrowProps.className),
+              ref: arrowRef,
+              context
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  Tooltip
+};

package/dist/lib/tooltip/types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { Placement, UseFloatingOptions, UseHoverProps, FloatingArrowProps } from '@floating-ui/react';
+export type TooltipOptions = {
+    defaultOpen?: boolean;
+    placement?: Placement;
+    open?: boolean;
+    content?: ReactNode;
+    onOpenChange?: UseFloatingOptions['onOpenChange'];
+    className?: string;
+    contentWidth?: number | 'fit-parent';
+    enable?: true | 'truncated';
+    handleClose?: UseHoverProps['handleClose'] | 'safe-polygon';
+    arrowProps?: Partial<FloatingArrowProps>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/tooltip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEtG,MAAM,MAAM,cAAc,GAAG;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACrC,MAAM,CAAC,EAAE,IAAI,GAAG,WAAW,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,GAAG,cAAc,CAAC;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CAC1C,CAAC"}

package/dist/lib/trans-html/index.d.ts

@@ -0,0 +1,2 @@
+export * from './trans-html';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/trans-html/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/trans-html/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/lib/trans-html/trans-html.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const reactI18next = require("react-i18next");
+require("react");
+require("clsx");
+require("lodash-es");
+const theme_palette = require("../../theme/palette.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const TransHtml = ({ components, classes, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactI18next.Trans,
+    {
+      components: {
+        quote: /* @__PURE__ */ jsxRuntime.jsx("q", { className: classes == null ? void 0 : classes.quote }),
+        secondary: /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: theme_palette.getColorVar("secondary.600") }, className: stylesheet.cn(classes == null ? void 0 : classes.secondary) }),
+        primary: /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: theme_palette.getColorVar("primary.600") }, className: stylesheet.cn(classes == null ? void 0 : classes.primary) }),
+        bold: /* @__PURE__ */ jsxRuntime.jsx("span", { css: { fontWeight: 600 }, className: stylesheet.cn(classes == null ? void 0 : classes.bold) }),
+        h2: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: classes == null ? void 0 : classes.h2 }),
+        ...components
+      },
+      ...props
+    }
+  );
+};
+exports.TransHtml = TransHtml;

package/dist/lib/trans-html/trans-html.d.ts

@@ -0,0 +1,3 @@
+import { TransHtmlProps } from './types';
+export declare const TransHtml: ({ components, classes, ...props }: TransHtmlProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=trans-html.d.ts.map

package/dist/lib/trans-html/trans-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trans-html.d.ts","sourceRoot":"","sources":["../../../src/lib/trans-html/trans-html.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAKzC,eAAO,MAAM,SAAS,sCAAuC,cAAc,qDAc1E,CAAC"}