@clickhouse/click-ui 0.6.2-rc3 → 0.7.0

package/dist/esm/components/Toast/index.js

@@ -1,89 +1,49 @@
+import "./Toast.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect, createContext } from 'react';
 import * as RadixUIToast from '@radix-ui/react-toast';
-import { styled, keyframes } from 'styled-components';
+import { cn } from '../../lib/cva.js';
 import { toastsEventEmitter } from './toastEmitter.js';
+import styles from './Toast.module.css.js';
 import { IconButton } from '../IconButton/index.js';
 import { Button } from '../Button/index.js';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
 const ToastContext = createContext({
   createToast: () => null
 });
-const ToastIconWrapper = (props) => /* @__PURE__ */ jsx(SvgImage, { ...props });
-const ToastIcon = styled(ToastIconWrapper).withConfig({
-  componentId: "sc-tmc8vl-0"
-})(["", ""], ({
-  theme,
-  $type = "default"
-}) => `
-  width: ${theme.click.toast.icon.size.width};
-  height: ${theme.click.toast.icon.size.height};
-  color: ${theme.click.toast.color.icon[$type]}
-`);
-const hide = keyframes`
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-`;
-const slideIn = keyframes`
-  from {
-    transform: translateX(calc(100% + var(--viewport-padding)));
-  }
-  to {
-    transform: translateX(0);
-  }
-`;
-const swipeOut = keyframes`
-  from {
-    transform: translateX(var(--radix-toast-swipe-end-x));
+const toastIconVariants = cva(styles.toast__icon, {
+  variants: {
+    type: {
+      default: styles["toast__icon_type_default"],
+      success: styles["toast__icon_type_success"],
+      warning: styles["toast__icon_type_warning"],
+      danger: styles["toast__icon_type_danger"]
+    }
+  },
+  defaultVariants: {
+    type: "default"
   }
-  to {
-    transform: translateX(calc(100% + var(--viewport-padding)));
+});
+const ToastIcon = ({
+  $type = "default",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(SvgImage, { ...props, className: cn(toastIconVariants({
+  type: $type
+}), className) });
+const viewportVariants = cva(styles["toast-viewport"], {
+  variants: {
+    align: {
+      start: styles["toast-viewport_align_start"],
+      end: styles["toast-viewport_align_end"]
+    }
+  },
+  defaultVariants: {
+    align: "end"
   }
-`;
-const ToastRoot = styled(RadixUIToast.Root).withConfig({
-  componentId: "sc-tmc8vl-1"
-})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;", " &[data-state='open']{animation:", " 150ms cubic-bezier(0.16,1,0.3,1);}&[data-state='closed']{animation:", " 100ms ease-in;}&[data-swipe='move']{transform:translateX(var(--radix-toast-swipe-move-x));}&[data-swipe='cancel']{transform:translateX(0);transition:transform 200ms ease-out;}&[data-swipe='end']{animation:", " 100ms ease-out;}"], ({
-  theme
-}) => `
-    padding: ${theme.click.toast.space.y} ${theme.click.toast.space.x};
-    gap: ${theme.click.toast.space.gap};
-    border-radius: ${theme.click.toast.radii.all};
-    border: 1px solid ${theme.click.toast.color.stroke.default};
-    background: ${theme.click.global.color.background.default};
-    box-shadow: ${theme.click.toast.shadow};
-  `, slideIn, hide, swipeOut);
-const ToastHeader = styled(RadixUIToast.Title).withConfig({
-  componentId: "sc-tmc8vl-2"
-})(["display:flex;justify-content:space-between;align-items:center;width:100%;gap:inherit;", ""], ({
-  theme
-}) => `
-    font: ${theme.click.toast.typography.title.default};
-    color: ${theme.click.toast.color.title.default};
-  `);
-const ToastDescriptionContainer = styled.div.withConfig({
-  componentId: "sc-tmc8vl-3"
-})(["display:flex;flex-direction:column;justify-content:space-between;width:100%;align-items:flex-end;gap:inherit;", ""], ({
-  theme
-}) => `
-    font: ${theme.click.toast.typography.title.default};
-    color: ${theme.click.toast.color.title.default};
-  `);
-const ToastDescriptionContent = styled.div.withConfig({
-  componentId: "sc-tmc8vl-4"
-})(["display:flex;align-self:stretch;gap:inherit;", ""], ({
-  theme
-}) => `
-    font: ${theme.click.toast.typography.description.default};
-    color: ${theme.click.toast.color.description.default};
-  `);
-const Title = styled.div.withConfig({
-  componentId: "sc-tmc8vl-5"
-})(["flex:1;"]);
+});
 const Toast = ({
   type,
   toastType = "foreground",
@@ -92,6 +52,7 @@ const Toast = ({
   actions = [],
   duration,
   onClose,
+  className,
   ...props
 }) => {
   let iconName = "";
@@ -102,37 +63,21 @@ const Toast = ({
   } else if (type && ["danger", "warning"].includes(type)) {
     iconName = "warning";
   }
-  return /* @__PURE__ */ jsxs(ToastRoot, { onOpenChange: onClose, duration, type: toastType, ...props, children: [
-    /* @__PURE__ */ jsxs(ToastHeader, { children: [
+  return /* @__PURE__ */ jsxs(RadixUIToast.Root, { onOpenChange: onClose, duration, type: toastType, ...props, className: cn(styles.toast, className), children: [
+    /* @__PURE__ */ jsxs(RadixUIToast.Title, { className: styles.toast__header, children: [
       iconName.length > 0 && /* @__PURE__ */ jsx(ToastIcon, { name: iconName, $type: type }),
-      /* @__PURE__ */ jsx(Title, { children: title }),
+      /* @__PURE__ */ jsx("div", { className: styles.toast__title, children: title }),
       /* @__PURE__ */ jsx(RadixUIToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { icon: "cross", type: "ghost" }) })
     ] }),
-    (description || actions.length > 0) && /* @__PURE__ */ jsxs(ToastDescriptionContainer, { children: [
-      /* @__PURE__ */ jsx(ToastDescriptionContent, { as: RadixUIToast.Description, children: description }),
-      actions.length > 0 && /* @__PURE__ */ jsx(ToastDescriptionContent, { children: actions.map(({
+    (description || actions.length > 0) && /* @__PURE__ */ jsxs("div", { className: styles["toast__description-container"], children: [
+      /* @__PURE__ */ jsx(RadixUIToast.Description, { className: styles["toast__description-content"], children: description }),
+      actions.length > 0 && /* @__PURE__ */ jsx("div", { className: styles["toast__description-content"], children: actions.map(({
         altText,
         ...btnProps
       }) => /* @__PURE__ */ jsx(RadixUIToast.Action, { altText, asChild: true, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { ...btnProps }) }) }, altText)) })
     ] })
   ] });
 };
-const Viewport = styled(RadixUIToast.Viewport).withConfig({
-  componentId: "sc-tmc8vl-6"
-})(["--viewport-padding:25px;position:fixed;bottom:0;", ";display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
-  $align
-}) => {
-  if ($align === "start") {
-    return "left: 0";
-  }
-  return `
-      right: 0;
-  `;
-}, ({
-  theme
-}) => theme.click.toast.space.gap, ({
-  theme
-}) => theme.click.toast.size.width);
 const ToastProvider = ({
   children,
   align = "end",
@@ -189,7 +134,9 @@ const ToastProvider = ({
       children,
       Array.from(toasts[align]).map(([id, toast]) => /* @__PURE__ */ jsx(Toast, { ...toast, onClose: onClose(id) }, id))
     ] }),
-    /* @__PURE__ */ jsx(Viewport, { $align: align })
+    /* @__PURE__ */ jsx(RadixUIToast.Viewport, { className: cn(viewportVariants({
+      align
+    })) })
   ] }, `toast-provider-${align}`);
 };
 

package/dist/esm/components/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { createContext, useEffect, useState } from 'react';\nimport * as RadixUIToast from '@radix-ui/react-toast';\nimport { keyframes, styled } from 'styled-components';\nimport { toastsEventEmitter } from './toastEmitter';\nimport { Icon, type IconName, type IconProps } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport { Button } from '@/components/Button';\nimport { ToastContextProps, ToastProps, ToastAlignment, ToastType } from './Toast.types';\n\nexport const ToastContext = createContext<ToastContextProps>({\n  createToast: () => null,\n});\n\n// Lazy wrapper to avoid circular dependency issues at module load time\nconst ToastIconWrapper = (props: IconProps & { $type?: ToastType }) => (\n  <Icon {...props} />\n);\n\nconst ToastIcon = styled(ToastIconWrapper)<{ $type?: ToastType }>`\n  ${({ theme, $type = 'default' }) => `\n  width: ${theme.click.toast.icon.size.width};\n  height: ${theme.click.toast.icon.size.height};\n  color: ${theme.click.toast.color.icon[$type]}\n`}\n`;\nconst hide = keyframes`\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n`;\nconst slideIn = keyframes`\n  from {\n    transform: translateX(calc(100% + var(--viewport-padding)));\n  }\n  to {\n    transform: translateX(0);\n  }\n`;\nconst swipeOut = keyframes`\n  from {\n    transform: translateX(var(--radix-toast-swipe-end-x));\n  }\n  to {\n    transform: translateX(calc(100% + var(--viewport-padding)));\n  }\n`;\n\nconst ToastRoot = styled(RadixUIToast.Root)`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  ${({ theme }) => `\n    padding: ${theme.click.toast.space.y} ${theme.click.toast.space.x};\n    gap: ${theme.click.toast.space.gap};\n    border-radius: ${theme.click.toast.radii.all};\n    border: 1px solid ${theme.click.toast.color.stroke.default};\n    background: ${theme.click.global.color.background.default};\n    box-shadow: ${theme.click.toast.shadow};\n  `}\n  &[data-state='open'] {\n    animation: ${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-state='closed'] {\n    animation: ${hide} 100ms ease-in;\n  }\n  &[data-swipe='move'] {\n    transform: translateX(var(--radix-toast-swipe-move-x));\n  }\n  &[data-swipe='cancel'] {\n    transform: translateX(0);\n    transition: transform 200ms ease-out;\n  }\n  &[data-swipe='end'] {\n    animation: ${swipeOut} 100ms ease-out;\n  }\n`;\n\nconst ToastHeader = styled(RadixUIToast.Title)`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  gap: inherit;\n  ${({ theme }) => `\n    font: ${theme.click.toast.typography.title.default};\n    color: ${theme.click.toast.color.title.default};\n  `}\n`;\n\nconst ToastDescriptionContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n  align-items: flex-end;\n  gap: inherit;\n  ${({ theme }) => `\n    font: ${theme.click.toast.typography.title.default};\n    color: ${theme.click.toast.color.title.default};\n  `}\n`;\n\nconst ToastDescriptionContent = styled.div`\n  display: flex;\n  align-self: stretch;\n  gap: inherit;\n  ${({ theme }) => `\n    font: ${theme.click.toast.typography.description.default};\n    color: ${theme.click.toast.color.description.default};\n  `}\n`;\n\nconst Title = styled.div`\n  flex: 1;\n`;\n\nexport const Toast = ({\n  type,\n  toastType = 'foreground',\n  title,\n  description,\n  actions = [],\n  duration,\n  onClose,\n\n  ...props\n}: ToastProps & { onClose: (open: boolean) => void }) => {\n  let iconName = '';\n  if (type === 'default') {\n    iconName = 'info-in-circle';\n  } else if (type === 'success') {\n    iconName = 'check';\n  } else if (type && ['danger', 'warning'].includes(type)) {\n    iconName = 'warning';\n  }\n  return (\n    <ToastRoot\n      onOpenChange={onClose}\n      duration={duration}\n      type={toastType}\n      {...props}\n    >\n      <ToastHeader>\n        {iconName.length > 0 && (\n          <ToastIcon\n            name={iconName as IconName}\n            $type={type}\n          />\n        )}\n        <Title>{title}</Title>\n        <RadixUIToast.Close asChild>\n          <IconButton\n            icon=\"cross\"\n            type=\"ghost\"\n          />\n        </RadixUIToast.Close>\n      </ToastHeader>\n      {(description || actions.length > 0) && (\n        <ToastDescriptionContainer>\n          <ToastDescriptionContent as={RadixUIToast.Description}>\n            {description}\n          </ToastDescriptionContent>\n          {actions.length > 0 && (\n            <ToastDescriptionContent>\n              {actions.map(({ altText, ...btnProps }) => (\n                <RadixUIToast.Action\n                  altText={altText}\n                  asChild\n                  key={altText}\n                >\n                  <div>\n                    <Button {...btnProps} />\n                  </div>\n                </RadixUIToast.Action>\n              ))}\n            </ToastDescriptionContent>\n          )}\n        </ToastDescriptionContainer>\n      )}\n    </ToastRoot>\n  );\n};\n\nconst Viewport = styled(RadixUIToast.Viewport)<{ $align: ToastAlignment }>`\n  --viewport-padding: 25px;\n  position: fixed;\n  bottom: 0;\n  ${({ $align }) => {\n    if ($align === 'start') {\n      return 'left: 0';\n    }\n    return `\n      right: 0;\n  `;\n  }};\n  display: flex;\n  flex-direction: column;\n  padding: var(--viewport-padding);\n  gap: ${({ theme }) => theme.click.toast.space.gap};\n  width: ${({ theme }) => theme.click.toast.size.width};\n  max-width: 100vw;\n  margin: 0;\n  list-style: none;\n  z-index: 2147483647;\n  outline: none;\n`;\n\nexport interface ToastProviderProps extends RadixUIToast.ToastProviderProps {\n  align?: ToastAlignment;\n}\n\nexport const ToastProvider = ({\n  children,\n  align = 'end',\n  ...props\n}: ToastProviderProps) => {\n  const [toasts, setToasts] = useState<Record<ToastAlignment, Map<string, ToastProps>>>({\n    start: new Map(),\n    end: new Map(),\n  });\n\n  useEffect(() => {\n    const listener = (toast: ToastProps) => {\n      setToasts(currentToasts => {\n        const alignment = toast.align ?? 'end';\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[alignment]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[alignment] = map;\n        return newToasts;\n      });\n    };\n\n    toastsEventEmitter.on(listener);\n\n    return () => toastsEventEmitter.off(listener);\n  }, []);\n\n  const onClose = (id: string) => (open: boolean) => {\n    if (!open) {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[align]);\n        map.delete(id);\n        newToasts[align] = map;\n        return newToasts;\n      });\n    }\n  };\n\n  const value = {\n    createToast: (toast: ToastProps, toastAlign: ToastAlignment = align) => {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[toastAlign]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[toastAlign] = map;\n        return newToasts;\n      });\n    },\n  };\n\n  return (\n    <RadixUIToast.Provider\n      swipeDirection={align === 'start' ? 'left' : 'right'}\n      key={`toast-provider-${align}`}\n      {...props}\n    >\n      <ToastContext.Provider value={value}>\n        {children}\n        {Array.from(toasts[align]).map(([id, toast]) => (\n          <Toast\n            key={id}\n            {...toast}\n            onClose={onClose(id)}\n          />\n        ))}\n      </ToastContext.Provider>\n      <Viewport $align={align} />\n    </RadixUIToast.Provider>\n  );\n};\n"],"names":["ToastContext","createContext","createToast","ToastIconWrapper","props","Icon","ToastIcon","styled","withConfig","componentId","theme","$type","click","toast","icon","size","width","height","color","hide","keyframes","slideIn","swipeOut","ToastRoot","RadixUIToast","Root","space","y","x","gap","radii","all","stroke","default","global","background","shadow","ToastHeader","Title","typography","title","ToastDescriptionContainer","div","ToastDescriptionContent","description","Toast","type","toastType","actions","duration","onClose","iconName","includes","length","Description","map","altText","btnProps","Viewport","$align","ToastProvider","children","align","toasts","setToasts","useState","start","Map","end","useEffect","listener","currentToasts","alignment","newToasts","set","id","String","Date","now","toastsEventEmitter","on","off","open","delete","value","toastAlign","Array","from"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { createContext, useEffect, useState } from 'react';\nimport * as RadixUIToast from '@radix-ui/react-toast';\nimport { cn, cva } from '@/lib/cva';\nimport { toastsEventEmitter } from './toastEmitter';\nimport { Icon, type IconName, type IconProps } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport { Button } from '@/components/Button';\nimport { ToastContextProps, ToastProps, ToastAlignment, ToastType } from './Toast.types';\nimport styles from './Toast.module.css';\n\nexport const ToastContext = createContext<ToastContextProps>({\n  createToast: () => null,\n});\n\nconst toastIconVariants = cva(styles.toast__icon, {\n  variants: {\n    type: {\n      default: styles['toast__icon_type_default'],\n      success: styles['toast__icon_type_success'],\n      warning: styles['toast__icon_type_warning'],\n      danger: styles['toast__icon_type_danger'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\n// Lazy wrapper to avoid circular dependency issues at module load time\nconst ToastIcon = ({\n  $type = 'default',\n  className,\n  ...props\n}: IconProps & { $type?: ToastType }) => (\n  <Icon\n    {...props}\n    className={cn(toastIconVariants({ type: $type }), className)}\n  />\n);\n\nconst viewportVariants = cva(styles['toast-viewport'], {\n  variants: {\n    align: {\n      start: styles['toast-viewport_align_start'],\n      end: styles['toast-viewport_align_end'],\n    },\n  },\n  defaultVariants: {\n    align: 'end',\n  },\n});\n\nexport const Toast = ({\n  type,\n  toastType = 'foreground',\n  title,\n  description,\n  actions = [],\n  duration,\n  onClose,\n  className,\n  ...props\n}: ToastProps & { onClose: (open: boolean) => void }) => {\n  let iconName = '';\n  if (type === 'default') {\n    iconName = 'info-in-circle';\n  } else if (type === 'success') {\n    iconName = 'check';\n  } else if (type && ['danger', 'warning'].includes(type)) {\n    iconName = 'warning';\n  }\n  return (\n    <RadixUIToast.Root\n      onOpenChange={onClose}\n      duration={duration}\n      type={toastType}\n      {...props}\n      className={cn(styles.toast, className)}\n    >\n      <RadixUIToast.Title className={styles.toast__header}>\n        {iconName.length > 0 && (\n          <ToastIcon\n            name={iconName as IconName}\n            $type={type}\n          />\n        )}\n        <div className={styles.toast__title}>{title}</div>\n        <RadixUIToast.Close asChild>\n          <IconButton\n            icon=\"cross\"\n            type=\"ghost\"\n          />\n        </RadixUIToast.Close>\n      </RadixUIToast.Title>\n      {(description || actions.length > 0) && (\n        <div className={styles['toast__description-container']}>\n          <RadixUIToast.Description className={styles['toast__description-content']}>\n            {description}\n          </RadixUIToast.Description>\n          {actions.length > 0 && (\n            <div className={styles['toast__description-content']}>\n              {actions.map(({ altText, ...btnProps }) => (\n                <RadixUIToast.Action\n                  altText={altText}\n                  asChild\n                  key={altText}\n                >\n                  <div>\n                    <Button {...btnProps} />\n                  </div>\n                </RadixUIToast.Action>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n    </RadixUIToast.Root>\n  );\n};\n\nexport interface ToastProviderProps extends RadixUIToast.ToastProviderProps {\n  align?: ToastAlignment;\n}\n\nexport const ToastProvider = ({\n  children,\n  align = 'end',\n  ...props\n}: ToastProviderProps) => {\n  const [toasts, setToasts] = useState<Record<ToastAlignment, Map<string, ToastProps>>>({\n    start: new Map(),\n    end: new Map(),\n  });\n\n  useEffect(() => {\n    const listener = (toast: ToastProps) => {\n      setToasts(currentToasts => {\n        const alignment = toast.align ?? 'end';\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[alignment]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[alignment] = map;\n        return newToasts;\n      });\n    };\n\n    toastsEventEmitter.on(listener);\n\n    return () => toastsEventEmitter.off(listener);\n  }, []);\n\n  const onClose = (id: string) => (open: boolean) => {\n    if (!open) {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[align]);\n        map.delete(id);\n        newToasts[align] = map;\n        return newToasts;\n      });\n    }\n  };\n\n  const value = {\n    createToast: (toast: ToastProps, toastAlign: ToastAlignment = align) => {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[toastAlign]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[toastAlign] = map;\n        return newToasts;\n      });\n    },\n  };\n\n  return (\n    <RadixUIToast.Provider\n      swipeDirection={align === 'start' ? 'left' : 'right'}\n      key={`toast-provider-${align}`}\n      {...props}\n    >\n      <ToastContext.Provider value={value}>\n        {children}\n        {Array.from(toasts[align]).map(([id, toast]) => (\n          <Toast\n            key={id}\n            {...toast}\n            onClose={onClose(id)}\n          />\n        ))}\n      </ToastContext.Provider>\n      <RadixUIToast.Viewport className={cn(viewportVariants({ align }))} />\n    </RadixUIToast.Provider>\n  );\n};\n"],"names":["ToastContext","createContext","createToast","toastIconVariants","cva","styles","toast__icon","variants","type","default","success","warning","danger","defaultVariants","ToastIcon","$type","className","props","Icon","cn","viewportVariants","align","start","end","Toast","toastType","title","description","actions","duration","onClose","iconName","includes","toast","toast__header","length","toast__title","map","altText","btnProps","ToastProvider","children","toasts","setToasts","useState","Map","useEffect","listener","currentToasts","alignment","newToasts","set","id","String","Date","now","toastsEventEmitter","on","off","open","delete","value","toastAlign","Array","from"],"mappings":"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"}

package/dist/esm/components/Tooltip/Tooltip.css

@@ -0,0 +1,17 @@
+.content__UW4Fd {
+  --tooltip-max-width: initial;
+
+  display: flex;
+  max-width: var(--tooltip-max-width);
+  padding: var(--click-tooltip-space-y) var(--click-tooltip-space-x);
+  align-items: flex-start;
+  border-radius: var(--click-tooltip-radii-all);
+  background: var(--click-tooltip-color-background-default);
+  color: var(--click-tooltip-color-label-default);
+  font: var(--click-tooltip-typography-label-default);
+  white-space: pre-wrap;
+}
+
+.arrow__4zROk {
+  fill: var(--click-tooltip-color-background-default);
+}

package/dist/esm/components/Tooltip/Tooltip.module.css.js

@@ -0,0 +1,9 @@
+const content = "content__UW4Fd";
+const arrow = "arrow__4zROk";
+const styles = {
+	content: content,
+	arrow: arrow
+};
+
+export { arrow, content, styles as default };
+//# sourceMappingURL=Tooltip.module.css.js.map

package/dist/esm/components/Tooltip/Tooltip.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/esm/components/Tooltip/index.js

@@ -1,7 +1,9 @@
+import "./Tooltip.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
 import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
+import styles from './Tooltip.module.css.js';
 
 const Tooltip = ({
   children,
@@ -16,38 +18,24 @@ const TooltipTrigger = (props) => {
 };
 TooltipTrigger.displayName = "TooltipTrigger";
 Tooltip.Trigger = TooltipTrigger;
-const RadixTooltipContent = styled(RadixTooltip.Content).withConfig({
-  componentId: "sc-ymqkp1-0"
-})(["display:flex;align-items:flex-start;", ""], ({
-  theme,
-  $maxWidth
-}) => `
-    padding: ${theme.click.tooltip.space.y} ${theme.click.tooltip.space.x};
-    color: ${theme.click.tooltip.color.label.default};
-    background: ${theme.click.tooltip.color.background.default};
-    border-radius: ${theme.click.tooltip.radii.all};
-    font: ${theme.click.tooltip.typography.label.default};
-    white-space: pre-wrap;
-    ${$maxWidth && `max-width: ${$maxWidth}`};
-  `);
-const Arrow = styled.svg.withConfig({
-  componentId: "sc-ymqkp1-1"
-})(["", ";"], ({
-  theme
-}) => `
-    fill: ${theme.click.tooltip.color.background.default};
-  `);
 const TooltipContent = ({
   showArrow,
   children,
   sideOffset = 6,
   maxWidth,
+  className,
+  style,
   container,
   ...props
 }) => {
   const portalContainer = useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsx(RadixTooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RadixTooltipContent, { sideOffset, $maxWidth: maxWidth, ...props, children: [
-    showArrow && /* @__PURE__ */ jsx(Arrow, { as: RadixTooltip.Arrow, width: 20, height: 8 }),
+  return /* @__PURE__ */ jsx(RadixTooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RadixTooltip.Content, { sideOffset, style: {
+    ...maxWidth ? {
+      "--tooltip-max-width": maxWidth
+    } : {},
+    ...style
+  }, ...props, className: cn(styles.content, className), children: [
+    showArrow && /* @__PURE__ */ jsx(RadixTooltip.Arrow, { className: styles.arrow, width: 20, height: 8 }),
     children
   ] }) });
 };

package/dist/esm/components/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { HTMLAttributes } from 'react';\nimport { styled } from 'styled-components';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport { TooltipContentProps, TooltipProps } from './Tooltip.types';\n\nexport const Tooltip = ({ children, open, disabled, ...props }: TooltipProps) => {\n  return (\n    <RadixTooltip.Root\n      open={disabled ? false : open}\n      {...props}\n    >\n      {children}\n    </RadixTooltip.Root>\n  );\n};\n\nconst TooltipTrigger = (props: HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <RadixTooltip.Trigger asChild>\n      <div {...props} />\n    </RadixTooltip.Trigger>\n  );\n};\nTooltipTrigger.displayName = 'TooltipTrigger';\nTooltip.Trigger = TooltipTrigger;\nconst RadixTooltipContent = styled(RadixTooltip.Content)<{ $maxWidth?: string }>`\n  display: flex;\n  align-items: flex-start;\n  ${({ theme, $maxWidth }) => `\n    padding: ${theme.click.tooltip.space.y} ${theme.click.tooltip.space.x};\n    color: ${theme.click.tooltip.color.label.default};\n    background: ${theme.click.tooltip.color.background.default};\n    border-radius: ${theme.click.tooltip.radii.all};\n    font: ${theme.click.tooltip.typography.label.default};\n    white-space: pre-wrap;\n    ${$maxWidth && `max-width: ${$maxWidth}`};\n  `}\n`;\n\nconst Arrow = styled.svg`\n  ${({ theme }) => `\n    fill: ${theme.click.tooltip.color.background.default};\n  `};\n`;\n\nconst TooltipContent = ({\n  showArrow,\n  children,\n  sideOffset = 6,\n  maxWidth,\n  container,\n  ...props\n}: TooltipContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixTooltip.Portal container={portalContainer}>\n      <RadixTooltipContent\n        sideOffset={sideOffset}\n        $maxWidth={maxWidth}\n        {...props}\n      >\n        {showArrow && (\n          <Arrow\n            as={RadixTooltip.Arrow}\n            width={20}\n            height={8}\n          />\n        )}\n        {children}\n      </RadixTooltipContent>\n    </RadixTooltip.Portal>\n  );\n};\nTooltipContent.displayName = 'TooltipContent';\nTooltip.Content = TooltipContent;\n"],"names":["Tooltip","children","open","disabled","props","TooltipTrigger","displayName","Trigger","RadixTooltipContent","styled","RadixTooltip","Content","withConfig","componentId","theme","$maxWidth","click","tooltip","space","y","x","color","label","default","background","radii","all","typography","Arrow","svg","TooltipContent","showArrow","sideOffset","maxWidth","container","portalContainer","useResolvedPortalContainer"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { CSSProperties, HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport { TooltipContentProps, TooltipProps } from './Tooltip.types';\nimport styles from './Tooltip.module.css';\n\nexport const Tooltip = ({ children, open, disabled, ...props }: TooltipProps) => {\n  return (\n    <RadixTooltip.Root\n      open={disabled ? false : open}\n      {...props}\n    >\n      {children}\n    </RadixTooltip.Root>\n  );\n};\n\nconst TooltipTrigger = (props: HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <RadixTooltip.Trigger asChild>\n      <div {...props} />\n    </RadixTooltip.Trigger>\n  );\n};\nTooltipTrigger.displayName = 'TooltipTrigger';\nTooltip.Trigger = TooltipTrigger;\n\nconst TooltipContent = ({\n  showArrow,\n  children,\n  sideOffset = 6,\n  maxWidth,\n  className,\n  style,\n  container,\n  ...props\n}: TooltipContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixTooltip.Portal container={portalContainer}>\n      <RadixTooltip.Content\n        sideOffset={sideOffset}\n        style={\n          {\n            ...(maxWidth ? { '--tooltip-max-width': maxWidth } : {}),\n            ...style,\n          } as CSSProperties\n        }\n        {...props}\n        className={cn(styles.content, className)}\n      >\n        {showArrow && (\n          <RadixTooltip.Arrow\n            className={styles.arrow}\n            width={20}\n            height={8}\n          />\n        )}\n        {children}\n      </RadixTooltip.Content>\n    </RadixTooltip.Portal>\n  );\n};\nTooltipContent.displayName = 'TooltipContent';\nTooltip.Content = TooltipContent;\n"],"names":["Tooltip","children","open","disabled","props","TooltipTrigger","displayName","Trigger","TooltipContent","showArrow","sideOffset","maxWidth","className","style","container","portalContainer","useResolvedPortalContainer","cn","styles","content","arrow","Content"],"mappings":";;;;;;AAOO,MAAMA,UAAUA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAUC,IAAAA;AAAAA,EAAMC,QAAAA;AAAAA,EAAU,GAAGC;AAAoB,CAAA,KAAM;AAC/E,EAAA,uBACE,GAAA,CAAC,YAAA,CAAa,IAAA,EAAb,EACC,IAAA,EAAMD,WAAW,KAAA,GAAQD,IAAAA,EACzB,GAAIE,KAAAA,EAEHH,QAAAA,EACH,CAAA;AAEJ;AAEA,MAAMI,cAAAA,GAAiBA,CAACD,KAAAA,KAA0C;AAChE,EAAA,uBACE,GAAA,CAAC,YAAA,CAAa,OAAA,EAAb,EAAqB,OAAA,EAAO,MAC3B,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,GAAIA,KAAAA,EAAM,CAAA,EACjB,CAAA;AAEJ,CAAA;AACAC,cAAAA,CAAeC,WAAAA,GAAc,gBAAA;AAC7BN,OAAAA,CAAQO,OAAAA,GAAUF,cAAAA;AAElB,MAAMG,iBAAiBA,CAAC;AAAA,EACtBC,SAAAA;AAAAA,EACAR,QAAAA;AAAAA,EACAS,UAAAA,GAAa,CAAA;AAAA,EACbC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGV;AACgB,CAAA,KAAM;AACzB,EAAA,MAAMW,eAAAA,GAAkBC,2BAA2BF,SAAS,CAAA;AAE5D,EAAA,uBACE,GAAA,CAAC,YAAA,CAAa,MAAA,EAAb,EAAoB,SAAA,EAAWC,eAAAA,EAC9B,QAAA,kBAAA,IAAA,CAAC,YAAA,CAAa,OAAA,EAAb,EACC,UAAA,EACA,KAAA,EACE;AAAA,IACE,GAAIJ,QAAAA,GAAW;AAAA,MAAE,qBAAA,EAAuBA;AAAAA,QAAa,EAAC;AAAA,IACtD,GAAGE;AAAAA,GACL,EAEF,GAAIT,KAAAA,EACJ,SAAA,EAAWa,GAAGC,MAAAA,CAAOC,OAAAA,EAASP,SAAS,CAAA,EAEtCH,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACC,GAAA,CAAC,YAAA,CAAa,KAAA,EAAb,EACC,SAAA,EAAWS,OAAOE,KAAAA,EAClB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,CAAA,EAAE,CAAA;AAAA,IAGbnB;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAO,cAAAA,CAAeF,WAAAA,GAAc,gBAAA;AAC7BN,OAAAA,CAAQqB,OAAAA,GAAUb,cAAAA;;;;"}