npm - @clickhouse/click-ui - Versions diffs - 0.8.0 → 0.10.0-rc1 - Mend

@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1851) hide show

package/dist/cjs/components/Pagination/Pagination.css CHANGED Viewed

@@ -1,7 +1,8 @@
-/* Doubled class raises specificity to (0,2,0) so this width wins over the
+@layer clickui {/* Doubled class raises specificity to (0,2,0) so this width wins over the
    Select root's own `width: 100%` rule, which styled() injects into <head>
    at runtime (after the bundled CSS). The previous styled() wrapper relied
    on runtime injection order for the same effect. */
 .custom-select__iARgW.custom-select__iARgW {
   width: 150px;
 }
+}

package/dist/cjs/components/Pagination/index.cjs CHANGED Viewed

@@ -50,49 +50,142 @@ const Pagination = ({
       onPageSizeChangeProp(Number(value));
     }
   };
-  const onPrevClick = react.useCallback((e) => {
-    if (leftButtonDisabled) {
-      return;
-    }
-    onChangeProp(currentPage - 1);
-    if (typeof onPrevPageClick === "function") {
-      onPrevPageClick(e);
-    }
-  }, [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]);
-  const onNextClick = react.useCallback((e) => {
-    if (rightButtonDisabled) {
-      return;
-    }
-    onChangeProp(currentPage + 1);
-    if (typeof onNextPageClick === "function") {
-      onNextPageClick(e);
-    }
-  }, [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]);
+  const onPrevClick = react.useCallback(
+    (e) => {
+      if (leftButtonDisabled) {
+        return;
+      }
+      onChangeProp(currentPage - 1);
+      if (typeof onPrevPageClick === "function") {
+        onPrevPageClick(e);
+      }
+    },
+    [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]
+  );
+  const onNextClick = react.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__ */ jsxRuntime.jsxs(Container.Container, { gap, justifyContent: justifyContent ?? (rowCount || maxRowsPerPageList.length > 0 ? "space-between" : "center"), fillWidth, ...props, children: [
-    hasRowCount && /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { component: "div", color: "muted", size: "sm", children: [
-      typeof rowCount === "number" ? formatNumber(rowCount) : rowCount,
-      " rows"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { gap: "xxs", fillWidth: false, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { icon: "chevron-left", type: "ghost", disabled: leftButtonDisabled, onClick: onPrevClick, "data-testid": "prev-btn" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntime.jsx(NumberField.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__ */ jsxRuntime.jsxs(Text.Text, { component: "div", color: "muted", size: "sm", children: [
-        "of ",
-        formatNumber(totalPages)
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { icon: "chevron-right", type: "ghost", disabled: rightButtonDisabled, onClick: onNextClick, "data-testid": "next-btn" })
-    ] }),
-    maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Select.Select, { className: Pagination_module.default["custom-select"], onSelect: onPageSizeChange, value: pageSize.toString(), children: [
-      allowAllRows && /* @__PURE__ */ jsxRuntime.jsx(Select.Select.Item, { value: "-1", children: "All rows" }),
-      maxRowsPerPageList.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(Select.Select.Item, { value: option.toString(), children: [
-        option,
-        " rows"
-      ] }, option))
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Container.Container,
+    {
+      gap,
+      justifyContent: justifyContent ?? (rowCount || maxRowsPerPageList.length > 0 ? "space-between" : "center"),
+      fillWidth,
+      ...props,
+      children: [
+        hasRowCount && /* @__PURE__ */ jsxRuntime.jsxs(
+          Text.Text,
+          {
+            component: "div",
+            color: "muted",
+            size: "sm",
+            children: [
+              typeof rowCount === "number" ? formatNumber(rowCount) : rowCount,
+              " rows"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Container.Container,
+          {
+            gap: "xxs",
+            fillWidth: false,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton.IconButton,
+                {
+                  icon: "chevron-left",
+                  type: "ghost",
+                  disabled: leftButtonDisabled,
+                  onClick: onPrevClick,
+                  "data-testid": "prev-btn"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Container.Container,
+                {
+                  maxWidth: "50px",
+                  fillWidth: false,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    NumberField.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__ */ jsxRuntime.jsxs(
+                Text.Text,
+                {
+                  component: "div",
+                  color: "muted",
+                  size: "sm",
+                  children: [
+                    "of ",
+                    formatNumber(totalPages)
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton.IconButton,
+                {
+                  icon: "chevron-right",
+                  type: "ghost",
+                  disabled: rightButtonDisabled,
+                  onClick: onNextClick,
+                  "data-testid": "next-btn"
+                }
+              )
+            ]
+          }
+        ),
+        maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          Select.Select,
+          {
+            className: Pagination_module.default["custom-select"],
+            onSelect: onPageSizeChange,
+            value: pageSize.toString(),
+            children: [
+              allowAllRows && /* @__PURE__ */ jsxRuntime.jsx(Select.Select.Item, { value: "-1", children: "All rows" }),
+              maxRowsPerPageList.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+                Select.Select.Item,
+                {
+                  value: option.toString(),
+                  children: [
+                    option,
+                    " rows"
+                  ]
+                },
+                option
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 exports.Pagination = Pagination;

package/dist/cjs/components/Pagination/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","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","jsxs","Container","Text","jsx","IconButton","NumberField","toString","Select","styles","map","option"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","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":["useRef","useCallback","jsxs","Container","Text","jsx","IconButton","NumberField","Select","styles"],"mappings":"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"}

package/dist/cjs/components/Panel/Panel.css CHANGED Viewed

@@ -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/cjs/components/Panel/index.cjs CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"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":";;;;;;;;;;AAMA,~~MAAMA~~,~~aAAAA~~,~~GAAgBC~~,~~0BAAAA~~,CAAIC,~~oBAAAA~~,~~CAAOC~~,~~KAAAA~~,EAAO;AAAA,~~EACtCC~~,~~QAAAA~~,EAAU;AAAA,~~IACRC~~,~~WAAAA~~,EAAa;AAAA,~~MACXC~~,~~YAAYJ~~,~~oBAAAA~~,~~CAAOK~~,~~4BAAAA~~;~~AAAAA~~,~~MACnBC~~,~~UAAUN~~,~~oBAAAA~~,~~CAAOO~~;~~AAAAA~~,KACnB;AAAA,~~IACAC~~,~~UAAAA~~,EAAY;AAAA,~~MACVC~~,~~KAAAA~~,~~EAAOT~~,qBAAO,yBAAyB,CAAA;AAAA,~~MACvCU~~,~~MAAAA~~,~~EAAQV~~,qBAAO,0BAA0B,CAAA;AAAA,~~MACzCW~~,~~GAAAA~~,~~EAAKX~~,qBAAO,uBAAuB;AAAA,KACrC;AAAA,~~IACAY~~,~~KAAAA~~,EAAO;AAAA,~~MACLC~~,~~SAASb~~,~~oBAAAA~~,~~CAAOc~~,~~mBAAAA~~;~~AAAAA~~,~~MAChBC~~,~~OAAOf~~,~~oBAAAA~~,~~CAAOgB~~,~~iBAAAA~~;~~AAAAA~~,~~MACdC~~,~~aAAajB~~,~~oBAAAA~~,~~CAAOkB~~;~~AAAAA~~,KACtB;AAAA,~~IACAC~~,~~KAAAA~~,EAAO;AAAA,~~MACLC~~,~~MAAMpB~~,~~oBAAAA~~,~~CAAOqB~~,~~gBAAAA~~;~~AAAAA~~,~~MACbC~~,~~IAAItB~~,~~oBAAAA~~,~~CAAOuB~~,~~cAAAA~~;~~AAAAA~~,~~MACXC~~,~~IAAIxB~~,~~oBAAAA~~,~~CAAOyB~~,~~cAAAA~~;~~AAAAA~~,~~MACXC~~,~~IAAI1B~~,~~oBAAAA~~,~~CAAO2B~~;~~AAAAA~~,KACb;AAAA,~~IACAC~~,~~OAAAA~~,EAAS;AAAA,~~MACPR~~,~~MAAMpB~~,~~oBAAAA~~,~~CAAO6B~~,~~kBAAAA~~;~~AAAAA~~,~~MACbC~~,~~IAAI9B~~,~~oBAAAA~~,CAAO+B,~~gBAAAA~~;~~AAAAA~~,~~MACXT~~,~~IAAItB~~,~~oBAAAA~~,~~CAAOgC~~,~~gBAAAA~~;~~AAAAA~~,~~MACXR~~,~~IAAIxB~~,~~oBAAAA~~,~~CAAOiC~~,~~gBAAAA~~;~~AAAAA~~,~~MACXP~~,~~IAAI1B~~,~~oBAAAA~~,~~CAAOkC~~,~~gBAAAA~~;~~AAAAA~~,~~MACXC~~,~~IAAInC~~,~~oBAAAA~~,~~CAAOoC~~;~~AAAAA~~,KACb;AAAA,~~IACAC~~,~~GAAAA~~,EAAK;AAAA,~~MACHjB~~,~~MAAMpB~~,~~oBAAAA~~,~~CAAOsC~~,~~cAAAA~~;~~AAAAA~~,~~MACbR~~,~~IAAI9B~~,~~oBAAAA~~,~~CAAOuC~~,~~YAAAA~~;~~AAAAA~~,~~MACXjB~~,~~IAAItB~~,~~oBAAAA~~,~~CAAOwC~~,~~YAAAA~~;~~AAAAA~~,~~MACXhB~~,~~IAAIxB~~,~~oBAAAA~~,~~CAAOyC~~,~~YAAAA~~;~~AAAAA~~,~~MACXf~~,~~IAAI1B~~,~~oBAAAA~~,~~CAAO0C~~,~~YAAAA~~;~~AAAAA~~,~~MACXP~~,~~IAAInC~~,~~oBAAAA~~,~~CAAO2C~~;~~AAAAA~~,KACb;AAAA,~~IACAC~~,~~SAAAA~~,EAAW;AAAA,~~MACTC~~,~~MAAM7C~~,~~oBAAAA~~,~~CAAO8C~~;~~AAAAA~~,KACf;AAAA,~~IACAC~~,~~SAAAA~~,EAAW;AAAA,~~MACTF~~,~~MAAM7C~~,~~oBAAAA~~,~~CAAOgD~~;~~AAAAA~~;AACf,GACF;AAAA,~~EACAC~~,~~eAAAA~~,EAAiB;AAAA,~~IACf9C~~,~~WAAAA~~,EAAa,YAAA;AAAA,~~IACbK~~,~~UAAAA~~,EAAY,QAAA;AAAA,~~IACZI~~,~~KAAAA~~,EAAO,SAAA;AAAA,~~IACPO~~,~~KAAAA~~,EAAO,IAAA;AAAA,~~IACPS~~,~~OAAAA~~,EAAS,IAAA;AAAA,~~IACTS~~,~~GAAAA~~,EAAK;AAAA;AAET,CAAC,CAAA;AAEM,~~MAAMa~~,~~QAAQA~~,CAAC;AAAA,~~EACpB1C~~,~~UAAAA~~,GAAa,QAAA;AAAA,~~EACb2C~~,~~QAAAA~~;~~AAAAA~~,~~EACAvC~~,~~KAAAA~~;~~AAAAA~~,~~EACAwC~~,~~MAAAA~~;~~AAAAA~~,~~EACAC~~,~~UAAAA~~;~~AAAAA~~,~~EACAC~~,~~SAAAA~~;~~AAAAA~~,~~EACAjB~~,~~GAAAA~~;~~AAAAA~~,~~EACAO~~,~~SAAAA~~;~~AAAAA~~,~~EACAG~~,~~SAAAA~~;~~AAAAA~~,~~EACAQ~~,~~MAAAA~~;~~AAAAA~~,~~EACApD~~,~~WAAAA~~,GAAc,YAAA;AAAA,~~EACdyB~~,~~OAAAA~~;~~AAAAA~~,~~EACAT~~,~~KAAAA~~,GAAQ,IAAA;AAAA,~~EACRqC~~,~~KAAAA~~;~~AAAAA~~,~~EACAC~~,~~SAAAA~~;~~AAAAA~~,~~EACAC~~,~~KAAAA~~;~~AAAAA~~,EACA,~~GAAGC~~;~~AACO~~,CAAA,~~KAAM~~;AAChB,EAAA,~~MAAMC~~,~~WAAAA~~,GAAcC,~~cAClB~~,OACG;AAAA,~~IACC~~,~~GAAIT~~,~~MAAAA~~,IAAU~~;AAAA~~,~~MAAE~~,gBAAA,~~EAAkBA;AAAAA~~,~~KAAO~~;AAAA,~~IACzC~~,~~GAAA~~,~~CAAKE~~,~~aAAaE~~,~~KAAAA~~,KAAU~~;AAAA~~,~~MAAE~~,eAAA,~~EAAiBF~~,~~YAAY~~,~~MAAA~~,~~GAASE;AAAAA~~,~~KAAM~~;AAAA,~~IAC1E~~,GAAA,~~CAAKH~~,~~cAAcE~~,~~MAAAA~~,KAAW;AAAA,~~MAC5B~~,gBAAA,~~EAAkBF~~,aAAa,MAAA,~~GAASE~~;~~AAAAA~~,~~KAC1C~~;AAAA,~~IACA~~,~~GAAGG~~;~~AAAAA~~,~~GACL~~,CAAA,~~EACF~~,~~CAACN~~,~~MAAAA~~,~~EAAQE~~,~~SAAAA~~,~~EAAWE~~,~~OAAOH~~,~~UAAAA~~,~~EAAYE~~,~~MAAAA~~,~~EAAQG~~,KAAK,~~CACtD,CAAA~~;AAEA,EAAA,~~uBACEI~~,cAAA,~~CAAC~~,~~YACKH~~,~~KAAAA~~,~~EACJ~~,~~OAAOC~~,~~WAAAA~~,~~EACP~~,SAAA,~~EAAWG~~,~~OACTjE~~,~~aAAAA~~,CAAc;AAAA,~~IACZK~~,~~WAAAA~~;~~AAAAA~~,~~IACAK~~,~~UAAAA~~;~~AAAAA~~,~~IACAI~~,~~KAAAA~~;~~AAAAA~~,~~IACAO~~,~~KAAAA~~;~~AAAAA~~,~~IACAS~~,~~OAAAA~~;~~AAAAA~~,~~IACAS~~,~~GAAAA~~;~~AAAAA~~,~~IACAO~~,~~SAAAA~~;~~AAAAA~~,~~IACAG~~;~~AAAAA~~,~~GACD~~,CAAA,~~EACDK~~,~~MAAAA~~,~~IAAUpD~~,~~qBAAOgE~~,~~YAAAA~~,~~EACjBP~~,~~SACF~~,~~GAECN~~,~~QAAAA,EACH,CAAA~~;AAEJ;;;;"}
1	+ {"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":["cva","styles","useMemo","jsx","cn"],"mappings":"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"}

package/dist/cjs/components/PasswordField/index.cjs CHANGED Viewed

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

package/dist/cjs/components/PasswordField/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","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","~~jsxs","InputWrapper","jsx","InputElement","InputEndContent","IconButton","Icon"],"mappings":";;;;;;;;;AAuBO,~~MAAMA~~,~~aAAAA~~,~~GAAgBC~~,~~iBAC3B~~,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,~~WAAAA~~,EAAM;AACxB,~~EAAA~~,MAAM,~~CAACC~~,~~YAAAA~~,~~EAAcC~~,eAAe,CAAA,GAAIC,eAAkB,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~~,uBACEC,eAAA,~~CAACC~~,~~6BACC~~,QAAA,~~EACA~~,EAAA,~~EAAInB~~,~~MAAMQ~~,~~SAAAA~~,~~EACV,~~KAAA,~~EACA~~,KAAA,~~EACA~~,WAAA,~~EACA~~,GAAA,~~EAEA~~,QAAA,EAAA;AAAA,~~oBAAAY~~,cAAA,~~CAACC~~,~~6BACC~~,gBAAA,EAAkB,KAAA,~~EAClB~~,cAAA,~~EAAgBL~~,~~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~~,~~iCACCI~~,~~cAAA~~,~~CAACE,~~4BAAA,EAAA,EACC,QAAA,kBAAAF,cAAA,~~CAACG~~,uBAAA,~~EAAA~~,~~EACC~~,~~UACA~~,OAAA,~~EAASV~~,~~oBAAAA~~,~~EAET~~,QAAA,~~kBAAAO~~,cAAA,~~CAACI~~,SAAA,~~EAAA~~,~~EACC~~,~~MAAMd~~,~~YAAAA~~,~~GAAe~~,YAAA,GAAe,~~OACpC~~,IAAA,EAAK,~~IAAA~~,~~EAAI,GAEb,CAAA,~~EACF;AAAA,~~GAAA~~,EAEJ~~,CAAA~~;~~AAEJ,CACF~~;;;;"}
1	+ {"version":3,"file":"index.cjs","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":["forwardRef","useId","useState","viewPassword","jsxs","InputWrapper","jsx","InputElement","InputEndContent","IconButton","Icon"],"mappings":";;;;;;;;;AAuBO,MAAM,aAAA,GAAgBA,gBAAA;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,YAAYC,WAAA,EAAM;AACxB,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAkB,KAAK,CAAA;AAC/D,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,eAAA,CAAgB,CAACC,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,uBACEC,eAAA;AAAA,MAACC,yBAAA;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,0BAAAC,cAAA;AAAA,YAACC,yBAAA;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,mCACEC,4BAAA,EAAA,EACC,QAAA,kBAAAF,cAAA;AAAA,YAACG,uBAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,OAAA,EAAS,oBAAA;AAAA,cAET,QAAA,kBAAAH,cAAA;AAAA,gBAACI,SAAA;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/cjs/components/Popover/Popover.css CHANGED Viewed

@@ -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/cjs/components/Popover/index.cjs CHANGED Viewed

@@ -34,19 +34,19 @@ function _interopNamespace(e) {
 const RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
-const Popover = ({
-  children,
-  ...props
-}) => {
+const Popover = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Root, { ...props, children });
 };
-const PopoverTrigger = ({
-  anchor,
-  children,
-  ...props
-}) => {
+const PopoverTrigger = ({ anchor, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Popover_module.default.trigger, 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 })
   ] });
 };
@@ -67,9 +67,14 @@ const _MenuPanel = ({
   showClose,
   className,
   ...props
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuPanel, { ref, ...props, className: cva.cn(menuPanelVariants({
-  showClose
-}), className) });
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  GenericMenu.GenericMenuPanel,
+  {
+    ref,
+    ...props,
+    className: cva.cn(menuPanelVariants({ showClose }), className)
+  }
+);
 const MenuPanel = react.forwardRef(_MenuPanel);
 const PopoverContent = ({
   children,
@@ -80,11 +85,45 @@ 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, 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
-  ] }) });
+  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
+          ]
+        }
+      )
+    }
+  );
 };
 PopoverContent.displayName = "PopoverContent";
 Popover.Content = PopoverContent;