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

package/dist/atoms/autocomplete/autocomplete.css

@@ -0,0 +1 @@
+.V4vGvW_root{width:100%;font-family:var(--typography-typeface-ltr)}.V4vGvW_control{--field-control-radius:var(--radius-md);--field-control-bg-color:var(--color-surface-base);--field-control-text-color:var(--color-content-neutral-base);--field-control-border-color:var(--color-border-secondary);--field-control-placeholder-color:var(--color-content-neutral-muted);align-items:center;width:100%;display:flex;position:relative}.V4vGvW_control[data-size=sm]{--field-control-height:1.5rem;--field-control-font-size:var(--typography-caption-base-size);--field-control-font-weight:var(--typography-caption-base-weight)}.V4vGvW_control[data-size=md]{--field-control-height:2rem;--field-control-font-size:var(--typography-body-2-size);--field-control-font-weight:var(--typography-body-2-weight)}.V4vGvW_control[data-size=lg]{--field-control-height:2.5rem;--field-control-font-size:var(--typography-body-1-size);--field-control-font-weight:var(--typography-body-1-weight)}.V4vGvW_control[data-invalid]{--field-control-border-color:var(--color-content-negative-base);--field-control-text-color:var(--color-content-negative-base)}.V4vGvW_input{box-sizing:border-box;padding:0 var(--spacing-sm);border-radius:var(--field-control-radius);border:1px solid var(--field-control-border-color);width:100%;height:var(--field-control-height);font-family:var(--typography-typeface-ltr);font-size:var(--field-control-font-size);font-weight:var(--field-control-font-weight);background-color:var(--field-control-bg-color);color:var(--field-control-text-color);outline:none;margin:0;transition:border-color .2s ease-in-out}.V4vGvW_input::placeholder{color:var(--field-control-placeholder-color)}.V4vGvW_input:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}.V4vGvW_positioner{z-index:var(--zindex-1);outline:0}.V4vGvW_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}.V4vGvW_popup[data-starting-style],.V4vGvW_popup[data-ending-style]{opacity:0;font-family:var(--typography-typeface-ltr);transform:scale(.95)}.V4vGvW_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}.V4vGvW_list[data-empty]{padding:0}.V4vGvW_group{padding-block:var(--spacing-xs)}.V4vGvW_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}.V4vGvW_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);outline:0;align-items:center;transition:background-color .1s;display:flex;position:relative}.V4vGvW_item[data-size=sm]{font-size:var(--typography-caption-base-size);font-weight:var(--typography-caption-base-weight)}.V4vGvW_item[data-size=md]{font-size:var(--typography-body-2-size);font-weight:var(--typography-body-2-weight)}.V4vGvW_item[data-size=lg]{font-size:var(--typography-body-1-size);font-weight:var(--typography-body-1-weight)}.V4vGvW_item[data-highlighted]{background-color:var(--color-surface-secondary)}.V4vGvW_item[data-disabled]{opacity:.5;cursor:not-allowed}.V4vGvW_empty{box-sizing:border-box;padding:var(--spacing-md);font-size:var(--typography-caption-base-size);color:var(--color-content-neutral-muted);text-align:center}

package/dist/atoms/autocomplete/autocomplete.d.ts

@@ -0,0 +1,77 @@
+import { AutocompleteRootProps } from "@base-ui/react/autocomplete";
+
+//#region src/atoms/autocomplete/autocomplete.d.ts
+/**
+ * Represents an item in the autocomplete.
+ */
+interface AutocompleteItem<T = string> {
+  /** Unique identifier for the item */
+  id: string;
+  /** Display label for the item */
+  label: string;
+  /** Underlying value of the item */
+  value: T;
+  /** Whether the item is disabled */
+  disabled?: boolean;
+}
+/**
+ * Represents a group of items in the autocomplete.
+ */
+interface AutocompleteGroup {
+  /** The text label of the group */
+  label: string;
+  /** The items in the group */
+  items: AutocompleteItem[];
+}
+/**
+ * Props for the Autocomplete component.
+ */
+type AutocompleteProps<T = string> = AutocompleteRootProps<T> & {
+  /**
+   * The size of the autocomplete.
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Whether the autocomplete is in an invalid state.
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Additional CSS classes for styling.
+   */
+  classNames?: {
+    root?: string;
+    control?: string;
+    input?: string;
+    positioner?: string;
+    popup?: string;
+    list?: string;
+    item?: string;
+    empty?: string;
+    group?: string;
+    groupLabel?: string;
+  };
+  /**
+   * Placeholder text for the input.
+   */
+  placeholder?: string;
+};
+/**
+ * An autocomplete component that renders an input with filtered suggestions.
+ * Unlike Combobox, the input accepts free-form text and suggestions are optional.
+ * Built on top of Base UI's Autocomplete primitive.
+ */
+declare const Autocomplete$1: <T = string>({
+  size,
+  invalid,
+  disabled,
+  readOnly,
+  placeholder,
+  classNames,
+  items,
+  ...props
+}: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Autocomplete$1 as Autocomplete, AutocompleteGroup, AutocompleteItem, AutocompleteProps };
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/atoms/autocomplete/autocomplete.js

@@ -0,0 +1,2 @@
+import{usePortalConfig as e}from"../../helpers/portal/context/hooks.js";import"../../helpers/portal/index.js";import t from"./autocomplete.module.js";import n from"clsx";import"react";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Autocomplete as a}from"@base-ui/react/autocomplete";const o=({size:o=`md`,invalid:s=!1,disabled:c=!1,readOnly:l=!1,placeholder:u,classNames:d,items:f,...p})=>{let{resolveContainer:m}=e(),h=m();return r(`div`,{"data-slot":`autocomplete-root`,className:n(t.root,d?.root),children:i(a.Root,{items:f,disabled:c,readOnly:l,...p,children:[r(`div`,{className:n(t.control,d?.control),"data-size":o,"data-invalid":s||void 0,"data-slot":`autocomplete-control`,children:r(a.Input,{className:n(t.input,d?.input),"data-slot":`autocomplete-input`,placeholder:u})}),r(a.Portal,{container:h,children:r(a.Positioner,{className:n(t.positioner,d?.positioner),"data-slot":`autocomplete-positioner`,sideOffset:4,children:i(a.Popup,{className:n(t.popup,d?.popup),"data-slot":`autocomplete-popup`,children:[r(a.Empty,{children:r(`div`,{className:n(t.empty,d?.empty),"data-slot":`autocomplete-empty`,children:`No results found.`})}),r(a.List,{className:n(t.list,d?.list),"data-slot":`autocomplete-list`,children:e=>`items`in e?i(a.Group,{className:n(t.group,d?.group),items:e.items,"data-slot":`autocomplete-group`,children:[r(a.GroupLabel,{className:n(t[`group-label`],d?.groupLabel),"data-slot":`autocomplete-group-label`,children:e.label}),r(a.Collection,{children:e=>r(a.Item,{value:e,disabled:e.disabled,className:n(t.item,d?.item),"data-slot":`autocomplete-item`,"data-size":o,children:e.label},e.id)})]},e.label):r(a.Item,{value:e,disabled:e.disabled,className:n(t.item,d?.item),"data-slot":`autocomplete-item`,"data-size":o,children:e.label},e.id)})]})})})]})})};export{o as Autocomplete};
+//# sourceMappingURL=autocomplete.js.map

