@clickhouse/click-ui 0.8.0 → 1.0.0-rc2

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

@@ -13,13 +13,29 @@ const FormContainer = ({
   children,
   addLabelPadding,
   ...props
-}) => /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: addLabelPadding, ...props, children: [
-  /* @__PURE__ */ jsxs(FormElementContainer, { children: [
-    children,
-    !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
-  ] }),
-  label && /* @__PURE__ */ jsx(Label, { htmlFor: id, error: !!error, children: label })
-] });
+}) => /* @__PURE__ */ jsxs(
+  FormRoot,
+  {
+    $orientation: orientation,
+    $dir: dir,
+    $addLabelPadding: addLabelPadding,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs(FormElementContainer, { children: [
+        children,
+        !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
+      ] }),
+      label && /* @__PURE__ */ jsx(
+        Label,
+        {
+          htmlFor: id,
+          error: !!error,
+          children: label
+        }
+      )
+    ]
+  }
+);
 
 export { FormContainer };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/FormContainer/FormContainer.tsx"],"sourcesContent":["import { Error } from './Error';\nimport { FormElementContainer } from './FormElementContainer';\nimport { FormRoot } from './FormRoot';\nimport { Label } from '@/components/Label';\nimport { FormContainerProps } from './FormContainer.types';\n\nexport const FormContainer = ({\n  id,\n  label,\n  orientation,\n  dir,\n  error,\n  children,\n  addLabelPadding,\n  ...props\n}: FormContainerProps) => (\n  <FormRoot\n    $orientation={orientation}\n    $dir={dir}\n    $addLabelPadding={addLabelPadding}\n    {...props}\n  >\n    <FormElementContainer>\n      {children}\n      {!!error && error !== true && <Error>{error}</Error>}\n    </FormElementContainer>\n    {label && (\n      <Label\n        htmlFor={id}\n        error={!!error}\n      >\n        {label}\n      </Label>\n    )}\n  </FormRoot>\n);\n"],"names":["FormContainer","id","label","orientation","dir","error","children","addLabelPadding","props"],"mappings":";;;;;;AAMO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,EAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACA,GAAGC;AACe,CAAA,qBAClB,IAAA,CAAC,YACC,YAAA,EAAcL,WAAAA,EACd,MAAMC,GAAAA,EACN,gBAAA,EAAkBG,eAAAA,EAClB,GAAIC,KAAAA,EAEJ,QAAA,EAAA;AAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EACEF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACA,CAAC,CAACD,KAAAA,IAASA,UAAU,IAAA,oBAAQ,GAAA,CAAC,SAAOA,QAAAA,EAAAA,KAAAA,EAAM;AAAA,GAAA,EAC9C,CAAA;AAAA,EACCH,KAAAA,wBACE,KAAA,EAAA,EACC,OAAA,EAASD,IACT,KAAA,EAAO,CAAC,CAACI,KAAAA,EAERH,QAAAA,EAAAA,KAAAA,EACH;AAAA,CAAA,EAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/FormContainer/FormContainer.tsx"],"sourcesContent":["import { Error } from './Error';\nimport { FormElementContainer } from './FormElementContainer';\nimport { FormRoot } from './FormRoot';\nimport { Label } from '@/components/Label';\nimport { FormContainerProps } from './FormContainer.types';\n\nexport const FormContainer = ({\n  id,\n  label,\n  orientation,\n  dir,\n  error,\n  children,\n  addLabelPadding,\n  ...props\n}: FormContainerProps) => (\n  <FormRoot\n    $orientation={orientation}\n    $dir={dir}\n    $addLabelPadding={addLabelPadding}\n    {...props}\n  >\n    <FormElementContainer>\n      {children}\n      {!!error && error !== true && <Error>{error}</Error>}\n    </FormElementContainer>\n    {label && (\n      <Label\n        htmlFor={id}\n        error={!!error}\n      >\n        {label}\n      </Label>\n    )}\n  </FormRoot>\n);\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACE,IAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,YAAA,EAAc,WAAA;AAAA,IACd,IAAA,EAAM,GAAA;AAAA,IACN,gBAAA,EAAkB,eAAA;AAAA,IACjB,GAAG,KAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,oBAAA,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,CAAC,CAAC,KAAA,IAAS,UAAU,IAAA,oBAAQ,GAAA,CAAC,SAAO,QAAA,EAAA,KAAA,EAAM;AAAA,OAAA,EAC9C,CAAA;AAAA,MACC,KAAA,oBACC,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,EAAA;AAAA,UACT,KAAA,EAAO,CAAC,CAAC,KAAA;AAAA,UAER,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAEJ;;;;"}

package/dist/esm/components/GenericLabel/GenericLabel.css

@@ -1,4 +1,4 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericLabel) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericLabel) */
 
 .generic-label__l8R-z {
   color: var(--click-field-color-genericLabel-default);
@@ -18,8 +18,8 @@
 }
 
 /* stylelint-disable no-descending-specificity -- disabled state intentionally
-   defined after hover/focus to neutralize them; the original styled-components
-   emits no hover/focus rules when disabled is true. */
+   defined after hover/focus to neutralize them; the pre-migration styling
+   emitted no hover/focus rules when disabled is true. */
 .generic-label__l8R-z.generic-label_disabled__LsI3I,
 .generic-label__l8R-z.generic-label_disabled__LsI3I:hover,
 .generic-label__l8R-z.generic-label_disabled__LsI3I:focus,
