@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

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

@@ -13,13 +13,25 @@ import { Icon as SvgImage } from '../Icon/index.js';
 import { cva } from 'class-variance-authority';
 
 const ContextMenu = (props) => /* @__PURE__ */ jsx(RightMenu.Root, { ...props });
-const ContextMenuTrigger = forwardRef(({
-  disabled,
-  className,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */ jsx(RightMenu.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx("div", { ref, ...props, className: cn(styles.trigger, className) }) });
-});
+const ContextMenuTrigger = forwardRef(
+  ({ disabled, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      RightMenu.Trigger,
+      {
+        asChild: true,
+        disabled,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            ...props,
+            className: cn(styles.trigger, className)
+          }
+        )
+      }
+    );
+  }
+);
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
 ContextMenu.Trigger = ContextMenuTrigger;
 const ContextMenuSubTrigger = ({
@@ -28,10 +40,24 @@ const ContextMenuSubTrigger = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(GenericMenuItem, { as: RightMenu.SubTrigger, ...props, children: [
-    /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children }),
-    /* @__PURE__ */ jsx("div", { className: "dropdown-arrow", children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right" }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    GenericMenuItem,
+    {
+      as: RightMenu.SubTrigger,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          IconWrapper,
+          {
+            icon,
+            iconDir,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "dropdown-arrow", children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right" }) })
+      ]
+    }
+  );
 };
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 ContextMenu.SubTrigger = ContextMenuSubTrigger;
@@ -50,9 +76,15 @@ const _RightMenuContent = ({
   showArrow,
   className,
   ...props
-}, ref) => /* @__PURE__ */ jsx(GenericMenuPanel, { ref, showArrow, ...props, className: cn(rightMenuContentVariants({
-  showArrow
-}), className) });
+}, ref) => /* @__PURE__ */ jsx(
+  GenericMenuPanel,
+  {
+    ref,
+    showArrow,
+    ...props,
+    className: cn(rightMenuContentVariants({ showArrow }), className)
+  }
+);
 const RightMenuContent = forwardRef(_RightMenuContent);
 const ContextMenuContent = ({
   sub,
@@ -69,24 +101,44 @@ const ContextMenuContent = ({
   const ContentElement = sub ? RightMenu.SubContent : RightMenu.Content;
   const inputModalityProps = useInputModality();
   const portalContainer = useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsx(RightMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RightMenuContent, { ...props, type: "context-menu", showArrow, as: ContentElement, ...inputModalityProps, children: [
-    showArrow && /* @__PURE__ */ jsx(Arrow, { asChild: true, as: RightMenu.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsx(Popover_Arrow, { className: "popover-arrow" }) }),
-    children
-  ] }) });
+  return /* @__PURE__ */ jsx(RightMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+    RightMenuContent,
+    {
+      ...props,
+      type: "context-menu",
+      showArrow,
+      as: ContentElement,
+      ...inputModalityProps,
+      children: [
+        showArrow && /* @__PURE__ */ jsx(
+          Arrow,
+          {
+            asChild: true,
+            as: RightMenu.Arrow,
+            width: 20,
+            height: 10,
+            children: /* @__PURE__ */ jsx(Popover_Arrow, { className: "popover-arrow" })
+          }
+        ),
+        children
+      ]
+    }
+  ) });
 };
 ContextMenuContent.displayName = "ContextMenuContent";
 ContextMenu.Content = ContextMenuContent;
-const ContextMenuGroup = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(RightMenu.Group, { ...props, className: cn(styles.group, className) });
+const ContextMenuGroup = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    RightMenu.Group,
+    {
+      ...props,
+      className: cn(styles.group, className)
+    }
+  );
 };
 ContextMenuGroup.displayName = "ContextMenuGroup";
 ContextMenu.Group = ContextMenuGroup;
