@clickhouse/click-ui 0.8.0 → 1.0.0-rc2

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

@@ -35,7 +35,14 @@ const Collapsible = ({
     open: openProp ?? open,
     onOpenChange
   };
-  return /* @__PURE__ */ jsx("div", { ...props, className: cn(styles.collapsible, className), children: /* @__PURE__ */ jsx(NavContext.Provider, { value, children }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn(styles.collapsible, className),
+      children: /* @__PURE__ */ jsx(NavContext.Provider, { value, children })
+    }
+  );
 };
 const headerVariants = cva(styles.collapsible__header, {
   variants: {
@@ -48,34 +55,49 @@ const headerVariants = cva(styles.collapsible__header, {
     indicatorDir: "start"
   }
 });
-const CollapsipleHeader = forwardRef(({
-  indicatorDir = "start",
-  icon,
-  iconDir,
-  children,
-  wrapInTrigger,
-  onClick: onClickProp,
-  className,
-  ...props
-}, ref) => {
-  const {
-    onOpenChange
-  } = useContext(NavContext);
-  return /* @__PURE__ */ jsxs("div", { ref, onClick: (e) => {
-    if (wrapInTrigger && typeof onOpenChange === "function") {
-      onOpenChange();
-    }
-    if (typeof onClickProp === "function") {
-      onClickProp(e);
-    }
-  }, "data-collapsible-header": true, ...props, className: cn(headerVariants({
-    indicatorDir
-  }), className), children: [
-    indicatorDir === "start" && /* @__PURE__ */ jsx(Collapsible.Trigger, {}),
-    children && /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children }),
-    indicatorDir === "end" && /* @__PURE__ */ jsx(Collapsible.Trigger, {})
-  ] });
-});
+const CollapsipleHeader = forwardRef(
+  ({
+    indicatorDir = "start",
+    icon,
+    iconDir,
+    children,
+    wrapInTrigger,
+    onClick: onClickProp,
+    className,
+    ...props
+  }, ref) => {
+    const { onOpenChange } = useContext(NavContext);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        onClick: (e) => {
+          if (wrapInTrigger && typeof onOpenChange === "function") {
+            onOpenChange();
+          }
+          if (typeof onClickProp === "function") {
+            onClickProp(e);
+          }
+        },
+        "data-collapsible-header": true,
+        ...props,
+        className: cn(headerVariants({ indicatorDir }), className),
+        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 CollapsipleTrigger = ({
@@ -87,10 +109,7 @@ const CollapsipleTrigger = ({
   className,
   ...props
 }) => {
-  const {
-    open,
-    onOpenChange
-  } = useContext(NavContext);
+  const { open, onOpenChange } = useContext(NavContext);
   const onClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -99,11 +118,43 @@ const CollapsipleTrigger = ({
     }
     onOpenChange();
   };
-  return /* @__PURE__ */ jsxs(EmptyButton, { onClick, "aria-label": "trigger children", ...props, className: cn(styles.collapsible__trigger, className), 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" })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    EmptyButton,
+    {
+      onClick,
+      "aria-label": "trigger children",
+      ...props,
+      className: cn(styles.collapsible__trigger, className),
+      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;
@@ -120,15 +171,17 @@ const CollapsipleContent = ({
   className,
   ...props
 }) => {
-  const {
-    open
-  } = useContext(NavContext);
+  const { open } = useContext(NavContext);
   if (!open) {
     return;
   }
-  return /* @__PURE__ */ jsx("div", { ...props, className: cn(contentVariants({
-    indicatorDir
-  }), className) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn(contentVariants({ indicatorDir }), className)
+    }
+  );
 };
 CollapsipleContent.displayName = "CollapsibleContent";
 Collapsible.Content = CollapsipleContent;

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

@@ -1 +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';\n\nimport { cn, cva } from '@/lib/cva';\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';\nimport styles from './Collapsible.module.css';\n\ntype ContextProps = {\n  open: boolean;\n  onOpenChange: () => void;\n};\n\nconst NavContext = createContext<ContextProps>({\n  open: false,\n  onOpenChange: () => null,\n});\n\nexport const Collapsible = ({\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  children,\n  className,\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    <div\n      {...props}\n      className={cn(styles.collapsible, className)}\n    >\n      <NavContext.Provider value={value}>{children}</NavContext.Provider>\n    </div>\n  );\n};\n\nconst headerVariants = cva(styles.collapsible__header, {\n  variants: {\n    indicatorDir: {\n      start: styles['collapsible__header_indicator-dir_start'],\n      end: styles['collapsible__header_indicator-dir_end'],\n    },\n  },\n  defaultVariants: {\n    indicatorDir: 'start',\n  },\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      className,\n      ...props\n    }: CollapsipleHeaderProps,\n    ref\n  ) => {\n    const { onOpenChange } = useContext(NavContext);\n    return (\n      <div\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        className={cn(headerVariants({ indicatorDir }), className)}\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      </div>\n    );\n  }\n);\n\nCollapsipleHeader.displayName = 'CollapsibleHeader';\nCollapsible.Header = CollapsipleHeader;\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  className,\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    <EmptyButton\n      onClick={onClick}\n      aria-label=\"trigger children\"\n      {...props}\n      className={cn(styles.collapsible__trigger, className)}\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    </EmptyButton>\n  );\n};\n\nCollapsipleTrigger.displayName = 'CollapsibleTrigger';\nCollapsible.Trigger = CollapsipleTrigger;\n\nconst contentVariants = cva(styles.collapsible__content, {\n  variants: {\n    indicatorDir: {\n      start: styles['collapsible__content_indicator-dir_start'],\n      end: styles['collapsible__content_indicator-dir_end'],\n    },\n  },\n});\n\nconst CollapsipleContent = ({\n  indicatorDir,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { indicatorDir?: HorizontalDirection }) => {\n  const { open } = useContext(NavContext);\n  if (!open) {\n    return;\n  }\n  return (\n    <div\n      {...props}\n      className={cn(contentVariants({ indicatorDir }), className)}\n    />\n  );\n};\n\nCollapsipleContent.displayName = 'CollapsibleContent';\nCollapsible.Content = CollapsipleContent;\n"],"names":["NavContext","createContext","open","onOpenChange","Collapsible","openProp","onOpenChangeProp","children","className","props","setOpen","useState","useEffect","value","cn","styles","collapsible","headerVariants","cva","collapsible__header","variants","indicatorDir","start","end","defaultVariants","CollapsipleHeader","forwardRef","icon","iconDir","wrapInTrigger","onClick","onClickProp","ref","useContext","e","displayName","Header","CollapsipleTrigger","preventDefault","stopPropagation","collapsible__trigger","Icon","toString","Trigger","contentVariants","collapsible__content","CollapsipleContent","Content"],"mappings":"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"}
+{"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';\n\nimport { cn, cva } from '@/lib/cva';\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';\nimport styles from './Collapsible.module.css';\n\ntype ContextProps = {\n  open: boolean;\n  onOpenChange: () => void;\n};\n\nconst NavContext = createContext<ContextProps>({\n  open: false,\n  onOpenChange: () => null,\n});\n\nexport const Collapsible = ({\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  children,\n  className,\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    <div\n      {...props}\n      className={cn(styles.collapsible, className)}\n    >\n      <NavContext.Provider value={value}>{children}</NavContext.Provider>\n    </div>\n  );\n};\n\nconst headerVariants = cva(styles.collapsible__header, {\n  variants: {\n    indicatorDir: {\n      start: styles['collapsible__header_indicator-dir_start'],\n      end: styles['collapsible__header_indicator-dir_end'],\n    },\n  },\n  defaultVariants: {\n    indicatorDir: 'start',\n  },\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      className,\n      ...props\n    }: CollapsipleHeaderProps,\n    ref\n  ) => {\n    const { onOpenChange } = useContext(NavContext);\n    return (\n      <div\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        className={cn(headerVariants({ indicatorDir }), className)}\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      </div>\n    );\n  }\n);\n\nCollapsipleHeader.displayName = 'CollapsibleHeader';\nCollapsible.Header = CollapsipleHeader;\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  className,\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    <EmptyButton\n      onClick={onClick}\n      aria-label=\"trigger children\"\n      {...props}\n      className={cn(styles.collapsible__trigger, className)}\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    </EmptyButton>\n  );\n};\n\nCollapsipleTrigger.displayName = 'CollapsibleTrigger';\nCollapsible.Trigger = CollapsipleTrigger;\n\nconst contentVariants = cva(styles.collapsible__content, {\n  variants: {\n    indicatorDir: {\n      start: styles['collapsible__content_indicator-dir_start'],\n      end: styles['collapsible__content_indicator-dir_end'],\n    },\n  },\n});\n\nconst CollapsipleContent = ({\n  indicatorDir,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { indicatorDir?: HorizontalDirection }) => {\n  const { open } = useContext(NavContext);\n  if (!open) {\n    return;\n  }\n  return (\n    <div\n      {...props}\n      className={cn(contentVariants({ indicatorDir }), className)}\n    />\n  );\n};\n\nCollapsipleContent.displayName = 'CollapsibleContent';\nCollapsible.Content = CollapsipleContent;\n"],"names":["open","Icon"],"mappings":"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"}

package/dist/esm/components/ConfirmationDialog/ConfirmationDialog.css

@@ -1,4 +1,4 @@
-.content__fI-1- {
+@layer clickui {.content__fI-1- {
   display: flex;
   overflow: hidden;
   flex-direction: column;
@@ -18,3 +18,4 @@
     flex-direction: column;
   }
 }
+}

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

@@ -26,22 +26,63 @@ const ConfirmationDialog = ({
   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(Dialog.Content, { title, showClose, ...props, className: cn(styles.content, className), 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("div", { className: styles.actions, 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();
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (open2) => {
+        if (!open2 && onCancel) {
+          onCancel();
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        Dialog.Content,
+        {
+          title,
+          showClose,
+          ...props,
+          className: cn(styles.content, className),
+          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("div", { className: styles.actions, 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"
+                }
+              )
+            ] })
+          ]
         }
-      }, "data-testid": "confirm-action-button" })
-    ] })
-  ] }) });
+      )
+    }
+  );
 };
 
 export { ConfirmationDialog };

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

