@pantool/components 1.0.0-alpha.0

package/README.md

@@ -0,0 +1,80 @@
+# @pantool/components
+
+The core component library for the `pantool` monorepo. Built on top of
+[Base UI](https://base-ui.com/react/components) for robust accessibility and
+headless architecture, styled with CSS Modules and zero-runtime CSS variables.
+
+## 📦 Installation
+
+```bash
+npm install @pantool/components
+# or
+yarn add @pantool/components
+# or
+pnpm add @pantool/components
+```
+
+> **Note:** This package requires `@pantool/theme` to function correctly, as all
+> styling relies on the `--pantool-*` global CSS variables. Ensure your
+> application is wrapped in the theme provider or has the theme CSS injected
+> globally.
+
+## 🏗 Structure
+
+This library follows a modified Atomic Design pattern:
+
+- `/src/internals`: Foundational elements not meant for direct external
+  consumption (e.g., `BaseButton`).
+- `/src/atoms`: Single-purpose, indivisible components (e.g., `Button`, `Badge`,
+  `TextInput`).
+- `/src/molecules`: Combinations of atoms into slightly more complex structures
+  (e.g., `SearchField` = `TextInput` + `IconButton`).
+
+## 🛠 Anatomy of a Component
+
+Every component in this library is fully typed and heavily documented. A
+standard component folder looks like this:
+
+```text
+src/atoms/button/
+├── button.tsx           # Base UI implementation & React logic
+├── button.module.css    # Local CSS variables & data-* selectors
+├── index.ts             # Public exports
+└── README.md            # Component documentation & API
+```
+
+## 🎨 Styling Philosophy
+
+We do not use runtime CSS-in-JS. Instead, we use a highly optimized approach
+leveraging local CSS variables mapped to `data-*` attributes.
+
+1. **Local Scope:** Components define their layout and design using locally
+   scoped variables (e.g., `--button-bg`).
+2. **Global Tokens:** These local variables are populated by the global theme
+   tokens (e.g., `var(--pantool-color-brand)`).
+3. **State Overrides:** Component variants (`size`, `color`) and interactions
+   (`hover`, `active`, `disabled`) are handled by updating the local variable
+   via `data-*` attribute selectors.
+
+Example consumption:
+
+```tsx
+import { Button } from "@pantool/components";
+
+export function Form() {
+  return (
+    <Button
+      size="lg"
+      color="brand"
+      variant="filled"
+    >
+      Submit
+    </Button>
+  );
+}
+```
+
+## 🤝 Contributing
+
+When adding a new component, ensure you refer to the `AGENTS.md` guidelines for
+strict rules on CSS variable management and Base UI integration.

package/dist/atoms/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,7 @@
+import { BaseDialogProps } from "../../internals/base-dialog/base-dialog.js";
+//#region src/atoms/alert-dialog/alert-dialog.d.ts
+type AlertDialogProps = Omit<BaseDialogProps, "as">;
+declare const AlertDialog: (props: AlertDialogProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { AlertDialog, AlertDialogProps };
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/atoms/alert-dialog/alert-dialog.js

@@ -0,0 +1,2 @@
+import{BaseDialog as e}from"../../internals/base-dialog/base-dialog.js";import"../../internals/base-dialog/index.js";import{AlertDialog as t}from"@base-ui/react/alert-dialog";import{jsx as n}from"react/jsx-runtime";const r=r=>n(e,{as:t,...r});export{r as AlertDialog};
+//# sourceMappingURL=alert-dialog.js.map

package/dist/atoms/alert-dialog/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","names":["AlertDialog","BaseUIAlertDialog"],"sources":["../../../src/atoms/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as BaseUIAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { BaseDialog, type BaseDialogProps } from \"../../internals/base-dialog\";\n\nexport type AlertDialogProps = Omit<BaseDialogProps, \"as\">;\n\nexport const AlertDialog = (props: AlertDialogProps) => {\n  return <BaseDialog as={BaseUIAlertDialog} {...props} />;\n};\n"],"mappings":"uNAKA,MAAaA,EAAe,GACnB,EAAC,EAAD,CAAY,GAAIC,EAAmB,GAAI,CAAQ,CAAA"}

package/dist/atoms/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+import { AlertDialog, AlertDialogProps } from "./alert-dialog.js";

package/dist/atoms/alert-dialog/index.js

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

package/dist/atoms/button/button.css