@@ -29,3 +29,4 @@
   cursor: not-allowed;
 }
 /* stylelint-enable no-descending-specificity */
+}

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

@@ -16,9 +16,14 @@ const GenericLabel = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ jsx("label", { ...props, className: cn(genericLabelVariants({
-  disabled
-}), className), children });
+}) => /* @__PURE__ */ jsx(
+  "label",
+  {
+    ...props,
+    className: cn(genericLabelVariants({ disabled }), className),
+    children
+  }
+);
 
 export { GenericLabel };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/GenericLabel/GenericLabel.tsx"],"sourcesContent":["import { cn, cva } from '@/lib/cva';\nimport { GenericLabelProps } from './GenericLabel.types';\nimport styles from './GenericLabel.module.css';\n\nconst genericLabelVariants = cva(styles['generic-label'], {\n  variants: {\n    disabled: {\n      true: styles['generic-label_disabled'],\n    },\n  },\n});\n\nexport const GenericLabel = ({\n  disabled,\n  children,\n  className,\n  ...props\n}: GenericLabelProps) => (\n  <label\n    {...props}\n    className={cn(genericLabelVariants({ disabled }), className)}\n  >\n    {children}\n  </label>\n);\n"],"names":["genericLabelVariants","cva","styles","variants","disabled","true","GenericLabel","children","className","props","cn"],"mappings":";;;;;AAIA,MAAMA,oBAAAA,GAAuBC,GAAAA,CAAIC,MAAAA,CAAO,eAAe,CAAA,EAAG;AAAA,EACxDC,QAAAA,EAAU;AAAA,IACRC,QAAAA,EAAU;AAAA,MACRC,IAAAA,EAAMH,OAAO,wBAAwB;AAAA;AACvC;AAEJ,CAAC,CAAA;AAEM,MAAMI,eAAeA,CAAC;AAAA,EAC3BF,QAAAA;AAAAA,EACAG,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACc,CAAA,yBAChB,OAAA,EAAA,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWC,GAAGV,oBAAAA,CAAqB;AAAA,EAAEI;AAAS,CAAC,CAAA,EAAGI,SAAS,CAAA,EAE1DD,QAAAA,EACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/GenericLabel/GenericLabel.tsx"],"sourcesContent":["import { cn, cva } from '@/lib/cva';\nimport { GenericLabelProps } from './GenericLabel.types';\nimport styles from './GenericLabel.module.css';\n\nconst genericLabelVariants = cva(styles['generic-label'], {\n  variants: {\n    disabled: {\n      true: styles['generic-label_disabled'],\n    },\n  },\n});\n\nexport const GenericLabel = ({\n  disabled,\n  children,\n  className,\n  ...props\n}: GenericLabelProps) => (\n  <label\n    {...props}\n    className={cn(genericLabelVariants({ disabled }), className)}\n  >\n    {children}\n  </label>\n);\n"],"names":[],"mappings":";;;;;AAIA,MAAM,oBAAA,GAAuB,GAAA,CAAI,MAAA,CAAO,eAAe,CAAA,EAAG;AAAA,EACxD,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,OAAO,wBAAwB;AAAA;AACvC;AAEJ,CAAC,CAAA;AAEM,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACE,GAAA;AAAA,EAAC,OAAA;AAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,WAAW,EAAA,CAAG,oBAAA,CAAqB,EAAE,QAAA,EAAU,GAAG,SAAS,CAAA;AAAA,IAE1D;AAAA;AACH;;;;"}

package/dist/esm/components/GenericMenu/GenericMenu.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) */
 
 .generic-menu-panel__y8D6y {
   display: flex;
@@ -174,3 +174,4 @@
 .generic-menu-item__ApV25[hidden] {
   display: none;
 }
+}

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

@@ -29,10 +29,14 @@ const _GenericMenuPanel = ({
   ...props
 }, ref) => {
   const Component = as ?? "div";
-  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(panelVariants({
-    type,
-    showArrow
-  }), className) });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      ...props,
+      className: cn(panelVariants({ type, showArrow }), className)
+    }
+  );
 };
 const GenericMenuPanel = forwardRef(_GenericMenuPanel);
 const popoverPanelVariants = cva(styles["generic-popover-menu-panel"], {
@@ -58,19 +62,28 @@ const _GenericPopoverMenuPanel = ({
   ...props
 }, ref) => {
   const Component = as ?? "div";
-  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(popoverPanelVariants({
-    type,
-    showArrow
-  }), className) });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      ...props,
+      className: cn(popoverPanelVariants({ type, showArrow }), className)
+    }
+  );
 };
