@clickhouse/click-ui 0.6.2-rc3 → 0.7.0

package/dist/cjs/components/Toast/index.cjs

@@ -1,3 +1,4 @@
+require("./Toast.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,11 +6,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const RadixUIToast = require('@radix-ui/react-toast');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
 const toastEmitter = require('./toastEmitter.cjs');
+const Toast_module = require('./Toast.module.css.cjs');
 const IconButton = require('../IconButton/index.cjs');
 const Button = require('../Button/index.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,80 +37,37 @@ const RadixUIToast__namespace = /*#__PURE__*/_interopNamespace(RadixUIToast);
 const ToastContext = react.createContext({
   createToast: () => null
 });
-const ToastIconWrapper = (props) => /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...props });
-const ToastIcon = styledComponents.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 = styledComponents.keyframes`
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-`;
-const slideIn = styledComponents.keyframes`
-  from {
-    transform: translateX(calc(100% + var(--viewport-padding)));
-  }
-  to {
-    transform: translateX(0);
-  }
-`;
-const swipeOut = styledComponents.keyframes`
-  from {
-    transform: translateX(var(--radix-toast-swipe-end-x));
+const toastIconVariants = classVarianceAuthority.cva(Toast_module.default.toast__icon, {
+  variants: {
+    type: {
+      default: Toast_module.default["toast__icon_type_default"],
+      success: Toast_module.default["toast__icon_type_success"],
+      warning: Toast_module.default["toast__icon_type_warning"],
+      danger: Toast_module.default["toast__icon_type_danger"]
+    }
+  },
+  defaultVariants: {
+    type: "default"
   }
-  to {
-    transform: translateX(calc(100% + var(--viewport-padding)));
+});
+const ToastIcon = ({
+  $type = "default",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...props, className: cva.cn(toastIconVariants({
+  type: $type
+}), className) });
+const viewportVariants = classVarianceAuthority.cva(Toast_module.default["toast-viewport"], {
+  variants: {
+    align: {
+      start: Toast_module.default["toast-viewport_align_start"],
+      end: Toast_module.default["toast-viewport_align_end"]
+    }
+  },
+  defaultVariants: {
+    align: "end"
   }
-`;
-const ToastRoot = styledComponents.styled(RadixUIToast__namespace.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 = styledComponents.styled(RadixUIToast__namespace.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 = styledComponents.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 = styledComponents.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 = styledComponents.styled.div.withConfig({
-  componentId: "sc-tmc8vl-5"
-})(["flex:1;"]);
+});
 const Toast = ({
   type,
   toastType = "foreground",
@@ -116,6 +76,7 @@ const Toast = ({
   actions = [],
   duration,
   onClose,
+  className,
   ...props
 }) => {
   let iconName = "";
@@ -126,37 +87,21 @@ const Toast = ({
   } else if (type && ["danger", "warning"].includes(type)) {
     iconName = "warning";
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(ToastRoot, { onOpenChange: onClose, duration, type: toastType, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ToastHeader, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(RadixUIToast__namespace.Root, { onOpenChange: onClose, duration, type: toastType, ...props, className: cva.cn(Toast_module.default.toast, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RadixUIToast__namespace.Title, { className: Toast_module.default.toast__header, children: [
       iconName.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ToastIcon, { name: iconName, $type: type }),
-      /* @__PURE__ */ jsxRuntime.jsx(Title, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: Toast_module.default.toast__title, children: title }),
       /* @__PURE__ */ jsxRuntime.jsx(RadixUIToast__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { icon: "cross", type: "ghost" }) })
     ] }),
-    (description || actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs(ToastDescriptionContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ToastDescriptionContent, { as: RadixUIToast__namespace.Description, children: description }),
-      actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ToastDescriptionContent, { children: actions.map(({
+    (description || actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Toast_module.default["toast__description-container"], children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RadixUIToast__namespace.Description, { className: Toast_module.default["toast__description-content"], children: description }),
+      actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Toast_module.default["toast__description-content"], children: actions.map(({
         altText,
         ...btnProps
       }) => /* @__PURE__ */ jsxRuntime.jsx(RadixUIToast__namespace.Action, { altText, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { ...btnProps }) }) }, altText)) })
     ] })
   ] });
 };
-const Viewport = styledComponents.styled(RadixUIToast__namespace.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",
@@ -213,7 +158,9 @@ const ToastProvider = ({
       children,
       Array.from(toasts[align]).map(([id, toast]) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toast, onClose: onClose(id) }, id))
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Viewport, { $align: align })
+    /* @__PURE__ */ jsxRuntime.jsx(RadixUIToast__namespace.Viewport, { className: cva.cn(viewportVariants({
+      align
+    })) })
   ] }, `toast-provider-${align}`);
 };
 

