@pantool/components 1.0.0-alpha.7 → 1.0.0-alpha.9

package/dist/atoms/avatar/avatar.css

@@ -0,0 +1 @@
+.pysGDq_root{vertical-align:middle;-webkit-user-select:none;user-select:none;color:var(--color-content-neutral-base);background-color:var(--color-surface-tertiary);height:var(--avatar-size);width:var(--avatar-size);font-size:.875rem;font-weight:400;line-height:1;font-family:var(--typography-typeface-ltr);border-radius:100%;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.pysGDq_root[data-size=sm]{--avatar-size:1.75rem}.pysGDq_root[data-size=md]{--avatar-size:2rem}.pysGDq_root[data-size=lg]{--avatar-size:2.25rem}.pysGDq_image{object-fit:cover;width:100%;height:100%}.pysGDq_fallback{justify-content:center;align-items:center;width:100%;height:100%;font-size:.875rem;display:flex}

package/dist/atoms/avatar/avatar.d.ts

@@ -0,0 +1,17 @@
+import { AvatarFallbackProps, AvatarImageProps } from "@base-ui/react";
+
+//#region src/atoms/avatar/avatar.d.ts
+type AvatarProps = Pick<AvatarImageProps, "src" | "alt"> & {
+  fallbackProps?: Omit<AvatarFallbackProps, "style" | "className" | "render">;
+  fallback: string;
+  size?: "sm" | "md" | "lg";
+  classNames?: {
+    root?: string;
+    image?: string;
+    fallback?: string;
+  };
+};
+declare const Avatar$1: React.FC<AvatarProps>;
+//#endregion
+export { Avatar$1 as Avatar, AvatarProps };
+//# sourceMappingURL=avatar.d.ts.map

package/dist/atoms/avatar/avatar.js

@@ -0,0 +1,2 @@
+import e from"./avatar.module.js";import t from"clsx";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{Avatar as i}from"@base-ui/react";const a=a=>{let{classNames:o,src:s,alt:c,fallbackProps:l,fallback:u,size:d=`md`}=a;return r(i.Root,{"data-size":d,"data-slot":`avatar-root`,className:t(e.root,o?.root),children:[n(i.Image,{src:s,alt:c,"data-slot":`avatar-image`,className:t(e.image,o?.image)}),n(i.Fallback,{...l,"data-slot":`avatar-fallback`,className:t(e.fallback,o?.fallback),children:u})]})};export{a as Avatar};
+//# sourceMappingURL=avatar.js.map

package/dist/atoms/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":["Avatar","BaseAvatar","styles"],"sources":["../../../src/atoms/avatar/avatar.tsx"],"sourcesContent":["import {\n  Avatar as BaseAvatar,\n  type AvatarFallbackProps,\n  type AvatarImageProps,\n} from \"@base-ui/react\";\nimport clsx from \"clsx\";\nimport styles from \"./avatar.module.css\";\n\nexport type AvatarProps = Pick<AvatarImageProps, \"src\" | \"alt\"> & {\n  fallbackProps?: Omit<AvatarFallbackProps, \"style\" | \"className\" | \"render\">;\n  fallback: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  classNames?: {\n    root?: string;\n    image?: string;\n    fallback?: string;\n  };\n};\n\nexport const Avatar: React.FC<AvatarProps> = props => {\n  const { classNames, src, alt, fallbackProps, fallback, size = \"md\" } = props;\n  return (\n    <BaseAvatar.Root\n      data-size={size}\n      data-slot=\"avatar-root\"\n      className={clsx(styles[\"root\"], classNames?.root)}\n    >\n      <BaseAvatar.Image\n        src={src}\n        alt={alt}\n        data-slot=\"avatar-image\"\n        className={clsx(styles[\"image\"], classNames?.image)}\n      />\n      <BaseAvatar.Fallback\n        {...fallbackProps}\n        data-slot=\"avatar-fallback\"\n        className={clsx(styles[\"fallback\"], classNames?.fallback)}\n      >\n        {fallback}\n      </BaseAvatar.Fallback>\n    </BaseAvatar.Root>\n  );\n};\n"],"mappings":"gJAmBA,MAAaA,EAAgC,GAAS,CACpD,GAAM,CAAE,aAAY,MAAK,MAAK,gBAAe,WAAU,OAAO,MAAS,EACvE,OACE,EAACC,EAAW,KAAZ,CACE,YAAW,EACX,YAAU,cACV,UAAW,EAAKC,EAAO,KAAS,GAAY,IAAI,WAHlD,CAKE,EAACD,EAAW,MAAZ,CACO,MACA,MACL,YAAU,eACV,UAAW,EAAKC,EAAO,MAAU,GAAY,KAAK,CACnD,CAAA,EACD,EAACD,EAAW,SAAZ,CACE,GAAI,EACJ,YAAU,kBACV,UAAW,EAAKC,EAAO,SAAa,GAAY,QAAQ,WAEvD,CACkB,CAAA,CACN,GAErB"}

package/dist/atoms/avatar/avatar.module.js

@@ -0,0 +1,3 @@
+import './avatar.css';
+var e={fallback:`pysGDq_fallback`,image:`pysGDq_image`,root:`pysGDq_root`};export{e as default};
+//# sourceMappingURL=avatar.module.js.map

package/dist/atoms/avatar/avatar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.module.js","names":[],"sources":["../../../src/atoms/avatar/avatar.module.css"],"sourcesContent":[".root {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: middle;\n  border-radius: 100%;\n  -webkit-user-select: none;\n  user-select: none;\n  font-weight: 400;\n  color: var(--color-content-neutral-base);\n  background-color: var(--color-surface-tertiary);\n  font-size: 0.875rem;\n  line-height: 1;\n  overflow: hidden;\n  height: var(--avatar-size);\n  width: var(--avatar-size);\n  font-family: var(--typography-typeface-ltr);\n}\n\n.root[data-size=\"sm\"] {\n  --avatar-size: 1.75rem;\n}\n.root[data-size=\"md\"] {\n  --avatar-size: 2rem;\n}\n.root[data-size=\"lg\"] {\n  --avatar-size: 2.25rem;\n}\n\n.image {\n  object-fit: cover;\n  height: 100%;\n  width: 100%;\n}\n\n.fallback {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  font-size: 0.875rem;\n}\n"],"mappings":""}

package/dist/atoms/avatar/index.d.ts

@@ -0,0 +1 @@
+import { Avatar, AvatarProps } from "./avatar.js";

package/dist/atoms/avatar/index.js

@@ -0,0 +1 @@
+import"./avatar.js";

package/dist/atoms/button/button.d.ts

@@ -1,16 +1,16 @@
 import { BaseButtonProps } from "../../internals/base-button/base-button.js";
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/atoms/button/button.d.ts
 interface ButtonProps extends BaseButtonProps {
   /** The icon to display before the text. */
-  startIcon?: React.ReactNode;
+  startIcon?: React$1.ReactNode;
   /** The icon to display after the text. */
-  endIcon?: React.ReactNode;
+  endIcon?: React$1.ReactNode;
   /** The button's text. */
-  text: React.ReactNode;
+  text: React$1.ReactNode;
 }
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { Button, ButtonProps };
 //# sourceMappingURL=button.d.ts.map

package/dist/atoms/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["styles"],"sources":["../../../src/atoms/button/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseButton, type BaseButtonProps } from \"../../internals/base-button\";\nimport styles from \"./button.module.css\";\n\nexport interface ButtonProps extends BaseButtonProps {\n  /** The icon to display before the text. */\n  startIcon?: React.ReactNode;\n  /** The icon to display after the text. */\n  endIcon?: React.ReactNode;\n  /** The button's text. */\n  text: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const { text, startIcon, endIcon, className, ...rest } = props;\n\n    return (\n      <BaseButton\n        ref={ref}\n        className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n        {...rest}\n      >\n        {startIcon && <span className={styles[\"icon\"]}>{startIcon}</span>}\n        <span className={styles[\"label\"]}>{text}</span>\n        {endIcon && <span className={styles[\"icon\"]}>{endIcon}</span>}\n      </BaseButton>\n    );\n  },\n);\n"],"mappings":"iOAaA,MAAa,EAAS,EAAM,YACzB,EAAO,IAAQ,CACd,GAAM,CAAE,OAAM,YAAW,UAAS,YAAW,GAAG,GAAS,EAEzD,OACE,EAAC,EAAD,CACO,MACL,UAAW,GAAGA,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,GAAI,WAHN,CAKG,GAAa,EAAC,OAAD,CAAM,UAAWA,EAAO,cAAU,CAAgB,CAAA,EAChE,EAAC,OAAD,CAAM,UAAWA,EAAO,eAAW,CAAW,CAAA,EAC7C,GAAW,EAAC,OAAD,CAAM,UAAWA,EAAO,cAAU,CAAc,CAAA,CAClD,GAEhB,CACF"}
+{"version":3,"file":"button.js","names":["React","styles"],"sources":["../../../src/atoms/button/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseButton, type BaseButtonProps } from \"../../internals/base-button\";\nimport styles from \"./button.module.css\";\n\nexport interface ButtonProps extends BaseButtonProps {\n  /** The icon to display before the text. */\n  startIcon?: React.ReactNode;\n  /** The icon to display after the text. */\n  endIcon?: React.ReactNode;\n  /** The button's text. */\n  text: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const { text, startIcon, endIcon, className, ...rest } = props;\n\n    return (\n      <BaseButton\n        ref={ref}\n        className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n        {...rest}\n      >\n        {startIcon && <span className={styles[\"icon\"]}>{startIcon}</span>}\n        <span className={styles[\"label\"]}>{text}</span>\n        {endIcon && <span className={styles[\"icon\"]}>{endIcon}</span>}\n      </BaseButton>\n    );\n  },\n);\n"],"mappings":"iOAaA,MAAa,EAASA,EAAM,YACzB,EAAO,IAAQ,CACd,GAAM,CAAE,OAAM,YAAW,UAAS,YAAW,GAAG,GAAS,EAEzD,OACE,EAAC,EAAD,CACO,MACL,UAAW,GAAGC,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,GAAI,WAHN,CAKG,GAAa,EAAC,OAAD,CAAM,UAAWA,EAAO,cAAU,CAAgB,CAAA,EAChE,EAAC,OAAD,CAAM,UAAWA,EAAO,eAAW,CAAW,CAAA,EAC7C,GAAW,EAAC,OAAD,CAAM,UAAWA,EAAO,cAAU,CAAc,CAAA,CAClD,GAEhB,CACF"}

package/dist/atoms/clickable-area/clickable-area.d.ts