-const GenericPopoverMenuPanel = forwardRef(_GenericPopoverMenuPanel);
-const _Arrow = ({
-  as,
-  className,
-  ...props
-}, ref) => {
+const GenericPopoverMenuPanel = forwardRef(
+  _GenericPopoverMenuPanel
+);
+const _Arrow = ({ as, className, ...props }, ref) => {
   const Component = as ?? "svg";
-  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(styles.arrow, className) });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      ...props,
+      className: cn(styles.arrow, className)
+    }
+  );
 };
 const Arrow = forwardRef(_Arrow);
 const itemVariants = cva(styles["generic-menu-item"], {
@@ -91,9 +104,14 @@ const _GenericMenuItem = ({
   ...props
 }, ref) => {
   const Component = as ?? "div";
-  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(itemVariants({
-    type
-  }), className) });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      ...props,
+      className: cn(itemVariants({ type }), className)
+    }
+  );
 };
 const GenericMenuItem = forwardRef(_GenericMenuItem);
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/GenericMenu/GenericMenu.tsx"],"sourcesContent":["import { ComponentPropsWithRef, ElementType, ReactNode, forwardRef } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './GenericMenu.module.css';\n\nconst panelVariants = cva(styles['generic-menu-panel'], {\n  variants: {\n    type: {\n      popover: styles['generic-menu-panel_type_popover'],\n      'dropdown-menu': styles['generic-menu-panel_type_dropdown-menu'],\n      'context-menu': styles['generic-menu-panel_type_context-menu'],\n    },\n    showArrow: {\n      true: styles['generic-menu-panel_show-arrow'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showArrow: false,\n  },\n});\n\ntype GenericMenuPanelOwnProps = {\n  type: 'popover' | 'dropdown-menu' | 'context-menu';\n  showArrow?: boolean;\n};\n\ntype GenericMenuPanelComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentPropsWithRef<T>, keyof GenericMenuPanelOwnProps | 'as'> &\n    GenericMenuPanelOwnProps & { as?: T }\n) => ReactNode;\n\nconst _GenericMenuPanel = <T extends ElementType = 'div'>(\n  {\n    as,\n    type,\n    showArrow,\n    className,\n    ...props\n  }: Omit<ComponentPropsWithRef<T>, keyof GenericMenuPanelOwnProps | 'as'> &\n    GenericMenuPanelOwnProps & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(panelVariants({ type, showArrow }), className)}\n    />\n  );\n};\n\nexport const GenericMenuPanel: GenericMenuPanelComponent = forwardRef(_GenericMenuPanel);\n\nconst popoverPanelVariants = cva(styles['generic-popover-menu-panel'], {\n  variants: {\n    type: {\n      popover: styles['generic-popover-menu-panel_type_popover'],\n      'hover-card': styles['generic-popover-menu-panel_type_hover-card'],\n    },\n    showArrow: {\n      true: styles['generic-popover-menu-panel_show-arrow'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showArrow: false,\n  },\n});\n\ntype GenericPopoverMenuPanelOwnProps = {\n  type: 'popover' | 'hover-card';\n  showArrow?: boolean;\n};\n\ntype GenericPopoverMenuPanelComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentPropsWithRef<T>, keyof GenericPopoverMenuPanelOwnProps | 'as'> &\n    GenericPopoverMenuPanelOwnProps & { as?: T }\n) => ReactNode;\n\nconst _GenericPopoverMenuPanel = <T extends ElementType = 'div'>(\n  {\n    as,\n    type,\n    showArrow,\n    className,\n    ...props\n  }: Omit<ComponentPropsWithRef<T>, keyof GenericPopoverMenuPanelOwnProps | 'as'> &\n    GenericPopoverMenuPanelOwnProps & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(popoverPanelVariants({ type, showArrow }), className)}\n    />\n  );\n};\n\nexport const GenericPopoverMenuPanel: GenericPopoverMenuPanelComponent = forwardRef(\n  _GenericPopoverMenuPanel\n);\n\ntype ArrowComponent = <T extends ElementType = 'svg'>(\n  props: Omit<ComponentPropsWithRef<T>, 'as'> & { as?: T }\n) => ReactNode;\n\nconst _Arrow = <T extends ElementType = 'svg'>(\n  { as, className, ...props }: Omit<ComponentPropsWithRef<T>, 'as'> & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'svg';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(styles.arrow, className)}\n    />\n  );\n};\n\nexport const Arrow: ArrowComponent = forwardRef(_Arrow);\n\nconst itemVariants = cva(styles['generic-menu-item'], {\n  variants: {\n    type: {\n      default: styles['generic-menu-item_type_default'],\n      danger: styles['generic-menu-item_type_danger'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\ntype GenericMenuItemOwnProps = {\n  type?: 'default' | 'danger';\n};\n\ntype GenericMenuItemComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentPropsWithRef<T>, keyof GenericMenuItemOwnProps | 'as'> &\n    GenericMenuItemOwnProps & { as?: T }\n) => ReactNode;\n\nconst _GenericMenuItem = <T extends ElementType = 'div'>(\n  {\n    as,\n    type = 'default',\n    className,\n    ...props\n  }: Omit<ComponentPropsWithRef<T>, keyof GenericMenuItemOwnProps | 'as'> &\n    GenericMenuItemOwnProps & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(itemVariants({ type }), className)}\n    />\n  );\n};\n\nexport const GenericMenuItem: GenericMenuItemComponent = forwardRef(_GenericMenuItem);\n"],"names":["panelVariants","cva","styles","variants","type","popover","showArrow","true","false","defaultVariants","_GenericMenuPanel","as","className","props","ref","Component","cn","GenericMenuPanel","forwardRef","popoverPanelVariants","_GenericPopoverMenuPanel","GenericPopoverMenuPanel","_Arrow","arrow","Arrow","itemVariants","default","danger","_GenericMenuItem","GenericMenuItem"],"mappings":";;;;;;AAIA,MAAMA,aAAAA,GAAgBC,GAAAA,CAAIC,MAAAA,CAAO,oBAAoB,CAAA,EAAG;AAAA,EACtDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASH,OAAO,iCAAiC,CAAA;AAAA,MACjD,eAAA,EAAiBA,OAAO,uCAAuC,CAAA;AAAA,MAC/D,cAAA,EAAgBA,OAAO,sCAAsC;AAAA,KAC/D;AAAA,IACAI,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAML,OAAO,+BAA+B,CAAA;AAAA,MAC5CM,KAAAA,EAAO;AAAA;AACT,GACF;AAAA,EACAC,eAAAA,EAAiB;AAAA,IACfH,SAAAA,EAAW;AAAA;AAEf,CAAC,CAAA;AAYD,MAAMI,oBAAoB,CACxB;AAAA,EACEC,EAAAA;AAAAA,EACAP,IAAAA;AAAAA,EACAE,SAAAA;AAAAA,EACAM,SAAAA;AAAAA,EACA,GAAGC;AAEiC,CAAA,EACtCC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,EAAAA,IAAM,KAAA;AACxB,EAAA,2BACG,SAAA,EAAA,EACC,GAAA,KACIE,KAAAA,EACJ,SAAA,EAAWG,GAAGhB,aAAAA,CAAc;AAAA,IAAEI,IAAAA;AAAAA,IAAME;AAAAA,GAAW,CAAA,EAAGM,SAAS,CAAA,EAAE,CAAA;AAGnE,CAAA;AAEO,MAAMK,gBAAAA,GAA8CC,WAAWR,iBAAiB;AAEvF,MAAMS,oBAAAA,GAAuBlB,GAAAA,CAAIC,MAAAA,CAAO,4BAA4B,CAAA,EAAG;AAAA,EACrEC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASH,OAAO,yCAAyC,CAAA;AAAA,MACzD,YAAA,EAAcA,OAAO,4CAA4C;AAAA,KACnE;AAAA,IACAI,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAML,OAAO,uCAAuC,CAAA;AAAA,MACpDM,KAAAA,EAAO;AAAA;AACT,GACF;AAAA,EACAC,eAAAA,EAAiB;AAAA,IACfH,SAAAA,EAAW;AAAA;AAEf,CAAC,CAAA;AAYD,MAAMc,2BAA2B,CAC/B;AAAA,EACET,EAAAA;AAAAA,EACAP,IAAAA;AAAAA,EACAE,SAAAA;AAAAA,EACAM,SAAAA;AAAAA,EACA,GAAGC;AAEwC,CAAA,EAC7CC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,EAAAA,IAAM,KAAA;AACxB,EAAA,2BACG,SAAA,EAAA,EACC,GAAA,KACIE,KAAAA,EACJ,SAAA,EAAWG,GAAGG,oBAAAA,CAAqB;AAAA,IAAEf,IAAAA;AAAAA,IAAME;AAAAA,GAAW,CAAA,EAAGM,SAAS,CAAA,EAAE,CAAA;AAG1E,CAAA;AAEO,MAAMS,uBAAAA,GAA4DH,WACvEE,wBACF;AAMA,MAAME,SAAS,CACb;AAAA,EAAEX,EAAAA;AAAAA,EAAIC,SAAAA;AAAAA,EAAW,GAAGC;AAAyD,CAAA,EAC7EC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,EAAAA,IAAM,KAAA;AACxB,EAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACC,GAAA,EACA,GAAIE,KAAAA,EACJ,WAAWG,EAAAA,CAAGd,MAAAA,CAAOqB,KAAAA,EAAOX,SAAS,CAAA,EAAE,CAAA;AAG7C,CAAA;AAEO,MAAMY,KAAAA,GAAwBN,WAAWI,MAAM;AAEtD,MAAMG,YAAAA,GAAexB,GAAAA,CAAIC,MAAAA,CAAO,mBAAmB,CAAA,EAAG;AAAA,EACpDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJsB,OAAAA,EAASxB,OAAO,gCAAgC,CAAA;AAAA,MAChDyB,MAAAA,EAAQzB,OAAO,+BAA+B;AAAA;AAChD,GACF;AAAA,EACAO,eAAAA,EAAiB;AAAA,IACfL,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAWD,MAAMwB,mBAAmB,CACvB;AAAA,EACEjB,EAAAA;AAAAA,EACAP,IAAAA,GAAO,SAAA;AAAA,EACPQ,SAAAA;AAAAA,EACA,GAAGC;AAEgC,CAAA,EACrCC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,EAAAA,IAAM,KAAA;AACxB,EAAA,2BACG,SAAA,EAAA,EACC,GAAA,KACIE,KAAAA,EACJ,SAAA,EAAWG,GAAGS,YAAAA,CAAa;AAAA,IAAErB;AAAAA,GAAM,CAAA,EAAGQ,SAAS,CAAA,EAAE,CAAA;AAGvD,CAAA;AAEO,MAAMiB,eAAAA,GAA4CX,WAAWU,gBAAgB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/GenericMenu/GenericMenu.tsx"],"sourcesContent":["import { ComponentPropsWithRef, ElementType, ReactNode, forwardRef } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './GenericMenu.module.css';\n\nconst panelVariants = cva(styles['generic-menu-panel'], {\n  variants: {\n    type: {\n      popover: styles['generic-menu-panel_type_popover'],\n      'dropdown-menu': styles['generic-menu-panel_type_dropdown-menu'],\n      'context-menu': styles['generic-menu-panel_type_context-menu'],\n    },\n    showArrow: {\n      true: styles['generic-menu-panel_show-arrow'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showArrow: false,\n  },\n});\n\ntype GenericMenuPanelOwnProps = {\n  type: 'popover' | 'dropdown-menu' | 'context-menu';\n  showArrow?: boolean;\n};\n\ntype GenericMenuPanelComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentPropsWithRef<T>, keyof GenericMenuPanelOwnProps | 'as'> &\n    GenericMenuPanelOwnProps & { as?: T }\n) => ReactNode;\n\nconst _GenericMenuPanel = <T extends ElementType = 'div'>(\n  {\n    as,\n    type,\n    showArrow,\n    className,\n    ...props\n  }: Omit<ComponentPropsWithRef<T>, keyof GenericMenuPanelOwnProps | 'as'> &\n    GenericMenuPanelOwnProps & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(panelVariants({ type, showArrow }), className)}\n    />\n  );\n};\n\nexport const GenericMenuPanel: GenericMenuPanelComponent = forwardRef(_GenericMenuPanel);\n\nconst popoverPanelVariants = cva(styles['generic-popover-menu-panel'], {\n  variants: {\n    type: {\n      popover: styles['generic-popover-menu-panel_type_popover'],\n      'hover-card': styles['generic-popover-menu-panel_type_hover-card'],\n    },\n    showArrow: {\n      true: styles['generic-popover-menu-panel_show-arrow'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showArrow: false,\n  },\n});\n\ntype GenericPopoverMenuPanelOwnProps = {\n  type: 'popover' | 'hover-card';\n  showArrow?: boolean;\n};\n\ntype GenericPopoverMenuPanelComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentPropsWithRef<T>, keyof GenericPopoverMenuPanelOwnProps | 'as'> &\n    GenericPopoverMenuPanelOwnProps & { as?: T }\n) => ReactNode;\n\nconst _GenericPopoverMenuPanel = <T extends ElementType = 'div'>(\n  {\n    as,\n    type,\n    showArrow,\n    className,\n    ...props\n  }: Omit<ComponentPropsWithRef<T>, keyof GenericPopoverMenuPanelOwnProps | 'as'> &\n    GenericPopoverMenuPanelOwnProps & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(popoverPanelVariants({ type, showArrow }), className)}\n    />\n  );\n};\n\nexport const GenericPopoverMenuPanel: GenericPopoverMenuPanelComponent = forwardRef(\n  _GenericPopoverMenuPanel\n);\n\ntype ArrowComponent = <T extends ElementType = 'svg'>(\n  props: Omit<ComponentPropsWithRef<T>, 'as'> & { as?: T }\n) => ReactNode;\n\nconst _Arrow = <T extends ElementType = 'svg'>(\n  { as, className, ...props }: Omit<ComponentPropsWithRef<T>, 'as'> & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'svg';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(styles.arrow, className)}\n    />\n  );\n};\n\nexport const Arrow: ArrowComponent = forwardRef(_Arrow);\n\nconst itemVariants = cva(styles['generic-menu-item'], {\n  variants: {\n    type: {\n      default: styles['generic-menu-item_type_default'],\n      danger: styles['generic-menu-item_type_danger'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\ntype GenericMenuItemOwnProps = {\n  type?: 'default' | 'danger';\n};\n\ntype GenericMenuItemComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentPropsWithRef<T>, keyof GenericMenuItemOwnProps | 'as'> &\n    GenericMenuItemOwnProps & { as?: T }\n) => ReactNode;\n\nconst _GenericMenuItem = <T extends ElementType = 'div'>(\n  {\n    as,\n    type = 'default',\n    className,\n    ...props\n  }: Omit<ComponentPropsWithRef<T>, keyof GenericMenuItemOwnProps | 'as'> &\n    GenericMenuItemOwnProps & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(itemVariants({ type }), className)}\n    />\n  );\n};\n\nexport const GenericMenuItem: GenericMenuItemComponent = forwardRef(_GenericMenuItem);\n"],"names":[],"mappings":"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"}

package/dist/esm/components/Grid/Cell.js

@@ -3,67 +3,90 @@ import { memo, useRef, useEffect } from 'react';
 import { areEqual } from 'react-window';
 import { StyledCell } from './StyledCell.js';
 
-const Cell = memo(({
-  data,
-  rowIndex,
-  columnIndex,
-  style,
-  ...props
-}) => {
-  const {
-    cell: CellData,
-    getSelectionType,
-    focus,
-    columnCount,
-    rowCount,
-    showRowNumber,
-    showHeader,
-    rowHeight,
-    rowStart,
-    rowAutoHeight,
-    updateRowHeight
-  } = data;
-  const currentRowIndex = rowIndex + rowStart;
-  const {
-    row: focusedRow,
-    column: focusedColumn
-  } = focus;
-  const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;
-  const rightOfFocus = columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;
-  const belowFocus = columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;
-  const selectionType = getSelectionType({
-    row: currentRowIndex,
-    column: columnIndex,
-    type: "cell"
-  });
-  const rightSelection = getSelectionType({
-    row: currentRowIndex,
-    column: columnIndex - 1,
-    type: "cell"
-  });
-  const belowSelection = getSelectionType({
-    row: currentRowIndex - 1,
-    column: columnIndex,
-    type: "cell"
-  });
-  const rightOfSelectionBorder = (selectionType === "selectDirect" || rightSelection === "selectDirect") && selectionType !== rightSelection;
-  const belowSelectionBorder = (selectionType === "selectDirect" || belowSelection === "selectDirect") && selectionType !== belowSelection;
-  const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
-  const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
-  const cellRef = useRef(null);
-  useEffect(() => {
-    if (!rowAutoHeight || !cellRef.current) {
-      return;
-    }
-    const height = cellRef.current.getBoundingClientRect().height;
-    updateRowHeight(rowIndex, height);
-  }, [updateRowHeight, rowIndex, rowAutoHeight]);
-  const styleWithHeight = {
-    ...style,
-    height: "auto"
-  };
-  return /* @__PURE__ */ jsx("div", { style: styleWithHeight, "data-row": currentRowIndex, "data-column": columnIndex, ref: cellRef, children: /* @__PURE__ */ jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, $rowAutoHeight: rowAutoHeight, ...props }) });
-}, areEqual);
+const Cell = memo(
+  ({ data, rowIndex, columnIndex, style, ...props }) => {
+    const {
+      cell: CellData,
+      getSelectionType,
+      focus,
+      columnCount,
+      rowCount,
+      rowHeight,
+      rowStart,
+      rowAutoHeight,
+      updateRowHeight
+    } = data;
+    const currentRowIndex = rowIndex + rowStart;
+    const { row: focusedRow, column: focusedColumn } = focus;
+    const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;
+    const rightOfFocus = columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;
+    const belowFocus = columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;
+    const selectionType = getSelectionType({
+      row: currentRowIndex,
+      column: columnIndex,
+      type: "cell"
+    });
+    const rightSelection = getSelectionType({
+      row: currentRowIndex,
+      column: columnIndex - 1,
+      type: "cell"
+    });
+    const belowSelection = getSelectionType({
+      row: currentRowIndex - 1,
+      column: columnIndex,
+      type: "cell"
+    });
+    const rightOfSelectionBorder = (selectionType === "selectDirect" || rightSelection === "selectDirect") && selectionType !== rightSelection;
+    const belowSelectionBorder = (selectionType === "selectDirect" || belowSelection === "selectDirect") && selectionType !== belowSelection;
+    const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
+    const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
+    const cellRef = useRef(null);
+    useEffect(() => {
+      if (!rowAutoHeight || !cellRef.current) {
+        return;
+      }
+      const height = cellRef.current.getBoundingClientRect().height;
+      updateRowHeight(rowIndex, height);
+    }, [updateRowHeight, rowIndex, rowAutoHeight]);
+    const styleWithHeight = {
+      ...style,
+      height: "auto"
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: styleWithHeight,
+        "data-row": currentRowIndex,
+        "data-column": columnIndex,
+        ref: cellRef,
+        children: /* @__PURE__ */ jsx(
+          StyledCell,
+          {
+            as: CellData,
+            rowIndex: currentRowIndex,
+            columnIndex,
+            type: "row-cell",
+            "data-selected": isFocused || selectionType === "selectDirect",
+            "data-focused": isFocused,
+            $isSelectedTop: selectionBorderTop,
+            $isSelectedLeft: selectionBorderLeft,
+            $isFocused: isFocused,
+            $isLastRow: rowCount - 1 === rowIndex,
+            $isLastColumn: columnCount - 1 === columnIndex,
+            $selectionType: selectionType,
+            $height: rowHeight,
+            "data-grid-row": currentRowIndex,
+            "data-grid-column": columnIndex,
+            $showBorder: true,
+            $rowAutoHeight: rowAutoHeight,
+            ...props
+          }
+        )
+      }
+    );
+  },
+  areEqual
+);
 
 export { Cell };
 //# sourceMappingURL=Cell.js.map

