@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

package/dist/esm/components/Panel/Panel.css

@@ -0,0 +1,116 @@
+.panel__4VWNp {
+  --panel-width: initial;
+  --panel-height: initial;
+
+  display: flex;
+  width: var(--panel-width, auto);
+  height: var(--panel-height, auto);
+}
+
+.panel_cursor__YcG6H {
+  cursor: var(--panel-cursor);
+}
+
+.panel_orientation_horizontal__nB0T- {
+  flex-flow: row wrap;
+}
+
+.panel_orientation_vertical__7EE-3 {
+  flex-flow: column;
+}
+
+.panel_align-items_start__Xr8t8 {
+  align-items: flex-start;
+}
+
+.panel_align-items_center__5LLFt {
+  align-items: center;
+}
+
+.panel_align-items_end__qi2wL {
+  align-items: flex-end;
+}
+
+.panel_color_default__pIwqp {
+  background-color: var(--click-panel-color-background-default);
+}
+
+.panel_color_muted__fVquA {
+  background-color: var(--click-panel-color-background-muted);
+}
+
+.panel_color_transparent__fIvMl {
+  background-color: var(--click-panel-color-background-transparent);
+}
+
+.panel_radii_none__JyEKv {
+  border-radius: var(--click-panel-radii-none);
+}
+
+.panel_radii_sm__b7A6v {
+  border-radius: var(--click-panel-radii-sm);
+}
+
+.panel_radii_md__5Pzsu {
+  border-radius: var(--click-panel-radii-md);
+}
+
+.panel_radii_lg__q1FPq {
+  border-radius: var(--click-panel-radii-lg);
+}
+
+.panel_padding_none__OGHd- {
+  padding: var(--click-panel-space-y-none);
+}
+
+.panel_padding_xs__U6RZS {
+  padding: var(--click-panel-space-y-xs);
+}
+
+.panel_padding_sm__rKoLB {
+  padding: var(--click-panel-space-y-sm);
+}
+
+.panel_padding_md__9PCRi {
+  padding: var(--click-panel-space-y-md);
+}
+
+.panel_padding_lg__aKwpW {
+  padding: var(--click-panel-space-y-lg);
+}
+
+.panel_padding_xl__Q1IVo {
+  padding: var(--click-panel-space-y-xl);
+}
+
+.panel_border__dGg-4 {
+  border: 1px solid var(--click-global-color-stroke-default);
+}
+
+.panel_shadow__8WSfn {
+  box-shadow: var(--shadow-1);
+}
+
+.panel_gap_none__-LwaY {
+  gap: var(--click-panel-space-gap-none);
+}
+
+.panel_gap_xs__sbYm7 {
+  gap: var(--click-panel-space-gap-xs);
+}
+
+.panel_gap_sm__8NpJA {
+  gap: var(--click-panel-space-gap-sm);
+}
+
+.panel_gap_md__RM459 {
+  gap: var(--click-panel-space-gap-md);
+}
+
+.panel_gap_lg__MNfVH {
+  gap: var(--click-panel-space-gap-lg);
+}
+
+.panel_gap_xl__Te3bQ {
+  gap: var(--click-panel-space-gap-xl);
+}

package/dist/esm/components/Panel/Panel.module.css.js