@@ -0,0 +1,15 @@
+import { MergeElementProps, WithBaseProps } from "../../types.js";
+
+//#region src/atoms/clickable-area/clickable-area.d.ts
+type ClickableAreaProps = MergeElementProps<"button", WithBaseProps<{
+  /**
+   * If true, the button will be disabled and non-interactive.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+}>>;
+declare const ClickableArea: React.FC<ClickableAreaProps>;
+//#endregion
+export { ClickableArea, ClickableAreaProps };
+//# sourceMappingURL=clickable-area.d.ts.map

package/dist/atoms/clickable-area/clickable-area.js

@@ -0,0 +1,2 @@
+import e from"./styles.module.js";import t from"clsx";import{jsx as n}from"react/jsx-runtime";const r=r=>{let{children:i,className:a,disabled:o=!1,tabIndex:s,...c}=r,l=o?-1:s??0;return n(`button`,{...c,inert:o,disabled:o,tabIndex:l,className:t(e.root,a),children:i})};export{r as ClickableArea};
+//# sourceMappingURL=clickable-area.js.map

package/dist/atoms/clickable-area/clickable-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickable-area.js","names":["classes"],"sources":["../../../src/atoms/clickable-area/clickable-area.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { MergeElementProps, WithBaseProps } from \"../../types\";\nimport classes from \"./styles.module.css\";\n\nexport type ClickableAreaProps = MergeElementProps<\n  \"button\",\n  WithBaseProps<{\n    /**\n     * If true, the button will be disabled and non-interactive.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n  }>\n>;\n\nexport const ClickableArea: React.FC<ClickableAreaProps> = props => {\n  const {\n    children,\n    className,\n    disabled = false,\n    tabIndex: tabIndexProp,\n    ...otherProps\n  } = props;\n\n  const tabIndex = disabled ? -1 : (tabIndexProp ?? 0);\n\n  return (\n    <button\n      {...otherProps}\n      inert={disabled}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      className={clsx(classes[\"root\"], className)}\n    >\n      {children}\n    </button>\n  );\n};\n"],"mappings":"8FAgBA,MAAa,EAA8C,GAAS,CAClE,GAAM,CACJ,WACA,YACA,WAAW,GACX,SAAU,EACV,GAAG,GACD,EAEE,EAAW,EAAW,GAAM,GAAgB,EAElD,OACE,EAAC,SAAD,CACE,GAAI,EACJ,MAAO,EACG,WACA,WACV,UAAW,EAAKA,EAAQ,KAAS,CAAS,EAEzC,UACK,CAAA,CAEZ"}

package/dist/atoms/clickable-area/index.d.ts

@@ -0,0 +1 @@
+import { ClickableArea, ClickableAreaProps } from "./clickable-area.js";

package/dist/atoms/clickable-area/index.js

@@ -0,0 +1 @@
+import"./clickable-area.js";

package/dist/atoms/clickable-area/styles.css

@@ -0,0 +1 @@
+.TyvJFa_root{--clickable-area-background:transparent;all:unset;cursor:pointer;border-radius:var(--radius-lg);background-color:var(--clickable-area-background)}.TyvJFa_root:focus-visible{outline-style:solid;outline-width:var(--token-focus-ring-stroke);outline-color:var(--token-focus-ring-color);outline-offset:var(--token-focus-ring-offset)}.TyvJFa_root.TyvJFa_disabled{pointer-events:none}@media (hover:hover){.TyvJFa_root:not(.TyvJFa_disabled):hover{--clickable-area-background:#ffffff1f}}.TyvJFa_root:not(.TyvJFa_disabled):active{--clickable-area-background:#ffffff0f}

package/dist/atoms/clickable-area/styles.module.js

@@ -0,0 +1,3 @@
+import './styles.css';
+var e={disabled:`TyvJFa_disabled`,root:`TyvJFa_root`};export{e as default};
+//# sourceMappingURL=styles.module.js.map

package/dist/atoms/clickable-area/styles.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.js","names":[],"sources":["../../../src/atoms/clickable-area/styles.module.css"],"sourcesContent":[".root {\n  --clickable-area-background: transparent;\n\n  all: unset;\n  cursor: pointer;\n\n  border-radius: var(--radius-lg);\n  background-color: var(--clickable-area-background);\n}\n\n.root:focus-visible {\n  outline-style: solid;\n  outline-width: var(--token-focus-ring-stroke);\n  outline-color: var(--token-focus-ring-color);\n  outline-offset: var(--token-focus-ring-offset);\n}\n\n.root.disabled {\n  pointer-events: none;\n}\n\n@media (hover: hover) {\n  .root:not(.disabled):hover {\n    --clickable-area-background: rgba(255, 255, 255, 0.12);\n  }\n}\n\n.root:not(.disabled):active {\n  --clickable-area-background: rgba(255, 255, 255, 0.06);\n}\n"],"mappings":""}

package/dist/atoms/combobox/combobox.d.ts

@@ -1,6 +1,6 @@
 import { FieldProps } from "../../internals/base-field/base-field.js";
 import { ComboboxItem } from "./components/item.js";
-import * as React from "react";
+import * as React$1 from "react";
 import { ComboboxRootProps } from "@base-ui/react/combobox";
 
 //#region src/atoms/combobox/combobox.d.ts
@@ -63,11 +63,11 @@ type ComboboxProps<T = string, Multiple extends boolean | undefined = false> = P
   /**
    * Slot for element placed at the start of the input group.
    */
-  startAdornment?: React.ReactNode;
+  startAdornment?: React$1.ReactNode;
   /**
    * Slot for element placed at the end of the input group.
    */
-  endAdornment?: React.ReactNode;
+  endAdornment?: React$1.ReactNode;
   /**
    * Placeholder text for the input.
    */

package/dist/atoms/context-menu/context-menu.css

@@ -1 +1 @@
-.K6vv9G_popup{box-sizing:border-box;font-family:var(--typography-typeface-ltr);padding-block:var(--spacing-xs);border:1px solid var(--color-border-primary);border-radius:var(--spacing-xs);background-color:var(--color-surface-base);color:var(--color-content-neutral-base);transform-origin:var(--transform-origin);outline:none;transition:transform .1s ease-out,opacity .1s ease-out;box-shadow:0 4px 16px #0000001a;&[data-starting-style],&[data-ending-style]{opacity:0;transform:scale(.98)}}.K6vv9G_item{font-family:var(--typography-typeface-ltr);cursor:default;user-select:none;padding-block:var(--spacing-sm);padding-inline:var(--spacing-md);border-radius:var(--spacing-xxs);color:var(--color-content-neutral-base);outline:none;justify-content:space-between;font-size:.875rem;line-height:1.4;display:flex;&[data-highlighted]{z-index:0;color:var(--color-on-brand);position:relative}&[data-highlighted]:before{content:"";inset:0;inset-inline:var(--spacing-xs);z-index:-1;border-radius:var(--spacing-xxs);background-color:var(--color-action-brand-base);position:absolute}&[data-disabled]{color:var(--color-content-neutral-muted);pointer-events:none}}.K6vv9G_separator{margin-block:var(--spacing-xs);margin-inline:var(--spacing-sm);background-color:var(--color-border-tertiary);height:1px}.K6vv9G_group-label{font-family:var(--typography-typeface-ltr);padding-block:var(--spacing-xxs);padding-inline:var(--spacing-md);color:var(--color-content-neutral-tertiary);font-size:.75rem;font-weight:600}.K6vv9G_chevron{width:1rem;height:1rem}
+.K6vv9G_popup{box-sizing:border-box;font-family:var(--typography-typeface-ltr);width:100%;padding-block:var(--spacing-xs);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);background-color:var(--color-surface-base);color:var(--color-content-neutral-base);transform-origin:var(--transform-origin);outline:none;transition:transform .1s ease-out,opacity .1s ease-out;box-shadow:0 4px 16px #0000001a;&[data-starting-style],&[data-ending-style]{opacity:0;transform:scale(.98)}}.K6vv9G_item{font-family:var(--typography-typeface-ltr);cursor:default;user-select:none;padding-block:var(--spacing-sm);padding-inline:var(--spacing-md);border-radius:var(--radius-sm);color:var(--color-content-neutral-base);outline:none;justify-content:space-between;font-size:.875rem;line-height:1.4;display:flex;&[data-highlighted]{z-index:0;color:var(--color-on-brand);position:relative}&[data-highlighted]:before{content:"";inset:0;inset-inline:var(--spacing-xs);z-index:-1;border-radius:var(--radius-sm);background-color:var(--color-action-brand-base);position:absolute}&[data-disabled]{color:var(--color-content-neutral-muted);pointer-events:none}}.K6vv9G_separator{margin-block:var(--spacing-xs);margin-inline:var(--spacing-sm);background-color:var(--color-border-tertiary);height:1px}.K6vv9G_group-label{font-family:var(--typography-typeface-ltr);padding-block:var(--spacing-xxs);padding-inline:var(--spacing-md);color:var(--color-content-neutral-tertiary);font-size:.75rem;font-weight:600}.K6vv9G_chevron{width:1rem;height:1rem}

package/dist/atoms/context-menu/context-menu.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.module.js","names":[],"sources":["../../../src/atoms/context-menu/context-menu.module.css"],"sourcesContent":[".popup {\n  box-sizing: border-box;\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  padding-block: var(--spacing-xs);\n  border: 1px solid var(--color-border-primary);\n  border-radius: var(--spacing-xs);\n  background-color: var(--color-surface-base);\n  color: var(--color-content-neutral-base);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform-origin: var(--transform-origin);\n  transition:\n    transform 100ms ease-out,\n    opacity 100ms ease-out;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n}\n\n.item {\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  cursor: default;\n  user-select: none;\n  padding-block: var(--spacing-sm);\n  padding-inline: var(--spacing-md);\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  border-radius: var(--spacing-xxs);\n  color: var(--color-content-neutral-base);\n\n  &[data-highlighted] {\n    position: relative;\n    z-index: 0;\n    color: var(--color-on-brand);\n  }\n\n  &[data-highlighted]::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    inset-inline: var(--spacing-xs);\n    z-index: -1;\n    border-radius: var(--spacing-xxs);\n    background-color: var(--color-action-brand-base);\n  }\n\n  &[data-disabled] {\n    color: var(--color-content-neutral-muted);\n    pointer-events: none;\n  }\n}\n\n.separator {\n  margin-block: var(--spacing-xs);\n  margin-inline: var(--spacing-sm);\n  height: 1px;\n  background-color: var(--color-border-tertiary);\n}\n\n.group-label {\n  font-family: var(--typography-typeface-ltr);\n  padding-block: var(--spacing-xxs);\n  padding-inline: var(--spacing-md);\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--color-content-neutral-tertiary);\n}\n\n.chevron {\n  width: 1rem;\n  height: 1rem;\n}\n"],"mappings":""}
+{"version":3,"file":"context-menu.module.js","names":[],"sources":["../../../src/atoms/context-menu/context-menu.module.css"],"sourcesContent":[".popup {\n  box-sizing: border-box;\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  width: 100%;\n  padding-block: var(--spacing-xs);\n  border: 1px solid var(--color-border-primary);\n  border-radius: var(--radius-md);\n  background-color: var(--color-surface-base);\n  color: var(--color-content-neutral-base);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform-origin: var(--transform-origin);\n  transition:\n    transform 100ms ease-out,\n    opacity 100ms ease-out;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n}\n\n.item {\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  cursor: default;\n  user-select: none;\n  padding-block: var(--spacing-sm);\n  padding-inline: var(--spacing-md);\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  border-radius: var(--radius-sm);\n  color: var(--color-content-neutral-base);\n\n  &[data-highlighted] {\n    position: relative;\n    z-index: 0;\n    color: var(--color-on-brand);\n  }\n\n  &[data-highlighted]::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    inset-inline: var(--spacing-xs);\n    z-index: -1;\n    border-radius: var(--radius-sm);\n    background-color: var(--color-action-brand-base);\n  }\n\n  &[data-disabled] {\n    color: var(--color-content-neutral-muted);\n    pointer-events: none;\n  }\n}\n\n.separator {\n  margin-block: var(--spacing-xs);\n  margin-inline: var(--spacing-sm);\n  height: 1px;\n  background-color: var(--color-border-tertiary);\n}\n\n.group-label {\n  font-family: var(--typography-typeface-ltr);\n  padding-block: var(--spacing-xxs);\n  padding-inline: var(--spacing-md);\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--color-content-neutral-tertiary);\n}\n\n.chevron {\n  width: 1rem;\n  height: 1rem;\n}\n"],"mappings":""}

package/dist/atoms/icon/icon.d.ts

@@ -1,5 +1,5 @@
 import { BaseSvgProps } from "../../internals/base-svg/base-svg.js";
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/atoms/icon/icon.d.ts
 interface IconProps extends Omit<BaseSvgProps, "children"> {
@@ -8,7 +8,7 @@ interface IconProps extends Omit<BaseSvgProps, "children"> {
    */
   data: string;
 }
-declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { Icon, IconProps };
 //# sourceMappingURL=icon.d.ts.map

package/dist/atoms/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../../src/atoms/icon/icon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseSvg, type BaseSvgProps } from \"../../internals/base-svg\";\n\nexport interface IconProps extends Omit<BaseSvgProps, \"children\"> {\n  /**\n   * The SVG path string (`d` attribute value).\n   */\n  data: string;\n}\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {\n  const { data, className, ...otherProps } = props;\n\n  return (\n    <BaseSvg\n      data-slot=\"icon\"\n      ref={ref}\n      className={`${className || \"\"}`.trim()}\n      {...otherProps}\n    >\n      <path d={data} />\n    </BaseSvg>\n  );\n});\n"],"mappings":"yKAUA,MAAa,EAAO,EAAM,YAAsC,EAAO,IAAQ,CAC7E,GAAM,CAAE,OAAM,YAAW,GAAG,GAAe,EAE3C,OACE,EAAC,EAAD,CACE,YAAU,OACL,MACL,UAAW,GAAG,GAAa,KAAK,KAAK,EACrC,GAAI,WAEJ,EAAC,OAAD,CAAM,EAAG,CAAO,CAAA,CACT,CAAA,CAEb,CAAC"}
+{"version":3,"file":"icon.js","names":["React"],"sources":["../../../src/atoms/icon/icon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseSvg, type BaseSvgProps } from \"../../internals/base-svg\";\n\nexport interface IconProps extends Omit<BaseSvgProps, \"children\"> {\n  /**\n   * The SVG path string (`d` attribute value).\n   */\n  data: string;\n}\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {\n  const { data, className, ...otherProps } = props;\n\n  return (\n    <BaseSvg\n      data-slot=\"icon\"\n      ref={ref}\n      className={`${className || \"\"}`.trim()}\n      {...otherProps}\n    >\n      <path d={data} />\n    </BaseSvg>\n  );\n});\n"],"mappings":"yKAUA,MAAa,EAAOA,EAAM,YAAsC,EAAO,IAAQ,CAC7E,GAAM,CAAE,OAAM,YAAW,GAAG,GAAe,EAE3C,OACE,EAAC,EAAD,CACE,YAAU,OACL,MACL,UAAW,GAAG,GAAa,KAAK,KAAK,EACrC,GAAI,WAEJ,EAAC,OAAD,CAAM,EAAG,CAAO,CAAA,CACT,CAAA,CAEb,CAAC"}

package/dist/atoms/icon-button/icon-button.d.ts

@@ -1,14 +1,14 @@
 import { BaseButtonProps } from "../../internals/base-button/base-button.js";
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/atoms/icon-button/icon-button.d.ts
 interface IconButtonProps extends Omit<BaseButtonProps, "children"> {
   /** The icon to render inside the button. */
-  icon: React.ReactNode;
+  icon: React$1.ReactNode;
   /** Required accessible label for screen readers. */
   label: string;
 }
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconButton, IconButtonProps };
 //# sourceMappingURL=icon-button.d.ts.map