package/dist/esm/components/Grid/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":["../../../../src/components/Grid/Cell.tsx"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport { GridChildComponentProps, areEqual } from 'react-window';\nimport { ItemDataType } from './types';\nimport { StyledCell } from './StyledCell';\n\ntype CellProps = GridChildComponentProps<ItemDataType> & {\n  width: number;\n};\n\nexport const Cell = memo(\n  ({ data, rowIndex, columnIndex, style, ...props }: CellProps) => {\n    const {\n      cell: CellData,\n      getSelectionType,\n      focus,\n      columnCount,\n      rowCount,\n      showRowNumber,\n      showHeader,\n      rowHeight,\n      rowStart,\n      rowAutoHeight,\n      updateRowHeight,\n    } = data;\n\n    const currentRowIndex = rowIndex + rowStart;\n    const { row: focusedRow, column: focusedColumn } = focus;\n    const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;\n    const rightOfFocus =\n      columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;\n    const belowFocus =\n      columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;\n\n    const selectionType = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightSelection = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex - 1,\n      type: 'cell',\n    });\n    const belowSelection = getSelectionType({\n      row: currentRowIndex - 1,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightOfSelectionBorder =\n      (selectionType === 'selectDirect' || rightSelection === 'selectDirect') &&\n      selectionType !== rightSelection;\n    const belowSelectionBorder =\n      (selectionType === 'selectDirect' || belowSelection === 'selectDirect') &&\n      selectionType !== belowSelection;\n\n    const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;\n    const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;\n\n    const cellRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!rowAutoHeight || !cellRef.current) {\n        return;\n      }\n      const height = cellRef.current.getBoundingClientRect().height;\n      updateRowHeight(rowIndex, height);\n    }, [updateRowHeight, rowIndex, rowAutoHeight]);\n\n    const styleWithHeight = {\n      ...style,\n      height: 'auto',\n    };\n\n    return (\n      <div\n        style={styleWithHeight}\n        data-row={currentRowIndex}\n        data-column={columnIndex}\n        ref={cellRef}\n      >\n        <StyledCell\n          as={CellData}\n          rowIndex={currentRowIndex}\n          columnIndex={columnIndex}\n          type=\"row-cell\"\n          data-selected={isFocused || selectionType === 'selectDirect'}\n          data-focused={isFocused}\n          $isSelectedTop={selectionBorderTop}\n          $isSelectedLeft={selectionBorderLeft}\n          $isFocused={isFocused}\n          $isLastRow={rowCount - 1 === rowIndex}\n          $isLastColumn={columnCount - 1 === columnIndex}\n          $isFirstColumn={columnIndex === 0 && !showRowNumber}\n          $isFirstRow={rowIndex === 0 && !showHeader}\n          $selectionType={selectionType}\n          $height={rowHeight}\n          data-grid-row={currentRowIndex}\n          data-grid-column={columnIndex}\n          $showBorder\n          $rowAutoHeight={rowAutoHeight}\n          {...props}\n        />\n      </div>\n    );\n  },\n  areEqual\n);\n"],"names":["Cell","memo","data","rowIndex","columnIndex","style","props","cell","CellData","getSelectionType","focus","columnCount","rowCount","showRowNumber","showHeader","rowHeight","rowStart","rowAutoHeight","updateRowHeight","currentRowIndex","row","focusedRow","column","focusedColumn","isFocused","rightOfFocus","belowFocus","selectionType","type","rightSelection","belowSelection","rightOfSelectionBorder","belowSelectionBorder","selectionBorderLeft","selectionBorderTop","cellRef","useRef","useEffect","current","height","getBoundingClientRect","styleWithHeight","areEqual"],"mappings":"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"}
+{"version":3,"file":"Cell.js","sources":["../../../../src/components/Grid/Cell.tsx"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport { GridChildComponentProps, areEqual } from 'react-window';\nimport { ItemDataType } from './types';\nimport { StyledCell } from './StyledCell';\n\ntype CellProps = GridChildComponentProps<ItemDataType> & {\n  width: number;\n};\n\nexport const Cell = memo(\n  ({ data, rowIndex, columnIndex, style, ...props }: CellProps) => {\n    const {\n      cell: CellData,\n      getSelectionType,\n      focus,\n      columnCount,\n      rowCount,\n      rowHeight,\n      rowStart,\n      rowAutoHeight,\n      updateRowHeight,\n    } = data;\n\n    const currentRowIndex = rowIndex + rowStart;\n    const { row: focusedRow, column: focusedColumn } = focus;\n    const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;\n    const rightOfFocus =\n      columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;\n    const belowFocus =\n      columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;\n\n    const selectionType = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightSelection = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex - 1,\n      type: 'cell',\n    });\n    const belowSelection = getSelectionType({\n      row: currentRowIndex - 1,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightOfSelectionBorder =\n      (selectionType === 'selectDirect' || rightSelection === 'selectDirect') &&\n      selectionType !== rightSelection;\n    const belowSelectionBorder =\n      (selectionType === 'selectDirect' || belowSelection === 'selectDirect') &&\n      selectionType !== belowSelection;\n\n    const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;\n    const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;\n\n    const cellRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!rowAutoHeight || !cellRef.current) {\n        return;\n      }\n      const height = cellRef.current.getBoundingClientRect().height;\n      updateRowHeight(rowIndex, height);\n    }, [updateRowHeight, rowIndex, rowAutoHeight]);\n\n    const styleWithHeight = {\n      ...style,\n      height: 'auto',\n    };\n\n    return (\n      <div\n        style={styleWithHeight}\n        data-row={currentRowIndex}\n        data-column={columnIndex}\n        ref={cellRef}\n      >\n        <StyledCell\n          as={CellData}\n          rowIndex={currentRowIndex}\n          columnIndex={columnIndex}\n          type=\"row-cell\"\n          data-selected={isFocused || selectionType === 'selectDirect'}\n          data-focused={isFocused}\n          $isSelectedTop={selectionBorderTop}\n          $isSelectedLeft={selectionBorderLeft}\n          $isFocused={isFocused}\n          $isLastRow={rowCount - 1 === rowIndex}\n          $isLastColumn={columnCount - 1 === columnIndex}\n          $selectionType={selectionType}\n          $height={rowHeight}\n          data-grid-row={currentRowIndex}\n          data-grid-column={columnIndex}\n          $showBorder\n          $rowAutoHeight={rowAutoHeight}\n          {...props}\n        />\n      </div>\n    );\n  },\n  areEqual\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/components/Grid/ColumnResizer.css

@@ -0,0 +1,23 @@
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+.column-resizer__8f12T {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: calc(100% - 4px);
+  width: 4px;
+  height: var(--column-resizer-height);
+  overflow: auto;
+  cursor: col-resize;
+}
+
+.column-resizer__8f12T:hover,
+.column-resizer__8f12T:active {
+  background: var(--click-grid-header-cell-color-stroke-selectDirect);
+}
+
+.column-resizer_pressed__JGAln {
+  position: fixed;
+  height: 100%;
+}
+}

package/dist/esm/components/Grid/ColumnResizer.js

@@ -1,22 +1,18 @@
+import "./ColumnResizer.css";
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect, useCallback } from 'react';
-import { styled } from 'styled-components';
+import { cva } from 'class-variance-authority';
+import 'clsx';
+import styles from './ColumnResizer.module.css.js';
 import { throttle } from 'lodash-es';
 import { initialPosition } from './useResizingState.js';
 
 const DOUBLE_CLICK_THRESHOLD_MSEC = 300;