@@ -0,0 +1,58 @@
+const panel = "panel__4VWNp";
+const panel_cursor = "panel_cursor__YcG6H";
+const panel_orientation_horizontal = "panel_orientation_horizontal__nB0T-";
+const panel_orientation_vertical = "panel_orientation_vertical__7EE-3";
+const panel_color_default = "panel_color_default__pIwqp";
+const panel_color_muted = "panel_color_muted__fVquA";
+const panel_color_transparent = "panel_color_transparent__fIvMl";
+const panel_radii_none = "panel_radii_none__JyEKv";
+const panel_radii_sm = "panel_radii_sm__b7A6v";
+const panel_radii_md = "panel_radii_md__5Pzsu";
+const panel_radii_lg = "panel_radii_lg__q1FPq";
+const panel_padding_none = "panel_padding_none__OGHd-";
+const panel_padding_xs = "panel_padding_xs__U6RZS";
+const panel_padding_sm = "panel_padding_sm__rKoLB";
+const panel_padding_md = "panel_padding_md__9PCRi";
+const panel_padding_lg = "panel_padding_lg__aKwpW";
+const panel_padding_xl = "panel_padding_xl__Q1IVo";
+const panel_border = "panel_border__dGg-4";
+const panel_shadow = "panel_shadow__8WSfn";
+const panel_gap_none = "panel_gap_none__-LwaY";
+const panel_gap_xs = "panel_gap_xs__sbYm7";
+const panel_gap_sm = "panel_gap_sm__8NpJA";
+const panel_gap_md = "panel_gap_md__RM459";
+const panel_gap_lg = "panel_gap_lg__MNfVH";
+const panel_gap_xl = "panel_gap_xl__Te3bQ";
+const styles = {
+	panel: panel,
+	panel_cursor: panel_cursor,
+	panel_orientation_horizontal: panel_orientation_horizontal,
+	panel_orientation_vertical: panel_orientation_vertical,
+	"panel_align-items_start": "panel_align-items_start__Xr8t8",
+	"panel_align-items_center": "panel_align-items_center__5LLFt",
+	"panel_align-items_end": "panel_align-items_end__qi2wL",
+	panel_color_default: panel_color_default,
+	panel_color_muted: panel_color_muted,
+	panel_color_transparent: panel_color_transparent,
+	panel_radii_none: panel_radii_none,
+	panel_radii_sm: panel_radii_sm,
+	panel_radii_md: panel_radii_md,
+	panel_radii_lg: panel_radii_lg,
+	panel_padding_none: panel_padding_none,
+	panel_padding_xs: panel_padding_xs,
+	panel_padding_sm: panel_padding_sm,
+	panel_padding_md: panel_padding_md,
+	panel_padding_lg: panel_padding_lg,
+	panel_padding_xl: panel_padding_xl,
+	panel_border: panel_border,
+	panel_shadow: panel_shadow,
+	panel_gap_none: panel_gap_none,
+	panel_gap_xs: panel_gap_xs,
+	panel_gap_sm: panel_gap_sm,
+	panel_gap_md: panel_gap_md,
+	panel_gap_lg: panel_gap_lg,
+	panel_gap_xl: panel_gap_xl
+};
+
+export { styles as default, panel, panel_border, panel_color_default, panel_color_muted, panel_color_transparent, panel_cursor, panel_gap_lg, panel_gap_md, panel_gap_none, panel_gap_sm, panel_gap_xl, panel_gap_xs, panel_orientation_horizontal, panel_orientation_vertical, panel_padding_lg, panel_padding_md, panel_padding_none, panel_padding_sm, panel_padding_xl, panel_padding_xs, panel_radii_lg, panel_radii_md, panel_radii_none, panel_radii_sm, panel_shadow };
+//# sourceMappingURL=Panel.module.css.js.map

package/dist/esm/components/Panel/Panel.module.css.js.map

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

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

@@ -1,6 +1,64 @@
+import "./Panel.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { useMemo } from 'react';
+import { cn } from '../../lib/cva.js';
+import styles from './Panel.module.css.js';
+import { cva } from 'class-variance-authority';
 