package/dist/atoms/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":["styles"],"sources":["../../../src/atoms/icon-button/icon-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseButton, type BaseButtonProps } from \"../../internals/base-button\";\nimport styles from \"./icon-button.module.css\";\n\nexport interface IconButtonProps extends Omit<BaseButtonProps, \"children\"> {\n  /** The icon to render inside the button. */\n  icon: React.ReactNode;\n  /** Required accessible label for screen readers. */\n  label: string;\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (props, ref) => {\n    const { icon, label, className, ...rest } = props;\n\n    return (\n      <BaseButton\n        ref={ref}\n        className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n        aria-label={label}\n        {...rest}\n      >\n        <span className={styles[\"icon\"]}>{icon}</span>\n      </BaseButton>\n    );\n  },\n);\n"],"mappings":"4NAWA,MAAa,EAAa,EAAM,YAC7B,EAAO,IAAQ,CACd,GAAM,CAAE,OAAM,QAAO,YAAW,GAAG,GAAS,EAE5C,OACE,EAAC,EAAD,CACO,MACL,UAAW,GAAGA,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,aAAY,EACZ,GAAI,WAEJ,EAAC,OAAD,CAAM,UAAWA,EAAO,cAAU,CAAW,CAAA,CACnC,CAAA,CAEhB,CACF"}
+{"version":3,"file":"icon-button.js","names":["React","styles"],"sources":["../../../src/atoms/icon-button/icon-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseButton, type BaseButtonProps } from \"../../internals/base-button\";\nimport styles from \"./icon-button.module.css\";\n\nexport interface IconButtonProps extends Omit<BaseButtonProps, \"children\"> {\n  /** The icon to render inside the button. */\n  icon: React.ReactNode;\n  /** Required accessible label for screen readers. */\n  label: string;\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (props, ref) => {\n    const { icon, label, className, ...rest } = props;\n\n    return (\n      <BaseButton\n        ref={ref}\n        className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n        aria-label={label}\n        {...rest}\n      >\n        <span className={styles[\"icon\"]}>{icon}</span>\n      </BaseButton>\n    );\n  },\n);\n"],"mappings":"4NAWA,MAAa,EAAaA,EAAM,YAC7B,EAAO,IAAQ,CACd,GAAM,CAAE,OAAM,QAAO,YAAW,GAAG,GAAS,EAE5C,OACE,EAAC,EAAD,CACO,MACL,UAAW,GAAGC,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,aAAY,EACZ,GAAI,WAEJ,EAAC,OAAD,CAAM,UAAWA,EAAO,cAAU,CAAW,CAAA,CACnC,CAAA,CAEhB,CACF"}

package/dist/atoms/index.d.ts

@@ -1,6 +1,8 @@
 import { AlertDialog, AlertDialogProps } from "./alert-dialog/alert-dialog.js";
+import { Avatar, AvatarProps } from "./avatar/avatar.js";
 import { Button, ButtonProps } from "./button/button.js";
 import { Checkbox, CheckboxProps } from "./checkbox/checkbox.js";
+import { ClickableArea, ClickableAreaProps } from "./clickable-area/clickable-area.js";
 import { Collapsible } from "./collapsible/collapsible.js";
 import { ComboboxItem } from "./combobox/components/item.js";
 import { Combobox, ComboboxGroup, ComboboxProps } from "./combobox/combobox.js";
@@ -10,6 +12,7 @@ import { Dialog, DialogProps } from "./dialog/dialog.js";
 import { IconButton, IconButtonProps } from "./icon-button/icon-button.js";
 import { Icon, IconProps } from "./icon/icon.js";
 import { Input, InputProps } from "./input/input.js";
+import { BaseItem, CheckboxItem, GroupItem, Menu, MenuItemsByMode, MenuMode, MenuProps, NormalItem, RadioItem, SeparatorItem, SubmenuItem } from "./menu/menu.js";
 import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio/radio.js";
 import { Switch, SwitchProps } from "./switch/switch.js";
 import { Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsTab, TabsTabProps } from "./tabs/tabs.js";

package/dist/atoms/index.js

@@ -1 +1 @@
-import"./button/button.js";import"./button/index.js";import"./text/text.js";import"./text/index.js";import"./alert-dialog/alert-dialog.js";import"./alert-dialog/index.js";import"./icon/icon.js";import"./icon/index.js";import"./checkbox/checkbox.js";import"./checkbox/index.js";import"./collapsible/collapsible.js";import"./collapsible/index.js";import"./combobox/combobox.js";import"./combobox/index.js";import"./condition-guard/condition-guard.js";import"./condition-guard/index.js";import"./context-menu/context-menu.js";import"./context-menu/index.js";import"./dialog/dialog.js";import"./dialog/index.js";import"./icon-button/icon-button.js";import"./icon-button/index.js";import"./input/input.js";import"./input/index.js";import"./radio/radio.js";import"./radio/index.js";import"./switch/switch.js";import"./switch/index.js";import"./tabs/tabs.js";import"./tabs/index.js";import"./toast/toast.js";import"./toast/index.js";import"./tooltip/tooltip.js";import"./tooltip/index.js";
+import"./button/button.js";import"./button/index.js";import"./text/text.js";import"./text/index.js";import"./alert-dialog/alert-dialog.js";import"./alert-dialog/index.js";import"./avatar/avatar.js";import"./avatar/index.js";import"./icon/icon.js";import"./icon/index.js";import"./checkbox/checkbox.js";import"./checkbox/index.js";import"./clickable-area/clickable-area.js";import"./clickable-area/index.js";import"./collapsible/collapsible.js";import"./collapsible/index.js";import"./combobox/combobox.js";import"./combobox/index.js";import"./condition-guard/condition-guard.js";import"./condition-guard/index.js";import"./context-menu/context-menu.js";import"./context-menu/index.js";import"./dialog/dialog.js";import"./dialog/index.js";import"./icon-button/icon-button.js";import"./icon-button/index.js";import"./input/input.js";import"./input/index.js";import"./menu/menu.js";import"./menu/index.js";import"./radio/radio.js";import"./radio/index.js";import"./switch/switch.js";import"./switch/index.js";import"./tabs/tabs.js";import"./tabs/index.js";import"./toast/toast.js";import"./toast/index.js";import"./tooltip/tooltip.js";import"./tooltip/index.js";

package/dist/atoms/menu/index.d.ts

@@ -0,0 +1 @@
+import { BaseItem, CheckboxItem, GroupItem, Menu, MenuItemsByMode, MenuMode, MenuProps, NormalItem, RadioItem, SeparatorItem, SubmenuItem } from "./menu.js";

package/dist/atoms/menu/index.js

@@ -0,0 +1 @@
+import"./menu.js";

package/dist/atoms/menu/menu.css

