@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

package/dist/cjs/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/cjs/components/Panel/Panel.module.css.cjs

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+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
+};
+
+exports.default = styles;
+exports.panel = panel;
+exports.panel_border = panel_border;
+exports.panel_color_default = panel_color_default;
+exports.panel_color_muted = panel_color_muted;
+exports.panel_color_transparent = panel_color_transparent;
+exports.panel_cursor = panel_cursor;
+exports.panel_gap_lg = panel_gap_lg;
+exports.panel_gap_md = panel_gap_md;
+exports.panel_gap_none = panel_gap_none;
+exports.panel_gap_sm = panel_gap_sm;
+exports.panel_gap_xl = panel_gap_xl;
+exports.panel_gap_xs = panel_gap_xs;
+exports.panel_orientation_horizontal = panel_orientation_horizontal;
+exports.panel_orientation_vertical = panel_orientation_vertical;
+exports.panel_padding_lg = panel_padding_lg;
+exports.panel_padding_md = panel_padding_md;
+exports.panel_padding_none = panel_padding_none;
+exports.panel_padding_sm = panel_padding_sm;
+exports.panel_padding_xl = panel_padding_xl;
+exports.panel_padding_xs = panel_padding_xs;
+exports.panel_radii_lg = panel_radii_lg;
+exports.panel_radii_md = panel_radii_md;
+exports.panel_radii_none = panel_radii_none;
+exports.panel_radii_sm = panel_radii_sm;
+exports.panel_shadow = panel_shadow;
+//# sourceMappingURL=Panel.module.css.cjs.map

package/dist/cjs/components/Panel/Panel.module.css.cjs.map

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

package/dist/cjs/components/Panel/index.cjs

@@ -1,10 +1,68 @@
+require("./Panel.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const react = require('react');
+const cva = require('../../lib/cva.cjs');
+const Panel_module = require('./Panel.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
+const panelVariants = classVarianceAuthority.cva(Panel_module.default.panel, {
+  variants: {
+    orientation: {
+      horizontal: Panel_module.default.panel_orientation_horizontal,
+      vertical: Panel_module.default.panel_orientation_vertical
+    },
+    alignItems: {
+      start: Panel_module.default["panel_align-items_start"],
+      center: Panel_module.default["panel_align-items_center"],
+      end: Panel_module.default["panel_align-items_end"]
+    },
+    color: {
+      default: Panel_module.default.panel_color_default,
+      muted: Panel_module.default.panel_color_muted,
+      transparent: Panel_module.default.panel_color_transparent
+    },
+    radii: {
+      none: Panel_module.default.panel_radii_none,
+      sm: Panel_module.default.panel_radii_sm,
+      md: Panel_module.default.panel_radii_md,
+      lg: Panel_module.default.panel_radii_lg
+    },
+    padding: {
+      none: Panel_module.default.panel_padding_none,
+      xs: Panel_module.default.panel_padding_xs,
+      sm: Panel_module.default.panel_padding_sm,
+      md: Panel_module.default.panel_padding_md,
+      lg: Panel_module.default.panel_padding_lg,
+      xl: Panel_module.default.panel_padding_xl
+    },
+    gap: {
+      none: Panel_module.default.panel_gap_none,
+      xs: Panel_module.default.panel_gap_xs,
+      sm: Panel_module.default.panel_gap_sm,
+      md: Panel_module.default.panel_gap_md,
+      lg: Panel_module.default.panel_gap_lg,
+      xl: Panel_module.default.panel_gap_xl
+    },
+    hasBorder: {
+      true: Panel_module.default.panel_border
+    },
+    hasShadow: {
+      true: Panel_module.default.panel_shadow
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    alignItems: "center",
+    color: "default",
+    radii: "sm",
+    padding: "md",
+    gap: "sm"
+  }
+});
 const Panel = ({
   alignItems = "center",
   children,
@@ -20,41 +78,33 @@ const Panel = ({
   padding,
   radii = "sm",
   width,
+  className,
+  style,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.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 = styledComponents.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 = react.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__ */ jsxRuntime.jsx("div", { ...props, style: mergedStyle, className: cva.cn(panelVariants({
+    orientation,
+    alignItems,
+    color,
+    radii,
+    padding,
+    gap,
+    hasBorder,
+    hasShadow
+  }), cursor && Panel_module.default.panel_cursor, className), children });
+};
 
 exports.Panel = Panel;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Panel/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsx","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.cjs","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","jsx","cn","panel_cursor"],"mappings":"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"}

package/dist/cjs/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/cjs/components/Popover/Popover.module.css.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+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"
+};
+
+exports.default = styles;
+exports.trigger = trigger;
+//# sourceMappingURL=Popover.module.css.cjs.map

package/dist/cjs/components/Popover/Popover.module.css.cjs.map

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

package/dist/cjs/components/Popover/index.cjs

@@ -1,3 +1,4 @@
+require("./Popover.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,11 +6,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const RadixPopover = require('@radix-ui/react-popover');
 const GenericMenu = require('../GenericMenu/index.cjs');
-const styledComponents = require('styled-components');
-const EmptyButton = require('../EmptyButton/index.cjs');
+const react = require('react');
+const cva = require('../../lib/cva.cjs');
 const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
 const PortalContext = require('../../providers/PortalContext.cjs');
+const Popover_module = require('./Popover.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -37,49 +40,37 @@ const Popover = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Root, { ...props, children });
 };
-const Trigger = styledComponents.styled(RadixPopover__namespace.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Popover_module.default.trigger, children }) }),
     anchor && /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Anchor, { asChild: true, children: anchor })
   ] });
 };
 PopoverTrigger.displayName = "PopoverTrigger";
 Popover.Trigger = PopoverTrigger;