package/dist/atoms/autocomplete/autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.js","names":["Autocomplete","styles","BaseUIAutocomplete"],"sources":["../../../src/atoms/autocomplete/autocomplete.tsx"],"sourcesContent":["import {\n  Autocomplete as BaseUIAutocomplete,\n  type AutocompleteRootProps,\n} from \"@base-ui/react/autocomplete\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { usePortalConfig } from \"../../helpers/portal\";\nimport styles from \"./autocomplete.module.css\";\n\n/**\n * Represents an item in the autocomplete.\n */\nexport interface AutocompleteItem<T = string> {\n  /** Unique identifier for the item */\n  id: string;\n  /** Display label for the item */\n  label: string;\n  /** Underlying value of the item */\n  value: T;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n}\n\n/**\n * Represents a group of items in the autocomplete.\n */\nexport interface AutocompleteGroup {\n  /** The text label of the group */\n  label: string;\n  /** The items in the group */\n  items: AutocompleteItem[];\n}\n\n/**\n * Props for the Autocomplete component.\n */\nexport type AutocompleteProps<T = string> = AutocompleteRootProps<T> & {\n  /**\n   * The size of the autocomplete.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Whether the autocomplete is in an invalid state.\n   * @default false\n   */\n  invalid?: boolean;\n  /**\n   * Additional CSS classes for styling.\n   */\n  classNames?: {\n    root?: string;\n    control?: string;\n    input?: string;\n    positioner?: string;\n    popup?: string;\n    list?: string;\n    item?: string;\n    empty?: string;\n    group?: string;\n    groupLabel?: string;\n  };\n  /**\n   * Placeholder text for the input.\n   */\n  placeholder?: string;\n};\n\n/**\n * An autocomplete component that renders an input with filtered suggestions.\n * Unlike Combobox, the input accepts free-form text and suggestions are optional.\n * Built on top of Base UI's Autocomplete primitive.\n */\nexport const Autocomplete = <T = string,>({\n  size = \"md\",\n  invalid = false,\n  disabled = false,\n  readOnly = false,\n  placeholder,\n  classNames,\n  items,\n  ...props\n}: AutocompleteProps<T>) => {\n  const { resolveContainer } = usePortalConfig();\n  const portalContainer = resolveContainer();\n\n  return (\n    <div\n      data-slot=\"autocomplete-root\"\n      className={clsx(styles[\"root\"], classNames?.root)}\n    >\n      <BaseUIAutocomplete.Root<T>\n        items={items}\n        disabled={disabled}\n        readOnly={readOnly}\n        {...props}\n      >\n        <div\n          className={clsx(styles[\"control\"], classNames?.control)}\n          data-size={size}\n          data-invalid={invalid || undefined}\n          data-slot=\"autocomplete-control\"\n        >\n          <BaseUIAutocomplete.Input\n            className={clsx(styles[\"input\"], classNames?.input)}\n            data-slot=\"autocomplete-input\"\n            placeholder={placeholder}\n          />\n        </div>\n\n        <BaseUIAutocomplete.Portal container={portalContainer}>\n          <BaseUIAutocomplete.Positioner\n            className={clsx(styles[\"positioner\"], classNames?.positioner)}\n            data-slot=\"autocomplete-positioner\"\n            sideOffset={4}\n          >\n            <BaseUIAutocomplete.Popup\n              className={clsx(styles[\"popup\"], classNames?.popup)}\n              data-slot=\"autocomplete-popup\"\n            >\n              <BaseUIAutocomplete.Empty>\n                <div\n                  className={clsx(styles[\"empty\"], classNames?.empty)}\n                  data-slot=\"autocomplete-empty\"\n                >\n                  No results found.\n                </div>\n              </BaseUIAutocomplete.Empty>\n\n              <BaseUIAutocomplete.List\n                className={clsx(styles[\"list\"], classNames?.list)}\n                data-slot=\"autocomplete-list\"\n              >\n                {(itemOrGroup: AutocompleteItem<T> | AutocompleteGroup) => {\n                  if (\"items\" in itemOrGroup) {\n                    return (\n                      <BaseUIAutocomplete.Group\n                        className={clsx(styles[\"group\"], classNames?.group)}\n                        key={itemOrGroup.label}\n                        items={itemOrGroup.items}\n                        data-slot=\"autocomplete-group\"\n                      >\n                        <BaseUIAutocomplete.GroupLabel\n                          className={clsx(\n                            styles[\"group-label\"],\n                            classNames?.groupLabel,\n                          )}\n                          data-slot=\"autocomplete-group-label\"\n                        >\n                          {itemOrGroup.label}\n                        </BaseUIAutocomplete.GroupLabel>\n                        <BaseUIAutocomplete.Collection>\n                          {(item: AutocompleteItem<T>) => (\n                            <BaseUIAutocomplete.Item\n                              key={item.id}\n                              value={item}\n                              disabled={item.disabled}\n                              className={clsx(styles[\"item\"], classNames?.item)}\n                              data-slot=\"autocomplete-item\"\n                              data-size={size}\n                            >\n                              {item.label}\n                            </BaseUIAutocomplete.Item>\n                          )}\n                        </BaseUIAutocomplete.Collection>\n                      </BaseUIAutocomplete.Group>\n                    );\n                  }\n\n                  return (\n                    <BaseUIAutocomplete.Item\n                      key={itemOrGroup.id}\n                      value={itemOrGroup}\n                      disabled={itemOrGroup.disabled}\n                      className={clsx(styles[\"item\"], classNames?.item)}\n                      data-slot=\"autocomplete-item\"\n                      data-size={size}\n                    >\n                      {itemOrGroup.label}\n                    </BaseUIAutocomplete.Item>\n                  );\n                }}\n              </BaseUIAutocomplete.List>\n            </BaseUIAutocomplete.Popup>\n          </BaseUIAutocomplete.Positioner>\n        </BaseUIAutocomplete.Portal>\n      </BaseUIAutocomplete.Root>\n    </div>\n  );\n};\n"],"mappings":"qSAyEA,MAAaA,GAA6B,CACxC,OAAO,KACP,UAAU,GACV,WAAW,GACX,WAAW,GACX,cACA,aACA,QACA,GAAG,KACuB,CAC1B,GAAM,CAAE,oBAAqB,EAAgB,EACvC,EAAkB,EAAiB,EAEzC,OACE,EAAC,MAAD,CACE,YAAU,oBACV,UAAW,EAAKC,EAAO,KAAS,GAAY,IAAI,WAEhD,EAACC,EAAmB,KAApB,CACS,QACG,WACA,WACV,GAAI,WAJN,CAME,EAAC,MAAD,CACE,UAAW,EAAKD,EAAO,QAAY,GAAY,OAAO,EACtD,YAAW,EACX,eAAc,GAAW,IAAA,GACzB,YAAU,gCAEV,EAACC,EAAmB,MAApB,CACE,UAAW,EAAKD,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,qBACG,aACd,CAAA,CACE,CAAA,EAEL,EAACC,EAAmB,OAApB,CAA2B,UAAW,WACpC,EAACA,EAAmB,WAApB,CACE,UAAW,EAAKD,EAAO,WAAe,GAAY,UAAU,EAC5D,YAAU,0BACV,WAAY,WAEZ,EAACC,EAAmB,MAApB,CACE,UAAW,EAAKD,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,8BAFZ,CAIE,EAACC,EAAmB,MAApB,CAAA,SACE,EAAC,MAAD,CACE,UAAW,EAAKD,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,8BACX,mBAEI,CAAA,CACmB,CAAA,EAE1B,EAACC,EAAmB,KAApB,CACE,UAAW,EAAKD,EAAO,KAAS,GAAY,IAAI,EAChD,YAAU,6BAER,GACI,UAAW,EAEX,EAACC,EAAmB,MAApB,CACE,UAAW,EAAKD,EAAO,MAAU,GAAY,KAAK,EAElD,MAAO,EAAY,MACnB,YAAU,8BAJZ,CAME,EAACC,EAAmB,WAApB,CACE,UAAW,EACTD,EAAO,eACP,GAAY,UACd,EACA,YAAU,oCAET,EAAY,KACgB,CAAA,EAC/B,EAACC,EAAmB,WAApB,CAAA,SACI,GACA,EAACA,EAAmB,KAApB,CAEE,MAAO,EACP,SAAU,EAAK,SACf,UAAW,EAAKD,EAAO,KAAS,GAAY,IAAI,EAChD,YAAU,oBACV,YAAW,WAEV,EAAK,KACiB,EARlB,EAAK,EAQa,CAEE,CAAA,CACP,GA3BnB,EAAY,KA2BO,EAK5B,EAACC,EAAmB,KAApB,CAEE,MAAO,EACP,SAAU,EAAY,SACtB,UAAW,EAAKD,EAAO,KAAS,GAAY,IAAI,EAChD,YAAU,oBACV,YAAW,WAEV,EAAY,KACU,EARlB,EAAY,EAQM,CAGN,CAAA,CACD,GACG,CAAA,CACN,CAAA,CACJ,GACtB,CAAA,CAET"}

