@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

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

@@ -1,24 +1,38 @@
-import { styled } from 'styled-components';
+import "./FormRoot.css";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/cva.js';
+import styles from './FormRoot.module.css.js';
+import { cva } from 'class-variance-authority';
 
-const FormRoot = styled.div.withConfig({
-  componentId: "sc-hopzbg-0"
-})(["display:flex;width:100%;gap:", ";", " *{box-shadow:none;outline:none;}"], ({
-  theme
-}) => theme.click.field.space.gap, ({
-  theme,
+const formRootVariants = cva(styles["form-root"], {
+  variants: {
+    direction: {
+      "column-reverse": styles["form-root_direction_column-reverse"],
+      column: styles["form-root_direction_column"],
+      "row-reverse": styles["form-root_direction_row-reverse"],
+      row: styles["form-root_direction_row"]
+    },
+    addLabelPadding: {
+      true: styles["form-root_add-label-padding"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    direction: "column-reverse",
+    addLabelPadding: false
+  }
+});
+const getDirection = (orientation, dir) => orientation === "horizontal" ? dir === "start" ? "row-reverse" : "row" : dir === "start" ? "column-reverse" : "column";
+const FormRoot = ({
   $orientation = "vertical",
   $dir = "start",
-  $addLabelPadding = false
-}) => `
-    flex-direction: ${$orientation === "horizontal" ? $dir === "start" ? "row-reverse" : "row" : $dir === "start" ? "column-reverse" : "column"};
-    align-items: flex-start;
-    ${$addLabelPadding && $orientation === "horizontal" ? `
-    label {
-      padding-top: calc(${theme.click.field.space.y} + 1px);
-      line-height: 1lh;
-    }
-    ` : ""}
-  `);
+  $addLabelPadding = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { ...props, className: cn(formRootVariants({
+  direction: getDirection($orientation, $dir),
+  addLabelPadding: $addLabelPadding && $orientation === "horizontal"
+}), className) });
 
 export { FormRoot };
 //# sourceMappingURL=FormRoot.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormRoot.js","sources":["../../../../src/components/FormContainer/FormRoot.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const FormRoot = styled.div<{\n  $orientation?: 'horizontal' | 'vertical';\n  $dir?: 'start' | 'end';\n  $addLabelPadding?: boolean;\n}>`\n  display: flex;\n  width: 100%;\n  gap: ${({ theme }) => theme.click.field.space.gap};\n  ${({ theme, $orientation = 'vertical', $dir = 'start', $addLabelPadding = false }) => `\n    flex-direction: ${\n      $orientation === 'horizontal'\n        ? $dir === 'start'\n          ? 'row-reverse'\n          : 'row'\n        : $dir === 'start'\n          ? 'column-reverse'\n          : 'column'\n    };\n    align-items: flex-start;\n    ${\n      $addLabelPadding && $orientation === 'horizontal'\n        ? `\n    label {\n      padding-top: calc(${theme.click.field.space.y} + 1px);\n      line-height: 1lh;\n    }\n    `\n        : ''\n    }\n  `}\n  * {\n    box-shadow: none;\n    outline: none;\n  }\n`;\n"],"names":["FormRoot","styled","div","withConfig","componentId","theme","click","field","space","gap","$orientation","$dir","$addLabelPadding","y"],"mappings":";;AAEO,MAAMA,QAAAA,GAAWC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,8BAAA,EAAA,GAAA,EAAA,mCAAA,GAOzB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAC5C,CAAC;AAAA,EAAEJ,KAAAA;AAAAA,EAAOK,YAAAA,GAAe,UAAA;AAAA,EAAYC,IAAAA,GAAO,OAAA;AAAA,EAASC,gBAAAA,GAAmB;AAAM,CAAA,KAAM;AAAA,oBAAA,EAElFF,YAAAA,KAAiB,eACbC,IAAAA,KAAS,OAAA,GACP,gBACA,KAAA,GACFA,IAAAA,KAAS,OAAA,GACP,gBAAA,GACA,QAAQ,CAAA;AAAA;AAAA,IAAA,EAIdC,gBAAAA,IAAoBF,iBAAiB,YAAA,GACjC;AAAA;AAAA,wBAAA,EAEgBL,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMK,CAAC,CAAA;AAAA;AAAA;AAAA,IAAA,CAAA,GAIzC,EAAE;AAAA,EAAA,CAET;;;;"}
+{"version":3,"file":"FormRoot.js","sources":["../../../../src/components/FormContainer/FormRoot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './FormRoot.module.css';\n\nconst formRootVariants = cva(styles['form-root'], {\n  variants: {\n    direction: {\n      'column-reverse': styles['form-root_direction_column-reverse'],\n      column: styles['form-root_direction_column'],\n      'row-reverse': styles['form-root_direction_row-reverse'],\n      row: styles['form-root_direction_row'],\n    },\n    addLabelPadding: {\n      true: styles['form-root_add-label-padding'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    direction: 'column-reverse',\n    addLabelPadding: false,\n  },\n});\n\nexport interface FormRootProps extends HTMLAttributes<HTMLDivElement> {\n  $orientation?: 'horizontal' | 'vertical';\n  $dir?: 'start' | 'end';\n  $addLabelPadding?: boolean;\n}\n\nconst getDirection = (\n  orientation: 'horizontal' | 'vertical',\n  dir: 'start' | 'end'\n): 'column-reverse' | 'column' | 'row-reverse' | 'row' =>\n  orientation === 'horizontal'\n    ? dir === 'start'\n      ? 'row-reverse'\n      : 'row'\n    : dir === 'start'\n      ? 'column-reverse'\n      : 'column';\n\nexport const FormRoot = ({\n  $orientation = 'vertical',\n  $dir = 'start',\n  $addLabelPadding = false,\n  className,\n  ...props\n}: FormRootProps) => (\n  <div\n    {...props}\n    className={cn(\n      formRootVariants({\n        direction: getDirection($orientation, $dir),\n        addLabelPadding: $addLabelPadding && $orientation === 'horizontal',\n      }),\n      className\n    )}\n  />\n);\n"],"names":["formRootVariants","cva","styles","variants","direction","column","row","addLabelPadding","true","false","defaultVariants","getDirection","orientation","dir","FormRoot","$orientation","$dir","$addLabelPadding","className","props","cn"],"mappings":";;;;;AAIA,MAAMA,gBAAAA,GAAmBC,GAAAA,CAAIC,MAAAA,CAAO,WAAW,CAAA,EAAG;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,SAAAA,EAAW;AAAA,MACT,gBAAA,EAAkBF,OAAO,oCAAoC,CAAA;AAAA,MAC7DG,MAAAA,EAAQH,OAAO,4BAA4B,CAAA;AAAA,MAC3C,aAAA,EAAeA,OAAO,iCAAiC,CAAA;AAAA,MACvDI,GAAAA,EAAKJ,OAAO,yBAAyB;AAAA,KACvC;AAAA,IACAK,eAAAA,EAAiB;AAAA,MACfC,IAAAA,EAAMN,OAAO,6BAA6B,CAAA;AAAA,MAC1CO,KAAAA,EAAO;AAAA;AACT,GACF;AAAA,EACAC,eAAAA,EAAiB;AAAA,IACfN,SAAAA,EAAW,gBAAA;AAAA,IACXG,eAAAA,EAAiB;AAAA;AAErB,CAAC,CAAA;AAQD,MAAMI,YAAAA,GAAeA,CACnBC,WAAAA,EACAC,GAAAA,KAEAD,WAAAA,KAAgB,YAAA,GACZC,GAAAA,KAAQ,OAAA,GACN,aAAA,GACA,KAAA,GACFA,GAAAA,KAAQ,OAAA,GACN,gBAAA,GACA,QAAA;AAED,MAAMC,WAAWA,CAAC;AAAA,EACvBC,YAAAA,GAAe,UAAA;AAAA,EACfC,IAAAA,GAAO,OAAA;AAAA,EACPC,gBAAAA,GAAmB,KAAA;AAAA,EACnBC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,yBACZ,KAAA,EAAA,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWC,GACTpB,gBAAAA,CAAiB;AAAA,EACfI,SAAAA,EAAWO,YAAAA,CAAaI,YAAAA,EAAcC,IAAI,CAAA;AAAA,EAC1CT,eAAAA,EAAiBU,oBAAoBF,YAAAA,KAAiB;AACxD,CAAC,CAAA,EACDG,SACF,CAAA,EAAE;;;;"}

package/dist/esm/components/FormContainer/FormRoot.module.css.js

@@ -0,0 +1,11 @@
+const styles = {
+	"form-root": "form-root__BT-Th",
+	"form-root_direction_column-reverse": "form-root_direction_column-reverse__CqP8o",
+	"form-root_direction_column": "form-root_direction_column__1qZoL",
+	"form-root_direction_row-reverse": "form-root_direction_row-reverse__TlRP3",
+	"form-root_direction_row": "form-root_direction_row__D172C",
+	"form-root_add-label-padding": "form-root_add-label-padding__-HfgB"
+};
+
+export { styles as default };
+//# sourceMappingURL=FormRoot.module.css.js.map

package/dist/esm/components/FormContainer/FormRoot.module.css.js.map

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

package/dist/esm/components/GenericMenu/GenericMenu.css

@@ -0,0 +1,176 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
+
+.generic-menu-panel__y8D6y {
+  display: flex;
+  overflow: hidden;
+  align-items: flex-start;
+  border: 1px solid var(--click-genericMenu-panel-color-stroke-default);
+  border-radius: var(--click-genericMenu-panel-radii-all);
+  background: var(--click-genericMenu-panel-color-background-default);
+  outline: none;
+  box-shadow: var(--click-genericMenu-panel-shadow-default);
+  pointer-events: auto;
+}
+
+.generic-menu-panel_type_popover__DWcS4 {
+  max-width: var(--radix-popover-content-available-width);
+  max-height: var(--radix-popover-content-available-height);
+}
+
+.generic-menu-panel_type_dropdown-menu__ezKZT {
+  max-width: var(--radix-dropdown-menu-content-available-width);
+  max-height: var(--radix-dropdown-menu-content-available-height);
+}
+
+.generic-menu-panel_type_context-menu__nu-Kt {
+  max-width: var(--radix-context-menu-content-available-width);
+  max-height: var(--radix-context-menu-content-available-height);
+}
+
+.generic-menu-panel_show-arrow__hHyfA[data-side='bottom'] {
+  margin-top: -1px;
+}
+
+.generic-menu-panel_show-arrow__hHyfA[data-side='top'] {
+  margin-bottom: 1px;
+}
+
+.generic-menu-panel_show-arrow__hHyfA[data-side='left'] {
+  margin-right: -1px;
+}
+
+.generic-menu-panel_show-arrow__hHyfA[data-side='right'] {
+  margin-left: -1px;
+}
+
+.generic-popover-menu-panel__TbbW1 {
+  display: flex;
+  z-index: 1;
+  padding: var(--click-popover-space-y) var(--click-popover-space-x);
+  overflow: hidden;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 1px solid var(--click-popover-color-panel-stroke-default);
+  border-radius: var(--click-popover-radii-all);
+  background: var(--click-popover-color-panel-background-default);
+  outline: none;
+  box-shadow: var(--click-popover-shadow-default);
+}
+
+.generic-popover-menu-panel_type_popover__eALQC {
+  max-width: var(--radix-popover-content-available-width);
+  max-height: var(--radix-popover-content-available-height);
+}
+
+.generic-popover-menu-panel_type_hover-card__t0Wzp {
+  max-width: var(--radix-hover-card-content-available-width);
+  max-height: var(--radix-hover-card-content-available-height);
+}
+
+.generic-popover-menu-panel_show-arrow__dDH0c {
+  margin: -1px 0;
+}
+
+.arrow__MVfZZ {
+  fill: var(--click-genericMenu-panel-color-background-default);
+  filter: drop-shadow(rgb(0 0 0 / 10%) 0 4px 6px);
+  stroke: var(--click-genericMenu-panel-color-stroke-default);
+}
+
+.generic-menu-item__ApV25 {
+  display: flex;
+  position: relative;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -moz-available → -webkit-fill-available →
+   fill-available → stretch) so the item fills the available inline space. */
+  width: 100%;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  padding: var(--click-genericMenu-item-space-y) var(--click-genericMenu-item-space-x);
+  overflow: hidden;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-genericMenu-item-space-gap);
+  background: var(--gmi-background-default);
+  color: var(--gmi-text-default);
+  font: var(--click-genericMenu-item-typography-label-default);
+  white-space: nowrap;
+  cursor: default;
+  text-overflow: ellipsis;
+}
+
+.generic-menu-item_type_default__hWnNu {
+  --gmi-text-default: var(--click-genericMenu-item-color-default-text-default);
+  --gmi-text-hover: var(--click-genericMenu-item-color-default-text-hover);
+  --gmi-text-active: var(--click-genericMenu-item-color-default-text-active);
+  --gmi-text-disabled: var(--click-genericMenu-item-color-default-text-disabled);
+  --gmi-background-default: var(--click-genericMenu-item-color-default-background-default);
+  --gmi-background-hover: var(--click-genericMenu-item-color-default-background-hover);
+  --gmi-background-active: var(--click-genericMenu-item-color-default-background-active);
+}
+
+.generic-menu-item_type_danger__sqWb0 {
+  --gmi-text-default: var(--click-genericMenu-item-color-danger-text-default);
+  --gmi-text-hover: var(--click-genericMenu-item-color-danger-text-hover);
+  --gmi-text-active: var(--click-genericMenu-item-color-danger-text-active);
+  --gmi-text-disabled: var(--click-genericMenu-item-color-danger-text-disabled);
+  --gmi-background-default: var(--click-genericMenu-item-color-danger-background-default);
+  --gmi-background-hover: var(--click-genericMenu-item-color-danger-background-hover);
+  --gmi-background-active: var(--click-genericMenu-item-color-danger-background-active);
+}
+
+.generic-menu-item__ApV25:focus {
+  outline: none;
+}
+
+.generic-menu-item__ApV25[data-highlighted] {
+  background: var(--gmi-background-hover);
+  color: var(--gmi-text-hover);
+  font: var(--click-genericMenu-item-typography-label-hover);
+  cursor: pointer;
+}
+
+[data-input-modality='keyboard'] .generic-menu-item__ApV25[data-highlighted] {
+  outline: 2px solid var(--click-global-color-accent-default);
+  outline-offset: -2px;
+}
+
+.generic-menu-item__ApV25[data-state='open'] {
+  background: var(--gmi-background-hover);
+  color: var(--gmi-text-hover);
+  font: var(--click-genericMenu-item-typography-label-hover);
+  cursor: pointer;
+}
+
+.generic-menu-item__ApV25[data-state='checked'],
+.generic-menu-item__ApV25[data-selected='true'] {
+  background: var(--gmi-background-active);
+  color: var(--gmi-text-active);
+  font: var(--click-genericMenu-item-typography-label-active);
+}
+
+.generic-menu-item__ApV25[data-disabled] {
+  color: var(--gmi-text-disabled);
+  font: var(--click-genericMenu-item-typography-label-disabled);
+  pointer-events: none;
+}
+
+.generic-menu-item__ApV25:visited {
+  color: var(--gmi-text-default);
+}
+
+.generic-menu-item__ApV25:visited a {
+  color: var(--gmi-text-default);
+}
+
+.generic-menu-item__ApV25:hover .dropdown-arrow__e2s6p,
+.generic-menu-item__ApV25[data-state='open'] .dropdown-arrow__e2s6p {
+  left: 0.5rem;
+}
+
+.generic-menu-item__ApV25[hidden] {
+  display: none;
+}

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

@@ -0,0 +1,18 @@
+const arrow = "arrow__MVfZZ";
+const styles = {
+	"generic-menu-panel": "generic-menu-panel__y8D6y",
+	"generic-menu-panel_type_popover": "generic-menu-panel_type_popover__DWcS4",
+	"generic-menu-panel_type_dropdown-menu": "generic-menu-panel_type_dropdown-menu__ezKZT",
+	"generic-menu-panel_type_context-menu": "generic-menu-panel_type_context-menu__nu-Kt",
+	"generic-menu-panel_show-arrow": "generic-menu-panel_show-arrow__hHyfA",
+	"generic-popover-menu-panel": "generic-popover-menu-panel__TbbW1",
+	"generic-popover-menu-panel_type_popover": "generic-popover-menu-panel_type_popover__eALQC",
+	"generic-popover-menu-panel_type_hover-card": "generic-popover-menu-panel_type_hover-card__t0Wzp",
+	"generic-popover-menu-panel_show-arrow": "generic-popover-menu-panel_show-arrow__dDH0c",
+	arrow: arrow,
+	"generic-menu-item": "generic-menu-item__ApV25",
+	"generic-menu-item_type_default": "generic-menu-item_type_default__hWnNu",
+	"generic-menu-item_type_danger": "generic-menu-item_type_danger__sqWb0"};
+
+export { arrow, styles as default };
+//# sourceMappingURL=GenericMenu.module.css.js.map

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

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

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

@@ -1,107 +1,101 @@
-import { styled } from 'styled-components';
+import "./GenericMenu.css";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cva.js';
+import styles from './GenericMenu.module.css.js';
+import { cva } from 'class-variance-authority';
 
-const GenericMenuPanel = styled.div.withConfig({
-  componentId: "sc-isr9rp-0"
-})(["outline:none;max-width:var(--radix-", "-content-available-width);max-height:var(--radix-", "-content-available-height);overflow:hidden;display:flex;align-items:flex-start;pointer-events:auto;", ";", ";"], ({
-  $type
-}) => $type, ({
-  $type
-}) => $type, ({
-  theme
-}) => `
-    border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};
-    background: ${theme.click.genericMenu.panel.color.background.default};
-    box-shadow: ${theme.click.genericMenu.panel.shadow.default};
-    border-radius: ${theme.click.genericMenu.panel.radii.all};
-  `, ({
-  $showArrow
-}) => $showArrow ? `
-      &[data-side="bottom"] {
-        margin-top: -1px;
-      }
-      &[data-side="top"] {
-        margin-bottom: 1px;
-      }
-      &[data-side="left"] {
-        margin-right: -1px;
-      }
-      }
-      &[data-side="right"] {
-        margin-left: -1px;
-      }
-  ` : "");
-const GenericPopoverMenuPanel = styled.div.withConfig({
-  componentId: "sc-isr9rp-1"
-})(["outline:none;max-width:var(--radix-", "-content-available-width);max-height:var(--radix-", "-content-available-height);overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;z-index:1;", " ", ";"], ({
-  $type
-}) => $type, ({
-  $type
-}) => $type, ({
-  theme
-}) => `
-    border: 1px solid ${theme.click.popover.color.panel.stroke.default};
-    background: ${theme.click.popover.color.panel.background.default};
-    padding: ${theme.click.popover.space.y} ${theme.click.popover.space.x};
-    border-radius: ${theme.click.popover.radii.all};
-    box-shadow: ${theme.click.popover.shadow.default};
-  `, ({
-  $showArrow
-}) => $showArrow ? "margin: -1px 0;" : "");
-const Arrow = styled.svg.withConfig({
-  componentId: "sc-isr9rp-2"
-})(["filter:drop-shadow(rgba(0,0,0,0.1) 0px 4px 6px);", ";"], ({
-  theme
-}) => `
-    fill: ${theme.click.genericMenu.panel.color.background.default};
-    stroke: ${theme.click.genericMenu.panel.color.stroke.default};
-  `);
-const GenericMenuItem = styled.div.withConfig({
-  componentId: "sc-isr9rp-3"
-})(["display:flex;width:100%;width:-moz-available;width:-webkit-fill-available;width:fill-available;width:stretch;align-items:center;justify-content:flex-start;cursor:default;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;&:focus{outline:none;}", ";position:relative;&:hover .dropdown-arrow,&[data-state='open'] .dropdown-arrow{left:0.5rem;}&[hidden]{display:none;}"], ({
-  theme,
-  $type = "default"
-}) => {
-  const colorKey = $type === "danger" ? "danger" : "default";
-  return `
-    padding: ${theme.click.genericMenu.item.space.y} ${theme.click.genericMenu.item.space.x};
-    gap: ${theme.click.genericMenu.item.space.gap};
-    font: ${theme.click.genericMenu.item.typography.label.default};
-    background: ${theme.click.genericMenu.item.color[colorKey].background.default};
-    color: ${theme.click.genericMenu.item.color[colorKey].text.default};
-    &[data-highlighted] {
-      font: ${theme.click.genericMenu.item.typography.label.hover};
-      background: ${theme.click.genericMenu.item.color[colorKey].background.hover};
-      color:${theme.click.genericMenu.item.color[colorKey].text.hover};
-      cursor: pointer;
+const panelVariants = cva(styles["generic-menu-panel"], {
+  variants: {
+    type: {
+      popover: styles["generic-menu-panel_type_popover"],
+      "dropdown-menu": styles["generic-menu-panel_type_dropdown-menu"],
+      "context-menu": styles["generic-menu-panel_type_context-menu"]
+    },
+    showArrow: {
+      true: styles["generic-menu-panel_show-arrow"],
+      false: ""
     }
-    [data-input-modality="keyboard"] &[data-highlighted] {
-      outline: 2px solid ${theme.click.global.color.accent.default};
-      outline-offset: -2px;
-    }
-    &[data-state="open"] {
-      background:${theme.click.genericMenu.item.color[colorKey].background.hover};
-      color:${theme.click.genericMenu.item.color[colorKey].text.hover};
-      font: ${theme.click.genericMenu.item.typography.label.hover};
-      cursor: pointer;
-    }
-    &[data-state="checked"], &[data-selected="true"]  {
-      background:${theme.click.genericMenu.item.color[colorKey].background.active};
-      color:${theme.click.genericMenu.item.color[colorKey].text.active};
-      font: ${theme.click.genericMenu.item.typography.label.active};
-    }
-    &[data-disabled] {
-      color:${theme.click.genericMenu.item.color[colorKey].text.disabled};
-      font: ${theme.click.genericMenu.item.typography.label.disabled};
-      pointer-events: none;
+  },
+  defaultVariants: {
+    showArrow: false
+  }
+});
+const _GenericMenuPanel = ({
+  as,
+  type,
+  showArrow,
+  className,
+  ...props
+}, ref) => {
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(panelVariants({
+    type,
+    showArrow
+  }), className) });
+};
+const GenericMenuPanel = forwardRef(_GenericMenuPanel);
+const popoverPanelVariants = cva(styles["generic-popover-menu-panel"], {
+  variants: {
+    type: {
+      popover: styles["generic-popover-menu-panel_type_popover"],
+      "hover-card": styles["generic-popover-menu-panel_type_hover-card"]
+    },
+    showArrow: {
+      true: styles["generic-popover-menu-panel_show-arrow"],
+      false: ""
     }
-    &:visited {
-      color: ${theme.click.genericMenu.item.color[colorKey].text.default};
-      a {
-        color: ${theme.click.genericMenu.item.color[colorKey].text.default};
-      }
+  },
+  defaultVariants: {
+    showArrow: false
+  }
+});
+const _GenericPopoverMenuPanel = ({
+  as,
+  type,
+  showArrow,
+  className,
+  ...props
+}, ref) => {
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(popoverPanelVariants({
+    type,
+    showArrow
+  }), className) });
+};
+const GenericPopoverMenuPanel = forwardRef(_GenericPopoverMenuPanel);
+const _Arrow = ({
+  as,
+  className,
+  ...props
+}, ref) => {
+  const Component = as ?? "svg";
+  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(styles.arrow, className) });
+};
+const Arrow = forwardRef(_Arrow);
+const itemVariants = cva(styles["generic-menu-item"], {
+  variants: {
+    type: {
+      default: styles["generic-menu-item_type_default"],
+      danger: styles["generic-menu-item_type_danger"]
     }
-  `;
+  },
+  defaultVariants: {
+    type: "default"
+  }
 });