+const panelVariants = cva(styles.panel, {
+  variants: {
+    orientation: {
+      horizontal: styles.panel_orientation_horizontal,
+      vertical: styles.panel_orientation_vertical
+    },
+    alignItems: {
+      start: styles["panel_align-items_start"],
+      center: styles["panel_align-items_center"],
+      end: styles["panel_align-items_end"]
+    },
+    color: {
+      default: styles.panel_color_default,
+      muted: styles.panel_color_muted,
+      transparent: styles.panel_color_transparent
+    },
+    radii: {
+      none: styles.panel_radii_none,
+      sm: styles.panel_radii_sm,
+      md: styles.panel_radii_md,
+      lg: styles.panel_radii_lg
+    },
+    padding: {
+      none: styles.panel_padding_none,
+      xs: styles.panel_padding_xs,
+      sm: styles.panel_padding_sm,
+      md: styles.panel_padding_md,
+      lg: styles.panel_padding_lg,
+      xl: styles.panel_padding_xl
+    },
+    gap: {
+      none: styles.panel_gap_none,
+      xs: styles.panel_gap_xs,
+      sm: styles.panel_gap_sm,
+      md: styles.panel_gap_md,
+      lg: styles.panel_gap_lg,
+      xl: styles.panel_gap_xl
+    },
+    hasBorder: {
+      true: styles.panel_border
+    },
+    hasShadow: {
+      true: styles.panel_shadow
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    alignItems: "center",
+    color: "default",
+    radii: "sm",
+    padding: "md",
+    gap: "sm"
+  }
+});
 const Panel = ({
   alignItems = "center",
   children,
@@ -16,41 +74,33 @@ const Panel = ({
   padding,
   radii = "sm",
   width,
+  className,
+  style,
   ...props
-}) => /* @__PURE__ */ jsx(Wrapper, { $alignItems: alignItems, $color: color, $cursor: cursor, $fillHeight: fillHeight, $fillWidth: fillWidth, $gap: gap, $hasBorder: hasBorder, $hasShadow: hasShadow, $height: height, $orientation: orientation, $padding: padding, $radii: radii, $width: width, ...props, children });
-const Wrapper = styled.div.withConfig({
-  componentId: "sc-1q78udp-0"
-})(["display:flex;flex-flow:", ";align-items:", ";width:", ";height:", ";background-color:", ";border-radius:", ";padding:", ";border:", ";box-shadow:", ";gap:", ";", ";"], ({
-  $orientation = "horizontal"
-}) => $orientation === "horizontal" ? "row wrap" : "column", ({
-  $alignItems = "center"
-}) => $alignItems === "center" ? "center" : `flex-${$alignItems}`, ({
-  $width,
-  $fillWidth
-}) => $fillWidth ? "100%" : $width, ({
-  $height,
-  $fillHeight
-}) => $fillHeight ? "100%" : $height, ({
-  $color = "default",
-  theme
-}) => theme.click.panel.color.background[$color], ({
-  $radii = "sm",
-  theme
-}) => theme.click.panel.radii[$radii], ({
-  $padding = "md",
-  theme
-}) => theme.click.panel.space.y[$padding], ({
-  $hasBorder,
-  theme
-}) => $hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none", ({
-  $hasShadow,
-  theme
-}) => $hasShadow ? theme.shadow[1] : "none", ({
-  $gap = "sm",
-  theme
-}) => theme.click.panel.space.gap[$gap], ({
-  $cursor
-}) => $cursor && `cursor: ${$cursor}`);
+}) => {
+  const mergedStyle = useMemo(() => ({
+    ...cursor && {
+      "--panel-cursor": cursor
+    },
+    ...(fillWidth || width) && {
+      "--panel-width": fillWidth ? "100%" : width
+    },
+    ...(fillHeight || height) && {
+      "--panel-height": fillHeight ? "100%" : height
+    },
+    ...style
+  }), [cursor, fillWidth, width, fillHeight, height, style]);
+  return /* @__PURE__ */ jsx("div", { ...props, style: mergedStyle, className: cn(panelVariants({
+    orientation,
+    alignItems,
+    color,
+    radii,
+    padding,
+    gap,
+    hasBorder,
+    hasShadow
+  }), cursor && styles.panel_cursor, className), children });
+};
 
 export { Panel };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import type { Orientation } from '@/types';\nimport type { CursorOptions } from './Panel.types';\nimport { HTMLAttributes } from 'react';\nimport { styled } from 'styled-components';\n\nexport type PanelPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type PanelColor = 'default' | 'muted' | 'transparent';\nexport type PanelRadii = 'none' | 'sm' | 'md' | 'lg';\ntype AlignItemsOption = 'start' | 'center' | 'end';\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Alignment of items along the cross axis */\n  alignItems?: AlignItemsOption;\n  /** The content to display inside the panel */\n  children?: React.ReactNode;\n  /** The background color variant of the panel */\n  color?: PanelColor;\n  /** The cursor style when hovering over the panel */\n  cursor?: CursorOptions;\n  /** Whether the panel should fill the full height of its container */\n  fillHeight?: boolean;\n  /** Whether the panel should fill the full width of its container */\n  fillWidth?: boolean;\n  /** The gap between child elements */\n  gap?: PanelPadding;\n  /** Whether to show a border around the panel */\n  hasBorder?: boolean;\n  /** Whether to show a shadow on the panel */\n  hasShadow?: boolean;\n  /** Fixed height of the panel */\n  height?: string;\n  /** The orientation of content flow - horizontal or vertical */\n  orientation?: Orientation;\n  /** The padding inside the panel */\n  padding?: PanelPadding;\n  /** The border radius of the panel corners */\n  radii?: PanelRadii;\n  /** Fixed width of the panel */\n  width?: string;\n}\n\nexport const Panel = ({\n  alignItems = 'center',\n  children,\n  color,\n  cursor,\n  fillHeight,\n  fillWidth,\n  gap,\n  hasBorder,\n  hasShadow,\n  height,\n  orientation = 'horizontal',\n  padding,\n  radii = 'sm',\n  width,\n  ...props\n}: PanelProps) => (\n  <Wrapper\n    $alignItems={alignItems}\n    $color={color}\n    $cursor={cursor}\n    $fillHeight={fillHeight}\n    $fillWidth={fillWidth}\n    $gap={gap}\n    $hasBorder={hasBorder}\n    $hasShadow={hasShadow}\n    $height={height}\n    $orientation={orientation}\n    $padding={padding}\n    $radii={radii}\n    $width={width}\n    {...props}\n  >\n    {children}\n  </Wrapper>\n);\n\nconst Wrapper = styled.div<{\n  $alignItems?: AlignItemsOption;\n  $color?: PanelColor;\n  $cursor?: CursorOptions;\n  $fillHeight?: boolean;\n  $fillWidth?: boolean;\n  $gap?: PanelPadding;\n  $hasBorder?: boolean;\n  $hasShadow?: boolean;\n  $height?: string;\n  $orientation?: Orientation;\n  $padding?: PanelPadding;\n  $radii?: PanelRadii;\n  $width?: string;\n}>`\n  display: flex;\n  flex-flow: ${({ $orientation = 'horizontal' }) =>\n    $orientation === 'horizontal' ? 'row wrap' : 'column'};\n  align-items: ${({ $alignItems = 'center' }) =>\n    $alignItems === 'center' ? 'center' : `flex-${$alignItems}`};\n  width: ${({ $width, $fillWidth }) => ($fillWidth ? '100%' : $width)};\n  height: ${({ $height, $fillHeight }) => ($fillHeight ? '100%' : $height)};\n  background-color: ${({ $color = 'default', theme }) =>\n    theme.click.panel.color.background[$color]};\n  border-radius: ${({ $radii = 'sm', theme }) => theme.click.panel.radii[$radii]};\n  padding: ${({ $padding = 'md', theme }) => theme.click.panel.space.y[$padding]};\n  border: ${({ $hasBorder, theme }) =>\n    $hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : 'none'};\n  box-shadow: ${({ $hasShadow, theme }) => ($hasShadow ? theme.shadow[1] : 'none')};\n  gap: ${({ $gap = 'sm', theme }) => theme.click.panel.space.gap[$gap]};\n  ${({ $cursor }) => $cursor && `cursor: ${$cursor}`};\n`;\n"],"names":["Panel","alignItems","children","color","cursor","fillHeight","fillWidth","gap","hasBorder","hasShadow","height","orientation","padding","radii","width","props","Wrapper","styled","div","withConfig","componentId","$orientation","$alignItems","$width","$fillWidth","$height","$fillHeight","$color","theme","click","panel","background","$radii","$padding","space","y","$hasBorder","global","stroke","default","$hasShadow","shadow","$gap","$cursor"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { useMemo } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport type { PanelProps } from './Panel.types';\nimport styles from './Panel.module.css';\n\nconst panelVariants = cva(styles.panel, {\n  variants: {\n    orientation: {\n      horizontal: styles.panel_orientation_horizontal,\n      vertical: styles.panel_orientation_vertical,\n    },\n    alignItems: {\n      start: styles['panel_align-items_start'],\n      center: styles['panel_align-items_center'],\n      end: styles['panel_align-items_end'],\n    },\n    color: {\n      default: styles.panel_color_default,\n      muted: styles.panel_color_muted,\n      transparent: styles.panel_color_transparent,\n    },\n    radii: {\n      none: styles.panel_radii_none,\n      sm: styles.panel_radii_sm,\n      md: styles.panel_radii_md,\n      lg: styles.panel_radii_lg,\n    },\n    padding: {\n      none: styles.panel_padding_none,\n      xs: styles.panel_padding_xs,\n      sm: styles.panel_padding_sm,\n      md: styles.panel_padding_md,\n      lg: styles.panel_padding_lg,\n      xl: styles.panel_padding_xl,\n    },\n    gap: {\n      none: styles.panel_gap_none,\n      xs: styles.panel_gap_xs,\n      sm: styles.panel_gap_sm,\n      md: styles.panel_gap_md,\n      lg: styles.panel_gap_lg,\n      xl: styles.panel_gap_xl,\n    },\n    hasBorder: {\n      true: styles.panel_border,\n    },\n    hasShadow: {\n      true: styles.panel_shadow,\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    alignItems: 'center',\n    color: 'default',\n    radii: 'sm',\n    padding: 'md',\n    gap: 'sm',\n  },\n});\n\nexport const Panel = ({\n  alignItems = 'center',\n  children,\n  color,\n  cursor,\n  fillHeight,\n  fillWidth,\n  gap,\n  hasBorder,\n  hasShadow,\n  height,\n  orientation = 'horizontal',\n  padding,\n  radii = 'sm',\n  width,\n  className,\n  style,\n  ...props\n}: PanelProps) => {\n  const mergedStyle = useMemo(\n    () =>\n      ({\n        ...(cursor && { '--panel-cursor': cursor }),\n        ...((fillWidth || width) && { '--panel-width': fillWidth ? '100%' : width }),\n        ...((fillHeight || height) && {\n          '--panel-height': fillHeight ? '100%' : height,\n        }),\n        ...style,\n      }) as CSSProperties,\n    [cursor, fillWidth, width, fillHeight, height, style]\n  );\n\n  return (\n    <div\n      {...props}\n      style={mergedStyle}\n      className={cn(\n        panelVariants({\n          orientation,\n          alignItems,\n          color,\n          radii,\n          padding,\n          gap,\n          hasBorder,\n          hasShadow,\n        }),\n        cursor && styles.panel_cursor,\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["panelVariants","cva","styles","panel","variants","orientation","horizontal","panel_orientation_horizontal","vertical","panel_orientation_vertical","alignItems","start","center","end","color","default","panel_color_default","muted","panel_color_muted","transparent","panel_color_transparent","radii","none","panel_radii_none","sm","panel_radii_sm","md","panel_radii_md","lg","panel_radii_lg","padding","panel_padding_none","xs","panel_padding_xs","panel_padding_sm","panel_padding_md","panel_padding_lg","xl","panel_padding_xl","gap","panel_gap_none","panel_gap_xs","panel_gap_sm","panel_gap_md","panel_gap_lg","panel_gap_xl","hasBorder","true","panel_border","hasShadow","panel_shadow","defaultVariants","Panel","children","cursor","fillHeight","fillWidth","height","width","className","style","props","mergedStyle","useMemo","cn","panel_cursor"],"mappings":"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"}