-const MenuPanel = styledComponents.styled(GenericMenu.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 = styledComponents.styled(EmptyButton.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 = classVarianceAuthority.cva(Popover_module.default["menu-panel"], {
+  variants: {
+    showClose: {
+      true: Popover_module.default["menu-panel_show-close"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    showClose: false
+  }
+});
+const _MenuPanel = ({
+  showClose,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuPanel, { ref, ...props, className: cva.cn(menuPanelVariants({
+  showClose
+}), className) });
+const MenuPanel = react.forwardRef(_MenuPanel);
 const PopoverContent = ({
   children,
   showArrow,
@@ -89,8 +80,8 @@ const PopoverContent = ({
   ...props
 }) => {
   const portalContainer = PortalContext.useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(MenuPanel, { as: RadixPopover__namespace.Content, $type: "popover", $showClose: showClose, $showArrow: showArrow, sideOffset: 4, ...props, children: [
-    showClose && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { as: RadixPopover__namespace.Close, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross" }) }),
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(MenuPanel, { as: RadixPopover__namespace.Content, type: "popover", showClose, showArrow, sideOffset: 4, ...props, children: [
+    showClose && /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Close, { asChild: true, className: Popover_module.default["close-button"], children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross" }) }),
     showArrow && /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.Arrow, { asChild: true, as: RadixPopover__namespace.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, {}) }),
     children
   ] }) });

package/dist/cjs/components/Popover/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","RadixPopover","Trigger","styled","withConfig","componentId","PopoverTrigger","anchor","jsxs","Fragment","jsx","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","Popover_Arrow"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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","RadixPopover","PopoverTrigger","anchor","jsxs","Fragment","jsx","styles","trigger","displayName","Trigger","menuPanelVariants","cva","variants","showClose","true","false","defaultVariants","_MenuPanel","className","ref","GenericMenuPanel","cn","MenuPanel","forwardRef","PopoverContent","showArrow","forceMount","container","portalContainer","useResolvedPortalContainer","Content","Icon","Arrow","Popover_Arrow"],"mappings":"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"}