@@ -0,0 +1 @@
+.geRtDa_trigger{white-space:nowrap;-webkit-user-select:none;user-select:none;background-color:#0000;border:none;outline:0;justify-content:center;align-items:center;margin:0;font-family:inherit;font-size:.875rem;font-weight:400;line-height:1;display:flex}.geRtDa_positioner{outline:0}.geRtDa_popup{box-sizing:border-box;font-family:var(--typography-typeface-ltr);width:100%;padding-block:var(--spacing-xs);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);background-color:var(--color-surface-base);color:var(--color-content-neutral-base);transform-origin:var(--transform-origin);outline:none;transition:transform .1s ease-out,opacity .1s ease-out;box-shadow:0 4px 16px #0000001a;&[data-starting-style],&[data-ending-style]{opacity:0;transform:scale(.98)}}.geRtDa_item{font-family:var(--typography-typeface-ltr);cursor:default;user-select:none;padding-block:var(--spacing-sm);padding-inline:var(--spacing-md);border-radius:var(--radius-sm);color:var(--color-content-neutral-base);outline:none;font-size:.875rem;line-height:1.4;display:flex;&[data-highlighted]{z-index:0;color:var(--color-on-brand);position:relative}&[data-highlighted]:before{content:"";inset:0;inset-inline:var(--spacing-xs);z-index:-1;border-radius:var(--radius-sm);background-color:var(--color-action-brand-base);position:absolute}&[data-disabled]{color:var(--color-content-neutral-muted);pointer-events:none}}.geRtDa_separator{margin-block:var(--spacing-xs);margin-inline:var(--spacing-sm);background-color:var(--color-border-tertiary);height:1px}.geRtDa_group-label{font-family:var(--typography-typeface-ltr);padding-block:var(--spacing-xxs);padding-inline:var(--spacing-md);color:var(--color-content-neutral-tertiary);font-size:.75rem;font-weight:600}.geRtDa_group{flex-direction:column;display:flex}.geRtDa_radio-item{align-items:center;gap:var(--spacing-sm)}.geRtDa_radio-item-indicator{width:1rem;height:1rem;justify-content:center;align-items:center;margin-inline-end:var(--spacing-sm);display:inline-flex}.geRtDa_checkbox-item{align-items:center;gap:var(--spacing-sm)}.geRtDa_checkbox-item-indicator{width:1rem;height:1rem;justify-content:center;align-items:center;margin-inline-end:var(--spacing-sm);display:inline-flex}.geRtDa_check{width:.875rem;height:.875rem}.geRtDa_submenu-trigger{justify-content:space-between;align-items:center;display:flex}.geRtDa_submenu-arrow{opacity:.6;width:.875rem;height:.875rem;margin-left:auto;font-size:.75rem}

package/dist/atoms/menu/menu.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+import { MenuTriggerProps } from "@base-ui/react";
+
+//#region src/atoms/menu/menu.d.ts
+type MenuMode = "normal" | "radio" | "checkbox";
+type BaseItem = {
+  key: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+};
+type NormalItem = BaseItem & {
+  kind: "item";
+  onSelect?: () => void;
+};
+type SubmenuItem<T> = BaseItem & {
+  kind: "submenu";
+  items: Array<T | SeparatorItem | GroupItem<T> | SubmenuItem<T>>;
+};
+type RadioItem = BaseItem & {
+  kind: "item";
+  value: string;
+};
+type CheckboxItem = BaseItem & {
+  kind: "item";
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+};
+type SeparatorItem = {
+  kind: "separator";
+  key: string;
+};
+type GroupItem<T> = {
+  kind: "group";
+  key: string;
+  label: React.ReactNode;
+  items: T[];
+};
+type MenuItemsByMode<M extends MenuMode> = M extends "normal" ? Array<NormalItem | SeparatorItem | GroupItem<NormalItem> | SubmenuItem<NormalItem>> : M extends "radio" ? Array<RadioItem | SeparatorItem | GroupItem<RadioItem> | SubmenuItem<RadioItem>> : Array<CheckboxItem | SeparatorItem | GroupItem<CheckboxItem> | SubmenuItem<CheckboxItem>>;
+type MenuProps<M extends MenuMode> = {
+  mode?: M;
+  items: MenuItemsByMode<M>;
+  children: React.ReactNode;
+  classNames?: {
+    trigger?: string;
+    popup?: string;
+    positioner?: string;
+    check?: string;
+    item?: string;
+    separator?: string;
+    group?: string;
+    groupLabel?: string;
+    radioItem?: string;
+    radioItemIndicator?: string;
+    checkboxItem?: string;
+    checkboxItemIndicator?: string;
+  };
+  openOnHover?: MenuTriggerProps["openOnHover"];
+};
+declare function Menu$1<M extends MenuMode>({
+  mode,
+  items,
+  classNames,
+  children,
+  openOnHover
+}: MenuProps<M>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { BaseItem, CheckboxItem, GroupItem, Menu$1 as Menu, MenuItemsByMode, MenuMode, MenuProps, NormalItem, RadioItem, SeparatorItem, SubmenuItem };
+//# sourceMappingURL=menu.d.ts.map

package/dist/atoms/menu/menu.js

@@ -0,0 +1,2 @@
+import{usePortalConfig as e}from"../../helpers/portal/context/hooks.js";import{Icon as t}from"../icon/icon.js";import"../icon/index.js";import"../../helpers/index.js";import n from"./menu.module.js";import r from"clsx";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{Menu as o}from"@base-ui/react";import{mdiCheck as s,mdiChevronRight as c}from"@mdi/js";function l({mode:l,items:u,classNames:d,children:f,openOnHover:p=!1}){let m=e=>{switch(e.kind){case`separator`:return i(o.Separator,{"data-slot":`menu-separator`,className:r(n.separator,d?.separator)},e.key);case`submenu`:return a(o.SubmenuRoot,{children:[a(o.SubmenuTrigger,{disabled:e.disabled,"data-slot":`menu-submenu-trigger`,className:r(n.item,n[`submenu-trigger`],d?.item),children:[e.label,i(`span`,{className:n[`submenu-arrow`],children:i(t,{data:c})})]}),i(o.Portal,{container:g,children:i(o.Positioner,{"data-slot":`menu-submenu-positioner`,className:r(n.positioner,d?.positioner),children:i(o.Popup,{"data-slot":`menu-submenu-popup`,className:r(n.popup,d?.popup),children:l===`radio`?i(o.RadioGroup,{children:e.items.map(m)}):e.items.map(m)})})})]},e.key);case`group`:return a(o.Group,{"data-slot":`menu-group`,className:r(n.group,d?.group),children:[i(o.GroupLabel,{"data-slot":`menu-group-label`,className:r(n[`group-label`],d?.groupLabel),children:e.label}),e.items.map(m)]},e.key);case`item`:return l===`radio`?a(o.RadioItem,{value:e.value,disabled:e.disabled,"data-slot":`menu-radio-item`,className:r(n.item,n[`radio-item`],d?.item,d?.radioItem,e.className),children:[i(o.RadioItemIndicator,{"data-slot":`menu-radio-item-indicator`,className:r(n[`radio-item-indicator`],d?.radioItemIndicator),children:i(t,{data:s})}),e.label]},e.key):l===`checkbox`?a(o.CheckboxItem,{checked:e.checked,onCheckedChange:e.onCheckedChange,disabled:e.disabled,"data-slot":`menu-checkbox-item`,className:r(n.item,n[`checkbox-item`],d?.item,d?.checkboxItem,e.className),children:[i(o.CheckboxItemIndicator,{"data-slot":`menu-checkbox-item-indicator`,className:r(n[`checkbox-item-indicator`],d?.checkboxItemIndicator),children:i(t,{"data-slot":`menu-check`,className:r(n.check,d?.check),data:s})}),e.label]},e.key):i(o.Item,{disabled:e.disabled,"data-slot":`menu-item`,className:r(n.item,d?.item,e.className),onSelect:e.onSelect,children:e.label},e.key)}},{resolveContainer:h}=e(),g=h();return a(o.Root,{children:[i(o.Trigger,{openOnHover:p,"data-slot":`menu-trigger`,className:r(n.trigger,d?.trigger),children:f}),i(o.Portal,{container:g,children:i(o.Positioner,{"data-slot":`menu-positioner`,className:r(n.positioner,d?.positioner),children:i(o.Popup,{"data-slot":`menu-popup`,className:r(n.popup,d?.popup),children:l===`radio`?i(o.RadioGroup,{children:u.map(m)}):u.map(m)})})})]})}export{l as Menu};
+//# sourceMappingURL=menu.js.map

package/dist/atoms/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":["Menu","BaseUiMenu","styles"],"sources":["../../../src/atoms/menu/menu.tsx"],"sourcesContent":["import {\n  Menu as BaseUiMenu,\n  type MenuTriggerProps as BaseUiMenuTriggerProps,\n} from \"@base-ui/react\";\nimport { mdiCheck, mdiChevronRight } from \"@mdi/js\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { usePortalConfig } from \"../../helpers\";\nimport { Icon } from \"../icon\";\nimport styles from \"./menu.module.css\";\n\n// TODO: BIG TODO!!!!! fix size of the check icons , no layout shifts should happen while checking.\n\nexport type MenuMode = \"normal\" | \"radio\" | \"checkbox\";\n\nexport type BaseItem = {\n  key: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n  className?: string;\n};\n\nexport type NormalItem = BaseItem & {\n  kind: \"item\";\n  onSelect?: () => void;\n};\n\nexport type SubmenuItem<T> = BaseItem & {\n  kind: \"submenu\";\n  items: Array<T | SeparatorItem | GroupItem<T> | SubmenuItem<T>>;\n};\n\nexport type RadioItem = BaseItem & {\n  kind: \"item\";\n  value: string;\n};\n\nexport type CheckboxItem = BaseItem & {\n  kind: \"item\";\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n};\n\nexport type SeparatorItem = {\n  kind: \"separator\";\n  key: string;\n};\n\nexport type GroupItem<T> = {\n  kind: \"group\";\n  key: string;\n  label: React.ReactNode;\n  items: T[];\n};\n\nexport type MenuItemsByMode<M extends MenuMode> = M extends \"normal\"\n  ? Array<\n      | NormalItem\n      | SeparatorItem\n      | GroupItem<NormalItem>\n      | SubmenuItem<NormalItem>\n    >\n  : M extends \"radio\"\n    ? Array<\n        | RadioItem\n        | SeparatorItem\n        | GroupItem<RadioItem>\n        | SubmenuItem<RadioItem>\n      >\n    : Array<\n        | CheckboxItem\n        | SeparatorItem\n        | GroupItem<CheckboxItem>\n        | SubmenuItem<CheckboxItem>\n      >;\n\nexport type MenuProps<M extends MenuMode> = {\n  mode?: M;\n  items: MenuItemsByMode<M>;\n  children: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n    popup?: string;\n    positioner?: string;\n    check?: string;\n    item?: string;\n    separator?: string;\n    group?: string;\n    groupLabel?: string;\n    radioItem?: string;\n    radioItemIndicator?: string;\n    checkboxItem?: string;\n    checkboxItemIndicator?: string;\n  };\n  openOnHover?: BaseUiMenuTriggerProps[\"openOnHover\"];\n};\n\nexport function Menu<M extends MenuMode>({\n  mode,\n  items,\n  classNames,\n  children,\n  openOnHover = false,\n}: MenuProps<M>) {\n  const renderItem = (item: any) => {\n    switch (item.kind) {\n      case \"separator\":\n        return (\n          <BaseUiMenu.Separator\n            key={item.key}\n            data-slot=\"menu-separator\"\n            className={clsx(styles[\"separator\"], classNames?.separator)}\n          />\n        );\n\n      case \"submenu\":\n        return (\n          <BaseUiMenu.SubmenuRoot key={item.key}>\n            <BaseUiMenu.SubmenuTrigger\n              disabled={item.disabled}\n              data-slot=\"menu-submenu-trigger\"\n              className={clsx(\n                styles[\"item\"],\n                styles[\"submenu-trigger\"],\n                classNames?.item,\n              )}\n            >\n              {item.label}\n              <span className={styles[\"submenu-arrow\"]}>\n                <Icon data={mdiChevronRight} />\n              </span>\n            </BaseUiMenu.SubmenuTrigger>\n\n            <BaseUiMenu.Portal container={portalContainer}>\n              <BaseUiMenu.Positioner\n                data-slot=\"menu-submenu-positioner\"\n                className={clsx(styles[\"positioner\"], classNames?.positioner)}\n              >\n                <BaseUiMenu.Popup\n                  data-slot=\"menu-submenu-popup\"\n                  className={clsx(styles[\"popup\"], classNames?.popup)}\n                >\n                  {mode === \"radio\" ? (\n                    <BaseUiMenu.RadioGroup>\n                      {item.items.map(renderItem)}\n                    </BaseUiMenu.RadioGroup>\n                  ) : (\n                    item.items.map(renderItem)\n                  )}\n                </BaseUiMenu.Popup>\n              </BaseUiMenu.Positioner>\n            </BaseUiMenu.Portal>\n          </BaseUiMenu.SubmenuRoot>\n        );\n\n      case \"group\":\n        return (\n          <BaseUiMenu.Group\n            key={item.key}\n            data-slot=\"menu-group\"\n            className={clsx(styles[\"group\"], classNames?.group)}\n          >\n            <BaseUiMenu.GroupLabel\n              data-slot=\"menu-group-label\"\n              className={clsx(styles[\"group-label\"], classNames?.groupLabel)}\n            >\n              {item.label}\n            </BaseUiMenu.GroupLabel>\n            {item.items.map(renderItem)}\n          </BaseUiMenu.Group>\n        );\n\n      case \"item\":\n        if (mode === \"radio\") {\n          return (\n            <BaseUiMenu.RadioItem\n              key={item.key}\n              value={item.value}\n              disabled={item.disabled}\n              data-slot=\"menu-radio-item\"\n              className={clsx(\n                styles[\"item\"],\n                styles[\"radio-item\"],\n                classNames?.item,\n                classNames?.radioItem,\n                item.className,\n              )}\n            >\n              <BaseUiMenu.RadioItemIndicator\n                data-slot=\"menu-radio-item-indicator\"\n                className={clsx(\n                  styles[\"radio-item-indicator\"],\n                  classNames?.radioItemIndicator,\n                )}\n              >\n                <Icon data={mdiCheck} />\n              </BaseUiMenu.RadioItemIndicator>\n              {item.label}\n            </BaseUiMenu.RadioItem>\n          );\n        }\n\n        if (mode === \"checkbox\") {\n          return (\n            <BaseUiMenu.CheckboxItem\n              key={item.key}\n              checked={item.checked}\n              onCheckedChange={item.onCheckedChange}\n              disabled={item.disabled}\n              data-slot=\"menu-checkbox-item\"\n              className={clsx(\n                styles[\"item\"],\n                styles[\"checkbox-item\"],\n                classNames?.item,\n                classNames?.checkboxItem,\n                item.className,\n              )}\n            >\n              <BaseUiMenu.CheckboxItemIndicator\n                data-slot=\"menu-checkbox-item-indicator\"\n                className={clsx(\n                  styles[\"checkbox-item-indicator\"],\n                  classNames?.checkboxItemIndicator,\n                )}\n              >\n                <Icon\n                  data-slot=\"menu-check\"\n                  className={clsx(styles[\"check\"], classNames?.check)}\n                  data={mdiCheck}\n                />\n              </BaseUiMenu.CheckboxItemIndicator>\n              {item.label}\n            </BaseUiMenu.CheckboxItem>\n          );\n        }\n\n        return (\n          <BaseUiMenu.Item\n            key={item.key}\n            disabled={item.disabled}\n            data-slot=\"menu-item\"\n            className={clsx(styles[\"item\"], classNames?.item, item.className)}\n            onSelect={item.onSelect}\n          >\n            {item.label}\n          </BaseUiMenu.Item>\n        );\n    }\n  };\n\n  const { resolveContainer } = usePortalConfig();\n  const portalContainer = resolveContainer();\n\n  return (\n    <BaseUiMenu.Root>\n      <BaseUiMenu.Trigger\n        openOnHover={openOnHover}\n        data-slot=\"menu-trigger\"\n        className={clsx(styles[\"trigger\"], classNames?.trigger)}\n      >\n        {children}\n      </BaseUiMenu.Trigger>\n      <BaseUiMenu.Portal container={portalContainer}>\n        <BaseUiMenu.Positioner\n          data-slot=\"menu-positioner\"\n          className={clsx(styles[\"positioner\"], classNames?.positioner)}\n        >\n          <BaseUiMenu.Popup\n            data-slot=\"menu-popup\"\n            className={clsx(styles[\"popup\"], classNames?.popup)}\n          >\n            {mode === \"radio\" ? (\n              <BaseUiMenu.RadioGroup>\n                {items.map(renderItem)}\n              </BaseUiMenu.RadioGroup>\n            ) : (\n              items.map(renderItem)\n            )}\n          </BaseUiMenu.Popup>\n        </BaseUiMenu.Positioner>\n      </BaseUiMenu.Portal>\n    </BaseUiMenu.Root>\n  );\n}\n"],"mappings":"2WAiGA,SAAgBA,EAAyB,CACvC,OACA,QACA,aACA,WACA,cAAc,IACC,CACf,IAAM,EAAc,GAAc,CAChC,OAAQ,EAAK,KAAb,CACE,IAAK,YACH,OACE,EAACC,EAAW,UAAZ,CAEE,YAAU,iBACV,UAAW,EAAKC,EAAO,UAAc,GAAY,SAAS,CAC3D,EAHM,EAAK,GAGX,EAGL,IAAK,UACH,OACE,EAACD,EAAW,YAAZ,CAAA,SAAA,CACE,EAACA,EAAW,eAAZ,CACE,SAAU,EAAK,SACf,YAAU,uBACV,UAAW,EACTC,EAAO,KACPA,EAAO,mBACP,GAAY,IACd,WAPF,CASG,EAAK,MACN,EAAC,OAAD,CAAM,UAAWA,EAAO,0BACtB,EAAC,EAAD,CAAM,KAAM,CAAkB,CAAA,CAC1B,CAAA,CACmB,IAE3B,EAACD,EAAW,OAAZ,CAAmB,UAAW,WAC5B,EAACA,EAAW,WAAZ,CACE,YAAU,0BACV,UAAW,EAAKC,EAAO,WAAe,GAAY,UAAU,WAE5D,EAACD,EAAW,MAAZ,CACE,YAAU,qBACV,UAAW,EAAKC,EAAO,MAAU,GAAY,KAAK,WAEjD,IAAS,QACR,EAACD,EAAW,WAAZ,CAAA,SACG,EAAK,MAAM,IAAI,CAAU,CACL,CAAA,EAEvB,EAAK,MAAM,IAAI,CAAU,CAEX,CAAA,CACG,CAAA,CACN,CAAA,CACG,CAAA,EAnCK,EAAK,GAmCV,EAG5B,IAAK,QACH,OACE,EAACA,EAAW,MAAZ,CAEE,YAAU,aACV,UAAW,EAAKC,EAAO,MAAU,GAAY,KAAK,WAHpD,CAKE,EAACD,EAAW,WAAZ,CACE,YAAU,mBACV,UAAW,EAAKC,EAAO,eAAgB,GAAY,UAAU,WAE5D,EAAK,KACe,CAAA,EACtB,EAAK,MAAM,IAAI,CAAU,CACV,GAXX,EAAK,GAWM,EAGtB,IAAK,OAgEH,OA/DI,IAAS,QAET,EAACD,EAAW,UAAZ,CAEE,MAAO,EAAK,MACZ,SAAU,EAAK,SACf,YAAU,kBACV,UAAW,EACTC,EAAO,KACPA,EAAO,cACP,GAAY,KACZ,GAAY,UACZ,EAAK,SACP,WAXF,CAaE,EAACD,EAAW,mBAAZ,CACE,YAAU,4BACV,UAAW,EACTC,EAAO,wBACP,GAAY,kBACd,WAEA,EAAC,EAAD,CAAM,KAAM,CAAW,CAAA,CACM,CAAA,EAC9B,EAAK,KACc,GAtBf,EAAK,GAsBU,EAItB,IAAS,WAET,EAACD,EAAW,aAAZ,CAEE,QAAS,EAAK,QACd,gBAAiB,EAAK,gBACtB,SAAU,EAAK,SACf,YAAU,qBACV,UAAW,EACTC,EAAO,KACPA,EAAO,iBACP,GAAY,KACZ,GAAY,aACZ,EAAK,SACP,WAZF,CAcE,EAACD,EAAW,sBAAZ,CACE,YAAU,+BACV,UAAW,EACTC,EAAO,2BACP,GAAY,qBACd,WAEA,EAAC,EAAD,CACE,YAAU,aACV,UAAW,EAAKA,EAAO,MAAU,GAAY,KAAK,EAClD,KAAM,CACP,CAAA,CAC+B,CAAA,EACjC,EAAK,KACiB,GA3BlB,EAAK,GA2Ba,EAK3B,EAACD,EAAW,KAAZ,CAEE,SAAU,EAAK,SACf,YAAU,YACV,UAAW,EAAKC,EAAO,KAAS,GAAY,KAAM,EAAK,SAAS,EAChE,SAAU,EAAK,kBAEd,EAAK,KACS,EAPV,EAAK,GAOK,CAEvB,CACF,EAEM,CAAE,oBAAqB,EAAgB,EACvC,EAAkB,EAAiB,EAEzC,OACE,EAACD,EAAW,KAAZ,CAAA,SAAA,CACE,EAACA,EAAW,QAAZ,CACe,cACb,YAAU,eACV,UAAW,EAAKC,EAAO,QAAY,GAAY,OAAO,EAErD,UACiB,CAAA,EACpB,EAACD,EAAW,OAAZ,CAAmB,UAAW,WAC5B,EAACA,EAAW,WAAZ,CACE,YAAU,kBACV,UAAW,EAAKC,EAAO,WAAe,GAAY,UAAU,WAE5D,EAACD,EAAW,MAAZ,CACE,YAAU,aACV,UAAW,EAAKC,EAAO,MAAU,GAAY,KAAK,WAEjD,IAAS,QACR,EAACD,EAAW,WAAZ,CAAA,SACG,EAAM,IAAI,CAAU,CACA,CAAA,EAEvB,EAAM,IAAI,CAAU,CAEN,CAAA,CACG,CAAA,CACN,CAAA,CACJ,CAAA,CAAA,CAErB"}