package/dist/esm/components/Popover/Popover.css

@@ -0,0 +1,32 @@
+.menu-panel__-IeVm {
+  display: block;
+  padding: var(--click-popover-space-y) var(--click-popover-space-x);
+  border: 1px solid var(--click-popover-color-panel-stroke-default);
+  border-radius: var(--click-popover-radii-all);
+  background-color: var(--click-popover-color-panel-background-default);
+  box-shadow: var(--click-popover-shadow-default);
+}
+
+.menu-panel_show-close__Qx3Mo {
+  padding-top: 1rem;
+}
+
+.trigger__QvCU1 {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     rule used the same value. */
+  width: fit-content;
+  border: none;
+  background: inherit;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.close-button__fpjhc {
+  position: absolute;
+  top: var(--click-popover-space-y);
+  right: var(--click-popover-space-x);
+  width: var(--click-popover-icon-size-width);
+  height: var(--click-popover-icon-size-height);
+}

package/dist/esm/components/Popover/Popover.module.css.js

@@ -0,0 +1,10 @@
+const trigger = "trigger__QvCU1";
+const styles = {
+	"menu-panel": "menu-panel__-IeVm",
+	"menu-panel_show-close": "menu-panel_show-close__Qx3Mo",
+	trigger: trigger,
+	"close-button": "close-button__fpjhc"
+};
+
+export { styles as default, trigger };
+//# sourceMappingURL=Popover.module.css.js.map

package/dist/esm/components/Popover/Popover.module.css.js.map

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

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

@@ -1,11 +1,14 @@
+import "./Popover.css";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { GenericMenuPanel, Arrow } from '../GenericMenu/index.js';
-import { styled } from 'styled-components';
-import { EmptyButton } from '../EmptyButton/index.js';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cva.js';
 import Popover_Arrow from '../Assets/Icons/Popover-Arrow.js';
 import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
+import styles from './Popover.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
 const Popover = ({
   children,
@@ -13,49 +16,37 @@ const Popover = ({
 }) => {
   return /* @__PURE__ */ jsx(RadixPopover.Root, { ...props, children });
 };
-const Trigger = styled(RadixPopover.Trigger).withConfig({
-  componentId: "sc-1dii14g-0"
-})(["background:inherit;border:none;color:inherit;cursor:pointer;font:inherit;width:fit-content;"]);
 const PopoverTrigger = ({
   anchor,
   children,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsx("div", { children }) }),
+    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsx("div", { className: styles.trigger, children }) }),
     anchor && /* @__PURE__ */ jsx(RadixPopover.Anchor, { asChild: true, children: anchor })
   ] });
 };
 PopoverTrigger.displayName = "PopoverTrigger";
 Popover.Trigger = PopoverTrigger;