-const ResizeSpan = styled.div.withConfig({
-  componentId: "sc-1r6e5v3-0"
-})(["top:", ";left:", ";z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], initialPosition.top, initialPosition.left, ({
-  $height
-}) => $height, ({
-  theme
-}) => theme.click.grid.header.cell.color.stroke.selectDirect, ({
-  $isPressed
-}) => $isPressed && `
-      height: 100%;
-      position: fixed;
-    `);
+const resizerVariants = cva(styles["column-resizer"], {
+  variants: {
+    pressed: { true: styles["column-resizer_pressed"] }
+  }
+});
 const ColumnResizer = ({
   height,
   onColumnResize: onColumnResizeProp,
@@ -55,53 +51,84 @@ const ColumnResizer = ({
       console.error(e);
     }
   }, [pointer, isPressed, columnIndex]);
-  const onPointerDown = useCallback((e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (resizeRef.current) {
-      if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {
-        onColumnResize(columnIndex, 0, "auto");
+  const onPointerDown = useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (resizeRef.current) {
+        if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {
+          onColumnResize(columnIndex, 0, "auto");
+        }
+        setPointer({
+          pointerId: e.pointerId,
+          initialClientX: e.clientX,
+          width: columnWidth
+        });
+        setIsPressed(columnIndex, true);
+        const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);
+        setPosition(pos);
       }
-      setPointer({
-        pointerId: e.pointerId,
-        initialClientX: e.clientX,
-        width: columnWidth
-      });
-      setIsPressed(columnIndex, true);
-      const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);
-      setPosition(pos);
-    }
-  }, [lastPressedTimestamp, setPointer, columnWidth, setIsPressed, columnIndex, getResizerPosition, setPosition, onColumnResize]);
-  const onPointerMove = useCallback((e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (isPressed && pointer) {
-      const width = columnWidth + (e.clientX - pointer.initialClientX);
-      const pos = getResizerPosition(e.clientX, width, columnIndex);
-      setPosition(pos);
-      pointer.width = Math.max(width, 50);
-    }
-  }, [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]);
-  return /* @__PURE__ */ jsx(ResizeSpan, { ref: resizeRef, $height: height, $isPressed: isPressed, onPointerDown, onPointerUp: (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (resizeRef.current && // 0 is a valid pointerId in Firefox
-    (pointer?.pointerId || pointer?.pointerId === 0)) {
-      const shouldCallResize = e.clientX !== pointer.initialClientX;
-      if (shouldCallResize) {
-        onColumnResize(columnIndex, pointer.width, "manual");
+    },
+    [
+      lastPressedTimestamp,
+      setPointer,
+      columnWidth,
+      setIsPressed,
+      columnIndex,
+      getResizerPosition,
+      setPosition,
+      onColumnResize
+    ]
+  );
+  const onPointerMove = useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (isPressed && pointer) {
+        const width = columnWidth + (e.clientX - pointer.initialClientX);
+        const pos = getResizerPosition(e.clientX, width, columnIndex);
+        setPosition(pos);
+        pointer.width = Math.max(width, 50);
+      }
+    },
+    [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: resizeRef,
+      className: resizerVariants({ pressed: isPressed }),
+      onPointerDown,
+      onPointerUp: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (resizeRef.current && // 0 is a valid pointerId in Firefox
+        (pointer?.pointerId || pointer?.pointerId === 0)) {
+          const shouldCallResize = e.clientX !== pointer.initialClientX;
+          if (shouldCallResize) {
+            onColumnResize(columnIndex, pointer.width, "manual");
+          }
+          setPosition(initialPosition);
+          setPointer(null);
+          setIsPressed(columnIndex, false);
+        }
+      },
+      onPointerMove,
+      onPointerCancel: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setPosition(initialPosition);
+        setPointer(null);
+        setIsPressed(columnIndex, false);
+      },
+      onClick: (e) => e.stopPropagation(),
+      "data-resize": true,
+      style: {
+        "--column-resizer-height": `${height}px`,
+        ...position
       }
-      setPosition(initialPosition);
-      setPointer(null);
-      setIsPressed(columnIndex, false);
     }
-  }, onPointerMove, onPointerCancel: (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setPosition(initialPosition);
-    setPointer(null);
-    setIsPressed(columnIndex, false);
-  }, onClick: (e) => e.stopPropagation(), "data-resize": true, style: position });
+  );
 };
 
 export { ColumnResizer as default };