package/dist/atoms/menu/menu.module.js

@@ -0,0 +1,3 @@
+import './menu.css';
+var e={check:`geRtDa_check`,"checkbox-item":`geRtDa_checkbox-item`,"checkbox-item-indicator":`geRtDa_checkbox-item-indicator`,group:`geRtDa_group`,"group-label":`geRtDa_group-label`,item:`geRtDa_item`,popup:`geRtDa_popup`,positioner:`geRtDa_positioner`,"radio-item":`geRtDa_radio-item`,"radio-item-indicator":`geRtDa_radio-item-indicator`,separator:`geRtDa_separator`,"submenu-arrow":`geRtDa_submenu-arrow`,"submenu-trigger":`geRtDa_submenu-trigger`,trigger:`geRtDa_trigger`};export{e as default};
+//# sourceMappingURL=menu.module.js.map

package/dist/atoms/menu/menu.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.module.js","names":[],"sources":["../../../src/atoms/menu/menu.module.css"],"sourcesContent":[".trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  outline: 0;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1;\n  white-space: nowrap;\n  border: none;\n  -webkit-user-select: none;\n  user-select: none;\n  background-color: transparent;\n}\n\n.positioner {\n  outline: 0;\n}\n\n.popup {\n  box-sizing: border-box;\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  width: 100%;\n  padding-block: var(--spacing-xs);\n  border: 1px solid var(--color-border-primary);\n  border-radius: var(--radius-md);\n  background-color: var(--color-surface-base);\n  color: var(--color-content-neutral-base);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform-origin: var(--transform-origin);\n  transition:\n    transform 100ms ease-out,\n    opacity 100ms ease-out;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n}\n\n.item {\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  cursor: default;\n  user-select: none;\n  padding-block: var(--spacing-sm);\n  padding-inline: var(--spacing-md);\n  display: flex;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  border-radius: var(--radius-sm);\n  color: var(--color-content-neutral-base);\n\n  &[data-highlighted] {\n    position: relative;\n    z-index: 0;\n    color: var(--color-on-brand);\n  }\n\n  &[data-highlighted]::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    inset-inline: var(--spacing-xs);\n    z-index: -1;\n    border-radius: var(--radius-sm);\n    background-color: var(--color-action-brand-base);\n  }\n\n  &[data-disabled] {\n    color: var(--color-content-neutral-muted);\n    pointer-events: none;\n  }\n}\n\n.separator {\n  margin-block: var(--spacing-xs);\n  margin-inline: var(--spacing-sm);\n  height: 1px;\n  background-color: var(--color-border-tertiary);\n}\n\n.group-label {\n  font-family: var(--typography-typeface-ltr);\n  padding-block: var(--spacing-xxs);\n  padding-inline: var(--spacing-md);\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--color-content-neutral-tertiary);\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n}\n\n.radio-item {\n  align-items: center;\n  gap: var(--spacing-sm);\n}\n\n.radio-item-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  margin-inline-end: var(--spacing-sm);\n}\n\n.checkbox-item {\n  align-items: center;\n  gap: var(--spacing-sm);\n}\n\n.checkbox-item-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  margin-inline-end: var(--spacing-sm);\n}\n\n.check {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n.submenu-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.submenu-arrow {\n  margin-left: auto;\n  font-size: 0.75rem;\n  opacity: 0.6;\n\n  width: 0.875rem;\n  height: 0.875rem;\n}\n"],"mappings":""}

package/dist/atoms/tabs/tabs.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
+import * as React$1 from "react";
 import { Tabs } from "@base-ui/react/tabs";
 
 //#region src/atoms/tabs/tabs.d.ts
 type TabsProps = Tabs.Root.Props & {
-  children: React.ReactNode;
+  children: React$1.ReactNode;
 };
 declare function Tabs$1({
   children,
@@ -11,7 +11,7 @@ declare function Tabs$1({
   ...props
 }: TabsProps): import("react/jsx-runtime").JSX.Element;
 type TabsListProps = Tabs.List.Props & {
-  children: React.ReactNode;
+  children: React$1.ReactNode;
   /**
    * Whether to render the active tab indicator.
    */

package/dist/atoms/text/text.d.ts

@@ -1,10 +1,10 @@
 import { PolymorphicProps, WithBaseProps, WithColorProps } from "../../types.js";
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/atoms/text/text.d.ts
 type TextVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subheading1" | "subheading2" | "body1" | "body2" | "caption";
 type TextColor = "currentcolor" | "normal" | "secondary" | "tertiary" | "muted" | "brand" | "brand-secondary" | "brand-tertiary" | "brand-muted" | "positive" | "positive-secondary" | "positive-tertiary" | "positive-muted" | "negative" | "negative-secondary" | "negative-tertiary" | "negative-muted" | "warn" | "warn-secondary" | "warn-tertiary" | "warn-muted" | "info" | "info-secondary" | "info-tertiary" | "info-muted" | "on-neutral" | "on-brand" | "on-positive" | "on-negative" | "on-warn" | "on-info";
-type TextProps<E extends React.ElementType = "span"> = PolymorphicProps<E, WithBaseProps<WithColorProps<{
+type TextProps<E extends React$1.ElementType = "span"> = PolymorphicProps<E, WithBaseProps<WithColorProps<{
   /** Applies the theme typography styles. */variant: TextVariant; /** Set the text-align on the text. */
   align?: "left" | "center" | "right" | "justify" | "start" | "end"; /** Set the font-weight on the text. Overrides variant default if provided. */
   weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; /** Set the display property. */
@@ -12,7 +12,7 @@ type TextProps<E extends React.ElementType = "span"> = PolymorphicProps<E, WithB
   textOverflow?: "clip" | "ellipsis"; /** If true, text will not wrap and will overflow based on `textOverflow`. @default false */
   noWrap?: boolean;
 }>>>;
-declare const Text: <E extends React.ElementType = "span">(props: TextProps<E>) => import("react/jsx-runtime").JSX.Element;
+declare const Text: <E extends React$1.ElementType = "span">(props: TextProps<E>) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { Text, TextColor, TextProps, TextVariant };
 //# sourceMappingURL=text.d.ts.map

package/dist/atoms/tooltip/tooltip.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React$1 from "react";
 import { Tooltip } from "@base-ui/react/tooltip";
 
 //#region src/atoms/tooltip/tooltip.d.ts
@@ -7,11 +7,11 @@ type TooltipProps = Omit<Tooltip.Root.Props, "children"> & {
    * The trigger element.
    * Should be a single React element that can accept props/refs (e.g. button).
    */
-  children: React.ReactElement;
+  children: React$1.ReactElement;
   /**
    * Tooltip content.
    */
-  content: React.ReactNode;
+  content: React$1.ReactNode;
   /**
    * Distance from trigger.
    */

package/dist/helpers/flex/flex.d.ts

@@ -1,9 +1,9 @@
 import { PolymorphicProps, WithBaseProps } from "../../types.js";
-import * as React from "react";
+import * as React$1 from "react";
 import { PropValueWithBreakpoints } from "@pantool/lib";
 
 //#region src/helpers/flex/flex.d.ts
-type FlexProps<E extends React.ElementType = "div"> = PolymorphicProps<E, WithBaseProps<{
+type FlexProps<E extends React$1.ElementType = "div"> = PolymorphicProps<E, WithBaseProps<{
   /**
    * The variant of the flex-box.
    *
@@ -39,7 +39,7 @@ type FlexProps<E extends React.ElementType = "div"> = PolymorphicProps<E, WithBa
    */
   alignContent?: PropValueWithBreakpoints<"start" | "end" | "center" | "between" | "around" | "evenly" | "stretch">;
 }>>;
-declare const Flex: <E extends React.ElementType = "div">(props: FlexProps<E>) => import("react/jsx-runtime").JSX.Element;
+declare const Flex: <E extends React$1.ElementType = "div">(props: FlexProps<E>) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { Flex, FlexProps };
 //# sourceMappingURL=flex.d.ts.map

package/dist/helpers/portal/context/portal-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal-config.js","names":[],"sources":["../../../../src/helpers/portal/context/portal-config.ts"],"sourcesContent":["import * as React from \"react\";\n\nexport type PortalConfigValue = {\n  /**\n   * A function that will resolve the container element for the portals.\n   *\n   * Please note that this function is only called on the client-side.\n   */\n  resolveContainer: () => HTMLElement | null;\n};\n\nexport const PortalConfig = React.createContext<PortalConfigValue | null>(null);\n"],"mappings":"wBAWA,MAAa,EAAe,EAAM,cAAwC,IAAI"}
+{"version":3,"file":"portal-config.js","names":["React"],"sources":["../../../../src/helpers/portal/context/portal-config.ts"],"sourcesContent":["import * as React from \"react\";\n\nexport type PortalConfigValue = {\n  /**\n   * A function that will resolve the container element for the portals.\n   *\n   * Please note that this function is only called on the client-side.\n   */\n  resolveContainer: () => HTMLElement | null;\n};\n\nexport const PortalConfig = React.createContext<PortalConfigValue | null>(null);\n"],"mappings":"wBAWA,MAAa,EAAeA,EAAM,cAAwC,IAAI"}

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 import { AlertDialog, AlertDialogProps } from "./atoms/alert-dialog/alert-dialog.js";
+import { Avatar, AvatarProps } from "./atoms/avatar/avatar.js";
 import { Button, ButtonProps } from "./atoms/button/button.js";
 import { Checkbox, CheckboxProps } from "./atoms/checkbox/checkbox.js";
+import { MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, PolymorphicPropsWithOmitted, WithBaseProps, WithColorProps, WithRef } from "./types.js";
+import { ClickableArea, ClickableAreaProps } from "./atoms/clickable-area/clickable-area.js";
 import { Collapsible } from "./atoms/collapsible/collapsible.js";
 import { ComboboxItem } from "./atoms/combobox/components/item.js";
 import { Combobox, ComboboxGroup, ComboboxProps } from "./atoms/combobox/combobox.js";
@@ -10,11 +13,11 @@ import { Dialog, DialogProps } from "./atoms/dialog/dialog.js";
 import { IconButton, IconButtonProps } from "./atoms/icon-button/icon-button.js";
 import { Icon, IconProps } from "./atoms/icon/icon.js";
 import { Input, InputProps } from "./atoms/input/input.js";
+import { BaseItem, CheckboxItem, GroupItem, Menu, MenuItemsByMode, MenuMode, MenuProps, NormalItem, RadioItem, SeparatorItem, SubmenuItem } from "./atoms/menu/menu.js";
 import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./atoms/radio/radio.js";
 import { Switch, SwitchProps } from "./atoms/switch/switch.js";
 import { Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsTab, TabsTabProps } from "./atoms/tabs/tabs.js";
 import { TabsListState, TabsPanelState, TabsRootChangeEventDetails, TabsRootState, TabsTabState, TabsTabValue } from "./atoms/tabs/index.js";
-import { MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, PolymorphicPropsWithOmitted, WithBaseProps, WithColorProps, WithRef } from "./types.js";
 import { Text, TextColor, TextProps, TextVariant } from "./atoms/text/text.js";
 import { Toast, ToastData, ToastProps } from "./atoms/toast/toast.js";
 import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./atoms/tooltip/tooltip.js";
@@ -27,4 +30,4 @@ import { useAlertDialog } from "./providers/alert-dialog-provider/hooks.js";
 import { DialogContext, DialogProvider, DialogProviderProps, showDialog } from "./providers/dialog-provider/dialog-provider.js";
 import { useDialog } from "./providers/dialog-provider/hooks.js";
 import { ToastProvider, ToastProviderProps, toaster } from "./providers/toast-provider/toast-provider.js";
-export { AlertDialog, AlertDialogContext, AlertDialogProps, AlertDialogProvider, AlertDialogProviderProps, Button, ButtonProps, Checkbox, CheckboxProps, Collapsible, Combobox, ComboboxGroup, type ComboboxItem, ComboboxProps, ConditionGuard, ConditionGuardProps, ContextMenu, Dialog, DialogContext, DialogProps, DialogProvider, DialogProviderProps, Flex, FlexProps, Icon, IconButton, IconButtonProps, IconProps, Input, InputProps, MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, PolymorphicPropsWithOmitted, Portal, PortalConfigProvider, PortalProps, Radio, RadioGroup, RadioGroupProps, RadioProps, Switch, SwitchProps, Tabs, TabsList, type TabsListProps, type TabsListState, TabsPanel, type TabsPanelProps, type TabsPanelState, type TabsRootChangeEventDetails, type TabsRootState, TabsTab, type TabsTabProps, type TabsTabState, type TabsTabValue, Text, TextColor, TextProps, TextVariant, Toast, ToastData, ToastProps, ToastProvider, ToastProviderProps, Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps, WithBaseProps, WithColorProps, WithRef, showAlertDialog, showDialog, toaster, useAlertDialog, useDialog, usePortalConfig };
+export { AlertDialog, AlertDialogContext, AlertDialogProps, AlertDialogProvider, AlertDialogProviderProps, Avatar, AvatarProps, BaseItem, Button, ButtonProps, Checkbox, CheckboxItem, CheckboxProps, ClickableArea, ClickableAreaProps, Collapsible, Combobox, ComboboxGroup, type ComboboxItem, ComboboxProps, ConditionGuard, ConditionGuardProps, ContextMenu, Dialog, DialogContext, DialogProps, DialogProvider, DialogProviderProps, Flex, FlexProps, GroupItem, Icon, IconButton, IconButtonProps, IconProps, Input, InputProps, Menu, MenuItemsByMode, MenuMode, MenuProps, MergeElementProps, MergeElementPropsWithOmitted, NormalItem, PolymorphicProps, PolymorphicPropsWithOmitted, Portal, PortalConfigProvider, PortalProps, Radio, RadioGroup, RadioGroupProps, RadioItem, RadioProps, SeparatorItem, SubmenuItem, Switch, SwitchProps, Tabs, TabsList, type TabsListProps, type TabsListState, TabsPanel, type TabsPanelProps, type TabsPanelState, type TabsRootChangeEventDetails, type TabsRootState, TabsTab, type TabsTabProps, type TabsTabState, type TabsTabValue, Text, TextColor, TextProps, TextVariant, Toast, ToastData, ToastProps, ToastProvider, ToastProviderProps, Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps, WithBaseProps, WithColorProps, WithRef, showAlertDialog, showDialog, toaster, useAlertDialog, useDialog, usePortalConfig };

package/dist/index.js

@@ -1 +1 @@
-import{Button as e}from"./atoms/button/button.js";import{Text as t}from"./atoms/text/text.js";import{usePortalConfig as n}from"./helpers/portal/context/hooks.js";import{PortalConfigProvider as r}from"./helpers/portal/context/provider.js";import{Portal as i}from"./helpers/portal/portal.js";import{AlertDialog as a}from"./atoms/alert-dialog/alert-dialog.js";import{Icon as o}from"./atoms/icon/icon.js";import{Checkbox as s}from"./atoms/checkbox/checkbox.js";import{Collapsible as c}from"./atoms/collapsible/collapsible.js";import{Combobox as l}from"./atoms/combobox/combobox.js";import{ConditionGuard as u}from"./atoms/condition-guard/condition-guard.js";import{ContextMenu as d}from"./atoms/context-menu/context-menu.js";import{Dialog as f}from"./atoms/dialog/dialog.js";import{IconButton as p}from"./atoms/icon-button/icon-button.js";import{Input as m}from"./atoms/input/input.js";import{Radio as h,RadioGroup as g}from"./atoms/radio/radio.js";import{Switch as _}from"./atoms/switch/switch.js";import{Tabs as v,TabsList as y,TabsPanel as b,TabsTab as x}from"./atoms/tabs/tabs.js";import{Toast as S}from"./atoms/toast/toast.js";import{Tooltip as C,TooltipProvider as w}from"./atoms/tooltip/tooltip.js";import"./atoms/index.js";import{Flex as T}from"./helpers/flex/flex.js";import"./helpers/index.js";import{AlertDialogContext as E,AlertDialogProvider as D,showAlertDialog as O}from"./providers/alert-dialog-provider/alert-dialog-provider.js";import{useAlertDialog as k}from"./providers/alert-dialog-provider/hooks.js";import{DialogContext as A,DialogProvider as j,showDialog as M}from"./providers/dialog-provider/dialog-provider.js";import{useDialog as N}from"./providers/dialog-provider/hooks.js";import{ToastProvider as P,toaster as F}from"./providers/toast-provider/toast-provider.js";import"./providers/index.js";import"./types.js";export{a as AlertDialog,E as AlertDialogContext,D as AlertDialogProvider,e as Button,s as Checkbox,c as Collapsible,l as Combobox,u as ConditionGuard,d as ContextMenu,f as Dialog,A as DialogContext,j as DialogProvider,T as Flex,o as Icon,p as IconButton,m as Input,i as Portal,r as PortalConfigProvider,h as Radio,g as RadioGroup,_ as Switch,v as Tabs,y as TabsList,b as TabsPanel,x as TabsTab,t as Text,S as Toast,P as ToastProvider,C as Tooltip,w as TooltipProvider,O as showAlertDialog,M as showDialog,F as toaster,k as useAlertDialog,N as useDialog,n as usePortalConfig};
+import{Button as e}from"./atoms/button/button.js";import{Text as t}from"./atoms/text/text.js";import{usePortalConfig as n}from"./helpers/portal/context/hooks.js";import{PortalConfigProvider as r}from"./helpers/portal/context/provider.js";import{Portal as i}from"./helpers/portal/portal.js";import{AlertDialog as a}from"./atoms/alert-dialog/alert-dialog.js";import{Avatar as o}from"./atoms/avatar/avatar.js";import{Icon as s}from"./atoms/icon/icon.js";import{Checkbox as c}from"./atoms/checkbox/checkbox.js";import{ClickableArea as l}from"./atoms/clickable-area/clickable-area.js";import{Collapsible as u}from"./atoms/collapsible/collapsible.js";import{Combobox as d}from"./atoms/combobox/combobox.js";import{ConditionGuard as f}from"./atoms/condition-guard/condition-guard.js";import{ContextMenu as p}from"./atoms/context-menu/context-menu.js";import{Dialog as m}from"./atoms/dialog/dialog.js";import{IconButton as h}from"./atoms/icon-button/icon-button.js";import{Input as g}from"./atoms/input/input.js";import{Flex as _}from"./helpers/flex/flex.js";import"./helpers/index.js";import{Menu as v}from"./atoms/menu/menu.js";import{Radio as y,RadioGroup as b}from"./atoms/radio/radio.js";import{Switch as x}from"./atoms/switch/switch.js";import{Tabs as S,TabsList as C,TabsPanel as w,TabsTab as T}from"./atoms/tabs/tabs.js";import{Toast as E}from"./atoms/toast/toast.js";import{Tooltip as D,TooltipProvider as O}from"./atoms/tooltip/tooltip.js";import"./atoms/index.js";import{AlertDialogContext as k,AlertDialogProvider as A,showAlertDialog as j}from"./providers/alert-dialog-provider/alert-dialog-provider.js";import{useAlertDialog as M}from"./providers/alert-dialog-provider/hooks.js";import{DialogContext as N,DialogProvider as P,showDialog as F}from"./providers/dialog-provider/dialog-provider.js";import{useDialog as I}from"./providers/dialog-provider/hooks.js";import{ToastProvider as L,toaster as R}from"./providers/toast-provider/toast-provider.js";import"./providers/index.js";import"./types.js";export{a as AlertDialog,k as AlertDialogContext,A as AlertDialogProvider,o as Avatar,e as Button,c as Checkbox,l as ClickableArea,u as Collapsible,d as Combobox,f as ConditionGuard,p as ContextMenu,m as Dialog,N as DialogContext,P as DialogProvider,_ as Flex,s as Icon,h as IconButton,g as Input,v as Menu,i as Portal,r as PortalConfigProvider,y as Radio,b as RadioGroup,x as Switch,S as Tabs,C as TabsList,w as TabsPanel,T as TabsTab,t as Text,E as Toast,L as ToastProvider,D as Tooltip,O as TooltipProvider,j as showAlertDialog,F as showDialog,R as toaster,M as useAlertDialog,I as useDialog,n as usePortalConfig};

package/dist/internals/base-button/base-button.css

@@ -1 +1 @@
-._4R_YnW_root{box-sizing:border-box;cursor:pointer;user-select:none;font-family:var(--typography-typeface-ltr);font-weight:var(--typography-body-2-weight);border-radius:var(--radius-full);height:var(--btn-height);padding:0 var(--btn-padding-x);font-size:var(--btn-font-size);background-color:var(--btn-bg);color:var(--btn-text);border:none;border:1px solid var(--btn-border);outline:none;justify-content:center;align-items:center;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s,opacity .2s;display:inline-flex}._4R_YnW_root[data-size=sm]{--btn-height:1.5rem;--btn-icon-size:1rem;--btn-padding-x:var(--spacing-sm);--btn-font-size:var(--typography-body-2-size)}._4R_YnW_root[data-size=md]{--btn-height:2rem;--btn-icon-size:1.5rem;--btn-padding-x:var(--spacing-md);--btn-font-size:var(--typography-body-2-size)}._4R_YnW_root[data-size=lg]{--btn-height:2.5rem;--btn-icon-size:2rem;--btn-padding-x:var(--spacing-lg);--btn-font-size:var(--typography-body-1-size)}._4R_YnW_root[data-fluid]{width:100%}._4R_YnW_root:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}._4R_YnW_root[disabled],._4R_YnW_root[data-disabled]{cursor:not-allowed;opacity:.5}._4R_YnW_root[data-color=neutral][data-variant=filled]{--btn-bg:var(--color-action-neutral-base);--btn-text:var(--color-on-neutral);--btn-border:transparent}._4R_YnW_root[data-color=neutral][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-neutral-hover)}._4R_YnW_root[data-color=neutral][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-neutral-active)}._4R_YnW_root[data-color=neutral][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-neutral-base);--btn-border:var(--color-content-neutral-base)}._4R_YnW_root[data-color=neutral][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=neutral][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-neutral-base);--btn-border:transparent}._4R_YnW_root[data-color=neutral][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=brand][data-variant=filled]{--btn-bg:var(--color-action-brand-base);--btn-text:var(--color-on-brand);--btn-border:transparent}._4R_YnW_root[data-color=brand][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-brand-hover)}._4R_YnW_root[data-color=brand][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-brand-active)}._4R_YnW_root[data-color=brand][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-brand-base);--btn-border:var(--color-content-brand-base)}._4R_YnW_root[data-color=brand][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=brand][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-brand-base);--btn-border:transparent}._4R_YnW_root[data-color=brand][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=positive][data-variant=filled]{--btn-bg:var(--color-action-positive-base);--btn-text:var(--color-on-positive);--btn-border:transparent}._4R_YnW_root[data-color=positive][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-positive-hover)}._4R_YnW_root[data-color=positive][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-positive-active)}._4R_YnW_root[data-color=positive][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-positive-base);--btn-border:var(--color-content-positive-base)}._4R_YnW_root[data-color=positive][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=positive][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-positive-base);--btn-border:transparent}._4R_YnW_root[data-color=positive][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=negative][data-variant=filled]{--btn-bg:var(--color-action-negative-base);--btn-text:var(--color-on-negative);--btn-border:transparent}._4R_YnW_root[data-color=negative][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-negative-hover)}._4R_YnW_root[data-color=negative][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-negative-active)}._4R_YnW_root[data-color=negative][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-negative-base);--btn-border:var(--color-content-negative-base)}._4R_YnW_root[data-color=negative][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=negative][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-negative-base);--btn-border:transparent}._4R_YnW_root[data-color=negative][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=warn][data-variant=filled]{--btn-bg:var(--color-action-warn-base);--btn-text:var(--color-on-warn);--btn-border:transparent}._4R_YnW_root[data-color=warn][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-warn-hover)}._4R_YnW_root[data-color=warn][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-warn-active)}._4R_YnW_root[data-color=warn][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-warn-base);--btn-border:var(--color-content-warn-base)}._4R_YnW_root[data-color=warn][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=warn][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-warn-base);--btn-border:transparent}._4R_YnW_root[data-color=warn][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=info][data-variant=filled]{--btn-bg:var(--color-action-info-base);--btn-text:var(--color-on-info);--btn-border:transparent}._4R_YnW_root[data-color=info][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-info-hover)}._4R_YnW_root[data-color=info][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-info-active)}._4R_YnW_root[data-color=info][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-info-base);--btn-border:var(--color-content-info-base)}._4R_YnW_root[data-color=info][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=info][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-info-base);--btn-border:transparent}._4R_YnW_root[data-color=info][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}
+._4R_YnW_root{box-sizing:border-box;cursor:pointer;user-select:none;font-family:var(--typography-typeface-ltr);font-weight:var(--typography-body-2-weight);border-radius:var(--radius-md);height:var(--btn-height);padding:0 var(--btn-padding-x);font-size:var(--btn-font-size);background-color:var(--btn-bg);color:var(--btn-text);border:none;border:1px solid var(--btn-border);outline:none;justify-content:center;align-items:center;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s,opacity .2s;display:inline-flex}._4R_YnW_root[data-size=sm]{--btn-height:1.5rem;--btn-icon-size:1rem;--btn-padding-x:var(--spacing-sm);--btn-font-size:var(--typography-body-2-size)}._4R_YnW_root[data-size=md]{--btn-height:2rem;--btn-icon-size:1.5rem;--btn-padding-x:var(--spacing-md);--btn-font-size:var(--typography-body-2-size)}._4R_YnW_root[data-size=lg]{--btn-height:2.5rem;--btn-icon-size:2rem;--btn-padding-x:var(--spacing-lg);--btn-font-size:var(--typography-body-1-size)}._4R_YnW_root[data-fluid]{width:100%}._4R_YnW_root:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}._4R_YnW_root[disabled],._4R_YnW_root[data-disabled]{cursor:not-allowed;opacity:.5}._4R_YnW_root[data-color=neutral][data-variant=filled]{--btn-bg:var(--color-action-neutral-base);--btn-text:var(--color-on-neutral);--btn-border:transparent}._4R_YnW_root[data-color=neutral][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-neutral-hover)}._4R_YnW_root[data-color=neutral][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-neutral-active)}._4R_YnW_root[data-color=neutral][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-neutral-base);--btn-border:var(--color-content-neutral-base)}._4R_YnW_root[data-color=neutral][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=neutral][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-neutral-base);--btn-border:transparent}._4R_YnW_root[data-color=neutral][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=brand][data-variant=filled]{--btn-bg:var(--color-action-brand-base);--btn-text:var(--color-on-brand);--btn-border:transparent}._4R_YnW_root[data-color=brand][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-brand-hover)}._4R_YnW_root[data-color=brand][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-brand-active)}._4R_YnW_root[data-color=brand][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-brand-base);--btn-border:var(--color-content-brand-base)}._4R_YnW_root[data-color=brand][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=brand][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-brand-base);--btn-border:transparent}._4R_YnW_root[data-color=brand][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=positive][data-variant=filled]{--btn-bg:var(--color-action-positive-base);--btn-text:var(--color-on-positive);--btn-border:transparent}._4R_YnW_root[data-color=positive][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-positive-hover)}._4R_YnW_root[data-color=positive][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-positive-active)}._4R_YnW_root[data-color=positive][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-positive-base);--btn-border:var(--color-content-positive-base)}._4R_YnW_root[data-color=positive][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=positive][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-positive-base);--btn-border:transparent}._4R_YnW_root[data-color=positive][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=negative][data-variant=filled]{--btn-bg:var(--color-action-negative-base);--btn-text:var(--color-on-negative);--btn-border:transparent}._4R_YnW_root[data-color=negative][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-negative-hover)}._4R_YnW_root[data-color=negative][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-negative-active)}._4R_YnW_root[data-color=negative][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-negative-base);--btn-border:var(--color-content-negative-base)}._4R_YnW_root[data-color=negative][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=negative][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-negative-base);--btn-border:transparent}._4R_YnW_root[data-color=negative][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=warn][data-variant=filled]{--btn-bg:var(--color-action-warn-base);--btn-text:var(--color-on-warn);--btn-border:transparent}._4R_YnW_root[data-color=warn][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-warn-hover)}._4R_YnW_root[data-color=warn][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-warn-active)}._4R_YnW_root[data-color=warn][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-warn-base);--btn-border:var(--color-content-warn-base)}._4R_YnW_root[data-color=warn][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=warn][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-warn-base);--btn-border:transparent}._4R_YnW_root[data-color=warn][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=info][data-variant=filled]{--btn-bg:var(--color-action-info-base);--btn-text:var(--color-on-info);--btn-border:transparent}._4R_YnW_root[data-color=info][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-info-hover)}._4R_YnW_root[data-color=info][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-info-active)}._4R_YnW_root[data-color=info][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-info-base);--btn-border:var(--color-content-info-base)}._4R_YnW_root[data-color=info][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=info][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-info-base);--btn-border:transparent}._4R_YnW_root[data-color=info][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}

