@pantool/components 1.0.0-alpha.1 → 1.0.0-alpha.10

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.css

@@ -1,18 +1 @@
-.p9zh2a_root {
-  gap: var(--spacing-sm);
-}
-
-.p9zh2a_label {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline-flex;
-  overflow: hidden;
-}
-
-.p9zh2a_icon {
-  width: var(--btn-icon-size);
-  height: var(--btn-icon-size);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
+.p9zh2a_root{gap:var(--spacing-sm)}.p9zh2a_label{white-space:nowrap;text-overflow:ellipsis;display:inline-flex;overflow:hidden}.p9zh2a_icon{width:var(--btn-icon-size);height:var(--btn-icon-size);justify-content:center;align-items:center;display:flex}

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/button/button.module.js

@@ -1,2 +1,3 @@
+import './button.css';
 var e={icon:`p9zh2a_icon`,label:`p9zh2a_label`,root:`p9zh2a_root`};export{e as default};
 //# sourceMappingURL=button.module.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.module.js","names":[],"sources":["../../../src/atoms/button/button.module.css"],"sourcesContent":[".root {\n  gap: var(--spacing-sm);\n}\n\n.label {\n  display: inline-flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Icon sizing relative to text */\n  width: var(--btn-icon-size);\n  height: var(--btn-icon-size);\n}\n"],"mappings":"AAMA,IAAA,EAAe,CAAA,KAAA,cAAM,MAAA,eAAA,KAAA,aAAA"}
+{"version":3,"file":"button.module.js","names":[],"sources":["../../../src/atoms/button/button.module.css"],"sourcesContent":[".root {\n  gap: var(--spacing-sm);\n}\n\n.label {\n  display: inline-flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Icon sizing relative to text */\n  width: var(--btn-icon-size);\n  height: var(--btn-icon-size);\n}\n"],"mappings":""}

package/dist/atoms/checkbox/checkbox.css

@@ -1,119 +1 @@
-.PdmYxW_root {
-  --checkbox-size: 1rem;
-  --checkbox-bg: transparent;
-  --checkbox-border: var(--color-border-primary);
-  --checkbox-color: transparent;
-  --checkbox-gap: var(--spacing-xs);
-  --checkbox-label-color: var(--color-content-neutral-base);
-  font-family: var(--typography-typeface-ltr);
-  align-items: center;
-  gap: var(--checkbox-gap);
-  display: flex;
-  position: relative;
-}
-
-.PdmYxW_root [data-slot="field-label"] {
-  height: var(--checkbox-size);
-}
-
-.PdmYxW_control {
-  box-sizing: border-box;
-  width: var(--checkbox-size);
-  height: var(--checkbox-size);
-  background-color: var(--checkbox-bg);
-  color: var(--checkbox-color);
-  box-shadow: 0 0 0 1px var(--checkbox-border) inset;
-  cursor: pointer;
-  border: none;
-  border-radius: 4px;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  transition: background-color .2s, box-shadow .2s, color .2s;
-  display: flex;
-}
-
-.PdmYxW_root[data-size="sm"] {
-  --checkbox-size: .875rem;
-  --checkbox-gap: var(--spacing-xs);
-  --checkbox-label-font-size: var(--typography-body-2-size);
-  --checkbox-label-line-height: var(--typography-body-2-height);
-  --checkbox-label-font-weight: var(--typography-body-2-weight);
-}
-
-.PdmYxW_root[data-size="md"] {
-  --checkbox-size: 1rem;
-  --checkbox-gap: var(--spacing-xs);
-  --checkbox-label-font-size: var(--typography-body-1-size);
-  --checkbox-label-line-height: var(--typography-body-1-height);
-  --checkbox-label-font-weight: var(--typography-body-1-weight);
-}
-
-.PdmYxW_root[data-size="lg"] {
-  --checkbox-size: 1.25rem;
-  --checkbox-gap: var(--spacing-sm);
-  --checkbox-label-font-size: var(--typography-body-1-size);
-  --checkbox-label-line-height: var(--typography-body-1-height);
-  --checkbox-label-font-weight: var(--typography-body-1-weight);
-}
-
-.PdmYxW_control[data-checked]:not([data-invalid]), .PdmYxW_control[data-indeterminate]:not([data-invalid]) {
-  --checkbox-bg: var(--color-action-neutral-base);
-  --checkbox-border: transparent;
-  --checkbox-color: var(--color-on-neutral);
-}
-
-.PdmYxW_control:focus-visible {
-  outline-style: solid;
-  outline-width: var(--stroke-focus-ring);
-  outline-color: var(--color-action-info-base);
-  outline-offset: var(--spacing-xxs);
-}
-
-.PdmYxW_root[data-disabled] {
-  cursor: not-allowed;
-  opacity: .5;
-
-  & * {
-    cursor: not-allowed;
-  }
-}
-
-.PdmYxW_root[data-invalid] {
-  --checkbox-border: var(--color-negative);
-  --field-label-color: var(--color-content-negative-muted);
-  --checkbox-label-color: var(--color-content-neutral-base);
-}
-
-.PdmYxW_control[data-invalid][data-checked], .PdmYxW_control[data-invalid][data-indeterminate] {
-  --checkbox-bg: var(--color-negative);
-  --checkbox-color: var(--color-on-negative);
-}
-
-.PdmYxW_indicator {
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.PdmYxW_root[data-invalid] {
-  --field-label-color: var(--color-content-negative-muted);
-}
-
-.PdmYxW_check-icon, .PdmYxW_minus-icon {
-  font-size: .85em;
-  display: none;
-}
-
-.PdmYxW_control[data-checked] .PdmYxW_check-icon, .PdmYxW_control[data-indeterminate] .PdmYxW_minus-icon {
-  display: block;
-}
-
-.PdmYxW_label {
-  font-size: var(--checkbox-label-font-size, var(--typography-body-2-size));
-  line-height: var(--checkbox-label-line-height, var(--typography-body-2-height));
-  font-weight: var(--checkbox-label-font-weight, var(--typography-body-2-weight));
-  color: var(--checkbox-label-color);
-}
+.PdmYxW_root{--checkbox-size:1rem;--checkbox-bg:transparent;--checkbox-border:var(--color-border-primary);--checkbox-color:transparent;--checkbox-gap:var(--spacing-xs);--checkbox-label-color:var(--color-content-neutral-base);font-family:var(--typography-typeface-ltr);align-items:center;gap:var(--checkbox-gap);display:flex;position:relative}.PdmYxW_root [data-slot=field-label]{height:var(--checkbox-size)}.PdmYxW_control{box-sizing:border-box;width:var(--checkbox-size);height:var(--checkbox-size);background-color:var(--checkbox-bg);color:var(--checkbox-color);box-shadow:0 0 0 1px var(--checkbox-border) inset;cursor:pointer;border:none;border-radius:4px;justify-content:center;align-items:center;padding:0;transition:background-color .2s,box-shadow .2s,color .2s;display:flex}.PdmYxW_root[data-size=sm]{--checkbox-size:.875rem;--checkbox-gap:var(--spacing-xs);--checkbox-label-font-size:var(--typography-body-2-size);--checkbox-label-line-height:var(--typography-body-2-height);--checkbox-label-font-weight:var(--typography-body-2-weight)}.PdmYxW_root[data-size=md]{--checkbox-size:1rem;--checkbox-gap:var(--spacing-xs);--checkbox-label-font-size:var(--typography-body-1-size);--checkbox-label-line-height:var(--typography-body-1-height);--checkbox-label-font-weight:var(--typography-body-1-weight)}.PdmYxW_root[data-size=lg]{--checkbox-size:1.25rem;--checkbox-gap:var(--spacing-sm);--checkbox-label-font-size:var(--typography-body-1-size);--checkbox-label-line-height:var(--typography-body-1-height);--checkbox-label-font-weight:var(--typography-body-1-weight)}.PdmYxW_control[data-checked]:not([data-invalid]),.PdmYxW_control[data-indeterminate]:not([data-invalid]){--checkbox-bg:var(--color-action-neutral-base);--checkbox-border:transparent;--checkbox-color:var(--color-on-neutral)}.PdmYxW_control:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}.PdmYxW_root[data-disabled]{cursor:not-allowed;opacity:.5;& *{cursor:not-allowed}}.PdmYxW_root[data-invalid]{--checkbox-border:var(--color-negative);--field-label-color:var(--color-content-negative-muted);--checkbox-label-color:var(--color-content-neutral-base)}.PdmYxW_control[data-invalid][data-checked],.PdmYxW_control[data-invalid][data-indeterminate]{--checkbox-bg:var(--color-negative);--checkbox-color:var(--color-on-negative)}.PdmYxW_indicator{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.PdmYxW_root[data-invalid]{--field-label-color:var(--color-content-negative-muted)}.PdmYxW_check-icon,.PdmYxW_minus-icon{font-size:.85em;display:none}.PdmYxW_control[data-checked] .PdmYxW_check-icon,.PdmYxW_control[data-indeterminate] .PdmYxW_minus-icon{display:block}.PdmYxW_label{font-size:var(--checkbox-label-font-size,var(--typography-body-2-size));line-height:var(--checkbox-label-line-height,var(--typography-body-2-height));font-weight:var(--checkbox-label-font-weight,var(--typography-body-2-weight));color:var(--checkbox-label-color)}

package/dist/atoms/checkbox/checkbox.module.js

@@ -1,2 +1,3 @@
+import './checkbox.css';
 var e={"check-icon":`PdmYxW_check-icon`,control:`PdmYxW_control`,indicator:`PdmYxW_indicator`,label:`PdmYxW_label`,"minus-icon":`PdmYxW_minus-icon`,root:`PdmYxW_root`};export{e as default};
 //# sourceMappingURL=checkbox.module.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.module.js","names":[],"sources":["../../../src/atoms/checkbox/checkbox.module.css"],"sourcesContent":[".root {\n  --checkbox-size: 1rem;\n  --checkbox-bg: transparent;\n  --checkbox-border: var(--color-border-primary);\n  --checkbox-color: transparent;\n  --checkbox-gap: var(--spacing-xs);\n  --checkbox-label-color: var(--color-content-neutral-base);\n\n  font-family: var(--typography-typeface-ltr);\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--checkbox-gap);\n}\n.root [data-slot=\"field-label\"] {\n  height: var(--checkbox-size);\n}\n\n.control {\n  /* Base Styles */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  background-color: var(--checkbox-bg);\n  color: var(--checkbox-color);\n  box-shadow: 0 0 0 1px var(--checkbox-border) inset; /* inset shadow acts as border without altering layout size */\n  border-radius: 4px; /* Hardcoded standard rounding for checkboxes, or map to a small radius token */\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition:\n    background-color 0.2s,\n    box-shadow 0.2s,\n    color 0.2s;\n}\n\n.root[data-size=\"sm\"] {\n  --checkbox-size: 0.875rem;\n  --checkbox-gap: var(--spacing-xs);\n  --checkbox-label-font-size: var(--typography-body-2-size);\n  --checkbox-label-line-height: var(--typography-body-2-height);\n  --checkbox-label-font-weight: var(--typography-body-2-weight);\n}\n.root[data-size=\"md\"] {\n  --checkbox-size: 1rem;\n  --checkbox-gap: var(--spacing-xs);\n  --checkbox-label-font-size: var(--typography-body-1-size);\n  --checkbox-label-line-height: var(--typography-body-1-height);\n  --checkbox-label-font-weight: var(--typography-body-1-weight);\n}\n.root[data-size=\"lg\"] {\n  --checkbox-size: 1.25rem;\n  --checkbox-gap: var(--spacing-sm);\n  --checkbox-label-font-size: var(--typography-body-1-size);\n  --checkbox-label-line-height: var(--typography-body-1-height);\n  --checkbox-label-font-weight: var(--typography-body-1-weight);\n}\n\n/* Base UI passes data-checked and data-indeterminate to the root element when active */\n.control[data-checked]:not([data-invalid]),\n.control[data-indeterminate]:not([data-invalid]) {\n  --checkbox-bg: var(--color-action-neutral-base);\n  --checkbox-border: transparent;\n  --checkbox-color: var(--color-on-neutral);\n}\n\n.control: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.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  & * {\n    cursor: not-allowed;\n  }\n}\n\n.root[data-invalid] {\n  --checkbox-border: var(--color-negative);\n  --field-label-color: var(--color-content-negative-muted);\n  --checkbox-label-color: var(--color-content-neutral-base);\n}\n.control[data-invalid][data-checked],\n.control[data-invalid][data-indeterminate] {\n  --checkbox-bg: var(--color-negative);\n  --checkbox-color: var(--color-on-negative);\n}\n\n.indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.root[data-invalid] {\n  --field-label-color: var(--color-content-negative-muted);\n}\n\n.check-icon,\n.minus-icon {\n  font-size: 0.85em; /* Scales the icon slightly down to fit inside the box nicely */\n  display: none;\n}\n\n/* Toggle icons based on Base UI's data attributes */\n.control[data-checked] .check-icon {\n  display: block;\n}\n.control[data-indeterminate] .minus-icon {\n  display: block;\n}\n\n.label {\n  font-size: var(--checkbox-label-font-size, var(--typography-body-2-size));\n  line-height: var(\n    --checkbox-label-line-height,\n    var(--typography-body-2-height)\n  );\n  font-weight: var(\n    --checkbox-label-font-weight,\n    var(--typography-body-2-weight)\n  );\n  color: var(--checkbox-label-color);\n}\n"],"mappings":"AAYA,IAAA,EAAA,CAAA,aAAA,oBAAA,QAAA,iBAAA,UAAA,mBAAA,MAAA,eAAA,aAAA,oBAAA,KAAA,aAAA"}
+{"version":3,"file":"checkbox.module.js","names":[],"sources":["../../../src/atoms/checkbox/checkbox.module.css"],"sourcesContent":[".root {\n  --checkbox-size: 1rem;\n  --checkbox-bg: transparent;\n  --checkbox-border: var(--color-border-primary);\n  --checkbox-color: transparent;\n  --checkbox-gap: var(--spacing-xs);\n  --checkbox-label-color: var(--color-content-neutral-base);\n\n  font-family: var(--typography-typeface-ltr);\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--checkbox-gap);\n}\n.root [data-slot=\"field-label\"] {\n  height: var(--checkbox-size);\n}\n\n.control {\n  /* Base Styles */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  background-color: var(--checkbox-bg);\n  color: var(--checkbox-color);\n  box-shadow: 0 0 0 1px var(--checkbox-border) inset; /* inset shadow acts as border without altering layout size */\n  border-radius: 4px; /* Hardcoded standard rounding for checkboxes, or map to a small radius token */\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition:\n    background-color 0.2s,\n    box-shadow 0.2s,\n    color 0.2s;\n}\n\n.root[data-size=\"sm\"] {\n  --checkbox-size: 0.875rem;\n  --checkbox-gap: var(--spacing-xs);\n  --checkbox-label-font-size: var(--typography-body-2-size);\n  --checkbox-label-line-height: var(--typography-body-2-height);\n  --checkbox-label-font-weight: var(--typography-body-2-weight);\n}\n.root[data-size=\"md\"] {\n  --checkbox-size: 1rem;\n  --checkbox-gap: var(--spacing-xs);\n  --checkbox-label-font-size: var(--typography-body-1-size);\n  --checkbox-label-line-height: var(--typography-body-1-height);\n  --checkbox-label-font-weight: var(--typography-body-1-weight);\n}\n.root[data-size=\"lg\"] {\n  --checkbox-size: 1.25rem;\n  --checkbox-gap: var(--spacing-sm);\n  --checkbox-label-font-size: var(--typography-body-1-size);\n  --checkbox-label-line-height: var(--typography-body-1-height);\n  --checkbox-label-font-weight: var(--typography-body-1-weight);\n}\n\n/* Base UI passes data-checked and data-indeterminate to the root element when active */\n.control[data-checked]:not([data-invalid]),\n.control[data-indeterminate]:not([data-invalid]) {\n  --checkbox-bg: var(--color-action-neutral-base);\n  --checkbox-border: transparent;\n  --checkbox-color: var(--color-on-neutral);\n}\n\n.control: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.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  & * {\n    cursor: not-allowed;\n  }\n}\n\n.root[data-invalid] {\n  --checkbox-border: var(--color-negative);\n  --field-label-color: var(--color-content-negative-muted);\n  --checkbox-label-color: var(--color-content-neutral-base);\n}\n.control[data-invalid][data-checked],\n.control[data-invalid][data-indeterminate] {\n  --checkbox-bg: var(--color-negative);\n  --checkbox-color: var(--color-on-negative);\n}\n\n.indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.root[data-invalid] {\n  --field-label-color: var(--color-content-negative-muted);\n}\n\n.check-icon,\n.minus-icon {\n  font-size: 0.85em; /* Scales the icon slightly down to fit inside the box nicely */\n  display: none;\n}\n\n/* Toggle icons based on Base UI's data attributes */\n.control[data-checked] .check-icon {\n  display: block;\n}\n.control[data-indeterminate] .minus-icon {\n  display: block;\n}\n\n.label {\n  font-size: var(--checkbox-label-font-size, var(--typography-body-2-size));\n  line-height: var(\n    --checkbox-label-line-height,\n    var(--typography-body-2-height)\n  );\n  font-weight: var(\n    --checkbox-label-font-weight,\n    var(--typography-body-2-weight)\n  );\n  color: var(--checkbox-label-color);\n}\n"],"mappings":""}

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/collapsible/collapsible.css

@@ -0,0 +1 @@
+.uQwcna_panel{height:var(--collapsible-panel-height);width:var(--collapsible-panel-width);transition:height .15s ease-out;overflow:hidden;&[hidden]:not([hidden=until-found]){display:none}&[data-starting-style],&[data-ending-style]{height:0}}

package/dist/atoms/collapsible/collapsible.d.ts

@@ -0,0 +1,16 @@
+import { CollapsibleRootProps } from "@base-ui/react";
+
+//#region src/atoms/collapsible/collapsible.d.ts
+type CollapsibleProps = Omit<CollapsibleRootProps, "className"> & {
+  renderTrigger: React.ReactElement;
+  classNames?: {
+    root?: string;
+    trigger?: string;
+    panel?: string;
+  };
+  children: React.ReactNode;
+};
+declare const Collapsible$1: React.FC<CollapsibleProps>;
+//#endregion
+export { Collapsible$1 as Collapsible };
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/atoms/collapsible/collapsible.js

@@ -0,0 +1,2 @@
+import e from"./collapsible.module.js";import t from"clsx";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{Collapsible as i}from"@base-ui/react";const a=a=>{let{renderTrigger:o,classNames:s,children:c}=a;return r(i.Root,{className:s?.root,children:[n(i.Trigger,{className:s?.trigger,render:o}),n(i.Panel,{className:t(e.panel,s?.panel),children:c})]})};export{a as Collapsible};
+//# sourceMappingURL=collapsible.js.map

package/dist/atoms/collapsible/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","names":["Collapsible","BaseUiCollapsible","styles"],"sources":["../../../src/atoms/collapsible/collapsible.tsx"],"sourcesContent":["import {\n  Collapsible as BaseUiCollapsible,\n  type CollapsibleRootProps as BaseUiCollapsibleRootProps,\n} from \"@base-ui/react\";\nimport clsx from \"clsx\";\nimport styles from \"./collapsible.module.css\";\n\ntype CollapsibleProps = Omit<BaseUiCollapsibleRootProps, \"className\"> & {\n  renderTrigger: React.ReactElement;\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    panel?: string;\n  };\n  children: React.ReactNode;\n};\n\nexport const Collapsible: React.FC<CollapsibleProps> = props => {\n  const { renderTrigger, classNames, children } = props;\n  return (\n    <BaseUiCollapsible.Root className={classNames?.root}>\n      <BaseUiCollapsible.Trigger\n        className={classNames?.trigger}\n        render={renderTrigger}\n      />\n      <BaseUiCollapsible.Panel\n        className={clsx(styles[\"panel\"], classNames?.panel)}\n      >\n        {children}\n      </BaseUiCollapsible.Panel>\n    </BaseUiCollapsible.Root>\n  );\n};\n"],"mappings":"0JAiBA,MAAaA,EAA0C,GAAS,CAC9D,GAAM,CAAE,gBAAe,aAAY,YAAa,EAChD,OACE,EAACC,EAAkB,KAAnB,CAAwB,UAAW,GAAY,cAA/C,CACE,EAACA,EAAkB,QAAnB,CACE,UAAW,GAAY,QACvB,OAAQ,CACT,CAAA,EACD,EAACA,EAAkB,MAAnB,CACE,UAAW,EAAKC,EAAO,MAAU,GAAY,KAAK,EAEjD,UACsB,CAAA,CACH,GAE5B"}

package/dist/atoms/collapsible/collapsible.module.js

@@ -0,0 +1,3 @@
+import './collapsible.css';
+var e={panel:`uQwcna_panel`};export{e as default};
+//# sourceMappingURL=collapsible.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.module.js","names":[],"sources":["../../../src/atoms/collapsible/collapsible.module.css"],"sourcesContent":[".panel {\n  height: var(--collapsible-panel-height);\n  width: var(--collapsible-panel-width);\n  overflow: hidden;\n  transition: height 150ms ease-out;\n\n  &[hidden]:not([hidden=\"until-found\"]) {\n    display: none;\n  }\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    height: 0;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1 @@
+import { Collapsible } from "./collapsible.js";

package/dist/atoms/collapsible/index.js

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