-const MenuPanel = styled(GenericMenuPanel).withConfig({
-  componentId: "sc-1dii14g-1"
-})(["display:block;padding:", " ", ";background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";", ";"], ({
-  theme
-}) => theme.click.popover.space.y, ({
-  theme
-}) => theme.click.popover.space.x, ({
-  theme
-}) => theme.click.popover.color.panel.background.default, ({
-  theme
-}) => theme.click.popover.color.panel.stroke.default, ({
-  theme
-}) => theme.click.popover.radii.all, ({
-  theme
-}) => theme.click.popover.shadow.default, ({
-  $showClose
-}) => $showClose ? "padding-top: 1rem;" : "");
-const CloseButton = styled(EmptyButton).withConfig({
-  componentId: "sc-1dii14g-2"
-})(["position:absolute;top:", ";right:", ";width:", ";height:", ";"], ({
-  theme
-}) => theme.click.popover.space.y, ({
-  theme
-}) => theme.click.popover.space.x, ({
-  theme
-}) => theme.click.popover.icon.size.width, ({
-  theme
-}) => theme.click.popover.icon.size.height);
+const menuPanelVariants = cva(styles["menu-panel"], {
+  variants: {
+    showClose: {
+      true: styles["menu-panel_show-close"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    showClose: false
+  }
+});
+const _MenuPanel = ({
+  showClose,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsx(GenericMenuPanel, { ref, ...props, className: cn(menuPanelVariants({
+  showClose
+}), className) });
+const MenuPanel = forwardRef(_MenuPanel);
 const PopoverContent = ({
   children,
   showArrow,
@@ -65,8 +56,8 @@ const PopoverContent = ({
   ...props
 }) => {
   const portalContainer = useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxs(MenuPanel, { as: RadixPopover.Content, $type: "popover", $showClose: showClose, $showArrow: showArrow, sideOffset: 4, ...props, children: [
-    showClose && /* @__PURE__ */ jsx(CloseButton, { as: RadixPopover.Close, asChild: true, children: /* @__PURE__ */ jsx(SvgImage, { name: "cross" }) }),
+  return /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxs(MenuPanel, { as: RadixPopover.Content, type: "popover", showClose, showArrow, sideOffset: 4, ...props, children: [
+    showClose && /* @__PURE__ */ jsx(RadixPopover.Close, { asChild: true, className: styles["close-button"], children: /* @__PURE__ */ jsx(SvgImage, { name: "cross" }) }),
     showArrow && /* @__PURE__ */ jsx(Arrow, { asChild: true, as: RadixPopover.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsx(Popover_Arrow, {}) }),
     children
   ] }) });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport { styled } from 'styled-components';\nimport { ReactNode } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { EmptyButton } from '@/components/EmptyButton';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\nconst Trigger = styled(RadixPopover.Trigger)`\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  width: fit-content;\n`;\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <Trigger\n        asChild\n        {...props}\n      >\n        <div>{children}</div>\n      </Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst MenuPanel = styled(GenericMenuPanel)<{ $showClose?: boolean }>`\n  display: block;\n  padding: ${({ theme }) => theme.click.popover.space.y}\n    ${({ theme }) => theme.click.popover.space.x};\n  background-color: ${({ theme }) => theme.click.popover.color.panel.background.default};\n  border: 1px solid ${({ theme }) => theme.click.popover.color.panel.stroke.default};\n  border-radius: ${({ theme }) => theme.click.popover.radii.all};\n  box-shadow: ${({ theme }) => theme.click.popover.shadow.default};\n\n  ${({ $showClose }) => ($showClose ? 'padding-top: 1rem;' : '')};\n`;\n\nconst CloseButton = styled(EmptyButton)`\n  position: absolute;\n  top: ${({ theme }) => theme.click.popover.space.y};\n  right: ${({ theme }) => theme.click.popover.space.x};\n  width: ${({ theme }) => theme.click.popover.icon.size.width};\n  height: ${({ theme }) => theme.click.popover.icon.size.height};\n`;\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        $type=\"popover\"\n        $showClose={showClose}\n        $showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showClose && (\n          <CloseButton\n            as={RadixPopover.Close}\n            asChild\n          >\n            <Icon name=\"cross\" />\n          </CloseButton>\n        )}\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":["Popover","children","props","Trigger","styled","RadixPopover","withConfig","componentId","PopoverTrigger","anchor","displayName","MenuPanel","GenericMenuPanel","theme","click","popover","space","y","x","color","panel","background","default","stroke","radii","all","shadow","$showClose","CloseButton","EmptyButton","icon","size","width","height","PopoverContent","showArrow","showClose","forceMount","container","portalContainer","useResolvedPortalContainer","Content","Close","Icon","Arrow"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Icon } from '@/components/Icon';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Popover.module.css';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <RadixPopover.Trigger\n        asChild\n        {...props}\n      >\n        <div className={styles.trigger}>{children}</div>\n      </RadixPopover.Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst menuPanelVariants = cva(styles['menu-panel'], {\n  variants: {\n    showClose: {\n      true: styles['menu-panel_show-close'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showClose: false,\n  },\n});\n\ntype MenuPanelComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean }\n) => ReactNode;\n\nconst _MenuPanel = <T extends ElementType = 'div'>(\n  {\n    showClose,\n    className,\n    ...props\n  }: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean },\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(menuPanelVariants({ showClose }), className)}\n  />\n);\n\nconst MenuPanel: MenuPanelComponent = forwardRef(_MenuPanel);\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        type=\"popover\"\n        showClose={showClose}\n        showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showClose && (\n          <RadixPopover.Close\n            asChild\n            className={styles['close-button']}\n          >\n            <Icon name=\"cross\" />\n          </RadixPopover.Close>\n        )}\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":["Popover","children","props","PopoverTrigger","anchor","styles","trigger","displayName","Trigger","menuPanelVariants","cva","variants","showClose","true","false","defaultVariants","_MenuPanel","className","ref","cn","MenuPanel","forwardRef","PopoverContent","showArrow","forceMount","container","portalContainer","useResolvedPortalContainer","RadixPopover","Content","Icon","Arrow"],"mappings":"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"}