package/dist/atoms/autocomplete/autocomplete.module.js

@@ -0,0 +1,3 @@
+import './autocomplete.css';
+var e={control:`V4vGvW_control`,empty:`V4vGvW_empty`,group:`V4vGvW_group`,"group-label":`V4vGvW_group-label`,input:`V4vGvW_input`,item:`V4vGvW_item`,list:`V4vGvW_list`,popup:`V4vGvW_popup`,positioner:`V4vGvW_positioner`,root:`V4vGvW_root`};export{e as default};
+//# sourceMappingURL=autocomplete.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.module.js","names":[],"sources":["../../../src/atoms/autocomplete/autocomplete.module.css"],"sourcesContent":[".root {\n  width: 100%;\n  font-family: var(--typography-typeface-ltr);\n}\n\n.control {\n  --field-control-radius: var(--radius-md);\n  --field-control-bg-color: var(--color-surface-base);\n  --field-control-text-color: var(--color-content-neutral-base);\n  --field-control-border-color: var(--color-border-secondary);\n  --field-control-placeholder-color: var(--color-content-neutral-muted);\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n}\n\n.control[data-size=\"sm\"] {\n  --field-control-height: 1.5rem;\n  --field-control-font-size: var(--typography-caption-base-size);\n  --field-control-font-weight: var(--typography-caption-base-weight);\n}\n\n.control[data-size=\"md\"] {\n  --field-control-height: 2rem;\n  --field-control-font-size: var(--typography-body-2-size);\n  --field-control-font-weight: var(--typography-body-2-weight);\n}\n\n.control[data-size=\"lg\"] {\n  --field-control-height: 2.5rem;\n  --field-control-font-size: var(--typography-body-1-size);\n  --field-control-font-weight: var(--typography-body-1-weight);\n}\n\n.control[data-invalid] {\n  --field-control-border-color: var(--color-content-negative-base);\n  --field-control-text-color: var(--color-content-negative-base);\n}\n\n.input {\n  box-sizing: border-box;\n  padding: 0 var(--spacing-sm);\n  margin: 0;\n  border-radius: var(--field-control-radius);\n  border: 1px solid var(--field-control-border-color);\n  width: 100%;\n  height: var(--field-control-height);\n  font-family: var(--typography-typeface-ltr);\n  font-size: var(--field-control-font-size);\n  font-weight: var(--field-control-font-weight);\n  background-color: var(--field-control-bg-color);\n  color: var(--field-control-text-color);\n  transition: border-color 0.2s ease-in-out;\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--field-control-placeholder-color);\n}\n\n.input: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.positioner {\n  outline: 0;\n  z-index: var(--zindex-1);\n}\n\n.popup {\n  box-sizing: border-box;\n  background-color: var(--color-surface-base);\n  color: var(--color-content-neutral-base);\n  width: var(--anchor-width);\n  max-width: var(--available-width);\n  min-width: 12rem;\n  transition:\n    opacity 0.1s,\n    transform 0.1s;\n  transform-origin: var(--transform-origin);\n  border: 1px solid var(--color-border-primary);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.popup[data-starting-style],\n.popup[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.95);\n  font-family: var(--typography-typeface-ltr);\n}\n\n.list {\n  box-sizing: border-box;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding-block: var(--spacing-xs);\n  scroll-padding-block: var(--spacing-xs);\n  outline: 0;\n  max-height: min(22.5rem, var(--available-height));\n}\n\n.list[data-empty] {\n  padding: 0;\n}\n\n.group {\n  padding-block: var(--spacing-xs);\n}\n\n.group-label {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--typography-caption-base-size);\n  font-weight: var(--typography-subheading-2-weight);\n  color: var(--color-content-neutral-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.item {\n  box-sizing: border-box;\n  outline: 0;\n  cursor: default;\n  user-select: none;\n  padding-block: var(--spacing-sm);\n  padding-left: var(--spacing-md);\n  padding-right: var(--spacing-md);\n  display: flex;\n  align-items: center;\n  position: relative;\n  transition: background-color 0.1s;\n}\n\n.item[data-size=\"sm\"] {\n  font-size: var(--typography-caption-base-size);\n  font-weight: var(--typography-caption-base-weight);\n}\n\n.item[data-size=\"md\"] {\n  font-size: var(--typography-body-2-size);\n  font-weight: var(--typography-body-2-weight);\n}\n\n.item[data-size=\"lg\"] {\n  font-size: var(--typography-body-1-size);\n  font-weight: var(--typography-body-1-weight);\n}\n\n.item[data-highlighted] {\n  background-color: var(--color-surface-secondary);\n}\n\n.item[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.empty {\n  box-sizing: border-box;\n  padding: var(--spacing-md);\n  font-size: var(--typography-caption-base-size);\n  color: var(--color-content-neutral-muted);\n  text-align: center;\n}\n"],"mappings":""}

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

@@ -0,0 +1 @@
+import { Autocomplete, AutocompleteGroup, AutocompleteItem, AutocompleteProps } from "./autocomplete.js";

package/dist/atoms/autocomplete/index.js

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

package/dist/atoms/badge/badge.d.ts

@@ -0,0 +1,42 @@
+import { MergeElementProps } from "../../types.js";
+import { IconButtonProps } from "../icon-button/icon-button.js";
+//#region src/atoms/badge/badge.d.ts
+type BadgeAction = Omit<IconButtonProps, "aria-label" | "aria-labelledby"> & {
+  /**
+   * The label used for screen readers.
+   */
+  label: string;
+};
+type BadgeProps = Omit<MergeElementProps<"div", {
+  /**
+   * The classnames of the component.
+   */
+  classNames?: {
+    root: string;
+    icon: string;
+    text: string;
+    action: string;
+  };
+  /**
+   * The content of the badge.
+   */
+  text: string;
+  /**
+   * The icon data used for the badge.
+   */
+  iconData?: string;
+  /**
+   * The action button used in the badge.
+   */
+  action?: IconButtonProps;
+  /**
+   * The color scheme of the badge.
+   *
+   * @default "neutral"
+   */
+  color?: "neutral" | "brand" | "positive" | "negative" | "warn" | "info";
+}>, "children" | "aria-label" | "aria-labelledby" | "aria-describedby" | "defaultValue" | "defaultChecked">;
+declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Badge, BadgeAction, BadgeProps };
+//# sourceMappingURL=badge.d.ts.map