@@ -0,0 +1,18 @@
+.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

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

package/dist/atoms/button/button.js

@@ -0,0 +1,2 @@
+import{BaseButton as e}from"../../internals/base-button/base-button.js";import"../../internals/base-button/index.js";import t from"./button.module.js";import*as n from"react";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=n.forwardRef((n,a)=>{let{text:o,startIcon:s,endIcon:c,className:l,...u}=n;return i(e,{ref:a,className:`${t.root} ${l||``}`.trim(),...u,children:[s&&r(`span`,{className:t.icon,children:s}),r(`span`,{className:t.label,children:o}),c&&r(`span`,{className:t.icon,children:c})]})});export{a as Button};
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +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"}

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

@@ -0,0 +1 @@
+import { Button, ButtonProps } from "./button.js";

package/dist/atoms/button/index.js

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

package/dist/atoms/checkbox/checkbox.css

@@ -0,0 +1,119 @@
+.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.d.ts

@@ -0,0 +1,53 @@
+import { CheckboxRootProps } from "@base-ui/react/checkbox";
+
+//#region src/atoms/checkbox/checkbox.d.ts
+type CheckboxProps = Omit<CheckboxRootProps, "className"> & {
+  /** The size of the input. @default "md" */size?: "sm" | "md" | "lg";
+  /**
+   * The label of the field.
+   */
+  label: string;
+  /**
+   * Whether to hide the label or not.
+   *
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * Gets or sets whether or not the field is in a visually invalid state.
+   *
+   * This error state overrides the error state controlled by
+   * `reportValidity()`.
+   *
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * The error message that replaces feedback when `error` is true. If
+   * `errorText` is an empty string, then the feedback will continue to
+   * show.
+   */
+  errorText?: string;
+  /**
+   * Whether the field's value has been changed from its initial value.
+   * Useful when the field state is controlled by an external library.
+   */
+  dirty?: boolean | undefined;
+  /**
+   * Additional CSS classes for styling.
+   */
+  classNames?: {
+    label?: string;
+    feedback?: string;
+    root?: string;
+    error?: string;
+    control?: string;
+    indicator?: string;
+    checkIcon?: string;
+    minusIcon?: string;
+  };
+};
+declare const Checkbox$1: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxProps };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/atoms/checkbox/checkbox.js