-const ContextMenuSub = ({
-  ...props
-}) => {
+const ContextMenuSub = ({ ...props }) => {
   return /* @__PURE__ */ jsx(RightMenu.Sub, { ...props });
 };
 ContextMenuSub.displayName = "ContextMenuSub";
@@ -98,7 +150,22 @@ const ContextMenuItem = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(GenericMenuItem, { as: RightMenu.Item, type, ...props, children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children }) });
+  return /* @__PURE__ */ jsx(
+    GenericMenuItem,
+    {
+      as: RightMenu.Item,
+      type,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        IconWrapper,
+        {
+          icon,
+          iconDir,
+          children
+        }
+      )
+    }
+  );
 };
 ContextMenuItem.displayName = "ContextMenuItem";
 ContextMenu.Item = ContextMenuItem;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import * as RightMenu from '@radix-ui/react-context-menu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport type { HorizontalDirection } from '@/types';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn, cva } from '@/lib/cva';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper/IconWrapper';\nimport { useInputModality } from '@/hooks/internal';\nimport type { ArrowProps, ContextMenuItemProps } from './ContextMenu.types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './ContextMenu.module.css';\n\nexport const ContextMenu = (props: RightMenu.ContextMenuProps) => (\n  <RightMenu.Root {...props} />\n);\n\nconst ContextMenuTrigger = forwardRef<HTMLDivElement, RightMenu.ContextMenuTriggerProps>(\n  ({ disabled, className, ...props }, ref) => {\n    return (\n      <RightMenu.Trigger\n        asChild\n        disabled={disabled}\n      >\n        <div\n          ref={ref}\n          {...props}\n          className={cn(styles.trigger, className)}\n        />\n      </RightMenu.Trigger>\n    );\n  }\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\nContextMenu.Trigger = ContextMenuTrigger;\n\ninterface ContextMenuSubTriggerProps extends RightMenu.ContextMenuSubTriggerProps {\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\nconst ContextMenuSubTrigger = ({\n  icon,\n  iconDir,\n  children,\n  ...props\n}: ContextMenuSubTriggerProps) => {\n  return (\n    <GenericMenuItem\n      as={RightMenu.SubTrigger}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n      <div className=\"dropdown-arrow\">\n        <Icon name=\"chevron-right\" />\n      </div>\n    </GenericMenuItem>\n  );\n};\n\nContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';\nContextMenu.SubTrigger = ContextMenuSubTrigger;\n\ntype DeprecatedFields = {\n  /** @deprecated The side field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n  side?: string;\n  /** @deprecated The align field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n  align?: string;\n};\n\ntype ContextMenuContentProps = RightMenu.ContextMenuContentProps & {\n  sub?: true;\n  container?: HTMLElement | null;\n} & ArrowProps &\n  DeprecatedFields;\n\ntype ContextMenuSubContentProps = RightMenu.ContextMenuSubContentProps & {\n  sub?: never;\n  container?: HTMLElement | null;\n} & ArrowProps &\n  DeprecatedFields;\n\nconst rightMenuContentVariants = cva(styles['right-menu-content'], {\n  variants: {\n    showArrow: {\n      true: styles['right-menu-content_show-arrow'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showArrow: false,\n  },\n});\n\ntype RightMenuContentComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>> & { showArrow?: boolean }\n) => ReactNode;\n\nconst _RightMenuContent = <T extends ElementType = 'div'>(\n  {\n    showArrow,\n    className,\n    ...props\n  }: ComponentProps<typeof GenericMenuPanel<T>> & { showArrow?: boolean },\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    showArrow={showArrow}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(rightMenuContentVariants({ showArrow }), className)}\n  />\n);\n\nconst RightMenuContent: RightMenuContentComponent = forwardRef(_RightMenuContent);\n\nconst ContextMenuContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  // TODO: remove deprecated side and align\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  side,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  align,\n  ...props\n}: ContextMenuContentProps | ContextMenuSubContentProps) => {\n  const ContentElement = sub ? RightMenu.SubContent : RightMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RightMenu.Portal container={portalContainer}>\n      <RightMenuContent\n        {...props}\n        type=\"context-menu\"\n        showArrow={showArrow}\n        as={ContentElement}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RightMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow className=\"popover-arrow\" />\n          </Arrow>\n        )}\n        {children}\n      </RightMenuContent>\n    </RightMenu.Portal>\n  );\n};\n\nContextMenuContent.displayName = 'ContextMenuContent';\nContextMenu.Content = ContextMenuContent;\n\nconst ContextMenuGroup = ({ className, ...props }: RightMenu.ContextMenuGroupProps) => {\n  return (\n    <RightMenu.Group\n      {...props}\n      className={cn(styles.group, className)}\n    />\n  );\n};\n\nContextMenuGroup.displayName = 'ContextMenuGroup';\nContextMenu.Group = ContextMenuGroup;\n\nconst ContextMenuSub = ({ ...props }: RightMenu.ContextMenuGroupProps) => {\n  return <RightMenu.Sub {...props} />;\n};\n\nContextMenuSub.displayName = 'ContextMenuSub';\nContextMenu.Sub = ContextMenuSub;\n\nconst ContextMenuItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: ContextMenuItemProps) => {\n  return (\n    <GenericMenuItem\n      as={RightMenu.Item}\n      type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </GenericMenuItem>\n  );\n};\n\nContextMenuItem.displayName = 'ContextMenuItem';\nContextMenu.Item = ContextMenuItem;\n\nexport default ContextMenu;\n"],"names":["ContextMenu","props","ContextMenuTrigger","forwardRef","disabled","className","ref","cn","styles","trigger","displayName","Trigger","ContextMenuSubTrigger","icon","iconDir","children","RightMenu","SubTrigger","Icon","rightMenuContentVariants","cva","variants","showArrow","true","false","defaultVariants","_RightMenuContent","RightMenuContent","ContextMenuContent","sub","container","side","align","ContentElement","SubContent","Content","inputModalityProps","useInputModality","portalContainer","useResolvedPortalContainer","Arrow","ContextMenuGroup","group","Group","ContextMenuSub","Sub","ContextMenuItem","type","Item"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import * as RightMenu from '@radix-ui/react-context-menu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport type { HorizontalDirection } from '@/types';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn, cva } from '@/lib/cva';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper/IconWrapper';\nimport { useInputModality } from '@/hooks/internal';\nimport type { ArrowProps, ContextMenuItemProps } from './ContextMenu.types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './ContextMenu.module.css';\n\nexport const ContextMenu = (props: RightMenu.ContextMenuProps) => (\n  <RightMenu.Root {...props} />\n);\n\nconst ContextMenuTrigger = forwardRef<HTMLDivElement, RightMenu.ContextMenuTriggerProps>(\n  ({ disabled, className, ...props }, ref) => {\n    return (\n      <RightMenu.Trigger\n        asChild\n        disabled={disabled}\n      >\n        <div\n          ref={ref}\n          {...props}\n          className={cn(styles.trigger, className)}\n        />\n      </RightMenu.Trigger>\n    );\n  }\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\nContextMenu.Trigger = ContextMenuTrigger;\n\ninterface ContextMenuSubTriggerProps extends RightMenu.ContextMenuSubTriggerProps {\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\nconst ContextMenuSubTrigger = ({\n  icon,\n  iconDir,\n  children,\n  ...props\n}: ContextMenuSubTriggerProps) => {\n  return (\n    <GenericMenuItem\n      as={RightMenu.SubTrigger}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n      <div className=\"dropdown-arrow\">\n        <Icon name=\"chevron-right\" />\n      </div>\n    </GenericMenuItem>\n  );\n};\n\nContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';\nContextMenu.SubTrigger = ContextMenuSubTrigger;\n\ntype DeprecatedFields = {\n  /** @deprecated The side field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n  side?: string;\n  /** @deprecated The align field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n  align?: string;\n};\n\ntype ContextMenuContentProps = RightMenu.ContextMenuContentProps & {\n  sub?: true;\n  container?: HTMLElement | null;\n} & ArrowProps &\n  DeprecatedFields;\n\ntype ContextMenuSubContentProps = RightMenu.ContextMenuSubContentProps & {\n  sub?: never;\n  container?: HTMLElement | null;\n} & ArrowProps &\n  DeprecatedFields;\n\nconst rightMenuContentVariants = cva(styles['right-menu-content'], {\n  variants: {\n    showArrow: {\n      true: styles['right-menu-content_show-arrow'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showArrow: false,\n  },\n});\n\ntype RightMenuContentComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>> & { showArrow?: boolean }\n) => ReactNode;\n\nconst _RightMenuContent = <T extends ElementType = 'div'>(\n  {\n    showArrow,\n    className,\n    ...props\n  }: ComponentProps<typeof GenericMenuPanel<T>> & { showArrow?: boolean },\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    showArrow={showArrow}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(rightMenuContentVariants({ showArrow }), className)}\n  />\n);\n\nconst RightMenuContent: RightMenuContentComponent = forwardRef(_RightMenuContent);\n\nconst ContextMenuContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  // TODO: remove deprecated side and align\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  side,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  align,\n  ...props\n}: ContextMenuContentProps | ContextMenuSubContentProps) => {\n  const ContentElement = sub ? RightMenu.SubContent : RightMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RightMenu.Portal container={portalContainer}>\n      <RightMenuContent\n        {...props}\n        type=\"context-menu\"\n        showArrow={showArrow}\n        as={ContentElement}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RightMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow className=\"popover-arrow\" />\n          </Arrow>\n        )}\n        {children}\n      </RightMenuContent>\n    </RightMenu.Portal>\n  );\n};\n\nContextMenuContent.displayName = 'ContextMenuContent';\nContextMenu.Content = ContextMenuContent;\n\nconst ContextMenuGroup = ({ className, ...props }: RightMenu.ContextMenuGroupProps) => {\n  return (\n    <RightMenu.Group\n      {...props}\n      className={cn(styles.group, className)}\n    />\n  );\n};\n\nContextMenuGroup.displayName = 'ContextMenuGroup';\nContextMenu.Group = ContextMenuGroup;\n\nconst ContextMenuSub = ({ ...props }: RightMenu.ContextMenuGroupProps) => {\n  return <RightMenu.Sub {...props} />;\n};\n\nContextMenuSub.displayName = 'ContextMenuSub';\nContextMenu.Sub = ContextMenuSub;\n\nconst ContextMenuItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: ContextMenuItemProps) => {\n  return (\n    <GenericMenuItem\n      as={RightMenu.Item}\n      type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </GenericMenuItem>\n  );\n};\n\nContextMenuItem.displayName = 'ContextMenuItem';\nContextMenu.Item = ContextMenuItem;\n\nexport default ContextMenu;\n"],"names":["Icon"],"mappings":"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"}

package/dist/esm/components/CrossButton/CrossButton.css

@@ -1,4 +1,4 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
 
 .cross-button__StJ4Q {
   padding: var(--click-button-iconButton-sm-space-y)
@@ -10,3 +10,4 @@
 .cross-button__StJ4Q:hover {
   background: var(--click-button-iconButton-color-primary-background-hover);
 }
+}

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

@@ -5,11 +5,15 @@ import { cn } from '../../lib/cva.js';
 import { EmptyButton } from '../EmptyButton/index.js';
 import styles from './CrossButton.module.css.js';
 
-const CrossButton = forwardRef(({
-  type = "button",
-  className,
-  ...props
-}, ref) => /* @__PURE__ */ jsx(EmptyButton, { ref, type, ...props, className: cn(styles["cross-button"], className) }));
+const CrossButton = forwardRef(({ type = "button", className, ...props }, ref) => /* @__PURE__ */ jsx(
+  EmptyButton,
+  {
+    ref,
+    type,
+    ...props,
+    className: cn(styles["cross-button"], className)
+  }
+));
 CrossButton.displayName = "CrossButton";
 
 export { CrossButton };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/CrossButton/CrossButton.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport { cn } from '@/lib/cva';\nimport { EmptyButton } from '@/components/EmptyButton';\nimport styles from './CrossButton.module.css';\n\nexport const CrossButton = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement>\n>(({ type = 'button', className, ...props }, ref) => (\n  <EmptyButton\n    ref={ref}\n    type={type}\n    {...props}\n    className={cn(styles['cross-button'], className)}\n  />\n));\n\nCrossButton.displayName = 'CrossButton';\n"],"names":["CrossButton","forwardRef","type","className","props","ref","cn","styles","displayName"],"mappings":";;;;;;AAKO,MAAMA,WAAAA,GAAcC,WAGzB,CAAC;AAAA,EAAEC,IAAAA,GAAO,QAAA;AAAA,EAAUC,SAAAA;AAAAA,EAAW,GAAGC;AAAM,CAAA,EAAGC,GAAAA,qBAC3C,GAAA,CAAC,WAAA,EAAA,EACC,GAAA,EACA,MACA,GAAID,KAAAA,EACJ,SAAA,EAAWE,EAAAA,CAAGC,MAAAA,CAAO,cAAc,CAAA,EAAGJ,SAAS,IAElD;AAEDH,WAAAA,CAAYQ,WAAAA,GAAc,aAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/CrossButton/CrossButton.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport { cn } from '@/lib/cva';\nimport { EmptyButton } from '@/components/EmptyButton';\nimport styles from './CrossButton.module.css';\n\nexport const CrossButton = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement>\n>(({ type = 'button', className, ...props }, ref) => (\n  <EmptyButton\n    ref={ref}\n    type={type}\n    {...props}\n    className={cn(styles['cross-button'], className)}\n  />\n));\n\nCrossButton.displayName = 'CrossButton';\n"],"names":[],"mappings":";;;;;;AAKO,MAAM,WAAA,GAAc,UAAA,CAGzB,CAAC,EAAE,IAAA,GAAO,UAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3C,GAAA;AAAA,EAAC,WAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,IAAA;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,cAAc,GAAG,SAAS;AAAA;AACjD,CACD;AAED,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}

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