package/dist/internals/base-button/base-button.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
+import * as React$1 from "react";
 import { Button } from "@base-ui/react/button";
 
 //#region src/internals/base-button/base-button.d.ts
-interface BaseButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {
+interface BaseButtonProps extends React$1.ComponentPropsWithoutRef<typeof Button> {
   /** The visual style of the button. */
   variant?: "filled" | "outlined" | "ghost";
   /** The semantic color palette applied to the button. */

package/dist/internals/base-button/base-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.js","names":["BaseUIButton","styles"],"sources":["../../../src/internals/base-button/base-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button as BaseUIButton } from \"@base-ui/react/button\";\nimport styles from \"./base-button.module.css\";\n\nexport interface BaseButtonProps extends React.ComponentPropsWithoutRef<\n  typeof BaseUIButton\n> {\n  /** The visual style of the button. */\n  variant?: \"filled\" | \"outlined\" | \"ghost\";\n  /** The semantic color palette applied to the button. */\n  color?: \"neutral\" | \"brand\" | \"positive\" | \"negative\" | \"warn\" | \"info\";\n  /** The size of the button, affecting height, padding, and font size. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** If true, the button is in a loading state and becomes disabled. */\n  pending?: boolean;\n  /** If true, the button will take up 100% of its container's width. */\n  fluid?: boolean;\n}\n\nexport const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(\n  (props, ref) => {\n    const {\n      className,\n      variant = \"filled\",\n      color = \"neutral\",\n      size = \"md\",\n      pending = false,\n      fluid = false,\n      disabled,\n      children,\n      ...rest\n    } = props;\n\n    return (\n      <BaseUIButton\n        ref={ref}\n        className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n        data-variant={variant}\n        data-color={color}\n        data-size={size}\n        data-pending={pending ? \"\" : undefined}\n        data-fluid={fluid ? \"\" : undefined}\n        disabled={disabled || pending}\n        {...rest}\n      >\n        {children}\n      </BaseUIButton>\n    );\n  },\n);\n"],"mappings":"sJAmBA,MAAa,EAAa,EAAM,YAC7B,EAAO,IAAQ,CACd,GAAM,CACJ,YACA,UAAU,SACV,QAAQ,UACR,OAAO,KACP,UAAU,GACV,QAAQ,GACR,WACA,WACA,GAAG,GACD,EAEJ,OACE,EAACA,EAAD,CACO,MACL,UAAW,GAAGC,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,eAAc,EACd,aAAY,EACZ,YAAW,EACX,eAAc,EAAU,GAAK,IAAA,GAC7B,aAAY,EAAQ,GAAK,IAAA,GACzB,SAAU,GAAY,EACtB,GAAI,EAEH,UACW,CAAA,CAElB,CACF"}
+{"version":3,"file":"base-button.js","names":["React","BaseUIButton","styles"],"sources":["../../../src/internals/base-button/base-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button as BaseUIButton } from \"@base-ui/react/button\";\nimport styles from \"./base-button.module.css\";\n\nexport interface BaseButtonProps extends React.ComponentPropsWithoutRef<\n  typeof BaseUIButton\n> {\n  /** The visual style of the button. */\n  variant?: \"filled\" | \"outlined\" | \"ghost\";\n  /** The semantic color palette applied to the button. */\n  color?: \"neutral\" | \"brand\" | \"positive\" | \"negative\" | \"warn\" | \"info\";\n  /** The size of the button, affecting height, padding, and font size. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** If true, the button is in a loading state and becomes disabled. */\n  pending?: boolean;\n  /** If true, the button will take up 100% of its container's width. */\n  fluid?: boolean;\n}\n\nexport const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(\n  (props, ref) => {\n    const {\n      className,\n      variant = \"filled\",\n      color = \"neutral\",\n      size = \"md\",\n      pending = false,\n      fluid = false,\n      disabled,\n      children,\n      ...rest\n    } = props;\n\n    return (\n      <BaseUIButton\n        ref={ref}\n        className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n        data-variant={variant}\n        data-color={color}\n        data-size={size}\n        data-pending={pending ? \"\" : undefined}\n        data-fluid={fluid ? \"\" : undefined}\n        disabled={disabled || pending}\n        {...rest}\n      >\n        {children}\n      </BaseUIButton>\n    );\n  },\n);\n"],"mappings":"sJAmBA,MAAa,EAAaA,EAAM,YAC7B,EAAO,IAAQ,CACd,GAAM,CACJ,YACA,UAAU,SACV,QAAQ,UACR,OAAO,KACP,UAAU,GACV,QAAQ,GACR,WACA,WACA,GAAG,GACD,EAEJ,OACE,EAACC,EAAD,CACO,MACL,UAAW,GAAGC,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,eAAc,EACd,aAAY,EACZ,YAAW,EACX,eAAc,EAAU,GAAK,IAAA,GAC7B,aAAY,EAAQ,GAAK,IAAA,GACzB,SAAU,GAAY,EACtB,GAAI,EAEH,UACW,CAAA,CAElB,CACF"}