@@ -0,0 +1,2 @@
+import{Icon as e}from"../icon/icon.js";import"../icon/index.js";import t from"./checkbox.module.js";import n from"clsx";import{useId as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{Checkbox as o}from"@base-ui/react/checkbox";import{mdiCheckBold as s,mdiMinusThick as c}from"@mdi/js";const l=l=>{let{size:u=`md`,label:d,disabled:f=!1,required:p=!1,name:m,invalid:h,errorText:g,dirty:_,readOnly:v,autoFocus:y,hideLabel:b,classNames:x,...S}=l,C=r();return a(`div`,{"data-size":u,"data-disabled":f||void 0,"data-required":p||void 0,"data-invalid":h||void 0,className:n(t.root,x?.root),"data-slot":`checkbox-root`,children:[i(o.Root,{...S,disabled:f,required:p,readOnly:v,"data-invalid":h||void 0,className:n(t.control,x?.control),"data-size":u,"data-slot":`checkbox-control`,id:C,children:a(o.Indicator,{"data-slot":`checkbox-indicator`,className:n(t.indicator,x?.indicator),children:[i(e,{data:s,"data-slot":`checkbox-check-icon`,className:n(t[`check-icon`],x?.checkIcon)}),i(e,{data:c,"data-slot":`checkbox-minus-icon`,className:n(t[`minus-icon`],x?.minusIcon)})]})}),i(`label`,{htmlFor:C,className:n(t.label,x?.label),"data-slot":`checkbox-label`,children:d})]})};export{l as Checkbox};
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["Checkbox","styles","BaseUICheckbox"],"sources":["../../../src/atoms/checkbox/checkbox.tsx"],"sourcesContent":["import {\n  Checkbox as BaseUICheckbox,\n  type CheckboxRootProps,\n} from \"@base-ui/react/checkbox\";\nimport { Icon } from \"../icon\";\nimport { mdiCheckBold, mdiMinusThick } from \"@mdi/js\";\nimport styles from \"./checkbox.module.css\";\nimport clsx from \"clsx\";\nimport { useId } from \"react\";\n\nexport type CheckboxProps = Omit<CheckboxRootProps, \"className\"> & {\n  /** The size of the input. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * The label of the field.\n   */\n  label: string;\n\n  /**\n   * Whether to hide the label or not.\n   *\n   * @default false\n   */\n  hideLabel?: boolean;\n  /**\n   * Gets or sets whether or not the field is in a visually invalid state.\n   *\n   * This error state overrides the error state controlled by\n   * `reportValidity()`.\n   *\n   * @default false\n   */\n  invalid?: boolean;\n  /**\n   * The error message that replaces feedback when `error` is true. If\n   * `errorText` is an empty string, then the feedback will continue to\n   * show.\n   */\n  errorText?: string;\n\n  /**\n   * Whether the field's value has been changed from its initial value.\n   * Useful when the field state is controlled by an external library.\n   */\n  dirty?: boolean | undefined;\n  /**\n   * Additional CSS classes for styling.\n   */\n  classNames?: {\n    label?: string;\n    feedback?: string;\n    root?: string;\n    error?: string;\n    control?: string;\n    indicator?: string;\n    checkIcon?: string;\n    minusIcon?: string;\n  };\n};\n\nexport const Checkbox = (props: CheckboxProps) => {\n  const {\n    size = \"md\",\n    label,\n    disabled = false,\n    required = false,\n    name,\n    invalid,\n    errorText,\n    dirty,\n    readOnly,\n    autoFocus,\n    hideLabel,\n    classNames,\n    ...otherProps\n  } = props;\n\n  const id = useId();\n\n  return (\n    <div\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-required={required || undefined}\n      data-invalid={invalid || undefined}\n      className={clsx(styles[\"root\"], classNames?.root)}\n      data-slot=\"checkbox-root\"\n    >\n      <BaseUICheckbox.Root\n        {...otherProps}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        data-invalid={invalid || undefined}\n        className={clsx(styles[\"control\"], classNames?.control)}\n        data-size={size}\n        data-slot=\"checkbox-control\"\n        id={id}\n      >\n        <BaseUICheckbox.Indicator\n          data-slot=\"checkbox-indicator\"\n          className={clsx(styles[\"indicator\"], classNames?.indicator)}\n        >\n          <Icon\n            data={mdiCheckBold}\n            data-slot=\"checkbox-check-icon\"\n            className={clsx(styles[\"check-icon\"], classNames?.checkIcon)}\n          />\n          <Icon\n            data={mdiMinusThick}\n            data-slot=\"checkbox-minus-icon\"\n            className={clsx(styles[\"minus-icon\"], classNames?.minusIcon)}\n          />\n        </BaseUICheckbox.Indicator>\n      </BaseUICheckbox.Root>\n\n      <label\n        htmlFor={id}\n        className={clsx(styles[\"label\"], classNames?.label)}\n        data-slot=\"checkbox-label\"\n      >\n        {label}\n      </label>\n    </div>\n  );\n};\n"],"mappings":"qTA4DA,MAAaA,EAAY,GAAyB,CAChD,GAAM,CACJ,OAAO,KACP,QACA,WAAW,GACX,WAAW,GACX,OACA,UACA,YACA,QACA,WACA,YACA,YACA,aACA,GAAG,GACD,EAEE,EAAK,EAAM,EAEjB,OACE,EAAC,MAAD,CACE,YAAW,EACX,gBAAe,GAAY,IAAA,GAC3B,gBAAe,GAAY,IAAA,GAC3B,eAAc,GAAW,IAAA,GACzB,UAAW,EAAKC,EAAO,KAAS,GAAY,IAAI,EAChD,YAAU,yBANZ,CAQE,EAACC,EAAe,KAAhB,CACE,GAAI,EACM,WACA,WACA,WACV,eAAc,GAAW,IAAA,GACzB,UAAW,EAAKD,EAAO,QAAY,GAAY,OAAO,EACtD,YAAW,EACX,YAAU,mBACN,cAEJ,EAACC,EAAe,UAAhB,CACE,YAAU,qBACV,UAAW,EAAKD,EAAO,UAAc,GAAY,SAAS,WAF5D,CAIE,EAAC,EAAD,CACE,KAAM,EACN,YAAU,sBACV,UAAW,EAAKA,EAAO,cAAe,GAAY,SAAS,CAC5D,CAAA,EACD,EAAC,EAAD,CACE,KAAM,EACN,YAAU,sBACV,UAAW,EAAKA,EAAO,cAAe,GAAY,SAAS,CAC5D,CAAA,CACuB,GACP,CAAA,EAErB,EAAC,QAAD,CACE,QAAS,EACT,UAAW,EAAKA,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,0BAET,CACI,CAAA,CACJ,GAET"}

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +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"}

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

