@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

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

@@ -46,49 +46,142 @@ const Pagination = ({
       onPageSizeChangeProp(Number(value));
     }
   };
-  const onPrevClick = useCallback((e) => {
-    if (leftButtonDisabled) {
-      return;
-    }
-    onChangeProp(currentPage - 1);
-    if (typeof onPrevPageClick === "function") {
-      onPrevPageClick(e);
-    }
-  }, [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]);
-  const onNextClick = useCallback((e) => {
-    if (rightButtonDisabled) {
-      return;
-    }
-    onChangeProp(currentPage + 1);
-    if (typeof onNextPageClick === "function") {
-      onNextPageClick(e);
-    }
-  }, [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]);
+  const onPrevClick = useCallback(
+    (e) => {
+      if (leftButtonDisabled) {
+        return;
+      }
+      onChangeProp(currentPage - 1);
+      if (typeof onPrevPageClick === "function") {
+        onPrevPageClick(e);
+      }
+    },
+    [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]
+  );
+  const onNextClick = useCallback(
+    (e) => {
+      if (rightButtonDisabled) {
+        return;
+      }
+      onChangeProp(currentPage + 1);
+      if (typeof onNextPageClick === "function") {
+        onNextPageClick(e);
+      }
+    },
+    [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]
+  );
   if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {
     pageSize = maxRowsPerPageList[0];
   }