package/dist/atoms/badge/badge.js

@@ -0,0 +1,2 @@
+import{Icon as e}from"../icon/icon.js";import"../icon/index.js";import{IconButton as t}from"../icon-button/icon-button.js";import"../icon-button/index.js";import n from"./styles.module.js";import r from"clsx";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=o=>{let{ref:s,classNames:c,text:l,iconData:u,action:d,color:f=`neutral`,...p}=o,m=()=>u?i(`div`,{"aria-hidden":!0,"data-slot":`badge-icon`,className:r(n.icon,c?.icon),children:i(e,{data:u})}):null,h=()=>{if(!d)return null;let{label:e,...a}=d;return i(t,{...a,size:`sm`,variant:`ghost`,"data-slot":`badge-action`,className:r(n.action,c?.action),label:e})};return a(`div`,{...p,ref:s,"data-color":f,"data-slot":`badge-root`,className:r(n.root,c?.root),children:[m(),i(`span`,{"data-slot":`badge-text`,className:r(n.text,c?.text),children:l}),h()]})};export{o as Badge};
+//# sourceMappingURL=badge.js.map

package/dist/atoms/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":["classes"],"sources":["../../../src/atoms/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { MergeElementProps } from \"../../types\";\nimport { Icon } from \"../icon\";\nimport { IconButton, type IconButtonProps } from \"../icon-button\";\nimport classes from \"./styles.module.css\";\n\nexport type BadgeAction = Omit<\n  IconButtonProps,\n  \"aria-label\" | \"aria-labelledby\"\n> & {\n  /**\n   * The label used for screen readers.\n   */\n  label: string;\n};\n\nexport type BadgeProps = Omit<\n  MergeElementProps<\n    \"div\",\n    {\n      /**\n       * The classnames of the component.\n       */\n      classNames?: {\n        root: string;\n        icon: string;\n        text: string;\n        action: string;\n      };\n\n      /**\n       * The content of the badge.\n       */\n      text: string;\n\n      /**\n       * The icon data used for the badge.\n       */\n      iconData?: string;\n\n      /**\n       * The action button used in the badge.\n       */\n      action?: IconButtonProps;\n\n      /**\n       * The color scheme of the badge.\n       *\n       * @default \"neutral\"\n       */\n      color?: \"neutral\" | \"brand\" | \"positive\" | \"negative\" | \"warn\" | \"info\";\n    }\n  >,\n  | \"children\"\n  | \"aria-label\"\n  | \"aria-labelledby\"\n  | \"aria-describedby\"\n  | \"defaultValue\"\n  | \"defaultChecked\"\n>;\n\nexport const Badge = (props: BadgeProps) => {\n  const {\n    ref,\n    classNames,\n    text,\n    iconData,\n    action: secondaryAction,\n    color = \"neutral\",\n    ...otherProps\n  } = props;\n\n  const renderIcon = () => {\n    if (!iconData) return null;\n\n    return (\n      <div\n        aria-hidden\n        data-slot=\"badge-icon\"\n        className={clsx(classes[\"icon\"], classNames?.icon)}\n      >\n        <Icon data={iconData} />\n      </div>\n    );\n  };\n\n  const renderAction = () => {\n    if (!secondaryAction) return null;\n\n    const { label, ...etc } = secondaryAction;\n\n    return (\n      <IconButton\n        {...etc}\n        size=\"sm\"\n        variant=\"ghost\"\n        data-slot=\"badge-action\"\n        className={clsx(classes[\"action\"], classNames?.action)}\n        label={label}\n      />\n    );\n  };\n\n  return (\n    <div\n      {...otherProps}\n      ref={ref}\n      data-color={color}\n      data-slot=\"badge-root\"\n      className={clsx(classes[\"root\"], classNames?.root)}\n    >\n      {renderIcon()}\n      <span\n        data-slot=\"badge-text\"\n        className={clsx(classes[\"text\"], classNames?.text)}\n      >\n        {text}\n      </span>\n      {renderAction()}\n    </div>\n  );\n};\n"],"mappings":"mQA6DA,MAAa,EAAS,GAAsB,CAC1C,GAAM,CACJ,MACA,aACA,OACA,WACA,OAAQ,EACR,QAAQ,UACR,GAAG,GACD,EAEE,MACC,EAGH,EAAC,MAAD,CACE,cAAA,GACA,YAAU,aACV,UAAW,EAAKA,EAAQ,KAAS,GAAY,IAAI,WAEjD,EAAC,EAAD,CAAM,KAAM,CAAW,CAAA,CACpB,CAAA,EATe,KAalB,MAAqB,CACzB,GAAI,CAAC,EAAiB,OAAO,KAE7B,GAAM,CAAE,QAAO,GAAG,GAAQ,EAE1B,OACE,EAAC,EAAD,CACE,GAAI,EACJ,KAAK,KACL,QAAQ,QACR,YAAU,eACV,UAAW,EAAKA,EAAQ,OAAW,GAAY,MAAM,EAC9C,OACR,CAAA,CAEL,EAEA,OACE,EAAC,MAAD,CACE,GAAI,EACC,MACL,aAAY,EACZ,YAAU,aACV,UAAW,EAAKA,EAAQ,KAAS,GAAY,IAAI,WALnD,CAOG,EAAW,EACZ,EAAC,OAAD,CACE,YAAU,aACV,UAAW,EAAKA,EAAQ,KAAS,GAAY,IAAI,WAEhD,CACG,CAAA,EACL,EAAa,CACX,GAET"}

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

@@ -0,0 +1 @@
+import { Badge, BadgeAction, BadgeProps } from "./badge.js";

package/dist/atoms/badge/index.js

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

package/dist/atoms/badge/styles.css

@@ -0,0 +1 @@
+.gXomQa_root{--badge-background:transparent;--badge-border-color:transparent;vertical-align:middle;font-family:var(--typography-typeface-ltr);color:var(--color-content-neutral-base);background-color:var(--badge-background);box-shadow:0 0 0 1px var(--badge-border-color);border-radius:var(--radius-full);padding:var(--spacing-xs) var(--spacing-sm);align-items:center;gap:var(--spacing-sm);height:1.25rem;display:inline-flex}.gXomQa_root[data-color=neutral]{--badge-background:color-mix(in oklab, var(--color-neutral) 12.5%, transparent);--badge-border-color:color-mix(in oklab, var(--color-neutral) 25%, transparent)}.gXomQa_root[data-color=brand]{--badge-background:color-mix(in oklab, var(--color-brand) 12.5%, transparent);--badge-border-color:color-mix(in oklab, var(--color-brand) 50%, transparent)}.gXomQa_root[data-color=positive]{--badge-background:color-mix(in oklab, var(--color-positive) 12.5%, transparent);--badge-border-color:color-mix(in oklab, var(--color-positive) 50%, transparent)}.gXomQa_root[data-color=negative]{--badge-background:color-mix(in oklab, var(--color-negative) 12.5%, transparent);--badge-border-color:color-mix(in oklab, var(--color-negative) 50%, transparent)}.gXomQa_root[data-color=info]{--badge-background:color-mix(in oklab, var(--color-info) 12.5%, transparent);--badge-border-color:color-mix(in oklab, var(--color-info) 50%, transparent)}.gXomQa_root[data-color=warn]{--badge-background:color-mix(in oklab, var(--color-warn) 12.5%, transparent);--badge-border-color:color-mix(in oklab, var(--color-warn) 50%, transparent)}.gXomQa_text{font-size:var(--typography-caption-base-size);line-height:var(--leading-caption);white-space:nowrap;text-overflow:ellipsis;font-weight:400;overflow:hidden}.gXomQa_icon{flex-shrink:0;justify-content:center;align-items:center;width:1rem;max-width:1rem;height:1rem;max-height:1rem;display:flex}.gXomQa_action{flex-shrink:0;margin-inline-start:auto;margin-inline-end:calc(-1 * var(--spacing-sm))}