@@ -0,0 +1 @@
+import { Checkbox, CheckboxProps } from "./checkbox.js";

package/dist/atoms/checkbox/index.js

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

package/dist/atoms/combobox/combobox.css

@@ -0,0 +1,302 @@
+.KAWYaW_control {
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+  display: flex;
+  position: relative;
+}
+
+.KAWYaW_start-adornment, .KAWYaW_end-adornment {
+  height: var(--field-control-icon-size);
+  align-items: center;
+  display: flex;
+
+  & [data-slot="input-adornment-root"] {
+    &[data-kind="icon"] {
+      width: var(--adornment-icon-size);
+      height: var(--adornment-icon-size);
+      color: var(--field-label-color);
+    }
+
+    &[data-kind="button"] {
+      width: var(--adornment-button-size);
+      height: var(--adornment-button-size);
+      color: var(--field-label-color);
+    }
+  }
+}
+
+.KAWYaW_control[data-size="sm"] {
+  --adornment-icon-size: 1rem;
+  --adornment-button-size: 1.5rem;
+  --input-group-gap: var(--spacing-xs);
+  --combobox-chip-size: 1rem;
+}
+
+.KAWYaW_control[data-size="md"] {
+  --adornment-icon-size: 1.5rem;
+  --adornment-button-size: 2rem;
+  --input-group-gap: var(--spacing-xs);
+  --combobox-chip-size: 1rem;
+}
+
+.KAWYaW_control[data-size="lg"] {
+  --adornment-icon-size: 2rem;
+  --adornment-button-size: 2.5rem;
+  --input-group-gap: var(--spacing-sm);
+  --combobox-chip-size: 1rem;
+}
+
+.KAWYaW_input-group {
+  box-sizing: border-box;
+  min-width: 12rem;
+  min-height: var(--field-control-height);
+  border: 1px solid var(--color-border-primary);
+  background-color: var(--color-surface-base);
+  border-radius: var(--field-control-radius);
+  align-items: center;
+  gap: var(--input-group-gap);
+  padding: 0 var(--spacing-sm);
+  flex-wrap: wrap;
+  flex: 1;
+  transition: border-color .2s ease-in-out;
+  display: flex;
+  position: relative;
+}
+
+.KAWYaW_input-group:focus-within {
+  outline-style: solid;
+  outline-width: var(--stroke-focus-ring);
+  outline-color: var(--color-action-info-base);
+  outline-offset: var(--spacing-xxs);
+}
+
+.KAWYaW_input {
+  box-sizing: border-box;
+  min-width: 4rem;
+  height: calc(var(--field-control-height) - 2px);
+  font-family: var(--typography-typeface-ltr);
+  font-size: var(--field-control-font-size);
+  line-height: var(--field-control-line-height);
+  font-weight: var(--field-control-font-weight);
+  color: var(--field-control-text-color);
+  background-color: #0000;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  flex: 1;
+  margin: 0;
+  padding: 0;
+}
+
+.KAWYaW_input::placeholder {
+  color: var(--field-control-placeholder-color);
+}
+
+.KAWYaW_input:focus {
+  outline: none;
+}
+
+.KAWYaW_chips {
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xxs) 0;
+  flex-wrap: wrap;
+  flex: 1;
+  display: flex;
+}
+
+.KAWYaW_chip {
+  --combobox-chip-bg: var(--color-surface-secondary);
+  --combobox-chip-color: var(--color-content-brand-secondary);
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  background-color: var(--combobox-chip-bg);
+  color: var(--combobox-chip-color);
+  border: 1px solid var(--combobox-chip-color);
+  padding: 0 var(--spacing-sm);
+  height: calc(var(--field-control-height) * .7);
+  border-radius: var(--radius-full);
+  font-size: var(--typography-caption-base-size);
+  cursor: default;
+  outline: none;
+  display: flex;
+}
+
+.KAWYaW_chip[data-highlighted] {
+  background-color: var(--color-action-neutral-muted);
+}
+
+.KAWYaW_chip-text {
+  white-space: nowrap;
+  color: var(--combobox-chip-color);
+}
+
+.KAWYaW_chip-remove {
+  color: var(--combobox-chip-color);
+  background-color: var(--combobox-chip-bg);
+  cursor: pointer;
+  height: var(--combobox-chip-size);
+  width: var(--combobox-chip-size);
+  border: none;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  transition: background-color .1s;
+  display: flex;
+}
+
+.KAWYaW_chip-remove:hover {
+  --combobox-chip-bg: var(--color-surface-tertiary);
+}
+
+.KAWYaW_action-buttons {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  padding-left: var(--spacing-sm);
+  height: 100%;
+  margin-left: auto;
+  display: flex;
+}
+
+.KAWYaW_trigger, .KAWYaW_clear {
+  box-sizing: border-box;
+  width: var(--field-control-icon-size);
+  height: var(--field-control-icon-size);
+  color: var(--field-label-color);
+  border-radius: var(--radius-full);
+  background: none;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  transition: color .1s, background-color .1s;
+  display: flex;
+}
+
+.KAWYaW_trigger:hover, .KAWYaW_clear:hover {
+  color: var(--color-content-neutral-base);
+  background-color: var(--color-surface-secondary);
+}
+
+.KAWYaW_trigger:focus-visible, .KAWYaW_clear:focus-visible {
+  outline-style: solid;
+  outline-width: var(--stroke-focus-ring);
+  outline-color: var(--color-action-info-base);
+  outline-offset: var(--spacing-xxs);
+}
+
+.KAWYaW_trigger[data-disabled], .KAWYaW_clear[data-disabled] {
+  cursor: not-allowed;
+  user-select: none;
+}
+
+.KAWYaW_positioner {
+  z-index: var(--zindex-1);
+  outline: 0;
+}
+
+.KAWYaW_popup {
+  box-sizing: border-box;
+  background-color: var(--color-surface-base);
+  color: var(--color-content-neutral-base);
+  width: var(--anchor-width);
+  max-width: var(--available-width);
+  min-width: 12rem;
+  transform-origin: var(--transform-origin);
+  border: 1px solid var(--color-border-primary);
+  transition: opacity .1s, transform .1s;
+  overflow: hidden;
+  box-shadow: 0 4px 12px #0000001a;
+}
+
+.KAWYaW_popup.KAWYaW_full-width {
+  width: 100%;
+}
+
+.KAWYaW_popup[data-starting-style], .KAWYaW_popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(.95);
+}
+
+.KAWYaW_list {
+  box-sizing: border-box;
+  overscroll-behavior: contain;
+  padding-block: var(--spacing-xs);
+  scroll-padding-block: var(--spacing-xs);
+  max-height: min(22.5rem, var(--available-height));
+  outline: 0;
+  overflow-y: auto;
+}
+
+.KAWYaW_list[data-empty] {
+  padding: 0;
+}
+
+.KAWYaW_group {
+  padding-block: var(--spacing-xs);
+}
+
+.KAWYaW_group-label {
+  padding: var(--spacing-xxs) var(--spacing-md);
+  font-size: var(--typography-caption-base-size);
+  font-weight: var(--typography-subheading-2-weight);
+  color: var(--color-content-neutral-muted);
+  text-transform: uppercase;
+  letter-spacing: .05em;
+}
+
+.KAWYaW_item {
+  box-sizing: border-box;
+  cursor: default;
+  user-select: none;
+  padding-block: var(--spacing-sm);
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+  gap: var(--spacing-sm);
+  font-size: var(--field-control-font-size);
+  line-height: var(--field-control-line-height);
+  font-weight: var(--field-control-font-weight);
+  outline: 0;
+  grid-template-columns: 1rem 1fr;
+  align-items: center;
+  transition: background-color .1s;
+  display: grid;
+  position: relative;
+}
+
+.KAWYaW_item[data-highlighted] {
+  background-color: var(--color-surface-secondary);
+}
+
+.KAWYaW_item[data-selected] {
+  color: var(--color-content-brand-base);
+  font-weight: var(--typography-subheading-2-weight);
+}
+
+.KAWYaW_item[data-disabled] {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.KAWYaW_item-indicator {
+  grid-column-start: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.KAWYaW_item-text {
+  grid-column-start: 2;
+}
+
+.KAWYaW_empty {
+  box-sizing: border-box;
+  padding: var(--spacing-md);
+  font-size: var(--field-control-font-size);
+  color: var(--color-content-neutral-muted);
+  text-align: center;
+}