@@ -1 +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 { cn } from '@/lib/cva';\nimport styles from './ConfirmationDialog.module.css';\nimport { ConfirmationDialogProps } from './ConfirmationDialog.types';\n\nexport const ConfirmationDialog = ({\n  children,\n  className,\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      <Dialog.Content\n        title={title}\n        showClose={showClose}\n        {...props}\n        className={cn(styles.content, className)}\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        <div className={styles.actions}>\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        </div>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n"],"names":["ConfirmationDialog","children","className","disabled","loading","message","onCancel","onConfirm","open","primaryActionLabel","primaryActionType","secondaryActionLabel","showClose","title","props","Error","cn","styles","content","actions"],"mappings":";;;;;;;;AASO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC,QAAAA;AAAAA,EACAC,SAAAA;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,GAAGC;AACoB,CAAA,KAAoB;AAC3C,EAAA,IAAIb,YAAYI,OAAAA,EAAS;AACvB,IAAA,MAAM,IAAIU,MAAM,4DAA4D,CAAA;AAAA,EAC9E;AAEA,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EACC,IAAA,EACA,YAAA,EAAc,CAACP,KAAAA,KAAkB;AAC/B,IAAA,IAAI,CAACA,SAAQF,QAAAA,EAAU;AACrBA,MAAAA,QAAAA,EAAS;AAAA,IACX;AAAA,EACF,CAAA,EAEA,QAAA,kBAAA,IAAA,CAAC,MAAA,CAAO,OAAA,EAAP,EACC,KAAA,EACA,SAAA,EACA,GAAIQ,KAAAA,EACJ,SAAA,EAAWE,EAAAA,CAAGC,MAAAA,CAAOC,OAAAA,EAAShB,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,EAAS,MAAA,EACT,IAAA,EAAK,GAAA,EACL,WAAA,EAAY,UAAA,EAEXD,QAAAA,EAAAA,QAAAA,GAAWA,QAAAA,mBAAW,GAAA,CAAC,IAAA,EAAA,EAAMI,QAAAA,EAAAA,OAAAA,EAAQ,CAAA,EACxC,CAAA;AAAA,oBACA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAI,CAAA;AAAA,oBACpB,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWY,MAAAA,CAAOE,OAAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAO,KAAA,EAAP,EACC,KAAA,EAAOR,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;;;;"}
+{"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 { cn } from '@/lib/cva';\nimport styles from './ConfirmationDialog.module.css';\nimport { ConfirmationDialogProps } from './ConfirmationDialog.types';\n\nexport const ConfirmationDialog = ({\n  children,\n  className,\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      <Dialog.Content\n        title={title}\n        showClose={showClose}\n        {...props}\n        className={cn(styles.content, className)}\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        <div className={styles.actions}>\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        </div>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n"],"names":["open"],"mappings":";;;;;;;;AASO,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,kBAAA,GAAqB,SAAA;AAAA,EACrB,iBAAA,GAAoB,SAAA;AAAA,EACpB,oBAAA,GAAuB,QAAA;AAAA,EACvB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA6C;AAC3C,EAAA,IAAI,YAAY,OAAA,EAAS;AACvB,IAAA,MAAM,IAAI,MAAM,4DAA4D,CAAA;AAAA,EAC9E;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,YAAA,EAAc,CAACA,KAAAA,KAAkB;AAC/B,QAAA,IAAI,CAACA,SAAQ,QAAA,EAAU;AACrB,UAAA,QAAA,EAAS;AAAA,QACX;AAAA,MACF,CAAA;AAAA,MAEA,QAAA,kBAAA,IAAA;AAAA,QAAC,MAAA,CAAO,OAAA;AAAA,QAAP;AAAA,UACC,KAAA;AAAA,UACA,SAAA;AAAA,UACC,GAAG,KAAA;AAAA,UACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAAA,UAEvC,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,QAAA,EAAS,MAAA;AAAA,gBACT,IAAA,EAAK,GAAA;AAAA,gBACL,WAAA,EAAY,UAAA;AAAA,gBAEX,QAAA,EAAA,QAAA,GAAW,QAAA,mBAAW,GAAA,CAAC,IAAA,EAAA,EAAM,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA,aACxC;AAAA,4BACA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAK,CAAA;AAAA,4BACrB,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA,CAAO,KAAA;AAAA,gBAAP;AAAA,kBACC,KAAA,EAAO,oBAAA;AAAA,kBACP,aAAA,EAAY;AAAA;AAAA,eACd;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA,CAAO,KAAA;AAAA,gBAAP;AAAA,kBACC,OAAA,EAAS,CAAC,CAAC,OAAA;AAAA,kBACX,QAAA,EAAU,CAAC,CAAC,QAAA,IAAY,CAAC,CAAC,OAAA;AAAA,kBAC1B,IAAA,EAAM,iBAAA;AAAA,kBACN,KAAA,EAAO,kBAAA;AAAA,kBACP,SAAA,EAAW,IAAA;AAAA,kBACX,SAAS,MAAM;AACb,oBAAA,IAAI,SAAA,EAAW;AACb,sBAAA,SAAA,EAAU;AAAA,oBACZ;AAAA,kBACF,CAAA;AAAA,kBACA,aAAA,EAAY;AAAA;AAAA;AACd,aAAA,EACF;AAAA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}

package/dist/esm/components/Container/Container.css

@@ -1,4 +1,4 @@
-/* Kept at zero specificity via :where() so that modifier classes (e.g.
+@layer clickui {/* Kept at zero specificity via :where() so that modifier classes (e.g.
    .container_padding_md) and downstream styled-components overrides on a
    styled(Container) both win without needing a specificity hack — Container is
    a CSS Module, whose rules otherwise beat equal-specificity styled-components. */
@@ -191,3 +191,4 @@
     width: auto;
   }
 }