package/dist/atoms/badge/styles.module.js

@@ -0,0 +1,3 @@
+import './styles.css';
+var e={action:`gXomQa_action`,icon:`gXomQa_icon`,root:`gXomQa_root`,text:`gXomQa_text`};export{e as default};
+//# sourceMappingURL=styles.module.js.map

package/dist/atoms/badge/styles.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.js","names":[],"sources":["../../../src/atoms/badge/styles.module.css"],"sourcesContent":[".root {\n  --badge-background: transparent;\n  --badge-border-color: transparent;\n\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n\n  font-family: var(--typography-typeface-ltr);\n\n  color: var(--color-content-neutral-base);\n  background-color: var(--badge-background);\n  box-shadow: 0 0 0 1px var(--badge-border-color);\n  border-radius: var(--radius-full);\n  padding: var(--spacing-xs) var(--spacing-sm);\n\n  gap: var(--spacing-sm);\n  height: 1.25rem;\n}\n\n.root[data-color=\"neutral\"] {\n  --badge-background: color-mix(\n    in oklab,\n    var(--color-neutral) 12.5%,\n    transparent\n  );\n  --badge-border-color: color-mix(\n    in oklab,\n    var(--color-neutral) 25%,\n    transparent\n  );\n}\n\n.root[data-color=\"brand\"] {\n  --badge-background: color-mix(\n    in oklab,\n    var(--color-brand) 12.5%,\n    transparent\n  );\n  --badge-border-color: color-mix(\n    in oklab,\n    var(--color-brand) 50%,\n    transparent\n  );\n}\n\n.root[data-color=\"positive\"] {\n  --badge-background: color-mix(\n    in oklab,\n    var(--color-positive) 12.5%,\n    transparent\n  );\n  --badge-border-color: color-mix(\n    in oklab,\n    var(--color-positive) 50%,\n    transparent\n  );\n}\n\n.root[data-color=\"negative\"] {\n  --badge-background: color-mix(\n    in oklab,\n    var(--color-negative) 12.5%,\n    transparent\n  );\n  --badge-border-color: color-mix(\n    in oklab,\n    var(--color-negative) 50%,\n    transparent\n  );\n}\n\n.root[data-color=\"info\"] {\n  --badge-background: color-mix(in oklab, var(--color-info) 12.5%, transparent);\n  --badge-border-color: color-mix(in oklab, var(--color-info) 50%, transparent);\n}\n\n.root[data-color=\"warn\"] {\n  --badge-background: color-mix(in oklab, var(--color-warn) 12.5%, transparent);\n  --badge-border-color: color-mix(in oklab, var(--color-warn) 50%, transparent);\n}\n\n.text {\n  font-size: var(--typography-caption-base-size);\n  line-height: var(--leading-caption);\n  font-weight: 400;\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\n  width: 1rem;\n  height: 1rem;\n  max-width: 1rem;\n  max-height: 1rem;\n\n  flex-shrink: 0;\n}\n\n.action {\n  margin-inline-start: auto;\n  margin-inline-end: calc(-1 * var(--spacing-sm));\n\n  flex-shrink: 0;\n}\n"],"mappings":""}

package/dist/atoms/checkbox/checkbox.css

@@ -1 +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-negative-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_label--hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}

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

@@ -2,52 +2,36 @@ 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.
-   */
+  /** The size of the checkbox. @default "md" */size?: "sm" | "md" | "lg"; /** The text label accompanying the checkbox. */
   label: string;
   /**
-   * Whether to hide the label or not.
-   *
+   * Visually hides the label but keeps it accessible to screen readers.
    * @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()`.
-   *
+   * Whether the checkbox is in a visually invalid state.
    * @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.
-   */
+  invalid?: boolean; /** Additional CSS classes for styling. */
   classNames?: {
-    label?: string;
-    feedback?: string;
     root?: string;
-    error?: string;
     control?: string;
     indicator?: string;
-    checkIcon?: string;
-    minusIcon?: string;
+    label?: string;
   };
 };
-declare const Checkbox$1: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox$1: ({
+  size,
+  label,
+  hideLabel,
+  disabled,
+  required,
+  invalid,
+  readOnly,
+  classNames,
+  ...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

@@ -1,2 +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};
+import{Icon as e}from"../icon/icon.js";import"../icon/index.js";import t from"./checkbox.module.js";import n from"clsx";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Checkbox as a}from"@base-ui/react/checkbox";import{mdiCheckBold as o,mdiMinusThick as s}from"@mdi/js";const c=({size:c=`md`,label:l,hideLabel:u=!1,disabled:d=!1,required:f=!1,invalid:p,readOnly:m,classNames:h,...g})=>i(`label`,{"data-size":c,"data-disabled":d||void 0,"data-invalid":p||void 0,className:n(t.root,h?.root),"data-slot":`checkbox-root`,children:[r(a.Root,{...g,disabled:d,required:f,readOnly:m,"data-invalid":p||void 0,className:n(t.control,h?.control),"data-slot":`checkbox-control`,children:i(a.Indicator,{"data-slot":`checkbox-indicator`,className:n(t.indicator,h?.indicator),children:[r(e,{data:o,"data-slot":`checkbox-check-icon`,className:t[`check-icon`]}),r(e,{data:s,"data-slot":`checkbox-minus-icon`,className:t[`minus-icon`]})]})}),r(`span`,{className:n(t.label,u&&t[`label--hidden`],h?.label),"data-slot":`checkbox-label`,children:l})]});export{c as Checkbox};
 //# sourceMappingURL=checkbox.js.map

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