@@ -1,16 +1,12 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
-import { linkStyles } from '../../styles/linkStyles.js';
 import { formatTimezone } from '../../utils/date.js';
 import { Popover } from '../Popover/index.js';
+import { Link } from '../Link/index.js';
 import { Text } from '../Text/index.js';
 import { GridContainer } from '../GridContainer/index.js';
 import { Container } from '../Container/index.js';
 import dayjs from 'dayjs';
 
-const UnderlinedTrigger = styled(Popover.Trigger).withConfig({
-  componentId: "sc-17qquw8-0"
-})(["", ""], linkStyles);
 const formatDateDetails = (date, timezone) => {
   const isCurrentYear = dayjs().year() === date.year();
   const formatForCurrentYear = "MMM D, h:mm a";
@@ -45,35 +41,94 @@ const DateDetails = ({
     }
   }
   return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(UnderlinedTrigger, { $size: "sm", $weight: "medium", children: /* @__PURE__ */ jsx(Text, { size, weight, children: dayjs.utc(date).fromNow() }) }),
-    /* @__PURE__ */ jsx(Popover.Content, { side, showArrow: true, children: /* @__PURE__ */ jsxs(GridContainer, { columnGap: "xl", gridTemplateColumns: "repeat(2, auto)", gap: "sm", children: [
-      /* @__PURE__ */ jsx(Text, { color: "muted", size: "sm", children: "Local" }),
-      /* @__PURE__ */ jsx(Container, { justifyContent: "end", children: /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
-        formatDateDetails(dayjsDate),
-        " (",
-        formatTimezone({
-          date: dayjsDate,
-          timezone: dayjs.tz.guess()
-        }),
-        ")"
-      ] }) }),
-      systemTime && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Text, { color: "muted", size: "sm", children: "System" }),
-        /* @__PURE__ */ jsx(Container, { justifyContent: "end", children: /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
-          formatDateDetails(systemTime, systemTimeZone),
-          " (",
-          formatTimezone({
-            date: systemTime,
-            timezone: systemTimeZone
-          }),
-          ")"
-        ] }) })
-      ] }),
-      /* @__PURE__ */ jsx(Text, { color: "muted", size: "sm", children: "UTC" }),
-      /* @__PURE__ */ jsx(Container, { justifyContent: "end", children: /* @__PURE__ */ jsx(Text, { size: "sm", children: formatDateDetails(dayjsDate.utc(), "UTC") }) }),
-      /* @__PURE__ */ jsx(Text, { color: "muted", size: "sm", children: "Unix" }),
-      /* @__PURE__ */ jsx(Container, { justifyContent: "end", children: /* @__PURE__ */ jsx(Text, { size: "sm", children: Math.round(dayjsDate.valueOf() / 1e3) }) })
-    ] }) })
+    /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
+      Link,
+      {
+        component: "span",
+        size: "sm",
+        weight: "medium",
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            component: "span",
+            size,
+            weight,
+            children: dayjs.utc(date).fromNow()
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        side,
+        showArrow: true,
+        children: /* @__PURE__ */ jsxs(
+          GridContainer,
+          {
+            columnGap: "xl",
+            gridTemplateColumns: "repeat(2, auto)",
+            gap: "sm",
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  color: "muted",
+                  size: "sm",
+                  children: "Local"
+                }
+              ),
+              /* @__PURE__ */ jsx(Container, { justifyContent: "end", children: /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+                formatDateDetails(dayjsDate),
+                " (",
+                formatTimezone({
+                  date: dayjsDate,
+                  timezone: dayjs.tz.guess()
+                }),
+                ")"
+              ] }) }),
+              systemTime && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    color: "muted",
+                    size: "sm",
+                    children: "System"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Container, { justifyContent: "end", children: /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+                  formatDateDetails(systemTime, systemTimeZone),
+                  " (",
+                  formatTimezone({
+                    date: systemTime,
+                    timezone: systemTimeZone
+                  }),
+                  ")"
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  color: "muted",
+                  size: "sm",
+                  children: "UTC"
+                }
+              ),
+              /* @__PURE__ */ jsx(Container, { justifyContent: "end", children: /* @__PURE__ */ jsx(Text, { size: "sm", children: formatDateDetails(dayjsDate.utc(), "UTC") }) }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  color: "muted",
+                  size: "sm",
+                  children: "Unix"
+                }
+              ),
+              /* @__PURE__ */ jsx(Container, { justifyContent: "end", children: /* @__PURE__ */ jsx(Text, { size: "sm", children: Math.round(dayjsDate.valueOf() / 1e3) }) })
+            ]
+          }
+        )
+      }
+    )
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/DateDetails/DateDetails.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nimport { Popover } from '@/components/Popover';\nimport { Text } from '@/components/Text';\nimport { linkStyles, StyledLinkProps } from '@/styles/linkStyles';\nimport { GridContainer } from '@/components/GridContainer';\nimport { Container } from '@/components/Container';\n\nimport { dayjs, Dayjs, formatTimezone } from '@/utils/date';\n\nconst UnderlinedTrigger = styled(Popover.Trigger)<StyledLinkProps>`\n  ${linkStyles}\n`;\n\nconst formatDateDetails = (date: Dayjs, timezone?: string): string => {\n  const isCurrentYear = dayjs().year() === date.year();\n  const formatForCurrentYear = 'MMM D, h:mm a';\n  const formatForPastYear = 'MMM D, YYYY, h:mm a';\n\n  if (isCurrentYear) {\n    if (timezone) {\n      const dateWithTimezone = date.tz(timezone);\n      return dateWithTimezone\n        .format(formatForCurrentYear)\n        .replace('am', 'a.m.')\n        .replace('pm', 'p.m.');\n    }\n\n    return date.format(formatForCurrentYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n  }\n\n  if (timezone) {\n    const dateWithTimezone = date.tz(timezone);\n    return dateWithTimezone\n      .format(formatForPastYear)\n      .replace('am', 'a.m.')\n      .replace('pm', 'p.m.');\n  }\n  return date.format(formatForPastYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n};\n\nimport { DateDetailsProps } from './DateDetails.types';\n\nexport const DateDetails = ({\n  date,\n  side = 'top',\n  size = 'sm',\n  systemTimeZone,\n  weight = 'normal',\n}: DateDetailsProps) => {\n  const dayjsDate = dayjs(date);\n\n  let systemTime;\n  if (systemTimeZone) {\n    try {\n      systemTime = dayjsDate.tz(systemTimeZone);\n    } catch {\n      systemTime = dayjsDate.tz('America/New_York');\n    }\n  }\n\n  return (\n    <Popover>\n      <UnderlinedTrigger\n        $size=\"sm\"\n        $weight=\"medium\"\n      >\n        <Text\n          size={size}\n          weight={weight}\n        >\n          {dayjs.utc(date).fromNow()}\n        </Text>\n      </UnderlinedTrigger>\n      <Popover.Content\n        side={side}\n        showArrow\n      >\n        <GridContainer\n          columnGap=\"xl\"\n          gridTemplateColumns=\"repeat(2, auto)\"\n          gap=\"sm\"\n        >\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Local\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">\n              {formatDateDetails(dayjsDate)} (\n              {formatTimezone({\n                date: dayjsDate,\n                timezone: dayjs.tz.guess(),\n              })}\n              )\n            </Text>\n          </Container>\n\n          {systemTime && (\n            <>\n              <Text\n                color=\"muted\"\n                size=\"sm\"\n              >\n                System\n              </Text>\n\n              <Container justifyContent=\"end\">\n                <Text size=\"sm\">\n                  {formatDateDetails(systemTime, systemTimeZone)} (\n                  {formatTimezone({\n                    date: systemTime,\n                    timezone: systemTimeZone,\n                  })}\n                  )\n                </Text>\n              </Container>\n            </>\n          )}\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            UTC\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{formatDateDetails(dayjsDate.utc(), 'UTC')}</Text>\n          </Container>\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Unix\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{Math.round(dayjsDate.valueOf() / 1000)}</Text>\n          </Container>\n        </GridContainer>\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"names":["UnderlinedTrigger","styled","Popover","Trigger","withConfig","componentId","linkStyles","formatDateDetails","date","timezone","isCurrentYear","dayjs","year","formatForCurrentYear","formatForPastYear","dateWithTimezone","tz","format","replace","DateDetails","side","size","systemTimeZone","weight","dayjsDate","systemTime","utc","fromNow","formatTimezone","guess","Math","round","valueOf"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/DateDetails/DateDetails.tsx"],"sourcesContent":["import { Popover } from '@/components/Popover';\nimport { Text } from '@/components/Text';\nimport { Link } from '@/components/Link';\nimport { GridContainer } from '@/components/GridContainer';\nimport { Container } from '@/components/Container';\n\nimport { dayjs, Dayjs, formatTimezone } from '@/utils/date';\n\nconst formatDateDetails = (date: Dayjs, timezone?: string): string => {\n  const isCurrentYear = dayjs().year() === date.year();\n  const formatForCurrentYear = 'MMM D, h:mm a';\n  const formatForPastYear = 'MMM D, YYYY, h:mm a';\n\n  if (isCurrentYear) {\n    if (timezone) {\n      const dateWithTimezone = date.tz(timezone);\n      return dateWithTimezone\n        .format(formatForCurrentYear)\n        .replace('am', 'a.m.')\n        .replace('pm', 'p.m.');\n    }\n\n    return date.format(formatForCurrentYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n  }\n\n  if (timezone) {\n    const dateWithTimezone = date.tz(timezone);\n    return dateWithTimezone\n      .format(formatForPastYear)\n      .replace('am', 'a.m.')\n      .replace('pm', 'p.m.');\n  }\n  return date.format(formatForPastYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n};\n\nimport { DateDetailsProps } from './DateDetails.types';\n\nexport const DateDetails = ({\n  date,\n  side = 'top',\n  size = 'sm',\n  systemTimeZone,\n  weight = 'normal',\n}: DateDetailsProps) => {\n  const dayjsDate = dayjs(date);\n\n  let systemTime;\n  if (systemTimeZone) {\n    try {\n      systemTime = dayjsDate.tz(systemTimeZone);\n    } catch {\n      systemTime = dayjsDate.tz('America/New_York');\n    }\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger>\n        <Link\n          component=\"span\"\n          size=\"sm\"\n          weight=\"medium\"\n        >\n          <Text\n            component=\"span\"\n            size={size}\n            weight={weight}\n          >\n            {dayjs.utc(date).fromNow()}\n          </Text>\n        </Link>\n      </Popover.Trigger>\n      <Popover.Content\n        side={side}\n        showArrow\n      >\n        <GridContainer\n          columnGap=\"xl\"\n          gridTemplateColumns=\"repeat(2, auto)\"\n          gap=\"sm\"\n        >\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Local\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">\n              {formatDateDetails(dayjsDate)} (\n              {formatTimezone({\n                date: dayjsDate,\n                timezone: dayjs.tz.guess(),\n              })}\n              )\n            </Text>\n          </Container>\n\n          {systemTime && (\n            <>\n              <Text\n                color=\"muted\"\n                size=\"sm\"\n              >\n                System\n              </Text>\n\n              <Container justifyContent=\"end\">\n                <Text size=\"sm\">\n                  {formatDateDetails(systemTime, systemTimeZone)} (\n                  {formatTimezone({\n                    date: systemTime,\n                    timezone: systemTimeZone,\n                  })}\n                  )\n                </Text>\n              </Container>\n            </>\n          )}\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            UTC\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{formatDateDetails(dayjsDate.utc(), 'UTC')}</Text>\n          </Container>\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Unix\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{Math.round(dayjsDate.valueOf() / 1000)}</Text>\n          </Container>\n        </GridContainer>\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}