+}

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

@@ -80,39 +80,56 @@ const _Container = ({
 }, ref) => {
   const Component = component ?? "div";
   const resolvedAlignItems = alignItems ?? (orientation === "vertical" ? "start" : "center");
-  const mergedStyle = useMemo(() => ({
-    "--container-display": display,
-    "--container-width": fillWidth === true ? "100%" : "auto",
-    "--container-min-width": minWidth ?? "auto",
-    "--container-max-width": maxWidth ?? "none",
-    ...grow && {
-      "--container-grow": grow
-    },
-    ...shrink && {
-      "--container-shrink": shrink
-    },
-    ...fillHeight && {
-      "--container-height": "100%"
-    },
-    ...maxHeight && {
-      "--container-max-height": maxHeight
-    },
-    ...minHeight && {
-      "--container-min-height": minHeight
-    },
-    ...overflow && {
-      "--container-overflow": overflow
-    },
-    ...style
-  }), [display, fillWidth, minWidth, maxWidth, grow, shrink, fillHeight, maxHeight, minHeight, overflow, style]);
-  return /* @__PURE__ */ jsx(Component, { ref, "data-testid": "container", ...props, style: mergedStyle, className: cn(containerVariants({
-    gap,
-    padding,
-    orientation,
-    wrap,
-    alignItems: resolvedAlignItems,
-    justifyContent
-  }), isResponsive ? styles.container_responsive : fillWidth ? styles["container_non-responsive_fill"] : styles["container_non-responsive_hug"], className), children });
+  const mergedStyle = useMemo(
+    () => ({
+      "--container-display": display,
+      "--container-width": fillWidth === true ? "100%" : "auto",
+      "--container-min-width": minWidth ?? "auto",
+      "--container-max-width": maxWidth ?? "none",
+      ...grow && { "--container-grow": grow },
+      ...shrink && { "--container-shrink": shrink },
+      ...fillHeight && { "--container-height": "100%" },
+      ...maxHeight && { "--container-max-height": maxHeight },
+      ...minHeight && { "--container-min-height": minHeight },
+      ...overflow && { "--container-overflow": overflow },
+      ...style
+    }),
+    [
+      display,
+      fillWidth,
+      minWidth,
+      maxWidth,
+      grow,
+      shrink,
+      fillHeight,
+      maxHeight,
+      minHeight,
+      overflow,
+      style
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      "data-testid": "container",
+      ...props,
+      style: mergedStyle,
+      className: cn(
+        containerVariants({
+          gap,
+          padding,
+          orientation,
+          wrap,
+          alignItems: resolvedAlignItems,
+          justifyContent
+        }),
+        isResponsive ? styles.container_responsive : fillWidth ? styles["container_non-responsive_fill"] : styles["container_non-responsive_hug"],
+        className
+      ),
+      children
+    }
+  );
 };
 const Container = forwardRef(_Container);
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  CSSProperties,\n  ElementType,\n  ReactNode,\n  forwardRef,\n  useMemo,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { ContainerProps } from './Container.types';\nimport styles from './Container.module.css';\n\nconst containerVariants = cva(styles.container, {\n  variants: {\n    gap: {\n      none: styles.container_gap_none,\n      xxs: styles.container_gap_xxs,\n      xs: styles.container_gap_xs,\n      sm: styles.container_gap_sm,\n      md: styles.container_gap_md,\n      lg: styles.container_gap_lg,\n      xl: styles.container_gap_xl,\n      xxl: styles.container_gap_xxl,\n    },\n    padding: {\n      none: styles.container_padding_none,\n      xxs: styles.container_padding_xxs,\n      xs: styles.container_padding_xs,\n      sm: styles.container_padding_sm,\n      md: styles.container_padding_md,\n      lg: styles.container_padding_lg,\n      xl: styles.container_padding_xl,\n      xxl: styles.container_padding_xxl,\n    },\n    orientation: {\n      horizontal: styles.container_orientation_horizontal,\n      vertical: styles.container_orientation_vertical,\n    },\n    wrap: {\n      nowrap: styles.container_wrap_nowrap,\n      wrap: styles.container_wrap_wrap,\n      'wrap-reverse': styles['container_wrap_wrap-reverse'],\n    },\n    alignItems: {\n      start: styles['container_align-items_start'],\n      center: styles['container_align-items_center'],\n      end: styles['container_align-items_end'],\n      stretch: styles['container_align-items_stretch'],\n    },\n    justifyContent: {\n      center: styles['container_justify-content_center'],\n      'space-between': styles['container_justify-content_space-between'],\n      'space-around': styles['container_justify-content_space-around'],\n      'space-evenly': styles['container_justify-content_space-evenly'],\n      start: styles['container_justify-content_start'],\n      end: styles['container_justify-content_end'],\n      left: styles['container_justify-content_left'],\n      right: styles['container_justify-content_right'],\n    },\n  },\n});\n\ntype ContainerPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof ContainerProps<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 = true,\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    className,\n    style,\n    ...props\n  }: Omit<ComponentProps<T>, keyof ContainerProps<T>> & ContainerProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'div';\n  const resolvedAlignItems =\n    alignItems ?? (orientation === 'vertical' ? 'start' : 'center');\n\n  // `_Container` is a real component (wrapped by `forwardRef` below); the\n  // rules-of-hooks PascalCase-name heuristic false-positives on our\n  // `_`-prefixed polymorphic-component naming convention.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const mergedStyle = useMemo(\n    () =>\n      ({\n        '--container-display': display,\n        '--container-width': fillWidth === true ? '100%' : 'auto',\n        '--container-min-width': minWidth ?? 'auto',\n        '--container-max-width': maxWidth ?? 'none',\n        ...(grow && { '--container-grow': grow }),\n        ...(shrink && { '--container-shrink': shrink }),\n        ...(fillHeight && { '--container-height': '100%' }),\n        ...(maxHeight && { '--container-max-height': maxHeight }),\n        ...(minHeight && { '--container-min-height': minHeight }),\n        ...(overflow && { '--container-overflow': overflow }),\n        ...style,\n      }) as CSSProperties,\n    [\n      display,\n      fillWidth,\n      minWidth,\n      maxWidth,\n      grow,\n      shrink,\n      fillHeight,\n      maxHeight,\n      minHeight,\n      overflow,\n      style,\n    ]\n  );\n\n  return (\n    <Component\n      ref={ref}\n      data-testid=\"container\"\n      {...props}\n      style={mergedStyle}\n      className={cn(\n        containerVariants({\n          gap,\n          padding,\n          orientation,\n          wrap,\n          alignItems: resolvedAlignItems,\n          justifyContent,\n        }),\n        isResponsive\n          ? styles.container_responsive\n          : fillWidth\n            ? styles['container_non-responsive_fill']\n            : styles['container_non-responsive_hug'],\n        className\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport const Container: ContainerPolymorphicComponent = forwardRef(_Container);\n"],"names":["containerVariants","cva","styles","container","variants","gap","none","container_gap_none","xxs","container_gap_xxs","xs","container_gap_xs","sm","container_gap_sm","md","container_gap_md","lg","container_gap_lg","xl","container_gap_xl","xxl","container_gap_xxl","padding","container_padding_none","container_padding_xxs","container_padding_xs","container_padding_sm","container_padding_md","container_padding_lg","container_padding_xl","container_padding_xxl","orientation","horizontal","container_orientation_horizontal","vertical","container_orientation_vertical","wrap","nowrap","container_wrap_nowrap","container_wrap_wrap","alignItems","start","center","end","stretch","justifyContent","left","right","_Container","component","children","fillWidth","grow","shrink","isResponsive","maxWidth","minWidth","fillHeight","maxHeight","minHeight","overflow","display","className","style","props","ref","Component","resolvedAlignItems","mergedStyle","useMemo","cn","container_responsive","Container","forwardRef"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  CSSProperties,\n  ElementType,\n  ReactNode,\n  forwardRef,\n  useMemo,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { ContainerProps } from './Container.types';\nimport styles from './Container.module.css';\n\nconst containerVariants = cva(styles.container, {\n  variants: {\n    gap: {\n      none: styles.container_gap_none,\n      xxs: styles.container_gap_xxs,\n      xs: styles.container_gap_xs,\n      sm: styles.container_gap_sm,\n      md: styles.container_gap_md,\n      lg: styles.container_gap_lg,\n      xl: styles.container_gap_xl,\n      xxl: styles.container_gap_xxl,\n    },\n    padding: {\n      none: styles.container_padding_none,\n      xxs: styles.container_padding_xxs,\n      xs: styles.container_padding_xs,\n      sm: styles.container_padding_sm,\n      md: styles.container_padding_md,\n      lg: styles.container_padding_lg,\n      xl: styles.container_padding_xl,\n      xxl: styles.container_padding_xxl,\n    },\n    orientation: {\n      horizontal: styles.container_orientation_horizontal,\n      vertical: styles.container_orientation_vertical,\n    },\n    wrap: {\n      nowrap: styles.container_wrap_nowrap,\n      wrap: styles.container_wrap_wrap,\n      'wrap-reverse': styles['container_wrap_wrap-reverse'],\n    },\n    alignItems: {\n      start: styles['container_align-items_start'],\n      center: styles['container_align-items_center'],\n      end: styles['container_align-items_end'],\n      stretch: styles['container_align-items_stretch'],\n    },\n    justifyContent: {\n      center: styles['container_justify-content_center'],\n      'space-between': styles['container_justify-content_space-between'],\n      'space-around': styles['container_justify-content_space-around'],\n      'space-evenly': styles['container_justify-content_space-evenly'],\n      start: styles['container_justify-content_start'],\n      end: styles['container_justify-content_end'],\n      left: styles['container_justify-content_left'],\n      right: styles['container_justify-content_right'],\n    },\n  },\n});\n\ntype ContainerPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof ContainerProps<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 = true,\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    className,\n    style,\n    ...props\n  }: Omit<ComponentProps<T>, keyof ContainerProps<T>> & ContainerProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'div';\n  const resolvedAlignItems =\n    alignItems ?? (orientation === 'vertical' ? 'start' : 'center');\n\n  // `_Container` is a real component (wrapped by `forwardRef` below); the\n  // rules-of-hooks PascalCase-name heuristic false-positives on our\n  // `_`-prefixed polymorphic-component naming convention.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const mergedStyle = useMemo(\n    () =>\n      ({\n        '--container-display': display,\n        '--container-width': fillWidth === true ? '100%' : 'auto',\n        '--container-min-width': minWidth ?? 'auto',\n        '--container-max-width': maxWidth ?? 'none',\n        ...(grow && { '--container-grow': grow }),\n        ...(shrink && { '--container-shrink': shrink }),\n        ...(fillHeight && { '--container-height': '100%' }),\n        ...(maxHeight && { '--container-max-height': maxHeight }),\n        ...(minHeight && { '--container-min-height': minHeight }),\n        ...(overflow && { '--container-overflow': overflow }),\n        ...style,\n      }) as CSSProperties,\n    [\n      display,\n      fillWidth,\n      minWidth,\n      maxWidth,\n      grow,\n      shrink,\n      fillHeight,\n      maxHeight,\n      minHeight,\n      overflow,\n      style,\n    ]\n  );\n\n  return (\n    <Component\n      ref={ref}\n      data-testid=\"container\"\n      {...props}\n      style={mergedStyle}\n      className={cn(\n        containerVariants({\n          gap,\n          padding,\n          orientation,\n          wrap,\n          alignItems: resolvedAlignItems,\n          justifyContent,\n        }),\n        isResponsive\n          ? styles.container_responsive\n          : fillWidth\n            ? styles['container_non-responsive_fill']\n            : styles['container_non-responsive_hug'],\n        className\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport const Container: ContainerPolymorphicComponent = forwardRef(_Container);\n"],"names":[],"mappings":"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"}

package/dist/esm/components/ContextMenu/ContextMenu.css

@@ -1,4 +1,4 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
 
 .trigger__4-zK2:focus-visible {
   outline: 2px solid var(--click-global-color-outline-default);
@@ -38,3 +38,4 @@
   width: 100%;
   border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
 }
+}