package/dist/internals/base-button/base-button.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.module.js","names":[],"sources":["../../../src/internals/base-button/base-button.module.css"],"sourcesContent":[".root {\n  /* 1. Map internal variables to CSS properties */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  outline: none;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  font-family: var(--typography-typeface-ltr);\n  font-weight: var(--typography-body-2-weight);\n  border-radius: var(--radius-full);\n  transition:\n    background-color 0.2s,\n    color 0.2s,\n    border-color 0.2s,\n    opacity 0.2s;\n\n  /* Apply local variables */\n  height: var(--btn-height);\n  padding: 0 var(--btn-padding-x);\n  font-size: var(--btn-font-size);\n  background-color: var(--btn-bg);\n  color: var(--btn-text);\n  border: 1px solid var(--btn-border);\n}\n\n/* --- Sizes --- */\n.root[data-size=\"sm\"] {\n  --btn-height: 1.5rem;\n  --btn-icon-size: 1rem;\n  --btn-padding-x: var(--spacing-sm);\n  --btn-font-size: var(--typography-body-2-size);\n}\n\n.root[data-size=\"md\"] {\n  --btn-height: 2rem;\n  --btn-icon-size: 1.5rem;\n  --btn-padding-x: var(--spacing-md);\n  --btn-font-size: var(--typography-body-2-size);\n}\n\n.root[data-size=\"lg\"] {\n  --btn-height: 2.5rem;\n  --btn-icon-size: 2rem;\n  --btn-padding-x: var(--spacing-lg);\n  --btn-font-size: var(--typography-body-1-size);\n}\n\n/* --- Layout Modifiers --- */\n.root[data-fluid] {\n  width: 100%;\n}\n\n/* --- Focus Ring (Base UI provides data-focus-visible) --- */\n.root:focus-visible {\n  outline-style: solid;\n  outline-width: var(--stroke-focus-ring);\n  outline-color: var(--color-action-info-base);\n  outline-offset: var(--spacing-xxs);\n}\n\n/* --- Disabled State --- */\n.root[disabled],\n.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* --- Variants & Colors: BRAND Example --- */\n/* (You would duplicate this block for neutral, positive, negative, etc.) */\n\n/* Brand Filled */\n.root[data-color=\"brand\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-brand-base);\n  --btn-text: var(--color-on-brand);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-brand-hover);\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-brand-active);\n}\n\n/* Brand Outlined */\n.root[data-color=\"brand\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: var(--color-content-brand-base);\n}\n.root[data-color=\"brand\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Ghost */\n.root[data-color=\"brand\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* --- Variants & Colors --- */\n\n/* Neutral Filled */\n.root[data-color=\"neutral\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-neutral-base);\n  --btn-text: var(--color-on-neutral);\n  --btn-border: transparent;\n}\n.root[data-color=\"neutral\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-neutral-hover);\n}\n.root[data-color=\"neutral\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-neutral-active);\n}\n\n/* Neutral Outlined */\n.root[data-color=\"neutral\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-neutral-base);\n  --btn-border: var(--color-content-neutral-base);\n}\n.root[data-color=\"neutral\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Neutral Ghost */\n.root[data-color=\"neutral\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-neutral-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"neutral\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Filled */\n.root[data-color=\"brand\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-brand-base);\n  --btn-text: var(--color-on-brand);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-brand-hover);\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-brand-active);\n}\n\n/* Brand Outlined */\n.root[data-color=\"brand\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: var(--color-content-brand-base);\n}\n.root[data-color=\"brand\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Ghost */\n.root[data-color=\"brand\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Positive Filled */\n.root[data-color=\"positive\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-positive-base);\n  --btn-text: var(--color-on-positive);\n  --btn-border: transparent;\n}\n.root[data-color=\"positive\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-positive-hover);\n}\n.root[data-color=\"positive\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-positive-active);\n}\n\n/* Positive Outlined */\n.root[data-color=\"positive\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-positive-base);\n  --btn-border: var(--color-content-positive-base);\n}\n.root[data-color=\"positive\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Positive Ghost */\n.root[data-color=\"positive\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-positive-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"positive\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Negative Filled */\n.root[data-color=\"negative\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-negative-base);\n  --btn-text: var(--color-on-negative);\n  --btn-border: transparent;\n}\n.root[data-color=\"negative\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-negative-hover);\n}\n.root[data-color=\"negative\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-negative-active);\n}\n\n/* Negative Outlined */\n.root[data-color=\"negative\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-negative-base);\n  --btn-border: var(--color-content-negative-base);\n}\n.root[data-color=\"negative\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Negative Ghost */\n.root[data-color=\"negative\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-negative-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"negative\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Warn Filled */\n.root[data-color=\"warn\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-warn-base);\n  --btn-text: var(--color-on-warn);\n  --btn-border: transparent;\n}\n.root[data-color=\"warn\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-warn-hover);\n}\n.root[data-color=\"warn\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-warn-active);\n}\n\n/* Warn Outlined */\n.root[data-color=\"warn\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-warn-base);\n  --btn-border: var(--color-content-warn-base);\n}\n.root[data-color=\"warn\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Warn Ghost */\n.root[data-color=\"warn\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-warn-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"warn\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Info Filled */\n.root[data-color=\"info\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-info-base);\n  --btn-text: var(--color-on-info);\n  --btn-border: transparent;\n}\n.root[data-color=\"info\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-info-hover);\n}\n.root[data-color=\"info\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-info-active);\n}\n\n/* Info Outlined */\n.root[data-color=\"info\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-info-base);\n  --btn-border: var(--color-content-info-base);\n}\n.root[data-color=\"info\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Info Ghost */\n.root[data-color=\"info\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-info-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"info\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n"],"mappings":""}
+{"version":3,"file":"base-button.module.js","names":[],"sources":["../../../src/internals/base-button/base-button.module.css"],"sourcesContent":[".root {\n  /* 1. Map internal variables to CSS properties */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  outline: none;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  font-family: var(--typography-typeface-ltr);\n  font-weight: var(--typography-body-2-weight);\n  border-radius: var(--radius-md);\n  transition:\n    background-color 0.2s,\n    color 0.2s,\n    border-color 0.2s,\n    opacity 0.2s;\n\n  /* Apply local variables */\n  height: var(--btn-height);\n  padding: 0 var(--btn-padding-x);\n  font-size: var(--btn-font-size);\n  background-color: var(--btn-bg);\n  color: var(--btn-text);\n  border: 1px solid var(--btn-border);\n}\n\n/* --- Sizes --- */\n.root[data-size=\"sm\"] {\n  --btn-height: 1.5rem;\n  --btn-icon-size: 1rem;\n  --btn-padding-x: var(--spacing-sm);\n  --btn-font-size: var(--typography-body-2-size);\n}\n\n.root[data-size=\"md\"] {\n  --btn-height: 2rem;\n  --btn-icon-size: 1.5rem;\n  --btn-padding-x: var(--spacing-md);\n  --btn-font-size: var(--typography-body-2-size);\n}\n\n.root[data-size=\"lg\"] {\n  --btn-height: 2.5rem;\n  --btn-icon-size: 2rem;\n  --btn-padding-x: var(--spacing-lg);\n  --btn-font-size: var(--typography-body-1-size);\n}\n\n/* --- Layout Modifiers --- */\n.root[data-fluid] {\n  width: 100%;\n}\n\n/* --- Focus Ring (Base UI provides data-focus-visible) --- */\n.root:focus-visible {\n  outline-style: solid;\n  outline-width: var(--stroke-focus-ring);\n  outline-color: var(--color-action-info-base);\n  outline-offset: var(--spacing-xxs);\n}\n\n/* --- Disabled State --- */\n.root[disabled],\n.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* --- Variants & Colors: BRAND Example --- */\n/* (You would duplicate this block for neutral, positive, negative, etc.) */\n\n/* Brand Filled */\n.root[data-color=\"brand\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-brand-base);\n  --btn-text: var(--color-on-brand);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-brand-hover);\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-brand-active);\n}\n\n/* Brand Outlined */\n.root[data-color=\"brand\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: var(--color-content-brand-base);\n}\n.root[data-color=\"brand\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Ghost */\n.root[data-color=\"brand\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* --- Variants & Colors --- */\n\n/* Neutral Filled */\n.root[data-color=\"neutral\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-neutral-base);\n  --btn-text: var(--color-on-neutral);\n  --btn-border: transparent;\n}\n.root[data-color=\"neutral\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-neutral-hover);\n}\n.root[data-color=\"neutral\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-neutral-active);\n}\n\n/* Neutral Outlined */\n.root[data-color=\"neutral\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-neutral-base);\n  --btn-border: var(--color-content-neutral-base);\n}\n.root[data-color=\"neutral\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Neutral Ghost */\n.root[data-color=\"neutral\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-neutral-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"neutral\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Filled */\n.root[data-color=\"brand\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-brand-base);\n  --btn-text: var(--color-on-brand);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-brand-hover);\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-brand-active);\n}\n\n/* Brand Outlined */\n.root[data-color=\"brand\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: var(--color-content-brand-base);\n}\n.root[data-color=\"brand\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Ghost */\n.root[data-color=\"brand\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Positive Filled */\n.root[data-color=\"positive\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-positive-base);\n  --btn-text: var(--color-on-positive);\n  --btn-border: transparent;\n}\n.root[data-color=\"positive\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-positive-hover);\n}\n.root[data-color=\"positive\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-positive-active);\n}\n\n/* Positive Outlined */\n.root[data-color=\"positive\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-positive-base);\n  --btn-border: var(--color-content-positive-base);\n}\n.root[data-color=\"positive\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Positive Ghost */\n.root[data-color=\"positive\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-positive-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"positive\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Negative Filled */\n.root[data-color=\"negative\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-negative-base);\n  --btn-text: var(--color-on-negative);\n  --btn-border: transparent;\n}\n.root[data-color=\"negative\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-negative-hover);\n}\n.root[data-color=\"negative\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-negative-active);\n}\n\n/* Negative Outlined */\n.root[data-color=\"negative\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-negative-base);\n  --btn-border: var(--color-content-negative-base);\n}\n.root[data-color=\"negative\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Negative Ghost */\n.root[data-color=\"negative\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-negative-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"negative\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Warn Filled */\n.root[data-color=\"warn\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-warn-base);\n  --btn-text: var(--color-on-warn);\n  --btn-border: transparent;\n}\n.root[data-color=\"warn\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-warn-hover);\n}\n.root[data-color=\"warn\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-warn-active);\n}\n\n/* Warn Outlined */\n.root[data-color=\"warn\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-warn-base);\n  --btn-border: var(--color-content-warn-base);\n}\n.root[data-color=\"warn\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Warn Ghost */\n.root[data-color=\"warn\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-warn-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"warn\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Info Filled */\n.root[data-color=\"info\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-info-base);\n  --btn-text: var(--color-on-info);\n  --btn-border: transparent;\n}\n.root[data-color=\"info\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-info-hover);\n}\n.root[data-color=\"info\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-info-active);\n}\n\n/* Info Outlined */\n.root[data-color=\"info\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-info-base);\n  --btn-border: var(--color-content-info-base);\n}\n.root[data-color=\"info\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Info Ghost */\n.root[data-color=\"info\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-info-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"info\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n"],"mappings":""}

package/dist/internals/base-svg/base-svg.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/internals/base-svg/base-svg.d.ts
 type SvgColor = "currentcolor" | "normal" | "secondary" | "tertiary" | "muted" | "brand" | "brand-secondary" | "brand-tertiary" | "brand-muted" | "positive" | "positive-secondary" | "positive-tertiary" | "positive-muted" | "negative" | "negative-secondary" | "negative-tertiary" | "negative-muted" | "warn" | "warn-secondary" | "warn-tertiary" | "warn-muted" | "info" | "info-secondary" | "info-tertiary" | "info-muted" | "on-neutral" | "on-brand" | "on-positive" | "on-negative" | "on-warn" | "on-info";
-interface BaseSvgProps extends React.ComponentPropsWithoutRef<"svg"> {
+interface BaseSvgProps extends React$1.ComponentPropsWithoutRef<"svg"> {
   /**
    * The semantic color of the SVG. Maps to theme tokens.
    * @default "currentcolor"

package/dist/internals/base-svg/base-svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-svg.js","names":["styles"],"sources":["../../../src/internals/base-svg/base-svg.tsx"],"sourcesContent":["import * as React from \"react\";\nimport styles from \"./base-svg.module.css\";\n\nexport type SvgColor =\n  | \"currentcolor\"\n  | \"normal\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"muted\"\n  | \"brand\"\n  | \"brand-secondary\"\n  | \"brand-tertiary\"\n  | \"brand-muted\"\n  | \"positive\"\n  | \"positive-secondary\"\n  | \"positive-tertiary\"\n  | \"positive-muted\"\n  | \"negative\"\n  | \"negative-secondary\"\n  | \"negative-tertiary\"\n  | \"negative-muted\"\n  | \"warn\"\n  | \"warn-secondary\"\n  | \"warn-tertiary\"\n  | \"warn-muted\"\n  | \"info\"\n  | \"info-secondary\"\n  | \"info-tertiary\"\n  | \"info-muted\"\n  | \"on-neutral\"\n  | \"on-brand\"\n  | \"on-positive\"\n  | \"on-negative\"\n  | \"on-warn\"\n  | \"on-info\";\n\nexport interface BaseSvgProps extends React.ComponentPropsWithoutRef<\"svg\"> {\n  /**\n   * The semantic color of the SVG. Maps to theme tokens.\n   * @default \"currentcolor\"\n   */\n  color?: SvgColor;\n\n  /**\n   * The viewBox of the SVG.\n   * @default \"0 0 24 24\"\n   */\n  viewBox?: string;\n\n  /**\n   * Provides a human-readable title for the element for accessibility.\n   */\n  title?: string;\n\n  /**\n   * The size of the icon in pixels (converted to rem internally).\n   * If set to `\"auto\"`, the icon inherits the parent's dimensions.\n   * @default \"auto\"\n   */\n  size?: number | \"auto\";\n}\n\nexport const BaseSvg = React.forwardRef<SVGSVGElement, BaseSvgProps>(\n  (props, ref) => {\n    const {\n      children,\n      className,\n      title,\n      style: otherStyles,\n      color = \"currentcolor\",\n      viewBox = \"0 0 24 24\",\n      size = \"auto\",\n      ...otherProps\n    } = props;\n\n    const hasValidSize =\n      (typeof size === \"number\" && !isNaN(size)) ||\n      (typeof size === \"string\" && size === \"auto\");\n\n    if (!hasValidSize) {\n      console.error(`Expected a valid size prop, received \\`size={${size}}\\`.`);\n    }\n\n    // Inject size as a local CSS variable to maintain zero-runtime CSS purity\n    const sizeValue = size === \"auto\" ? \"100%\" : `${(size as number) / 16}rem`;\n    const inlineStyles = {\n      \"--svg-size\": sizeValue,\n      ...otherStyles,\n    } as React.CSSProperties;\n\n    return (\n      <svg\n        {...otherProps}\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox={viewBox}\n        aria-hidden={title ? undefined : true}\n        role={title ? \"img\" : undefined}\n        focusable=\"false\"\n        style={inlineStyles}\n        className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n        data-color={color}\n      >\n        {title && <title>{title}</title>}\n        {children}\n      </svg>\n    );\n  },\n);\n"],"mappings":"8GA8DA,MAAa,EAAU,EAAM,YAC1B,EAAO,IAAQ,CACd,GAAM,CACJ,WACA,YACA,QACA,MAAO,EACP,QAAQ,eACR,UAAU,YACV,OAAO,OACP,GAAG,GACD,EAGD,OAAO,GAAS,UAAY,CAAC,MAAM,CAAI,GACvC,OAAO,GAAS,UAAY,IAAS,QAGtC,QAAQ,MAAM,gDAAgD,EAAK,KAAK,EAK1E,IAAM,EAAe,CACnB,aAFgB,IAAS,OAAS,OAAS,GAAI,EAAkB,GAAG,KAGpE,GAAG,CACL,EAEA,OACE,EAAC,MAAD,CACE,GAAI,EACC,MACL,MAAM,6BACG,UACT,cAAa,EAAQ,IAAA,GAAY,GACjC,KAAM,EAAQ,MAAQ,IAAA,GACtB,UAAU,QACV,MAAO,EACP,UAAW,GAAGA,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,aAAY,WAVd,CAYG,GAAS,EAAC,QAAD,CAAA,SAAQ,CAAa,CAAA,EAC9B,CACE,GAET,CACF"}
+{"version":3,"file":"base-svg.js","names":["React","styles"],"sources":["../../../src/internals/base-svg/base-svg.tsx"],"sourcesContent":["import * as React from \"react\";\nimport styles from \"./base-svg.module.css\";\n\nexport type SvgColor =\n  | \"currentcolor\"\n  | \"normal\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"muted\"\n  | \"brand\"\n  | \"brand-secondary\"\n  | \"brand-tertiary\"\n  | \"brand-muted\"\n  | \"positive\"\n  | \"positive-secondary\"\n  | \"positive-tertiary\"\n  | \"positive-muted\"\n  | \"negative\"\n  | \"negative-secondary\"\n  | \"negative-tertiary\"\n  | \"negative-muted\"\n  | \"warn\"\n  | \"warn-secondary\"\n  | \"warn-tertiary\"\n  | \"warn-muted\"\n  | \"info\"\n  | \"info-secondary\"\n  | \"info-tertiary\"\n  | \"info-muted\"\n  | \"on-neutral\"\n  | \"on-brand\"\n  | \"on-positive\"\n  | \"on-negative\"\n  | \"on-warn\"\n  | \"on-info\";\n\nexport interface BaseSvgProps extends React.ComponentPropsWithoutRef<\"svg\"> {\n  /**\n   * The semantic color of the SVG. Maps to theme tokens.\n   * @default \"currentcolor\"\n   */\n  color?: SvgColor;\n\n  /**\n   * The viewBox of the SVG.\n   * @default \"0 0 24 24\"\n   */\n  viewBox?: string;\n\n  /**\n   * Provides a human-readable title for the element for accessibility.\n   */\n  title?: string;\n\n  /**\n   * The size of the icon in pixels (converted to rem internally).\n   * If set to `\"auto\"`, the icon inherits the parent's dimensions.\n   * @default \"auto\"\n   */\n  size?: number | \"auto\";\n}\n\nexport const BaseSvg = React.forwardRef<SVGSVGElement, BaseSvgProps>(\n  (props, ref) => {\n    const {\n      children,\n      className,\n      title,\n      style: otherStyles,\n      color = \"currentcolor\",\n      viewBox = \"0 0 24 24\",\n      size = \"auto\",\n      ...otherProps\n    } = props;\n\n    const hasValidSize =\n      (typeof size === \"number\" && !isNaN(size)) ||\n      (typeof size === \"string\" && size === \"auto\");\n\n    if (!hasValidSize) {\n      console.error(`Expected a valid size prop, received \\`size={${size}}\\`.`);\n    }\n\n    // Inject size as a local CSS variable to maintain zero-runtime CSS purity\n    const sizeValue = size === \"auto\" ? \"100%\" : `${(size as number) / 16}rem`;\n    const inlineStyles = {\n      \"--svg-size\": sizeValue,\n      ...otherStyles,\n    } as React.CSSProperties;\n\n    return (\n      <svg\n        {...otherProps}\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox={viewBox}\n        aria-hidden={title ? undefined : true}\n        role={title ? \"img\" : undefined}\n        focusable=\"false\"\n        style={inlineStyles}\n        className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n        data-color={color}\n      >\n        {title && <title>{title}</title>}\n        {children}\n      </svg>\n    );\n  },\n);\n"],"mappings":"8GA8DA,MAAa,EAAUA,EAAM,YAC1B,EAAO,IAAQ,CACd,GAAM,CACJ,WACA,YACA,QACA,MAAO,EACP,QAAQ,eACR,UAAU,YACV,OAAO,OACP,GAAG,GACD,EAGD,OAAO,GAAS,UAAY,CAAC,MAAM,CAAI,GACvC,OAAO,GAAS,UAAY,IAAS,QAGtC,QAAQ,MAAM,gDAAgD,EAAK,KAAK,EAK1E,IAAM,EAAe,CACnB,aAFgB,IAAS,OAAS,OAAS,GAAI,EAAkB,GAAG,KAGpE,GAAG,CACL,EAEA,OACE,EAAC,MAAD,CACE,GAAI,EACC,MACL,MAAM,6BACG,UACT,cAAa,EAAQ,IAAA,GAAY,GACjC,KAAM,EAAQ,MAAQ,IAAA,GACtB,UAAU,QACV,MAAO,EACP,UAAW,GAAGC,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,aAAY,WAVd,CAYG,GAAS,EAAC,QAAD,CAAA,SAAQ,CAAa,CAAA,EAC9B,CACE,GAET,CACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pantool/components",
   "description": "TODO:",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.9",
   "type": "module",
   "files": [
     "dist/**/*.js",