@@ -1 +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"}
+{"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\";\n\nexport type CheckboxProps = Omit<CheckboxRootProps, \"className\"> & {\n  /** The size of the checkbox. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** The text label accompanying the checkbox. */\n  label: string;\n  /**\n   * Visually hides the label but keeps it accessible to screen readers.\n   * @default false\n   */\n  hideLabel?: boolean;\n  /**\n   * Whether the checkbox is in a visually invalid state.\n   * @default false\n   */\n  invalid?: boolean;\n  /** Additional CSS classes for styling. */\n  classNames?: {\n    root?: string;\n    control?: string;\n    indicator?: string;\n    label?: string;\n  };\n};\n\nexport const Checkbox = ({\n  size = \"md\",\n  label,\n  hideLabel = false,\n  disabled = false,\n  required = false,\n  invalid,\n  readOnly,\n  classNames,\n  ...props\n}: CheckboxProps) => {\n  return (\n    <label\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-invalid={invalid || undefined}\n      className={clsx(styles[\"root\"], classNames?.root)}\n      data-slot=\"checkbox-root\"\n    >\n      <BaseUICheckbox.Root\n        {...props}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        data-invalid={invalid || undefined}\n        className={clsx(styles[\"control\"], classNames?.control)}\n        data-slot=\"checkbox-control\"\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={styles[\"check-icon\"]}\n          />\n          <Icon\n            data={mdiMinusThick}\n            data-slot=\"checkbox-minus-icon\"\n            className={styles[\"minus-icon\"]}\n          />\n        </BaseUICheckbox.Indicator>\n      </BaseUICheckbox.Root>\n\n      <span\n        className={clsx(\n          styles[\"label\"],\n          hideLabel && styles[\"label--hidden\"],\n          classNames?.label,\n        )}\n        data-slot=\"checkbox-label\"\n      >\n        {label}\n      </span>\n    </label>\n  );\n};\n"],"mappings":"uRAiCA,MAAaA,GAAY,CACvB,OAAO,KACP,QACA,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UACA,WACA,aACA,GAAG,KAGD,EAAC,QAAD,CACE,YAAW,EACX,gBAAe,GAAY,IAAA,GAC3B,eAAc,GAAW,IAAA,GACzB,UAAW,EAAKC,EAAO,KAAS,GAAY,IAAI,EAChD,YAAU,yBALZ,CAOE,EAACC,EAAe,KAAhB,CACE,GAAI,EACM,WACA,WACA,WACV,eAAc,GAAW,IAAA,GACzB,UAAW,EAAKD,EAAO,QAAY,GAAY,OAAO,EACtD,YAAU,4BAEV,EAACC,EAAe,UAAhB,CACE,YAAU,qBACV,UAAW,EAAKD,EAAO,UAAc,GAAY,SAAS,WAF5D,CAIE,EAAC,EAAD,CACE,KAAM,EACN,YAAU,sBACV,UAAWA,EAAO,aACnB,CAAA,EACD,EAAC,EAAD,CACE,KAAM,EACN,YAAU,sBACV,UAAWA,EAAO,aACnB,CAAA,CACuB,GACP,CAAA,EAErB,EAAC,OAAD,CACE,UAAW,EACTA,EAAO,MACP,GAAaA,EAAO,iBACpB,GAAY,KACd,EACA,YAAU,0BAET,CACG,CAAA,CACD"}

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