-  return /* @__PURE__ */ jsxs(Container, { gap, justifyContent: justifyContent ?? (rowCount || maxRowsPerPageList.length > 0 ? "space-between" : "center"), fillWidth, ...props, children: [
-    hasRowCount && /* @__PURE__ */ jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
-      typeof rowCount === "number" ? formatNumber(rowCount) : rowCount,
-      " rows"
-    ] }),
-    /* @__PURE__ */ jsxs(Container, { gap: "xxs", fillWidth: false, children: [
-      /* @__PURE__ */ jsx(IconButton, { icon: "chevron-left", type: "ghost", disabled: leftButtonDisabled, onClick: onPrevClick, "data-testid": "prev-btn" }),
-      /* @__PURE__ */ jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsx(NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, "aria-label": currentPage.toString(), min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
-      !!totalPages && /* @__PURE__ */ jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
-        "of ",
-        formatNumber(totalPages)
-      ] }),
-      /* @__PURE__ */ jsx(IconButton, { icon: "chevron-right", type: "ghost", disabled: rightButtonDisabled, onClick: onNextClick, "data-testid": "next-btn" })
-    ] }),
-    maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxs(Select, { className: styles["custom-select"], onSelect: onPageSizeChange, value: pageSize.toString(), children: [
-      allowAllRows && /* @__PURE__ */ jsx(Select.Item, { value: "-1", children: "All rows" }),
-      maxRowsPerPageList.map((option) => /* @__PURE__ */ jsxs(Select.Item, { value: option.toString(), children: [
-        option,
-        " rows"
-      ] }, option))
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      gap,
+      justifyContent: justifyContent ?? (rowCount || maxRowsPerPageList.length > 0 ? "space-between" : "center"),
+      fillWidth,
+      ...props,
+      children: [
+        hasRowCount && /* @__PURE__ */ jsxs(
+          Text,
+          {
+            component: "div",
+            color: "muted",
+            size: "sm",
+            children: [
+              typeof rowCount === "number" ? formatNumber(rowCount) : rowCount,
+              " rows"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Container,
+          {
+            gap: "xxs",
+            fillWidth: false,
+            children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  icon: "chevron-left",
+                  type: "ghost",
+                  disabled: leftButtonDisabled,
+                  onClick: onPrevClick,
+                  "data-testid": "prev-btn"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Container,
+                {
+                  maxWidth: "50px",
+                  fillWidth: false,
+                  children: /* @__PURE__ */ jsx(
+                    NumberField,
+                    {
+                      ref: inputRef,
+                      onChange,
+                      value: currentPage,
+                      loading: false,
+                      "aria-label": currentPage.toString(),
+                      min: 1,
+                      max: totalPages,
+                      onFocus: onPageNumberFocus,
+                      hideControls: true,
+                      onBlur: onPageNumberBlur,
+                      disabled: leftButtonDisabled && rightButtonDisabled
+                    }
+                  )
+                }
+              ),
+              !!totalPages && /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  component: "div",
+                  color: "muted",
+                  size: "sm",
+                  children: [
+                    "of ",
+                    formatNumber(totalPages)
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  icon: "chevron-right",
+                  type: "ghost",
+                  disabled: rightButtonDisabled,
+                  onClick: onNextClick,
+                  "data-testid": "next-btn"
+                }
+              )
+            ]
+          }
+        ),
+        maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxs(
+          Select,
+          {
+            className: styles["custom-select"],
+            onSelect: onPageSizeChange,
+            value: pageSize.toString(),
+            children: [
+              allowAllRows && /* @__PURE__ */ jsx(Select.Item, { value: "-1", children: "All rows" }),
+              maxRowsPerPageList.map((option) => /* @__PURE__ */ jsxs(
+                Select.Item,
+                {
+                  value: option.toString(),
+                  children: [
+                    option,
+                    " rows"
+                  ]
+                },
+                option
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 
 export { Pagination };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import {\n  FocusEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  useCallback,\n  useRef,\n} from 'react';\nimport { Container, type ContainerProps } from '@/components/Container';\nimport { IconButton } from '@/components/IconButton';\nimport { NumberField } from '@/components/NumberField';\nimport { Select } from '@/components/Select';\nimport { Text } from '@/components/Text';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<\n  ContainerProps<'div'>,\n  'children' | 'onChange'\n> {\n  /** Total number of pages available */\n  totalPages?: number;\n  /** The currently selected page number */\n  currentPage: number;\n  /** List of options for rows per page dropdown */\n  maxRowsPerPageList?: number[];\n  /** Total row count to display */\n  rowCount?: number | string;\n  /** Callback when page number changes */\n  onChange: (pageNumber: number) => void;\n  /** Callback when page size changes */\n  onPageSizeChange?: (pageNumber: number) => void;\n  /** Current page size/rows per page */\n  pageSize?: number;\n  /** Callback when next page button is clicked */\n  onNextPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when previous page button is clicked */\n  onPrevPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when page number input receives focus */\n  onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;\n  /** Callback when page number input loses focus */\n  onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;\n  /** Whether to disable the next page button */\n  disableNextButton?: boolean;\n  /** Whether to show \"All rows\" option in the dropdown */\n  allowAllRows?: boolean;\n}\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  maxRowsPerPageList = [],\n  rowCount,\n  onChange: onChangeProp,\n  onPageSizeChange: onPageSizeChangeProp,\n  pageSize = -1,\n  fillWidth = true,\n  gap = 'md',\n  justifyContent,\n  onNextPageClick,\n  onPrevPageClick,\n  onPageNumberFocus,\n  onPageNumberBlur,\n  disableNextButton,\n  allowAllRows = true,\n  ...props\n}: PaginationProps): ReactElement => {\n  const hasRowCount = ['number', 'string'].includes(typeof rowCount);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const formatNumber = (value: number) => {\n    return new Intl.NumberFormat('en').format(value);\n  };\n  const leftButtonDisabled = currentPage <= 1;\n  const rightButtonDisabled =\n    (!!totalPages && currentPage === totalPages) || disableNextButton;\n\n  const onChange = (value: string) => {\n    const sanitizedValue = parseInt(value, 10);\n    if (\n      sanitizedValue < 1 ||\n      inputRef.current?.disabled ||\n      (typeof totalPages !== 'undefined' ? sanitizedValue > totalPages : false)\n    ) {\n      return;\n    }\n\n    onChangeProp(sanitizedValue);\n  };\n\n  const onPageSizeChange = (value: string) => {\n    if (typeof onPageSizeChangeProp === 'function') {\n      onPageSizeChangeProp(Number(value));\n    }\n  };\n\n  const onPrevClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (leftButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage - 1);\n      if (typeof onPrevPageClick === 'function') {\n        onPrevPageClick(e);\n      }\n    },\n    [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]\n  );\n\n  const onNextClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (rightButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage + 1);\n      if (typeof onNextPageClick === 'function') {\n        onNextPageClick(e);\n      }\n    },\n    [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]\n  );\n\n  // if `allowAllRows` is false we need to switch to the first option in the list\n  if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {\n    pageSize = maxRowsPerPageList[0];\n  }\n\n  return (\n    <Container\n      gap={gap}\n      justifyContent={\n        justifyContent ??\n        (rowCount || maxRowsPerPageList.length > 0 ? 'space-between' : 'center')\n      }\n      fillWidth={fillWidth}\n      {...props}\n    >\n      {hasRowCount && (\n        <Text\n          component=\"div\"\n          color=\"muted\"\n          size=\"sm\"\n        >\n          {typeof rowCount === 'number' ? formatNumber(rowCount) : rowCount} rows\n        </Text>\n      )}\n      <Container\n        gap=\"xxs\"\n        fillWidth={false}\n      >\n        <IconButton\n          icon=\"chevron-left\"\n          type=\"ghost\"\n          disabled={leftButtonDisabled}\n          onClick={onPrevClick}\n          data-testid=\"prev-btn\"\n        />\n        <Container\n          maxWidth=\"50px\"\n          fillWidth={false}\n        >\n          <NumberField\n            ref={inputRef}\n            onChange={onChange}\n            value={currentPage}\n            loading={false}\n            aria-label={currentPage.toString()}\n            min={1}\n            max={totalPages}\n            onFocus={onPageNumberFocus}\n            hideControls\n            onBlur={onPageNumberBlur}\n            disabled={leftButtonDisabled && rightButtonDisabled}\n          />\n        </Container>\n        {!!totalPages && (\n          <Text\n            component=\"div\"\n            color=\"muted\"\n            size=\"sm\"\n          >\n            of {formatNumber(totalPages)}\n          </Text>\n        )}\n        <IconButton\n          icon=\"chevron-right\"\n          type=\"ghost\"\n          disabled={rightButtonDisabled}\n          onClick={onNextClick}\n          data-testid=\"next-btn\"\n        />\n      </Container>\n      {maxRowsPerPageList.length > 0 && (\n        <Select\n          className={styles['custom-select']}\n          onSelect={onPageSizeChange}\n          value={pageSize.toString()}\n        >\n          {allowAllRows && <Select.Item value=\"-1\">All rows</Select.Item>}\n          {maxRowsPerPageList.map(option => (\n            <Select.Item\n              key={option}\n              value={option.toString()}\n            >\n              {option} rows\n            </Select.Item>\n          ))}\n        </Select>\n      )}\n    </Container>\n  );\n};\n"],"names":["Pagination","totalPages","currentPage","maxRowsPerPageList","rowCount","onChange","onChangeProp","onPageSizeChange","onPageSizeChangeProp","pageSize","fillWidth","gap","justifyContent","onNextPageClick","onPrevPageClick","onPageNumberFocus","onPageNumberBlur","disableNextButton","allowAllRows","props","hasRowCount","includes","inputRef","useRef","formatNumber","value","Intl","NumberFormat","format","leftButtonDisabled","rightButtonDisabled","sanitizedValue","parseInt","current","disabled","Number","onPrevClick","useCallback","e","onNextClick","length","toString","styles","map","option"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import {\n  FocusEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  useCallback,\n  useRef,\n} from 'react';\nimport { Container, type ContainerProps } from '@/components/Container';\nimport { IconButton } from '@/components/IconButton';\nimport { NumberField } from '@/components/NumberField';\nimport { Select } from '@/components/Select';\nimport { Text } from '@/components/Text';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<\n  ContainerProps<'div'>,\n  'children' | 'onChange'\n> {\n  /** Total number of pages available */\n  totalPages?: number;\n  /** The currently selected page number */\n  currentPage: number;\n  /** List of options for rows per page dropdown */\n  maxRowsPerPageList?: number[];\n  /** Total row count to display */\n  rowCount?: number | string;\n  /** Callback when page number changes */\n  onChange: (pageNumber: number) => void;\n  /** Callback when page size changes */\n  onPageSizeChange?: (pageNumber: number) => void;\n  /** Current page size/rows per page */\n  pageSize?: number;\n  /** Callback when next page button is clicked */\n  onNextPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when previous page button is clicked */\n  onPrevPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when page number input receives focus */\n  onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;\n  /** Callback when page number input loses focus */\n  onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;\n  /** Whether to disable the next page button */\n  disableNextButton?: boolean;\n  /** Whether to show \"All rows\" option in the dropdown */\n  allowAllRows?: boolean;\n}\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  maxRowsPerPageList = [],\n  rowCount,\n  onChange: onChangeProp,\n  onPageSizeChange: onPageSizeChangeProp,\n  pageSize = -1,\n  fillWidth = true,\n  gap = 'md',\n  justifyContent,\n  onNextPageClick,\n  onPrevPageClick,\n  onPageNumberFocus,\n  onPageNumberBlur,\n  disableNextButton,\n  allowAllRows = true,\n  ...props\n}: PaginationProps): ReactElement => {\n  const hasRowCount = ['number', 'string'].includes(typeof rowCount);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const formatNumber = (value: number) => {\n    return new Intl.NumberFormat('en').format(value);\n  };\n  const leftButtonDisabled = currentPage <= 1;\n  const rightButtonDisabled =\n    (!!totalPages && currentPage === totalPages) || disableNextButton;\n\n  const onChange = (value: string) => {\n    const sanitizedValue = parseInt(value, 10);\n    if (\n      sanitizedValue < 1 ||\n      inputRef.current?.disabled ||\n      (typeof totalPages !== 'undefined' ? sanitizedValue > totalPages : false)\n    ) {\n      return;\n    }\n\n    onChangeProp(sanitizedValue);\n  };\n\n  const onPageSizeChange = (value: string) => {\n    if (typeof onPageSizeChangeProp === 'function') {\n      onPageSizeChangeProp(Number(value));\n    }\n  };\n\n  const onPrevClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (leftButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage - 1);\n      if (typeof onPrevPageClick === 'function') {\n        onPrevPageClick(e);\n      }\n    },\n    [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]\n  );\n\n  const onNextClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (rightButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage + 1);\n      if (typeof onNextPageClick === 'function') {\n        onNextPageClick(e);\n      }\n    },\n    [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]\n  );\n\n  // if `allowAllRows` is false we need to switch to the first option in the list\n  if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {\n    pageSize = maxRowsPerPageList[0];\n  }\n\n  return (\n    <Container\n      gap={gap}\n      justifyContent={\n        justifyContent ??\n        (rowCount || maxRowsPerPageList.length > 0 ? 'space-between' : 'center')\n      }\n      fillWidth={fillWidth}\n      {...props}\n    >\n      {hasRowCount && (\n        <Text\n          component=\"div\"\n          color=\"muted\"\n          size=\"sm\"\n        >\n          {typeof rowCount === 'number' ? formatNumber(rowCount) : rowCount} rows\n        </Text>\n      )}\n      <Container\n        gap=\"xxs\"\n        fillWidth={false}\n      >\n        <IconButton\n          icon=\"chevron-left\"\n          type=\"ghost\"\n          disabled={leftButtonDisabled}\n          onClick={onPrevClick}\n          data-testid=\"prev-btn\"\n        />\n        <Container\n          maxWidth=\"50px\"\n          fillWidth={false}\n        >\n          <NumberField\n            ref={inputRef}\n            onChange={onChange}\n            value={currentPage}\n            loading={false}\n            aria-label={currentPage.toString()}\n            min={1}\n            max={totalPages}\n            onFocus={onPageNumberFocus}\n            hideControls\n            onBlur={onPageNumberBlur}\n            disabled={leftButtonDisabled && rightButtonDisabled}\n          />\n        </Container>\n        {!!totalPages && (\n          <Text\n            component=\"div\"\n            color=\"muted\"\n            size=\"sm\"\n          >\n            of {formatNumber(totalPages)}\n          </Text>\n        )}\n        <IconButton\n          icon=\"chevron-right\"\n          type=\"ghost\"\n          disabled={rightButtonDisabled}\n          onClick={onNextClick}\n          data-testid=\"next-btn\"\n        />\n      </Container>\n      {maxRowsPerPageList.length > 0 && (\n        <Select\n          className={styles['custom-select']}\n          onSelect={onPageSizeChange}\n          value={pageSize.toString()}\n        >\n          {allowAllRows && <Select.Item value=\"-1\">All rows</Select.Item>}\n          {maxRowsPerPageList.map(option => (\n            <Select.Item\n              key={option}\n              value={option.toString()}\n            >\n              {option} rows\n            </Select.Item>\n          ))}\n        </Select>\n      )}\n    </Container>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-.panel__4VWNp {
+@layer clickui {.panel__4VWNp {
   --panel-width: initial;
   --panel-height: initial;
 
@@ -114,3 +114,4 @@
 .panel_gap_xl__Te3bQ {
   gap: var(--click-panel-space-gap-xl);
 }
+}

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

@@ -78,28 +78,39 @@ const Panel = ({
   style,
   ...props
 }) => {
-  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 });
+  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 };

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

@@ -1 +1 @@
-{"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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"}
+{"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":[],"mappings":"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"}

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

@@ -3,31 +3,70 @@ import { forwardRef, useId, useState } from 'react';
 import { InputWrapper, InputElement, InputEndContent, IconButton } from '../InputWrapper/index.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 
-const PasswordField = forwardRef(({
-  disabled,
-  label,
-  error,
-  id,
-  value = "",
-  onChange: onChangeProp,
-  orientation,
-  dir,
-  ...props
-}, ref) => {
-  const defaultId = useId();
-  const [viewPassword, setViewPassword] = useState(false);
-  const togglePasswordViewer = () => {
-    setViewPassword((viewPassword2) => !viewPassword2);
-  };
-  const onChange = (e) => {
-    onChangeProp(e.target.value, e);
-  };
-  const hasEndContent = value.length > 0;
-  return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error, orientation, dir, children: [
-    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: false, $hasEndContent: hasEndContent, ref, type: viewPassword ? "text" : "password", id: id ?? defaultId, disabled, value, onChange, ...props }),
-    hasEndContent && /* @__PURE__ */ jsx(InputEndContent, { children: /* @__PURE__ */ jsx(IconButton, { disabled, onClick: togglePasswordViewer, children: /* @__PURE__ */ jsx(SvgImage, { name: viewPassword ? "eye-closed" : "eye", size: "md" }) }) })
-  ] });
-});
+const PasswordField = forwardRef(
+  ({
+    disabled,
+    label,
+    error,
+    id,
+    value = "",
+    onChange: onChangeProp,
+    orientation,
+    dir,
+    ...props
+  }, ref) => {
+    const defaultId = useId();
+    const [viewPassword, setViewPassword] = useState(false);
+    const togglePasswordViewer = () => {
+      setViewPassword((viewPassword2) => !viewPassword2);
+    };
+    const onChange = (e) => {
+      onChangeProp(e.target.value, e);
+    };
+    const hasEndContent = value.length > 0;
+    return /* @__PURE__ */ jsxs(
+      InputWrapper,
+      {
+        disabled,
+        id: id ?? defaultId,
+        label,
+        error,
+        orientation,
+        dir,
+        children: [
+          /* @__PURE__ */ jsx(
+            InputElement,
+            {
+              $hasStartContent: false,
+              $hasEndContent: hasEndContent,
+              ref,
+              type: viewPassword ? "text" : "password",
+              id: id ?? defaultId,
+              disabled,
+              value,
+              onChange,
+              ...props
+            }
+          ),
+          hasEndContent && /* @__PURE__ */ jsx(InputEndContent, { children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              disabled,
+              onClick: togglePasswordViewer,
+              children: /* @__PURE__ */ jsx(
+                SvgImage,
+                {
+                  name: viewPassword ? "eye-closed" : "eye",
+                  size: "md"
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
 
 export { PasswordField };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import { ChangeEvent, InputHTMLAttributes, forwardRef, useId, useState } from 'react';\nimport { Icon } from '@/components/Icon';\nimport {\n  IconButton,\n  InputElement,\n  InputEndContent,\n  InputWrapper,\n  WrapperProps,\n} from '@/components/InputWrapper';\nexport interface PasswordFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      'children' | 'type' | 'string' | 'onChange' | 'dir'\n    > {\n  type?: 'password';\n  value?: string;\n  onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;\n  orientation?: 'vertical' | 'horizontal';\n  dir?: 'start' | 'end';\n}\n\nexport const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      disabled,\n      label,\n      error,\n      id,\n      value = '',\n      onChange: onChangeProp,\n      orientation,\n      dir,\n      ...props\n    },\n    ref\n  ) => {\n    const defaultId = useId();\n    const [viewPassword, setViewPassword] = useState<boolean>(false);\n    const togglePasswordViewer = () => {\n      setViewPassword((viewPassword: boolean) => !viewPassword);\n    };\n\n    const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp(e.target.value, e);\n    };\n\n    const hasEndContent = value.length > 0;\n\n    return (\n      <InputWrapper\n        disabled={disabled}\n        id={id ?? defaultId}\n        label={label}\n        error={error}\n        orientation={orientation}\n        dir={dir}\n      >\n        <InputElement\n          $hasStartContent={false}\n          $hasEndContent={hasEndContent}\n          ref={ref}\n          type={viewPassword ? 'text' : 'password'}\n          id={id ?? defaultId}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n          {...props}\n        />\n        {hasEndContent && (\n          <InputEndContent>\n            <IconButton\n              disabled={disabled}\n              onClick={togglePasswordViewer}\n            >\n              <Icon\n                name={viewPassword ? 'eye-closed' : 'eye'}\n                size=\"md\"\n              />\n            </IconButton>\n          </InputEndContent>\n        )}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["PasswordField","forwardRef","disabled","label","error","id","value","onChange","onChangeProp","orientation","dir","props","ref","defaultId","useId","viewPassword","setViewPassword","useState","togglePasswordViewer","e","target","hasEndContent","length","Icon"],"mappings":";;;;;AAuBO,MAAMA,aAAAA,GAAgBC,WAC3B,CACE;AAAA,EACEC,QAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,EAAAA;AAAAA,EACAC,KAAAA,GAAQ,EAAA;AAAA,EACRC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYC,KAAAA,EAAM;AACxB,EAAA,MAAM,CAACC,YAAAA,EAAcC,eAAe,CAAA,GAAIC,SAAkB,KAAK,CAAA;AAC/D,EAAA,MAAMC,uBAAuBA,MAAM;AACjCF,IAAAA,eAAAA,CAAgB,CAACD,aAAAA,KAA0B,CAACA,aAAY,CAAA;AAAA,EAC1D,CAAA;AAEA,EAAA,MAAMR,QAAAA,GAAWA,CAACY,CAAAA,KAAqC;AACrDX,IAAAA,YAAAA,CAAaW,CAAAA,CAAEC,MAAAA,CAAOd,KAAAA,EAAOa,CAAC,CAAA;AAAA,EAChC,CAAA;AAEA,EAAA,MAAME,aAAAA,GAAgBf,MAAMgB,MAAAA,GAAS,CAAA;AAErC,EAAA,uBACE,IAAA,CAAC,gBACC,QAAA,EACA,EAAA,EAAIjB,MAAMQ,SAAAA,EACV,KAAA,EACA,KAAA,EACA,WAAA,EACA,GAAA,EAEA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,gBACC,gBAAA,EAAkB,KAAA,EAClB,cAAA,EAAgBQ,aAAAA,EAChB,KACA,IAAA,EAAMN,YAAAA,GAAe,MAAA,GAAS,UAAA,EAC9B,IAAIV,EAAAA,IAAMQ,SAAAA,EACV,UACA,KAAA,EACA,QAAA,EACA,GAAIF,KAAAA,EAAM,CAAA;AAAA,IAEXU,iCACC,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EACC,UACA,OAAA,EAASH,oBAAAA,EAET,QAAA,kBAAA,GAAA,CAACK,QAAA,EAAA,EACC,MAAMR,YAAAA,GAAe,YAAA,GAAe,OACpC,IAAA,EAAK,IAAA,EAAI,GAEb,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ,CACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import { ChangeEvent, InputHTMLAttributes, forwardRef, useId, useState } from 'react';\nimport { Icon } from '@/components/Icon';\nimport {\n  IconButton,\n  InputElement,\n  InputEndContent,\n  InputWrapper,\n  WrapperProps,\n} from '@/components/InputWrapper';\nexport interface PasswordFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      'children' | 'type' | 'string' | 'onChange' | 'dir'\n    > {\n  type?: 'password';\n  value?: string;\n  onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;\n  orientation?: 'vertical' | 'horizontal';\n  dir?: 'start' | 'end';\n}\n\nexport const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      disabled,\n      label,\n      error,\n      id,\n      value = '',\n      onChange: onChangeProp,\n      orientation,\n      dir,\n      ...props\n    },\n    ref\n  ) => {\n    const defaultId = useId();\n    const [viewPassword, setViewPassword] = useState<boolean>(false);\n    const togglePasswordViewer = () => {\n      setViewPassword((viewPassword: boolean) => !viewPassword);\n    };\n\n    const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp(e.target.value, e);\n    };\n\n    const hasEndContent = value.length > 0;\n\n    return (\n      <InputWrapper\n        disabled={disabled}\n        id={id ?? defaultId}\n        label={label}\n        error={error}\n        orientation={orientation}\n        dir={dir}\n      >\n        <InputElement\n          $hasStartContent={false}\n          $hasEndContent={hasEndContent}\n          ref={ref}\n          type={viewPassword ? 'text' : 'password'}\n          id={id ?? defaultId}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n          {...props}\n        />\n        {hasEndContent && (\n          <InputEndContent>\n            <IconButton\n              disabled={disabled}\n              onClick={togglePasswordViewer}\n            >\n              <Icon\n                name={viewPassword ? 'eye-closed' : 'eye'}\n                size=\"md\"\n              />\n            </IconButton>\n          </InputEndContent>\n        )}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["viewPassword","Icon"],"mappings":";;;;;AAuBO,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,QAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA;AAAA,IACA,KAAA,GAAQ,EAAA;AAAA,IACR,QAAA,EAAU,YAAA;AAAA,IACV,WAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,YAAY,KAAA,EAAM;AACxB,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAkB,KAAK,CAAA;AAC/D,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,eAAA,CAAgB,CAACA,aAAAA,KAA0B,CAACA,aAAY,CAAA;AAAA,IAC1D,CAAA;AAEA,IAAA,MAAM,QAAA,GAAW,CAAC,CAAA,KAAqC;AACrD,MAAA,YAAA,CAAa,CAAA,CAAE,MAAA,CAAO,KAAA,EAAO,CAAC,CAAA;AAAA,IAChC,CAAA;AAEA,IAAA,MAAM,aAAA,GAAgB,MAAM,MAAA,GAAS,CAAA;AAErC,IAAA,uBACE,IAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAI,EAAA,IAAM,SAAA;AAAA,QACV,KAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAA;AAAA,QACA,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,gBAAA,EAAkB,KAAA;AAAA,cAClB,cAAA,EAAgB,aAAA;AAAA,cAChB,GAAA;AAAA,cACA,IAAA,EAAM,eAAe,MAAA,GAAS,UAAA;AAAA,cAC9B,IAAI,EAAA,IAAM,SAAA;AAAA,cACV,QAAA;AAAA,cACA,KAAA;AAAA,cACA,QAAA;AAAA,cACC,GAAG;AAAA;AAAA,WACN;AAAA,UACC,aAAA,wBACE,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,OAAA,EAAS,oBAAA;AAAA,cAET,QAAA,kBAAA,GAAA;AAAA,gBAACC,QAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAM,eAAe,YAAA,GAAe,KAAA;AAAA,kBACpC,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,WACF,EACF;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}

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

@@ -1,4 +1,4 @@
-.menu-panel__-IeVm {
+@layer clickui {.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);
@@ -30,3 +30,4 @@
   width: var(--click-popover-icon-size-width);
   height: var(--click-popover-icon-size-height);
 }
+}

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

@@ -10,19 +10,19 @@ import styles from './Popover.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 import { cva } from 'class-variance-authority';
 
-const Popover = ({
-  children,
-  ...props
-}) => {
+const Popover = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(RadixPopover.Root, { ...props, children });
 };
-const PopoverTrigger = ({
-  anchor,
-  children,
-  ...props
-}) => {
+const PopoverTrigger = ({ anchor, children, ...props }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsx("div", { className: styles.trigger, 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 })
   ] });
 };
@@ -43,9 +43,14 @@ const _MenuPanel = ({
   showClose,
   className,
   ...props
-}, ref) => /* @__PURE__ */ jsx(GenericMenuPanel, { ref, ...props, className: cn(menuPanelVariants({
-  showClose
-}), className) });
+}, ref) => /* @__PURE__ */ jsx(
+  GenericMenuPanel,
+  {
+    ref,
+    ...props,
+    className: cn(menuPanelVariants({ showClose }), className)
+  }
+);
 const MenuPanel = forwardRef(_MenuPanel);
 const PopoverContent = ({
   children,
@@ -56,11 +61,45 @@ 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, 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
-  ] }) });
+  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
+          ]
+        }
+      )
+    }
+  );
 };
 PopoverContent.displayName = "PopoverContent";
 Popover.Content = PopoverContent;

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 {\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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"}
+{"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":["Icon"],"mappings":"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"}