@punkbit/cui 0.0.248-rc.1 → 0.2.0-rc.3

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

@@ -0,0 +1,125 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, createContext, forwardRef, useContext } from 'react';
+import { styled } from 'styled-components';
+import { EmptyButton } from '../EmptyButton/index.js';
+import { IconWrapper } from './IconWrapper.js';
+import { Icon as SvgImage } from '../Icon/index.js';
+
+const NavContext = createContext({
+  open: false,
+  onOpenChange: () => null
+});
+const CollapsibleContainer = styled.div.withConfig({
+  componentId: "sc-jssfa0-0"
+})(["width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open='true']{transform:rotate(90deg);}}[data-collapsible-header]:hover [data-trigger-icon]{visibility:visible;}"]);
+const Collapsible = ({
+  open: openProp,
+  onOpenChange: onOpenChangeProp,
+  children,
+  ...props
+}) => {
+  const [open, setOpen] = useState(openProp ?? false);
+  const onOpenChange = () => {
+    setOpen((open2) => {
+      if (typeof onOpenChangeProp === "function") {
+        onOpenChangeProp(!open2);
+      }
+      return !open2;
+    });
+  };
+  useEffect(() => {
+    setOpen((open2) => openProp ?? open2);
+  }, [openProp]);
+  const value = {
+    open: openProp ?? open,
+    onOpenChange
+  };
+  return /* @__PURE__ */ jsx(CollapsibleContainer, { ...props, children: /* @__PURE__ */ jsx(NavContext.Provider, { value, children }) });
+};
+const CollapsipleHeaderContainer = styled.div.withConfig({
+  componentId: "sc-jssfa0-1"
+})(["margin-left:", ";user-select:none;"], ({
+  theme,
+  $indicatorDir
+}) => $indicatorDir === "start" ? 0 : theme.click.image.sm.size.width);
+const CollapsipleHeader = forwardRef(({
+  indicatorDir = "start",
+  icon,
+  iconDir,
+  children,
+  wrapInTrigger,
+  onClick: onClickProp,
+  ...props
+}, ref) => {
+  const {
+    onOpenChange
+  } = useContext(NavContext);
+  return /* @__PURE__ */ jsxs(CollapsipleHeaderContainer, { $indicatorDir: indicatorDir, ref, onClick: (e) => {
+    if (wrapInTrigger && typeof onOpenChange === "function") {
+      onOpenChange();
+    }
+    if (typeof onClickProp === "function") {
+      onClickProp(e);
+    }
+  }, "data-collapsible-header": true, ...props, children: [
+    indicatorDir === "start" && /* @__PURE__ */ jsx(Collapsible.Trigger, {}),
+    children && /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children }),
+    indicatorDir === "end" && /* @__PURE__ */ jsx(Collapsible.Trigger, {})
+  ] });
+});
+CollapsipleHeader.displayName = "CollapsibleHeader";
+Collapsible.Header = CollapsipleHeader;
+const CollapsipleTriggerButton = styled(EmptyButton).withConfig({
+  componentId: "sc-jssfa0-2"
+})(["display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;"]);
+const CollapsipleTrigger = ({
+  onClick: onClickProp,
+  children,
+  indicatorDir = "start",
+  icon,
+  iconDir = "start",
+  ...props
+}) => {
+  const {
+    open,
+    onOpenChange
+  } = useContext(NavContext);
+  const onClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (onClickProp) {
+      onClickProp(e);
+    }
+    onOpenChange();
+  };
+  return /* @__PURE__ */ jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, "aria-label": "trigger children", ...props, children: [
+    indicatorDir === "start" && /* @__PURE__ */ jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" }),
+    children && /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children }),
+    indicatorDir === "end" && /* @__PURE__ */ jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" })
+  ] });
+};
+CollapsipleTrigger.displayName = "CollapsibleTrigger";
+Collapsible.Trigger = CollapsipleTrigger;
+const CollapsibleContentWrapper = styled.div.withConfig({
+  componentId: "sc-jssfa0-3"
+})(["", ""], ({
+  theme,
+  $indicatorDir
+}) => $indicatorDir ? `${$indicatorDir === "start" ? "margin-left" : "margin-right"}: ${theme.click.image.sm.size.width}` : "");
+const CollapsipleContent = ({
+  indicatorDir,
+  ...props
+}) => {
+  const {
+    open
+  } = useContext(NavContext);
+  if (!open) {
+    return;
+  }
+  return /* @__PURE__ */ jsx(CollapsibleContentWrapper, { $indicatorDir: indicatorDir, ...props });
+};
+CollapsipleContent.displayName = "CollapsibleContent";
+Collapsible.Content = CollapsipleContent;
+
+export { Collapsible };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import {\n  createContext,\n  useState,\n  HTMLAttributes,\n  useContext,\n  useEffect,\n  forwardRef,\n} from 'react';\nimport { styled } from 'styled-components';\n\nimport { Icon, type ImageName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nimport { IconWrapper } from './IconWrapper';\nimport { CollapsibleProps } from './Collapsible.types';\n\ntype ContextProps = {\n  open: boolean;\n  onOpenChange: () => void;\n};\n\nconst NavContext = createContext<ContextProps>({\n  open: false,\n  onOpenChange: () => null,\n});\nconst CollapsibleContainer = styled.div`\n  width: 100%;\n  [data-trigger-icon] {\n    visibility: hidden;\n    transition: transform 150ms cubic-bezier(0.87, 0, 0.13, 1);\n    &[data-open='true'] {\n      transform: rotate(90deg);\n    }\n  }\n  [data-collapsible-header]:hover [data-trigger-icon] {\n    visibility: visible;\n  }\n`;\n\nexport const Collapsible = ({\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  children,\n  ...props\n}: CollapsibleProps) => {\n  const [open, setOpen] = useState(openProp ?? false);\n  const onOpenChange = () => {\n    setOpen(open => {\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(!open);\n      }\n      return !open;\n    });\n  };\n\n  useEffect(() => {\n    setOpen(open => openProp ?? open);\n  }, [openProp]);\n\n  const value = {\n    open: openProp ?? open,\n    onOpenChange,\n  };\n  return (\n    <CollapsibleContainer {...props}>\n      <NavContext.Provider value={value}>{children}</NavContext.Provider>\n    </CollapsibleContainer>\n  );\n};\n\nconst CollapsipleHeaderContainer = styled.div<{ $indicatorDir: HorizontalDirection }>`\n  margin-left: ${({ theme, $indicatorDir }) =>\n    $indicatorDir === 'start' ? 0 : theme.click.image.sm.size.width};\n  user-select: none;\n`;\n\ninterface CollapsipleHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  indicatorDir?: HorizontalDirection;\n  wrapInTrigger?: boolean;\n}\n\nconst CollapsipleHeader = forwardRef<HTMLDivElement, CollapsipleHeaderProps>(\n  (\n    {\n      indicatorDir = 'start',\n      icon,\n      iconDir,\n      children,\n      wrapInTrigger,\n      onClick: onClickProp,\n      ...props\n    }: CollapsipleHeaderProps,\n    ref\n  ) => {\n    const { onOpenChange } = useContext(NavContext);\n    return (\n      <CollapsipleHeaderContainer\n        $indicatorDir={indicatorDir}\n        ref={ref}\n        onClick={e => {\n          if (wrapInTrigger && typeof onOpenChange === 'function') {\n            onOpenChange();\n          }\n          if (typeof onClickProp === 'function') {\n            onClickProp(e);\n          }\n        }}\n        data-collapsible-header\n        {...props}\n      >\n        {indicatorDir === 'start' && <Collapsible.Trigger />}\n        {children && (\n          <IconWrapper\n            icon={icon}\n            iconDir={iconDir}\n          >\n            {children}\n          </IconWrapper>\n        )}\n        {indicatorDir === 'end' && <Collapsible.Trigger />}\n      </CollapsipleHeaderContainer>\n    );\n  }\n);\n\nCollapsipleHeader.displayName = 'CollapsibleHeader';\nCollapsible.Header = CollapsipleHeader;\n\nconst CollapsipleTriggerButton = styled(EmptyButton)<{\n  $indicatorDir: HorizontalDirection;\n}>`\n  display: flex;\n  align-items: center;\n  font: inherit;\n  color: inherit;\n  cursor: inherit;\n`;\ninterface CollapsipleTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  indicatorDir?: HorizontalDirection;\n}\n\nconst CollapsipleTrigger = ({\n  onClick: onClickProp,\n  children,\n  indicatorDir = 'start',\n  icon,\n  iconDir = 'start',\n  ...props\n}: CollapsipleTriggerProps) => {\n  const { open, onOpenChange } = useContext(NavContext);\n  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (onClickProp) {\n      onClickProp(e);\n    }\n    onOpenChange();\n  };\n\n  return (\n    <CollapsipleTriggerButton\n      onClick={onClick}\n      $indicatorDir={indicatorDir}\n      aria-label=\"trigger children\"\n      {...props}\n    >\n      {indicatorDir === 'start' && (\n        <Icon\n          data-trigger-icon\n          name=\"chevron-right\"\n          data-open={open.toString()}\n          size=\"sm\"\n        />\n      )}\n      {children && (\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n      )}\n      {indicatorDir === 'end' && (\n        <Icon\n          data-trigger-icon\n          name=\"chevron-right\"\n          data-open={open.toString()}\n          size=\"sm\"\n        />\n      )}\n    </CollapsipleTriggerButton>\n  );\n};\n\nCollapsipleTrigger.displayName = 'CollapsibleTrigger';\nCollapsible.Trigger = CollapsipleTrigger;\n\nconst CollapsibleContentWrapper = styled.div<{ $indicatorDir?: HorizontalDirection }>`\n  ${({ theme, $indicatorDir }) =>\n    $indicatorDir\n      ? `${$indicatorDir === 'start' ? 'margin-left' : 'margin-right'}: ${\n          theme.click.image.sm.size.width\n        }`\n      : ''}\n`;\n\nconst CollapsipleContent = ({\n  indicatorDir,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { indicatorDir?: HorizontalDirection }) => {\n  const { open } = useContext(NavContext);\n  if (!open) {\n    return;\n  }\n  return (\n    <CollapsibleContentWrapper\n      $indicatorDir={indicatorDir}\n      {...props}\n    />\n  );\n};\n\nCollapsipleContent.displayName = 'CollapsibleContent';\nCollapsible.Content = CollapsipleContent;\n"],"names":["NavContext","createContext","open","onOpenChange","CollapsibleContainer","styled","div","withConfig","componentId","Collapsible","openProp","onOpenChangeProp","children","props","setOpen","useState","useEffect","value","CollapsipleHeaderContainer","theme","$indicatorDir","click","image","sm","size","width","CollapsipleHeader","forwardRef","indicatorDir","icon","iconDir","wrapInTrigger","onClick","onClickProp","ref","useContext","e","displayName","Header","CollapsipleTriggerButton","EmptyButton","CollapsipleTrigger","preventDefault","stopPropagation","Icon","toString","Trigger","CollapsibleContentWrapper","CollapsipleContent","Content"],"mappings":"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"}

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

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+import { Dialog } from '../Dialog/index.js';
+import { Container } from '../Container/index.js';
+import { Text } from '../Text/index.js';
+import { Separator } from '../Separator/index.js';
+
+const ActionsWrapper = styled.div.withConfig({
+  componentId: "sc-n8hm07-0"
+})(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
+  theme
+}) => theme.breakpoint.sizes.sm);
+const DialogContent = styled.div.withConfig({
+  componentId: "sc-n8hm07-1"
+})(["overflow:hidden;display:flex;flex-direction:column;"]);
+const ConfirmationDialog = ({
+  children,
+  disabled,
+  loading,
+  message,
+  onCancel,
+  onConfirm,
+  open,
+  primaryActionLabel = "Confirm",
+  primaryActionType = "primary",
+  secondaryActionLabel = "Cancel",
+  showClose,
+  title,
+  ...props
+}) => {
+  if (children && message) {
+    throw new Error("You can't pass children and message props at the same time");
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (open2) => {
+    if (!open2 && onCancel) {
+      onCancel();
+    }
+  }, children: /* @__PURE__ */ jsxs(DialogContent, { as: Dialog.Content, title, showClose, ...props, children: [
+    /* @__PURE__ */ jsx(Container, { overflow: "auto", grow: "1", orientation: "vertical", children: children ? children : /* @__PURE__ */ jsx(Text, { children: message }) }),
+    /* @__PURE__ */ jsx(Separator, { size: "xl" }),
+    /* @__PURE__ */ jsxs(ActionsWrapper, { children: [
+      /* @__PURE__ */ jsx(Dialog.Close, { label: secondaryActionLabel, "data-testid": "cancel-action-button" }),
+      /* @__PURE__ */ jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, autoFocus: open, onClick: () => {
+        if (onConfirm) {
+          onConfirm();
+        }
+      }, "data-testid": "confirm-action-button" })
+    ] })
+  ] }) });
+};
+
+export { ConfirmationDialog };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/ConfirmationDialog/ConfirmationDialog.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { Dialog } from '@/components/Dialog';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\nimport { ReactElement } from 'react';\nimport { styled } from 'styled-components';\nimport { ConfirmationDialogProps } from './ConfirmationDialog.types';\n\nconst ActionsWrapper = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  gap: ${props => props.theme.click.dialog.space.gap};\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.sm}) {\n    flex-direction: column;\n  }\n`;\n\nconst DialogContent = styled.div`\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const ConfirmationDialog = ({\n  children,\n  disabled,\n  loading,\n  message,\n  onCancel,\n  onConfirm,\n  open,\n  primaryActionLabel = 'Confirm',\n  primaryActionType = 'primary',\n  secondaryActionLabel = 'Cancel',\n  showClose,\n  title,\n  ...props\n}: ConfirmationDialogProps): ReactElement => {\n  if (children && message) {\n    throw new Error(\"You can't pass children and message props at the same time\");\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(open: boolean) => {\n        if (!open && onCancel) {\n          onCancel();\n        }\n      }}\n    >\n      <DialogContent\n        as={Dialog.Content}\n        title={title}\n        showClose={showClose}\n        {...props}\n      >\n        <Container\n          overflow=\"auto\"\n          grow=\"1\"\n          orientation=\"vertical\"\n        >\n          {children ? children : <Text>{message}</Text>}\n        </Container>\n        <Separator size=\"xl\" />\n        <ActionsWrapper>\n          <Dialog.Close\n            label={secondaryActionLabel}\n            data-testid=\"cancel-action-button\"\n          />\n          <Dialog.Close\n            loading={!!loading}\n            disabled={!!disabled || !!loading}\n            type={primaryActionType}\n            label={primaryActionLabel}\n            autoFocus={open}\n            onClick={() => {\n              if (onConfirm) {\n                onConfirm();\n              }\n            }}\n            data-testid=\"confirm-action-button\"\n          />\n        </ActionsWrapper>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"names":["ActionsWrapper","styled","div","withConfig","componentId","props","theme","click","dialog","space","gap","breakpoint","sizes","sm","DialogContent","ConfirmationDialog","children","disabled","loading","message","onCancel","onConfirm","open","primaryActionLabel","primaryActionType","secondaryActionLabel","showClose","title","Error","Dialog","Content"],"mappings":";;;;;;;AAQA,MAAMA,cAAAA,GAAiBC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4CAAA,EAAA,qBAAA,EAAA,2BAAA,CAAA,EAGxBC,CAAAA,KAAAA,KAASA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,MAAAA,CAAOC,KAAAA,CAAMC,KAC1B,CAAC;AAAA,EAAEJ;AAAM,CAAA,KAAMA,KAAAA,CAAMK,UAAAA,CAAWC,KAAAA,CAAMC,EAAE,CAAA;AAK/D,MAAMC,aAAAA,GAAgBb,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qDAAA,CAAA,CAAA;AAMzB,MAAMW,qBAAqBA,CAAC;AAAA,EACjCC,QAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,kBAAAA,GAAqB,SAAA;AAAA,EACrBC,iBAAAA,GAAoB,SAAA;AAAA,EACpBC,oBAAAA,GAAuB,QAAA;AAAA,EACvBC,SAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACA,GAAGtB;AACoB,CAAA,KAAoB;AAC3C,EAAA,IAAIW,YAAYG,OAAAA,EAAS;AACvB,IAAA,MAAM,IAAIS,MAAM,4DAA4D,CAAA;AAAA,EAC9E;AAEA,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EACC,IAAA,EACA,YAAA,EAAc,CAACN,KAAAA,KAAkB;AAC/B,IAAA,IAAI,CAACA,SAAQF,QAAAA,EAAU;AACrBA,MAAAA,QAAAA,EAAS;AAAA,IACX;AAAA,EACF,CAAA,EAEA,+BAAC,aAAA,EAAA,EACC,EAAA,EAAIS,OAAOC,OAAAA,EACX,KAAA,EACA,SAAA,EACA,GAAIzB,KAAAA,EAEJ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,EAAS,MAAA,EACT,IAAA,EAAK,GAAA,EACL,WAAA,EAAY,UAAA,EAEXW,QAAAA,EAAAA,QAAAA,GAAWA,QAAAA,mBAAW,GAAA,CAAC,IAAA,EAAA,EAAMG,QAAAA,EAAAA,OAAAA,EAAQ,CAAA,EACxC,CAAA;AAAA,oBACA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAI,CAAA;AAAA,yBACnB,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAO,KAAA,EAAP,EACC,KAAA,EAAOM,oBAAAA,EACP,eAAY,sBAAA,EAAsB,CAAA;AAAA,sBAEpC,GAAA,CAAC,OAAO,KAAA,EAAP,EACC,SAAS,CAAC,CAACP,OAAAA,EACX,QAAA,EAAU,CAAC,CAACD,YAAY,CAAC,CAACC,SAC1B,IAAA,EAAMM,iBAAAA,EACN,OAAOD,kBAAAA,EACP,SAAA,EAAWD,IAAAA,EACX,OAAA,EAAS,MAAM;AACb,QAAA,IAAID,SAAAA,EAAW;AACbA,UAAAA,SAAAA,EAAU;AAAA,QACZ;AAAA,MACF,CAAA,EACA,eAAY,uBAAA,EAAuB;AAAA,KAAA,EAEvC;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,84 @@
+import { jsx } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+import { forwardRef } from 'react';
+
+const _Container = ({
+  component,
+  alignItems,
+  children,
+  fillWidth = true,
+  gap = "none",
+  grow,
+  shrink,
+  isResponsive,
+  justifyContent = "start",
+  maxWidth,
+  minWidth,
+  orientation = "horizontal",
+  padding = "none",
+  wrap = "nowrap",
+  fillHeight,
+  maxHeight,
+  minHeight,
+  overflow,
+  display = "flex",
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ jsx(Wrapper, { ref, as: component ?? "div", $alignItems: alignItems ?? (orientation === "vertical" ? "start" : "center"), $fillWidth: fillWidth, $gapSize: gap, $grow: grow, $shrink: shrink, $isResponsive: isResponsive, $justifyContent: justifyContent, $maxWidth: maxWidth, $minWidth: minWidth, $orientation: orientation, $paddingSize: padding, $wrap: wrap, $fillHeight: fillHeight, $maxHeight: maxHeight, $minHeight: minHeight, $overflow: overflow, $display: display, "data-testid": "container", ...props, children });
+};
+const Wrapper = styled.div.withConfig({
+  componentId: "sc-1g171hn-0"
+})(["display:", ";", " ", " ", " flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";max-width:", ";flex-direction:", ";}"], ({
+  $display
+}) => $display, ({
+  $grow,
+  $shrink
+}) => `
+    ${$grow && `flex: ${$grow}`};
+    ${$shrink && `flex-shrink: ${$shrink}`};
+  `, ({
+  $fillHeight,
+  $maxHeight,
+  $minHeight
+}) => `
+    ${$fillHeight && "height: 100%"};
+    ${$maxHeight && `max-height: ${$maxHeight}`};
+    ${$minHeight && `min-height: ${$minHeight}`};
+  `, ({
+  $overflow
+}) => `
+    ${$overflow && `overflow: ${$overflow}`};
+  `, ({
+  $wrap = "nowrap"
+}) => $wrap, ({
+  theme,
+  $gapSize
+}) => theme.click.container.gap[$gapSize], ({
+  $maxWidth
+}) => $maxWidth ?? "none", ({
+  $minWidth
+}) => $minWidth ?? "auto", ({
+  theme,
+  $paddingSize
+}) => theme.click.container.space[$paddingSize], ({
+  $fillWidth = true
+}) => $fillWidth === true ? "100%" : "auto", ({
+  $orientation = "horizontal"
+}) => $orientation === "horizontal" ? "row" : "column", ({
+  $alignItems = "center"
+}) => $alignItems, ({
+  $justifyContent = "left"
+}) => $justifyContent === "start" ? "start" : `${$justifyContent}`, ({
+  theme
+}) => theme.breakpoint.sizes.md, ({
+  $isResponsive = true,
+  $fillWidth = true
+}) => $isResponsive === true ? "100%" : $fillWidth === true ? "100%" : "auto", ({
+  $isResponsive = true
+}) => $isResponsive === true ? "none" : "auto", ({
+  $isResponsive = true
+}) => $isResponsive === true ? "column" : "auto");
+const Container = forwardRef(_Container);
+
+export { Container };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport type { Orientation } from '@/types';\nimport { ContainerProps, GapOptions, PaddingOptions } from './Container.types';\n\ntype AlignItemsOptions = 'start' | 'center' | 'end' | 'stretch';\ntype GrowShrinkOptions = '0' | '1' | '2' | '3' | '4' | '5' | '6';\ntype JustifyContentOptions =\n  | 'center'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly'\n  | 'start'\n  | 'end'\n  | 'left'\n  | 'right';\ntype WrapOptions = 'nowrap' | 'wrap' | 'wrap-reverse';\n\ntype ContainerPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof T> & ContainerProps<T>\n) => ReactNode;\n\nconst _Container = <T extends ElementType = 'div'>(\n  {\n    component,\n    alignItems,\n    children,\n    fillWidth = true,\n    gap = 'none',\n    grow,\n    shrink,\n    isResponsive,\n    justifyContent = 'start',\n    maxWidth,\n    minWidth,\n    orientation = 'horizontal',\n    padding = 'none',\n    wrap = 'nowrap',\n    fillHeight,\n    maxHeight,\n    minHeight,\n    overflow,\n    display = 'flex',\n    ...props\n  }: Omit<ComponentProps<T>, keyof T> & ContainerProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  return (\n    <Wrapper\n      ref={ref}\n      as={component ?? 'div'}\n      $alignItems={alignItems ?? (orientation === 'vertical' ? 'start' : 'center')}\n      $fillWidth={fillWidth}\n      $gapSize={gap}\n      $grow={grow}\n      $shrink={shrink}\n      $isResponsive={isResponsive}\n      $justifyContent={justifyContent}\n      $maxWidth={maxWidth}\n      $minWidth={minWidth}\n      $orientation={orientation}\n      $paddingSize={padding}\n      $wrap={wrap}\n      $fillHeight={fillHeight}\n      $maxHeight={maxHeight}\n      $minHeight={minHeight}\n      $overflow={overflow}\n      $display={display}\n      data-testid=\"container\"\n      {...props}\n    >\n      {children}\n    </Wrapper>\n  );\n};\nconst Wrapper = styled.div<{\n  $alignItems: AlignItemsOptions;\n  $fillWidth?: boolean;\n  $gapSize: GapOptions;\n  $grow?: GrowShrinkOptions;\n  $shrink?: GrowShrinkOptions;\n  $isResponsive?: boolean;\n  $justifyContent: JustifyContentOptions;\n  $maxWidth?: string;\n  $minWidth?: string;\n  $orientation: Orientation;\n  $paddingSize: PaddingOptions;\n  $wrap: WrapOptions;\n  $fillHeight?: boolean;\n  $minHeight?: string;\n  $maxHeight?: string;\n  $overflow?: string;\n  $display: string;\n}>`\n  display: ${({ $display }) => $display};\n  ${({ $grow, $shrink }) => `\n    ${$grow && `flex: ${$grow}`};\n    ${$shrink && `flex-shrink: ${$shrink}`};\n  `}\n  ${({ $fillHeight, $maxHeight, $minHeight }) => `\n    ${$fillHeight && 'height: 100%'};\n    ${$maxHeight && `max-height: ${$maxHeight}`};\n    ${$minHeight && `min-height: ${$minHeight}`};\n  `}\n  ${({ $overflow }) => `\n    ${$overflow && `overflow: ${$overflow}`};\n  `}\n  flex-wrap: ${({ $wrap = 'nowrap' }) => $wrap};\n  gap: ${({ theme, $gapSize }) => theme.click.container.gap[$gapSize]};\n  max-width: ${({ $maxWidth }) => $maxWidth ?? 'none'};\n  min-width: ${({ $minWidth }) => $minWidth ?? 'auto'};\n  padding: ${({ theme, $paddingSize }) => theme.click.container.space[$paddingSize]};\n  width: ${({ $fillWidth = true }) => ($fillWidth === true ? '100%' : 'auto')};\n  flex-direction: ${({ $orientation = 'horizontal' }) =>\n    $orientation === 'horizontal' ? 'row' : 'column'};\n  align-items: ${({ $alignItems = 'center' }) => $alignItems};\n  justify-content: ${({ $justifyContent = 'left' }) =>\n    $justifyContent === 'start' ? 'start' : `${$justifyContent}`};\n\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {\n    width: ${({ $isResponsive = true, $fillWidth = true }) =>\n      $isResponsive === true ? '100%' : $fillWidth === true ? '100%' : 'auto'};\n    max-width: ${({ $isResponsive = true }) =>\n      $isResponsive === true ? 'none' : 'auto'};\n    flex-direction: ${({ $isResponsive = true }) =>\n      $isResponsive === true ? 'column' : 'auto'};\n  }\n`;\n\nexport const Container: ContainerPolymorphicComponent = forwardRef(_Container);\n"],"names":["_Container","component","alignItems","children","fillWidth","gap","grow","shrink","isResponsive","justifyContent","maxWidth","minWidth","orientation","padding","wrap","fillHeight","maxHeight","minHeight","overflow","display","props","ref","Wrapper","styled","div","withConfig","componentId","$display","$grow","$shrink","$fillHeight","$maxHeight","$minHeight","$overflow","$wrap","theme","$gapSize","click","container","$maxWidth","$minWidth","$paddingSize","space","$fillWidth","$orientation","$alignItems","$justifyContent","breakpoint","sizes","md","$isResponsive","Container","forwardRef"],"mappings":"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"}

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

@@ -0,0 +1,118 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RightMenu from '@radix-ui/react-context-menu';
+import { styled } from 'styled-components';
+import { forwardRef } from 'react';
+import { GenericMenuPanel, GenericMenuItem, Arrow } from '../GenericMenu/index.js';
+import Popover_Arrow from '../Assets/Icons/Popover-Arrow.js';
+import { IconWrapper } from '../IconWrapper/index.js';
+import { useInputModality } from '../../hooks/internal/useInputModality.js';
+import { Icon as SvgImage } from '../Icon/index.js';
+
+const ContextMenu = (props) => /* @__PURE__ */ jsx(RightMenu.Root, { ...props });
+const TriggerDiv = styled.div.withConfig({
+  componentId: "sc-14vshdt-0"
+})(["&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], ({
+  theme
+}) => theme.click.global.color.outline.default);
+const ContextMenuTrigger = forwardRef(({
+  disabled,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ jsx(RightMenu.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx(TriggerDiv, { ref, ...props }) });
+});
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+ContextMenu.Trigger = ContextMenuTrigger;
+const ContextMenuSubTrigger = ({
+  icon,
+  iconDir,
+  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" }) })
+  ] });
+};
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+ContextMenu.SubTrigger = ContextMenuSubTrigger;
+const RightMenuContent = styled(GenericMenuPanel).withConfig({
+  componentId: "sc-14vshdt-1"
+})(["flex-direction:column;z-index:1;", ";"], ({
+  $showArrow
+}) => $showArrow ? `
+      &[data-side="bottom"] {
+        margin-top: -1px;
+      }
+      &[data-side="top"] {
+        margin-bottom: -1px;
+      }
+      &[data-side="left"] {
+        margin-right: -1px;
+        .popover-arrow {
+          margin-right: 1rem;
+        }
+      }
+      }
+      &[data-side="right"] {
+        margin-left: -1px;
+        .popover-arrow {
+          margin-left: 1rem;
+        }
+      }
+  ` : "");
+const ContextMenuContent = ({
+  sub,
+  children,
+  showArrow,
+  // TODO: remove deprecated side and align
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  side,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  align,
+  ...props
+}) => {
+  const ContentElement = sub ? RightMenu.SubContent : RightMenu.Content;
+  const inputModalityProps = useInputModality();
+  return /* @__PURE__ */ jsx(RightMenu.Portal, { children: /* @__PURE__ */ jsxs(RightMenuContent, { ...props, $type: "context-menu", $showArrow: 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 RightMenuGroup = styled(RightMenu.Group).withConfig({
+  componentId: "sc-14vshdt-2"
+})(["width:100%;border-bottom:1px solid ", ";"], ({
+  theme
+}) => theme.click.genericMenu.item.color.default.stroke.default);
+const ContextMenuGroup = (props) => {
+  return /* @__PURE__ */ jsx(RightMenuGroup, { ...props });
+};
+ContextMenuGroup.displayName = "ContextMenuGroup";
+ContextMenu.Group = ContextMenuGroup;
+const RightMenuSub = styled(RightMenu.Sub).withConfig({
+  componentId: "sc-14vshdt-3"
+})(["border-bottom:1px solid ", ";"], ({
+  theme
+}) => theme.click.genericMenu.item.color.default.stroke.default);
+const ContextMenuSub = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(RightMenuSub, { ...props });
+};
+ContextMenuSub.displayName = "ContextMenuSub";
+ContextMenu.Sub = ContextMenuSub;
+const ContextMenuItem = ({
+  icon,
+  iconDir,
+  type = "default",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(GenericMenuItem, { as: RightMenu.Item, $type: type, ...props, children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children }) });
+};
+ContextMenuItem.displayName = "ContextMenuItem";
+ContextMenu.Item = ContextMenuItem;
+
+export { ContextMenu, ContextMenu as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import * as RightMenu from '@radix-ui/react-context-menu';\nimport { styled } from 'styled-components';\nimport { forwardRef } 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 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';\n\nexport const ContextMenu = (props: RightMenu.ContextMenuProps) => (\n  <RightMenu.Root {...props} />\n);\n\nconst TriggerDiv = styled.div`\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.click.global.color.outline.default};\n    outline-offset: 2px;\n  }\n`;\n\nconst ContextMenuTrigger = forwardRef<HTMLDivElement, RightMenu.ContextMenuTriggerProps>(\n  ({ disabled, ...props }, ref) => {\n    return (\n      <RightMenu.Trigger\n        asChild\n        disabled={disabled}\n      >\n        <TriggerDiv\n          ref={ref}\n          {...props}\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} & ArrowProps &\n  DeprecatedFields;\n\ntype ContextMenuSubContentProps = RightMenu.ContextMenuSubContentProps & {\n  sub?: never;\n} & ArrowProps &\n  DeprecatedFields;\n\nconst RightMenuContent = styled(GenericMenuPanel)<{ $showArrow?: boolean }>`\n  flex-direction: column;\n  z-index: 1;\n  ${({ $showArrow }) =>\n    $showArrow\n      ? `\n      &[data-side=\"bottom\"] {\n        margin-top: -1px;\n      }\n      &[data-side=\"top\"] {\n        margin-bottom: -1px;\n      }\n      &[data-side=\"left\"] {\n        margin-right: -1px;\n        .popover-arrow {\n          margin-right: 1rem;\n        }\n      }\n      }\n      &[data-side=\"right\"] {\n        margin-left: -1px;\n        .popover-arrow {\n          margin-left: 1rem;\n        }\n      }\n  `\n      : ''};\n`;\n\nconst ContextMenuContent = ({\n  sub,\n  children,\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  return (\n    <RightMenu.Portal>\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 RightMenuGroup = styled(RightMenu.Group)`\n  width: 100%;\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst ContextMenuGroup = (props: RightMenu.ContextMenuGroupProps) => {\n  return <RightMenuGroup {...props} />;\n};\n\nContextMenuGroup.displayName = 'ContextMenuGroup';\nContextMenu.Group = ContextMenuGroup;\n\nconst RightMenuSub = styled(RightMenu.Sub)`\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst ContextMenuSub = ({ ...props }: RightMenu.ContextMenuGroupProps) => {\n  return <RightMenuSub {...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","TriggerDiv","styled","div","withConfig","componentId","theme","click","global","color","outline","default","ContextMenuTrigger","forwardRef","disabled","ref","displayName","Trigger","ContextMenuSubTrigger","icon","iconDir","children","RightMenu","SubTrigger","Icon","RightMenuContent","GenericMenuPanel","$showArrow","ContextMenuContent","sub","showArrow","side","align","ContentElement","SubContent","Content","inputModalityProps","useInputModality","Arrow","RightMenuGroup","Group","genericMenu","item","stroke","ContextMenuGroup","RightMenuSub","Sub","ContextMenuSub","ContextMenuItem","type","Item"],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import { styled } from 'styled-components';
+import { EmptyButton } from '../EmptyButton/index.js';
+
+const CrossButton = styled(EmptyButton).withConfig({
+  componentId: "sc-4xtddp-0"
+})(["padding:", " ", ";background:", ";border-radius:", ";&:hover{background:", ";}"], ({
+  theme
+}) => theme.click.button.iconButton.sm.space.y, ({
+  theme
+}) => theme.click.button.iconButton.sm.space.x, ({
+  theme
+}) => theme.click.button.iconButton.color.primary.background.default, ({
+  theme
+}) => theme.click.button.iconButton.radii.all, ({
+  theme
+}) => theme.click.button.iconButton.color.primary.background.hover);
+
+export { CrossButton };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/CrossButton/CrossButton.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nexport const CrossButton = styled(EmptyButton)`\n  padding: ${({ theme }) => theme.click.button.iconButton.sm.space.y}\n    ${({ theme }) => theme.click.button.iconButton.sm.space.x};\n  background: ${({ theme }) =>\n    theme.click.button.iconButton.color.primary.background.default};\n  border-radius: ${({ theme }) => theme.click.button.iconButton.radii.all};\n\n  &:hover {\n    background: ${({ theme }) =>\n      theme.click.button.iconButton.color.primary.background.hover};\n  }\n`;\n"],"names":["CrossButton","styled","EmptyButton","withConfig","componentId","theme","click","button","iconButton","sm","space","y","x","color","primary","background","default","radii","all","hover"],"mappings":";;;AAGO,MAAMA,WAAAA,GAAcC,MAAAA,CAAOC,WAAW,CAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,UAAA,EAAA,GAAA,EAAA,gBAAA,iBAAA,EAAA,sBAAA,EAAA,IAAA,CAAA,EACjC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,WAAWC,EAAAA,CAAGC,KAAAA,CAAMC,GAC7D,CAAC;AAAA,EAAEN;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,WAAWC,EAAAA,CAAGC,KAAAA,CAAME,GAC5C,CAAC;AAAA,EAAEP;AAAM,CAAA,KACrBA,KAAAA,CAAMC,MAAMC,MAAAA,CAAOC,UAAAA,CAAWK,MAAMC,OAAAA,CAAQC,UAAAA,CAAWC,SACxC,CAAC;AAAA,EAAEX;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,UAAAA,CAAWS,KAAAA,CAAMC,KAGpD,CAAC;AAAA,EAAEb;AAAM,CAAA,KACrBA,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,WAAWK,KAAAA,CAAMC,OAAAA,CAAQC,WAAWI,KAAK;;;;"}

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

@@ -0,0 +1,81 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+import { linkStyles } from '../Link/common.js';
+import { formatTimezone } from '../../utils/date.js';
+import { Popover } from '../Popover/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-18cd6u2-0"
+})(["", ""], linkStyles);
+const formatDateDetails = (date, timezone) => {
+  const isCurrentYear = dayjs().year() === date.year();
+  const formatForCurrentYear = "MMM D, h:mm a";
+  const formatForPastYear = "MMM D, YYYY, h:mm a";
+  if (isCurrentYear) {
+    if (timezone) {
+      const dateWithTimezone = date.tz(timezone);
+      return dateWithTimezone.format(formatForCurrentYear).replace("am", "a.m.").replace("pm", "p.m.");
+    }
+    return date.format(formatForCurrentYear).replace("am", "a.m.").replace("pm", "p.m.");
+  }
+  if (timezone) {
+    const dateWithTimezone = date.tz(timezone);
+    return dateWithTimezone.format(formatForPastYear).replace("am", "a.m.").replace("pm", "p.m.");
+  }
+  return date.format(formatForPastYear).replace("am", "a.m.").replace("pm", "p.m.");
+};
+const DateDetails = ({
+  date,
+  side = "top",
+  size = "sm",
+  systemTimeZone,
+  weight = "normal"
+}) => {
+  const dayjsDate = dayjs(date);
+  let systemTime;
+  if (systemTimeZone) {
+    try {
+      systemTime = dayjsDate.tz(systemTimeZone);
+    } catch {
+      systemTime = dayjsDate.tz("America/New_York");
+    }
+  }
+  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) }) })
+    ] }) })
+  ] });
+};
+
+export { DateDetails };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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 '@/components/Link/common';\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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"}