+const _GenericMenuItem = ({
+  as,
+  type = "default",
+  className,
+  ...props
+}, ref) => {
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(itemVariants({
+    type
+  }), className) });
+};
+const GenericMenuItem = forwardRef(_GenericMenuItem);
 
 export { Arrow, GenericMenuItem, GenericMenuPanel, GenericPopoverMenuPanel };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/GenericMenu/GenericMenu.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const GenericMenuPanel = styled.div<{\n  $type: 'popover' | 'dropdown-menu' | 'context-menu';\n  $showArrow?: boolean;\n}>`\n  outline: none;\n  max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n  max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n  overflow: hidden;\n  display: flex;\n  align-items: flex-start;\n  pointer-events: auto;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n    background: ${theme.click.genericMenu.panel.color.background.default};\n    box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n    border-radius: ${theme.click.genericMenu.panel.radii.all};\n  `};\n  ${({ $showArrow }) =>\n    $showArrow\n      ? `\n      &[data-side=\"bottom\"] {\n        margin-top: -1px;\n      }\n      &[data-side=\"top\"] {\n        margin-bottom: 1px;\n      }\n      &[data-side=\"left\"] {\n        margin-right: -1px;\n      }\n      }\n      &[data-side=\"right\"] {\n        margin-left: -1px;\n      }\n  `\n      : ''};\n`;\n\nexport const GenericPopoverMenuPanel = styled.div<{\n  $type: 'popover' | 'hover-card';\n  $showArrow?: boolean;\n}>`\n  outline: none;\n  max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n  max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  z-index: 1;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.popover.color.panel.stroke.default};\n    background: ${theme.click.popover.color.panel.background.default};\n    padding: ${theme.click.popover.space.y} ${theme.click.popover.space.x};\n    border-radius: ${theme.click.popover.radii.all};\n    box-shadow: ${theme.click.popover.shadow.default};\n  `}\n  ${({ $showArrow }) => ($showArrow ? 'margin: -1px 0;' : '')};\n`;\n\nexport const Arrow = styled.svg`\n  filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 4px 6px);\n  ${({ theme }) => `\n    fill: ${theme.click.genericMenu.panel.color.background.default};\n    stroke: ${theme.click.genericMenu.panel.color.stroke.default};\n  `};\n`;\n\nexport const GenericMenuItem = styled.div<{ $type?: 'default' | 'danger' }>`\n  display: flex;\n  width: 100%;\n  width: -moz-available;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: default;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  &:focus {\n    outline: none;\n  }\n\n  ${({ theme, $type = 'default' }) => {\n    const colorKey = $type === 'danger' ? 'danger' : 'default';\n    return `\n    padding: ${theme.click.genericMenu.item.space.y} ${theme.click.genericMenu.item.space.x};\n    gap: ${theme.click.genericMenu.item.space.gap};\n    font: ${theme.click.genericMenu.item.typography.label.default};\n    background: ${theme.click.genericMenu.item.color[colorKey].background.default};\n    color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n    &[data-highlighted] {\n      font: ${theme.click.genericMenu.item.typography.label.hover};\n      background: ${theme.click.genericMenu.item.color[colorKey].background.hover};\n      color:${theme.click.genericMenu.item.color[colorKey].text.hover};\n      cursor: pointer;\n    }\n    [data-input-modality=\"keyboard\"] &[data-highlighted] {\n      outline: 2px solid ${theme.click.global.color.accent.default};\n      outline-offset: -2px;\n    }\n    &[data-state=\"open\"] {\n      background:${theme.click.genericMenu.item.color[colorKey].background.hover};\n      color:${theme.click.genericMenu.item.color[colorKey].text.hover};\n      font: ${theme.click.genericMenu.item.typography.label.hover};\n      cursor: pointer;\n    }\n    &[data-state=\"checked\"], &[data-selected=\"true\"]  {\n      background:${theme.click.genericMenu.item.color[colorKey].background.active};\n      color:${theme.click.genericMenu.item.color[colorKey].text.active};\n      font: ${theme.click.genericMenu.item.typography.label.active};\n    }\n    &[data-disabled] {\n      color:${theme.click.genericMenu.item.color[colorKey].text.disabled};\n      font: ${theme.click.genericMenu.item.typography.label.disabled};\n      pointer-events: none;\n    }\n    &:visited {\n      color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n      a {\n        color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n      }\n    }\n  `;\n  }};\n  position: relative;\n  &:hover .dropdown-arrow,\n  &[data-state='open'] .dropdown-arrow {\n    left: 0.5rem;\n  }\n  &[hidden] {\n    display: none;\n  }\n`;\n"],"names":["GenericMenuPanel","styled","div","withConfig","componentId","$type","theme","click","genericMenu","panel","color","stroke","default","background","shadow","radii","all","$showArrow","GenericPopoverMenuPanel","popover","space","y","x","Arrow","svg","GenericMenuItem","colorKey","item","gap","typography","label","text","hover","global","accent","active","disabled"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/GenericMenu/GenericMenu.tsx"],"sourcesContent":["import { ComponentPropsWithRef, ElementType, ReactNode, forwardRef } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './GenericMenu.module.css';\n\nconst panelVariants = cva(styles['generic-menu-panel'], {\n  variants: {\n    type: {\n      popover: styles['generic-menu-panel_type_popover'],\n      'dropdown-menu': styles['generic-menu-panel_type_dropdown-menu'],\n      'context-menu': styles['generic-menu-panel_type_context-menu'],\n    },\n    showArrow: {\n      true: styles['generic-menu-panel_show-arrow'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showArrow: false,\n  },\n});\n\ntype GenericMenuPanelOwnProps = {\n  type: 'popover' | 'dropdown-menu' | 'context-menu';\n  showArrow?: boolean;\n};\n\ntype GenericMenuPanelComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentPropsWithRef<T>, keyof GenericMenuPanelOwnProps | 'as'> &\n    GenericMenuPanelOwnProps & { as?: T }\n) => ReactNode;\n\nconst _GenericMenuPanel = <T extends ElementType = 'div'>(\n  {\n    as,\n    type,\n    showArrow,\n    className,\n    ...props\n  }: Omit<ComponentPropsWithRef<T>, keyof GenericMenuPanelOwnProps | 'as'> &\n    GenericMenuPanelOwnProps & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(panelVariants({ type, showArrow }), className)}\n    />\n  );\n};\n\nexport const GenericMenuPanel: GenericMenuPanelComponent = forwardRef(_GenericMenuPanel);\n\nconst popoverPanelVariants = cva(styles['generic-popover-menu-panel'], {\n  variants: {\n    type: {\n      popover: styles['generic-popover-menu-panel_type_popover'],\n      'hover-card': styles['generic-popover-menu-panel_type_hover-card'],\n    },\n    showArrow: {\n      true: styles['generic-popover-menu-panel_show-arrow'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showArrow: false,\n  },\n});\n\ntype GenericPopoverMenuPanelOwnProps = {\n  type: 'popover' | 'hover-card';\n  showArrow?: boolean;\n};\n\ntype GenericPopoverMenuPanelComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentPropsWithRef<T>, keyof GenericPopoverMenuPanelOwnProps | 'as'> &\n    GenericPopoverMenuPanelOwnProps & { as?: T }\n) => ReactNode;\n\nconst _GenericPopoverMenuPanel = <T extends ElementType = 'div'>(\n  {\n    as,\n    type,\n    showArrow,\n    className,\n    ...props\n  }: Omit<ComponentPropsWithRef<T>, keyof GenericPopoverMenuPanelOwnProps | 'as'> &\n    GenericPopoverMenuPanelOwnProps & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(popoverPanelVariants({ type, showArrow }), className)}\n    />\n  );\n};\n\nexport const GenericPopoverMenuPanel: GenericPopoverMenuPanelComponent = forwardRef(\n  _GenericPopoverMenuPanel\n);\n\ntype ArrowComponent = <T extends ElementType = 'svg'>(\n  props: Omit<ComponentPropsWithRef<T>, 'as'> & { as?: T }\n) => ReactNode;\n\nconst _Arrow = <T extends ElementType = 'svg'>(\n  { as, className, ...props }: Omit<ComponentPropsWithRef<T>, 'as'> & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'svg';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(styles.arrow, className)}\n    />\n  );\n};\n\nexport const Arrow: ArrowComponent = forwardRef(_Arrow);\n\nconst itemVariants = cva(styles['generic-menu-item'], {\n  variants: {\n    type: {\n      default: styles['generic-menu-item_type_default'],\n      danger: styles['generic-menu-item_type_danger'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\ntype GenericMenuItemOwnProps = {\n  type?: 'default' | 'danger';\n};\n\ntype GenericMenuItemComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentPropsWithRef<T>, keyof GenericMenuItemOwnProps | 'as'> &\n    GenericMenuItemOwnProps & { as?: T }\n) => ReactNode;\n\nconst _GenericMenuItem = <T extends ElementType = 'div'>(\n  {\n    as,\n    type = 'default',\n    className,\n    ...props\n  }: Omit<ComponentPropsWithRef<T>, keyof GenericMenuItemOwnProps | 'as'> &\n    GenericMenuItemOwnProps & { as?: T },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(itemVariants({ type }), className)}\n    />\n  );\n};\n\nexport const GenericMenuItem: GenericMenuItemComponent = forwardRef(_GenericMenuItem);\n"],"names":["panelVariants","cva","styles","variants","type","popover","showArrow","true","false","defaultVariants","_GenericMenuPanel","as","className","props","ref","Component","cn","GenericMenuPanel","forwardRef","popoverPanelVariants","_GenericPopoverMenuPanel","GenericPopoverMenuPanel","_Arrow","arrow","Arrow","itemVariants","default","danger","_GenericMenuItem","GenericMenuItem"],"mappings":"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"}

package/dist/esm/components/GridCenter/GridCenter.css

@@ -0,0 +1,6 @@
+.grid-center__DYdT1 {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+}

package/dist/esm/components/GridContainer/GridContainer.css

@@ -0,0 +1,71 @@
+.grid-container__u1yIf {
+  /* These custom properties are only emitted inline when the matching prop is
+     set (grid-auto-columns, grid-auto-flow, grid-auto-rows, grid-template-area,
+     grid-template-columns, grid-template-rows, max-width, min-width, height,
+     max-height, min-height, overflow). Custom properties inherit by default, so
+     without this reset a nested GridContainer would inherit an ancestor's
+     value. Resetting to `initial` makes each consuming declaration fall back to
+     its own default (the second arg of `var()`) when the prop is unset,
+     reproducing the per-instance scoping that styled-components gave for free.
+     `--grid-container-gap` is included for the same reason: without resetting it
+     to `initial`, a nested GridContainer would inherit an ancestor's gap token
+     instead of letting `var(--grid-container-gap, inherit)` fall back to
+     `inherit` per-element (the styled-components source used a direct
+     `gap: inherit`). `column-gap`/`row-gap` are not in this set: they are
+     emitted inline as real longhand properties (not custom properties), so
+     there are no `--grid-container-*-gap` vars to reset. */
+  --grid-container-gap: initial;
+  --grid-container-auto-columns: initial;
+  --grid-container-auto-flow: initial;
+  --grid-container-auto-rows: initial;
+  --grid-container-template-area: initial;
+  --grid-container-template-columns: initial;
+  --grid-container-template-rows: initial;
+  --grid-container-max-width: initial;
+  --grid-container-min-width: initial;
+  --grid-container-height: initial;
+  --grid-container-max-height: initial;
+  --grid-container-min-height: initial;
+  --grid-container-overflow: initial;
+  display: var(--grid-container-display, grid);
+  width: var(--grid-container-width, 100%);
+  min-width: var(--grid-container-min-width);
+  max-width: var(--grid-container-max-width);
+  height: var(--grid-container-height);
+  min-height: var(--grid-container-min-height);
+  max-height: var(--grid-container-max-height);
+  overflow: var(--grid-container-overflow);
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- align/justify axes are set independently from distinct props, so the place-content/place-items shorthands can't be used */
+  justify-content: var(--grid-container-justify-content, stretch);
+  align-items: var(--grid-container-align-items, stretch);
+  align-content: var(--grid-container-align-content, stretch);
+  /* `gap` is always emitted; `column-gap`/`row-gap` are emitted inline (as real
+     longhands) only when their props are set, so they override this shorthand
+     just like the styled-components source did — and stay absent otherwise. */
+  gap: var(--grid-container-gap, inherit);
+  grid-template-columns: var(--grid-container-template-columns);
+  grid-template-rows: var(--grid-container-template-rows);
+  grid-auto-columns: var(--grid-container-auto-columns);
+  grid-auto-flow: var(--grid-container-auto-flow);
+  grid-auto-rows: var(--grid-container-auto-rows);
+  /* stylelint-disable-next-line property-no-unknown -- the styled-components original emitted `grid-template-area` (singular, invalid); preserved verbatim for byte-for-byte parity */
+  grid-template-area: var(--grid-container-template-area);
+  justify-items: var(--grid-container-justify-items, stretch);
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation required for browser compatibility per .browserslistrc */
+@media (max-width: 768px) {
+  .grid-container_responsive__3-8Xh {
+    grid-template-columns: 1fr;
+  }
+
+  /* When NOT responsive, the styled-components source applied
+     `grid-template-columns: ${$gridTemplateColumns || 'auto'}` at the md
+     breakpoint — i.e. the explicit template when one was passed, otherwise
+     `auto`. The `--grid-container-template-columns` var is set inline only when
+     the prop is provided, so the `auto` fallback reproduces that exactly. */
+  .grid-container_not-responsive__Qqhg3 {
+    grid-template-columns: var(--grid-container-template-columns, auto);
+  }
+}