@@ -1,3 +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};
+var e={"check-icon":`PdmYxW_check-icon`,control:`PdmYxW_control`,indicator:`PdmYxW_indicator`,label:`PdmYxW_label`,"label--hidden":`PdmYxW_label--hidden`,"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":""}
+{"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-negative-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\n.label--hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

package/dist/atoms/checkbox-group/checkbox-group.css

@@ -0,0 +1 @@
+.bNzBPW_group{gap:var(--spacing-xs);flex-direction:column;display:flex}.bNzBPW_group[data-orientation=horizontal]{flex-flow:wrap}.bNzBPW_group[data-disabled]{cursor:not-allowed;opacity:.5;& *{cursor:not-allowed}}

package/dist/atoms/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,47 @@
+import { CheckboxGroupProps } from "@base-ui/react/checkbox-group";
+
+//#region src/atoms/checkbox-group/checkbox-group.d.ts
+/**
+ * Represents an item in the checkbox group.
+ */
+interface CheckboxGroupItem {
+  /** The value of the checkbox option. */
+  value: string;
+  /** The display label for the checkbox option. */
+  label: string;
+  /** Whether this option is disabled. */
+  disabled?: boolean;
+}
+type CheckboxGroupProps$1 = Omit<CheckboxGroupProps, "className"> & {
+  /** The items to render as checkbox options. */items: CheckboxGroupItem[]; /** The size applied to all checkbox items. @default "md" */
+  size?: "sm" | "md" | "lg";
+  /**
+   * The layout orientation of the checkbox group.
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * Whether the group is in a visually invalid state.
+   * @default false
+   */
+  invalid?: boolean; /** Additional CSS classes for styling. */
+  classNames?: {
+    root?: string;
+    item?: string;
+    itemControl?: string;
+    itemIndicator?: string;
+    itemLabel?: string;
+  };
+};
+declare const CheckboxGroup$1: ({
+  items,
+  size,
+  orientation,
+  invalid,
+  disabled,
+  classNames,
+  ...props
+}: CheckboxGroupProps$1) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { CheckboxGroup$1 as CheckboxGroup, CheckboxGroupItem, CheckboxGroupProps$1 as CheckboxGroupProps };
+//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/atoms/checkbox-group/checkbox-group.js

@@ -0,0 +1,2 @@
+import e from"./checkbox-group.module.js";import{Checkbox as t}from"../checkbox/checkbox.js";import"../checkbox/index.js";import n from"clsx";import{jsx as r}from"react/jsx-runtime";import{CheckboxGroup as i}from"@base-ui/react/checkbox-group";const a=({items:a,size:o=`md`,orientation:s=`vertical`,invalid:c,disabled:l=!1,classNames:u,...d})=>r(i,{...d,disabled:l,"data-size":o,"data-orientation":s,"data-invalid":c||void 0,className:n(e.group,u?.root),"data-slot":`checkbox-group`,children:a.map(e=>r(t,{value:e.value,label:e.label,disabled:e.disabled,size:o,invalid:c,classNames:{root:u?.item,control:u?.itemControl,indicator:u?.itemIndicator,label:u?.itemLabel}},e.value))});export{a as CheckboxGroup};
+//# sourceMappingURL=checkbox-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.js","names":["CheckboxGroup","BaseUICheckboxGroup","styles"],"sources":["../../../src/atoms/checkbox-group/checkbox-group.tsx"],"sourcesContent":["import {\n  CheckboxGroup as BaseUICheckboxGroup,\n  type CheckboxGroupProps as BaseUICheckboxGroupProps,\n} from \"@base-ui/react/checkbox-group\";\nimport clsx from \"clsx\";\nimport styles from \"./checkbox-group.module.css\";\nimport { Checkbox } from \"../checkbox\";\n\n/**\n * Represents an item in the checkbox group.\n */\nexport interface CheckboxGroupItem {\n  /** The value of the checkbox option. */\n  value: string;\n  /** The display label for the checkbox option. */\n  label: string;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n}\n\nexport type CheckboxGroupProps = Omit<BaseUICheckboxGroupProps, \"className\"> & {\n  /** The items to render as checkbox options. */\n  items: CheckboxGroupItem[];\n  /** The size applied to all checkbox items. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * The layout orientation of the checkbox group.\n   * @default \"vertical\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the group is in a visually invalid state.\n   * @default false\n   */\n  invalid?: boolean;\n  /** Additional CSS classes for styling. */\n  classNames?: {\n    root?: string;\n    item?: string;\n    itemControl?: string;\n    itemIndicator?: string;\n    itemLabel?: string;\n  };\n};\n\nexport const CheckboxGroup = ({\n  items,\n  size = \"md\",\n  orientation = \"vertical\",\n  invalid,\n  disabled = false,\n  classNames,\n  ...props\n}: CheckboxGroupProps) => {\n  return (\n    <BaseUICheckboxGroup\n      {...props}\n      disabled={disabled}\n      data-size={size}\n      data-orientation={orientation}\n      data-invalid={invalid || undefined}\n      className={clsx(styles[\"group\"], classNames?.root)}\n      data-slot=\"checkbox-group\"\n    >\n      {items.map(item => (\n        <Checkbox\n          key={item.value}\n          value={item.value}\n          label={item.label}\n          disabled={item.disabled}\n          size={size}\n          invalid={invalid}\n          classNames={{\n            root: classNames?.item,\n            control: classNames?.itemControl,\n            indicator: classNames?.itemIndicator,\n            label: classNames?.itemLabel,\n          }}\n        />\n      ))}\n    </BaseUICheckboxGroup>\n  );\n};\n"],"mappings":"oPA6CA,MAAaA,GAAiB,CAC5B,QACA,OAAO,KACP,cAAc,WACd,UACA,WAAW,GACX,aACA,GAAG,KAGD,EAACC,EAAD,CACE,GAAI,EACM,WACV,YAAW,EACX,mBAAkB,EAClB,eAAc,GAAW,IAAA,GACzB,UAAW,EAAKC,EAAO,MAAU,GAAY,IAAI,EACjD,YAAU,0BAET,EAAM,IAAI,GACT,EAAC,EAAD,CAEE,MAAO,EAAK,MACZ,MAAO,EAAK,MACZ,SAAU,EAAK,SACT,OACG,UACT,WAAY,CACV,KAAM,GAAY,KAClB,QAAS,GAAY,YACrB,UAAW,GAAY,cACvB,MAAO,GAAY,SACrB,CACD,EAZM,EAAK,KAYX,CACF,CACkB,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.module.js","names":[],"sources":["../../../src/atoms/checkbox-group/checkbox-group.module.css"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n}\n\n.group[data-orientation=\"horizontal\"] {\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n.group[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  & * {\n    cursor: not-allowed;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1 @@
+import { CheckboxGroup, CheckboxGroupItem, CheckboxGroupProps } from "./checkbox-group.js";

package/dist/atoms/checkbox-group/index.js

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

package/dist/atoms/combobox/combobox.css

@@ -1 +1 @@
-.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:0 0;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}
+.KAWYaW_root{width:100%}.KAWYaW_control{--field-control-radius:var(--radius-md);--field-control-bg-color:var(--color-surface-base);--field-control-text-color:var(--color-content-neutral-base);--field-control-border-color:var(--color-border-secondary);--field-control-placeholder-color:var(--color-content-neutral-muted);--field-label-color:var(--color-content-neutral-secondary);align-items:center;gap:var(--spacing-xs);border-radius:999px;width:100%;display:flex;position:relative}.KAWYaW_control[data-size=sm]{--field-control-height:1.5rem;--field-control-icon-size:1.5rem;--field-control-font-size:var(--typography-caption-base-size);--field-control-line-height:var(--typography-caption-base-height);--field-control-font-weight:var(--typography-caption-base-weight);--adornment-icon-size:1rem;--adornment-button-size:1.5rem;--input-group-gap:var(--spacing-xs);--combobox-chip-size:1rem}.KAWYaW_control[data-size=md]{--field-control-height:2rem;--field-control-icon-size:2rem;--field-control-font-size:var(--typography-body-2-size);--field-control-line-height:var(--typography-body-2-height);--field-control-font-weight:var(--typography-body-2-weight);--adornment-icon-size:1.5rem;--adornment-button-size:2rem;--input-group-gap:var(--spacing-xs);--combobox-chip-size:1rem}.KAWYaW_control[data-size=lg]{--field-control-height:2.5rem;--field-control-icon-size:2rem;--field-control-font-size:var(--typography-body-1-size);--field-control-line-height:var(--typography-body-1-height);--field-control-font-weight:var(--typography-body-1-weight);--adornment-icon-size:2rem;--adornment-button-size:2.5rem;--input-group-gap:var(--spacing-sm);--combobox-chip-size:1rem}.KAWYaW_control[data-invalid]{--field-control-border-color:var(--color-content-negative-base);--field-control-text-color:var(--color-content-negative-base)}.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_input-group{box-sizing:border-box;min-width:12rem;min-height:var(--field-control-height);border:1px solid var(--field-control-border-color);background-color:var(--field-control-bg-color);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-tertiary);--combobox-chip-color:var(--color-content-neutral-base);box-sizing:border-box;align-items:center;gap:var(--spacing-xxs);background-color:var(--combobox-chip-bg);color:var(--combobox-chip-color);padding:0 var(--spacing-sm);height:calc(var(--field-control-height) * .7);border-radius:var(--radius-sm);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);padding:var(--spacing-xxs);border-radius:var(--radius-full);background:0 0;border:none;justify-content:center;align-items:center;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);outline:0;grid-template-columns:1rem 1fr;align-items:center;transition:background-color .1s;display:grid;position:relative}.KAWYaW_item[data-size=sm]{font-size:var(--typography-caption-base-size);line-height:var(--typography-caption-base-height);font-weight:var(--typography-caption-base-weight)}.KAWYaW_item[data-size=md]{font-size:var(--typography-body-2-size);line-height:var(--typography-body-2-height);font-weight:var(--typography-body-2-weight)}.KAWYaW_item[data-size=lg]{font-size:var(--typography-body-1-size);line-height:var(--typography-body-1-height);font-weight:var(--typography-body-1-weight)}.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{visibility:hidden;grid-column-start:1;justify-content:center;align-items:center;display:flex}.KAWYaW_item[data-selected] .KAWYaW_item-indicator{visibility:visible}.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}

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

@@ -1,4 +1,3 @@
-import { FieldProps } from "../../internals/base-field/base-field.js";
 import { ComboboxItem } from "./components/item.js";
 import * as React$1 from "react";
 import { ComboboxRootProps } from "@base-ui/react/combobox";