package/dist/cjs/components/Toast/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsx","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","jsxs","length","IconButton","Description","map","altText","btnProps","Button","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.cjs","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","RadixUIToast","toast","jsxs","toast__header","length","jsx","toast__title","IconButton","map","altText","btnProps","Button","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/cjs/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/cjs/components/Tooltip/Tooltip.module.css.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const content = "content__UW4Fd";
+const arrow = "arrow__4zROk";
+const styles = {
+	content: content,
+	arrow: arrow
+};
+
+exports.arrow = arrow;
+exports.content = content;
+exports.default = styles;
+//# sourceMappingURL=Tooltip.module.css.cjs.map

package/dist/cjs/components/Tooltip/Tooltip.module.css.cjs.map

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

package/dist/cjs/components/Tooltip/index.cjs

@@ -1,11 +1,13 @@
+require("./Tooltip.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const RadixTooltip = require('@radix-ui/react-tooltip');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
 const PortalContext = require('../../providers/PortalContext.cjs');
+const Tooltip_module = require('./Tooltip.module.css.cjs');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -40,38 +42,24 @@ const TooltipTrigger = (props) => {
 };
 TooltipTrigger.displayName = "TooltipTrigger";
 Tooltip.Trigger = TooltipTrigger;
-const RadixTooltipContent = styledComponents.styled(RadixTooltip__namespace.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 = styledComponents.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 = PortalContext.useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixTooltipContent, { sideOffset, $maxWidth: maxWidth, ...props, children: [
-    showArrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { as: RadixTooltip__namespace.Arrow, width: 20, height: 8 }),
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixTooltip__namespace.Content, { sideOffset, style: {
+    ...maxWidth ? {
+      "--tooltip-max-width": maxWidth
+    } : {},
+    ...style
+  }, ...props, className: cva.cn(Tooltip_module.default.content, className), children: [
+    showArrow && /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Arrow, { className: Tooltip_module.default.arrow, width: 20, height: 8 }),
     children
   ] }) });
 };

package/dist/cjs/components/Tooltip/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsx","RadixTooltip","TooltipTrigger","displayName","Trigger","RadixTooltipContent","styled","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","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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","jsx","RadixTooltip","TooltipTrigger","displayName","Trigger","TooltipContent","showArrow","sideOffset","maxWidth","className","style","container","portalContainer","useResolvedPortalContainer","jsxs","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,uBACEC,cAAA,CAACC,uBAAA,CAAa,IAAA,EAAb,EACC,IAAA,EAAMH,WAAW,KAAA,GAAQD,IAAAA,EACzB,GAAIE,KAAAA,EAEHH,QAAAA,EACH,CAAA;AAEJ;AAEA,MAAMM,cAAAA,GAAiBA,CAACH,KAAAA,KAA0C;AAChE,EAAA,uBACEC,cAAA,CAACC,uBAAA,CAAa,OAAA,EAAb,EAAqB,OAAA,EAAO,MAC3B,QAAA,kBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,GAAID,KAAAA,EAAM,CAAA,EACjB,CAAA;AAEJ,CAAA;AACAG,cAAAA,CAAeC,WAAAA,GAAc,gBAAA;AAC7BR,OAAAA,CAAQS,OAAAA,GAAUF,cAAAA;AAElB,MAAMG,iBAAiBA,CAAC;AAAA,EACtBC,SAAAA;AAAAA,EACAV,QAAAA;AAAAA,EACAW,UAAAA,GAAa,CAAA;AAAA,EACbC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGZ;AACgB,CAAA,KAAM;AACzB,EAAA,MAAMa,eAAAA,GAAkBC,yCAA2BF,SAAS,CAAA;AAE5D,EAAA,uBACEX,cAAA,CAACC,uBAAA,CAAa,MAAA,EAAb,EAAoB,SAAA,EAAWW,eAAAA,EAC9B,QAAA,kBAAAE,eAAA,CAACb,uBAAA,CAAa,OAAA,EAAb,EACC,UAAA,EACA,KAAA,EACE;AAAA,IACE,GAAIO,QAAAA,GAAW;AAAA,MAAE,qBAAA,EAAuBA;AAAAA,QAAa,EAAC;AAAA,IACtD,GAAGE;AAAAA,GACL,EAEF,GAAIX,KAAAA,EACJ,SAAA,EAAWgB,OAAGC,sBAAAA,CAAOC,OAAAA,EAASR,SAAS,CAAA,EAEtCH,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACCN,cAAA,CAACC,uBAAA,CAAa,KAAA,EAAb,EACC,SAAA,EAAWe,uBAAOE,KAAAA,EAClB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,CAAA,EAAE,CAAA;AAAA,IAGbtB;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAS,cAAAA,CAAeF,WAAAA,GAAc,gBAAA;AAC7BR,OAAAA,CAAQwB,OAAAA,GAAUd,cAAAA;;;;"}