@@ -16,7 +15,17 @@ interface ComboboxGroup {
 /**
  * Props for the Combobox component.
  */
-type ComboboxProps<T = string, Multiple extends boolean | undefined = false> = Pick<FieldProps, "label" | "hideLabel" | "name" | "required" | "description" | "invalid" | "errorText" | "dirty" | "size" | "disabled" | "autoFocus"> & ComboboxRootProps<T, Multiple> & {
+type ComboboxProps<T = string, Multiple extends boolean | undefined = false> = ComboboxRootProps<T, Multiple> & {
+  /**
+   * The size of the combobox.
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Whether the combobox is in an invalid state.
+   * @default false
+   */
+  invalid?: boolean;
   /**
    * Whether the combobox is clearable when a value is selected.
    * @default false
@@ -37,9 +46,6 @@ type ComboboxProps<T = string, Multiple extends boolean | undefined = false> = P
    */
   classNames?: {
     root?: string;
-    label?: string;
-    description?: string;
-    error?: string;
     control?: string;
     inputGroup?: string;
     startAdornment?: string;
@@ -90,15 +96,10 @@ type ComboboxProps<T = string, Multiple extends boolean | undefined = false> = P
  * ```
  */
 declare const Combobox$1: <T = string, Multiple extends boolean | undefined = false>({
-  label,
-  description,
   fullWidthContents,
   invalid,
-  errorText,
-  hideLabel,
   clearable,
   searchable,
-  required,
   size,
   readOnly,
   disabled,

package/dist/atoms/combobox/combobox.js

@@ -1,2 +1,2 @@
-import{usePortalConfig as e}from"../../helpers/portal/context/hooks.js";import"../../helpers/portal/index.js";import{Icon as t}from"../icon/icon.js";import"../icon/index.js";import{Field as n}from"../../internals/base-field/base-field.js";import"../../internals/base-field/index.js";import r from"./combobox.module.js";import{Chip as i}from"./components/chip.js";import{ItemRow as a}from"./components/item.js";import o from"clsx";import"react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{mdiChevronDown as u,mdiClose as d}from"@mdi/js";import{Combobox as f}from"@base-ui/react/combobox";const p=({label:p,description:m,fullWidthContents:h=!1,invalid:g=!1,errorText:_,hideLabel:v=!1,clearable:y=!1,searchable:b=!0,required:x=!1,size:S=`md`,readOnly:C=!1,disabled:w=!1,endAdornment:T,startAdornment:E,placeholder:D=`Select an option`,classNames:O,items:k,multiple:A,...j})=>{let{resolveContainer:M}=e(),N=M();return c(n,{label:p,hideLabel:v,size:S,disabled:w,required:x,errorText:_,invalid:g,description:m,classNames:{root:O?.root,label:O?.label,description:O?.description,error:O?.error},"data-slot":`combobox-root`,children:l(f.Root,{items:k,multiple:A,disabled:w,readOnly:C,...j,children:[c(`div`,{className:o(r.control,O?.control),"data-size":S,"data-slot":`combobox-control`,children:l(f.InputGroup,{className:o(r[`input-group`],O?.inputGroup),"data-slot":`combobox-input-group`,children:[E&&c(`div`,{className:o(r[`start-adornment`],O?.startAdornment),"data-slot":`combobox-start-adornment`,children:E}),A?c(f.Chips,{className:o(r.chips,O?.chips),"data-slot":`combobox-chips`,children:c(f.Value,{children:e=>l(s,{children:[e.map(e=>c(i,{item:e,classNames:{root:O?.chip,text:O?.chipText,remove:O?.chipRemove}},e.id)),c(f.Input,{className:o(r.input,O?.input),"data-slot":`combobox-input`,placeholder:e.length>0?``:D})]})})}):c(f.Input,{className:o(r.input,O?.input),"data-slot":`combobox-input`,placeholder:D}),l(`div`,{className:o(r[`action-buttons`],O?.actionButtons),"data-slot":`combobox-action-buttons`,children:[y&&c(f.Clear,{className:o(r.clear,O?.clear),"data-slot":`combobox-clear`,"aria-label":`Clear selection`,disabled:w,children:c(t,{data:d})}),c(f.Trigger,{className:o(r.trigger,O?.trigger),"data-slot":`combobox-trigger`,disabled:w,"aria-label":`Open dropdown`,children:c(t,{data:u})}),T&&c(`div`,{className:o(r[`end-adornment`],O?.endAdornment),"data-slot":`combobox-end-adornment`,children:T})]})]})}),c(f.Portal,{container:N,children:c(f.Positioner,{className:o(r.positioner,O?.positioner),"data-slot":`combobox-positioner`,sideOffset:4,children:l(f.Popup,{className:o(r.popup,O?.popup,{[r[`full-width`]]:h}),"data-slot":`combobox-popup`,children:[c(f.Empty,{children:c(`div`,{className:o(r.empty,O?.empty),"data-slot":`combobox-empty`,children:`No items found.`})}),c(f.List,{className:o(r.list,O?.list),"data-slot":`combobox-list`,children:e=>`items`in e?l(f.Group,{className:o(r.group,O?.group),items:e.items,"data-slot":`combobox-group`,children:[c(f.GroupLabel,{className:o(r[`group-label`],O?.groupLabel),"data-slot":`combobox-group-label`,children:e.label}),c(f.Collection,{children:e=>c(a,{className:O?.item,item:e},e.id)})]},e.label):c(a,{className:O?.item,item:e},e.id)})]})})})]})})};export{p as Combobox};
+import{usePortalConfig as e}from"../../helpers/portal/context/hooks.js";import"../../helpers/portal/index.js";import{Icon as t}from"../icon/icon.js";import"../icon/index.js";import n from"./combobox.module.js";import{Chip as r}from"./components/chip.js";import{ItemRow as i}from"./components/item.js";import a from"clsx";import"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";import{mdiChevronDown as l,mdiClose as u}from"@mdi/js";import{Combobox as d}from"@base-ui/react/combobox";const f=({fullWidthContents:f=!1,invalid:p=!1,clearable:m=!1,searchable:h=!0,size:g=`md`,readOnly:_=!1,disabled:v=!1,endAdornment:y,startAdornment:b,placeholder:x=`Select an option`,classNames:S,items:C,multiple:w,...T})=>{let{resolveContainer:E}=e(),D=E();return s(`div`,{"data-slot":`combobox-root`,className:a(n.root,S?.root),children:c(d.Root,{items:C,multiple:w,disabled:v,readOnly:_,...T,children:[s(`div`,{className:a(n.control,S?.control),"data-size":g,"data-invalid":p||void 0,"data-slot":`combobox-control`,children:c(d.InputGroup,{className:a(n[`input-group`],S?.inputGroup),"data-slot":`combobox-input-group`,children:[b&&s(`div`,{className:a(n[`start-adornment`],S?.startAdornment),"data-slot":`combobox-start-adornment`,children:b}),w?s(d.Chips,{className:a(n.chips,S?.chips),"data-slot":`combobox-chips`,children:s(d.Value,{children:e=>c(o,{children:[e.map(e=>s(r,{item:e,classNames:{root:S?.chip,text:S?.chipText,remove:S?.chipRemove}},e.id)),s(d.Input,{className:a(n.input,S?.input),"data-slot":`combobox-input`,placeholder:e.length>0?``:x})]})})}):s(d.Input,{className:a(n.input,S?.input),"data-slot":`combobox-input`,placeholder:x}),c(`div`,{className:a(n[`action-buttons`],S?.actionButtons),"data-slot":`combobox-action-buttons`,children:[m&&s(d.Clear,{className:a(n.clear,S?.clear),"data-slot":`combobox-clear`,"aria-label":`Clear selection`,disabled:v,children:s(t,{data:u})}),s(d.Trigger,{className:a(n.trigger,S?.trigger),"data-slot":`combobox-trigger`,disabled:v,"aria-label":`Open dropdown`,children:s(t,{data:l})}),y&&s(`div`,{className:a(n[`end-adornment`],S?.endAdornment),"data-slot":`combobox-end-adornment`,children:y})]})]})}),s(d.Portal,{container:D,children:s(d.Positioner,{className:a(n.positioner,S?.positioner),"data-slot":`combobox-positioner`,sideOffset:4,children:c(d.Popup,{className:a(n.popup,S?.popup,{[n[`full-width`]]:f}),"data-slot":`combobox-popup`,children:[s(d.Empty,{children:s(`div`,{className:a(n.empty,S?.empty),"data-slot":`combobox-empty`,children:`No items found.`})}),s(d.List,{className:a(n.list,S?.list),"data-slot":`combobox-list`,children:e=>`items`in e?c(d.Group,{className:a(n.group,S?.group),items:e.items,"data-slot":`combobox-group`,children:[s(d.GroupLabel,{className:a(n[`group-label`],S?.groupLabel),"data-slot":`combobox-group-label`,children:e.label}),s(d.Collection,{children:e=>s(i,{className:S?.item,item:e,size:g},e.id)})]},e.label):s(i,{className:S?.item,item:e,size:g},e.id)})]})})})]})})};export{f as Combobox};
 //# sourceMappingURL=combobox.js.map