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

package/dist/atoms/combobox/combobox.module.js

@@ -1,2 +1,3 @@
-var e={"action-buttons":`KAWYaW_action-buttons`,chip:`KAWYaW_chip`,"chip-remove":`KAWYaW_chip-remove`,"chip-text":`KAWYaW_chip-text`,chips:`KAWYaW_chips`,clear:`KAWYaW_clear`,control:`KAWYaW_control`,empty:`KAWYaW_empty`,"end-adornment":`KAWYaW_end-adornment`,"full-width":`KAWYaW_full-width`,group:`KAWYaW_group`,"group-label":`KAWYaW_group-label`,input:`KAWYaW_input`,"input-group":`KAWYaW_input-group`,item:`KAWYaW_item`,"item-indicator":`KAWYaW_item-indicator`,"item-text":`KAWYaW_item-text`,list:`KAWYaW_list`,popup:`KAWYaW_popup`,positioner:`KAWYaW_positioner`,"start-adornment":`KAWYaW_start-adornment`,trigger:`KAWYaW_trigger`};export{e as default};
+import './combobox.css';
+var e={"action-buttons":`KAWYaW_action-buttons`,chip:`KAWYaW_chip`,"chip-remove":`KAWYaW_chip-remove`,"chip-text":`KAWYaW_chip-text`,chips:`KAWYaW_chips`,clear:`KAWYaW_clear`,control:`KAWYaW_control`,empty:`KAWYaW_empty`,"end-adornment":`KAWYaW_end-adornment`,"full-width":`KAWYaW_full-width`,group:`KAWYaW_group`,"group-label":`KAWYaW_group-label`,input:`KAWYaW_input`,"input-group":`KAWYaW_input-group`,item:`KAWYaW_item`,"item-indicator":`KAWYaW_item-indicator`,"item-text":`KAWYaW_item-text`,list:`KAWYaW_list`,popup:`KAWYaW_popup`,positioner:`KAWYaW_positioner`,root:`KAWYaW_root`,"start-adornment":`KAWYaW_start-adornment`,trigger:`KAWYaW_trigger`};export{e as default};
 //# sourceMappingURL=combobox.module.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.module.js","names":[],"sources":["../../../src/atoms/combobox/combobox.module.css"],"sourcesContent":[".control {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n  position: relative;\n  width: 100%;\n}\n\n.start-adornment,\n.end-adornment {\n  display: flex;\n  align-items: center;\n  height: var(--field-control-icon-size);\n\n  & [data-slot=\"input-adornment-root\"] {\n    &[data-kind=\"icon\"] {\n      width: var(--adornment-icon-size);\n      height: var(--adornment-icon-size);\n      color: var(--field-label-color);\n    }\n    &[data-kind=\"button\"] {\n      width: var(--adornment-button-size);\n      height: var(--adornment-button-size);\n      color: var(--field-label-color);\n    }\n  }\n}\n\n.control[data-size=\"sm\"] {\n  --adornment-icon-size: 1rem;\n  --adornment-button-size: 1.5rem;\n  --input-group-gap: var(--spacing-xs);\n  --combobox-chip-size: 1rem;\n}\n.control[data-size=\"md\"] {\n  --adornment-icon-size: 1.5rem;\n  --adornment-button-size: 2rem;\n  --input-group-gap: var(--spacing-xs);\n  --combobox-chip-size: 1rem;\n}\n.control[data-size=\"lg\"] {\n  --adornment-icon-size: 2rem;\n  --adornment-button-size: 2.5rem;\n  --input-group-gap: var(--spacing-sm);\n  --combobox-chip-size: 1rem;\n}\n\n.input-group {\n  box-sizing: border-box;\n  position: relative;\n  flex: 1;\n  min-width: 12rem;\n  min-height: var(--field-control-height);\n  border: 1px solid var(--color-border-primary);\n  background-color: var(--color-surface-base);\n  border-radius: var(--field-control-radius);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--input-group-gap);\n  padding: 0 var(--spacing-sm);\n  transition: border-color 0.2s ease-in-out;\n}\n\n.input-group:focus-within {\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.input {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  border: none;\n  border-radius: 0;\n  flex: 1;\n  min-width: 4rem;\n  height: calc(var(--field-control-height) - 2px);\n  font-family: var(--typography-typeface-ltr);\n  font-size: var(--field-control-font-size);\n  line-height: var(--field-control-line-height);\n  font-weight: var(--field-control-font-weight);\n  background-color: transparent;\n  color: var(--field-control-text-color);\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--field-control-placeholder-color);\n}\n\n.input:focus {\n  outline: none;\n}\n\n.chips {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--spacing-xs);\n  padding: var(--spacing-xxs) 0;\n  flex: 1;\n}\n\n.chip {\n  --combobox-chip-bg: var(--color-surface-secondary);\n  --combobox-chip-color: var(--color-content-brand-secondary);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xxs);\n  background-color: var(--combobox-chip-bg);\n  color: var(--combobox-chip-color);\n  border: 1px solid var(--combobox-chip-color);\n  padding: 0 var(--spacing-sm);\n  height: calc(var(--field-control-height) * 0.7);\n  border-radius: var(--radius-full);\n  font-size: var(--typography-caption-base-size);\n  outline: none;\n  cursor: default;\n}\n\n.chip[data-highlighted] {\n  background-color: var(--color-action-neutral-muted);\n}\n\n.chip-text {\n  white-space: nowrap;\n  color: var(--combobox-chip-color);\n}\n\n.chip-remove {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  color: var(--combobox-chip-color);\n  background-color: var(--combobox-chip-bg);\n  cursor: pointer;\n  border-radius: 50%;\n  transition: background-color 0.1s;\n  height: var(--combobox-chip-size);\n  width: var(--combobox-chip-size);\n}\n\n.chip-remove:hover {\n  --combobox-chip-bg: var(--color-surface-tertiary);\n}\n\n.action-buttons {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xxs);\n  margin-left: auto;\n  padding-left: var(--spacing-sm);\n  height: 100%;\n}\n\n.trigger,\n.clear {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--field-control-icon-size);\n  height: var(--field-control-icon-size);\n  color: var(--field-label-color);\n  border: none;\n  padding: 0;\n  background: none;\n  border-radius: var(--radius-full);\n  transition:\n    color 0.1s,\n    background-color 0.1s;\n}\n\n.trigger:hover,\n.clear:hover {\n  color: var(--color-content-neutral-base);\n  background-color: var(--color-surface-secondary);\n}\n\n.trigger:focus-visible,\n.clear: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.trigger[data-disabled],\n.clear[data-disabled] {\n  cursor: not-allowed;\n  user-select: none;\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.full-width {\n  width: 100%;\n}\n\n.popup[data-starting-style],\n.popup[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.95);\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: grid;\n  gap: var(--spacing-sm);\n  align-items: center;\n  grid-template-columns: 1rem 1fr;\n  font-size: var(--field-control-font-size);\n  line-height: var(--field-control-line-height);\n  font-weight: var(--field-control-font-weight);\n  position: relative;\n  transition: background-color 0.1s;\n}\n\n.item[data-highlighted] {\n  background-color: var(--color-surface-secondary);\n}\n\n.item[data-selected] {\n  color: var(--color-content-brand-base);\n  font-weight: var(--typography-subheading-2-weight);\n}\n\n.item[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.item-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  grid-column-start: 1;\n}\n\n.item-text {\n  grid-column-start: 2;\n}\n\n.empty {\n  box-sizing: border-box;\n  padding: var(--spacing-md);\n  font-size: var(--field-control-font-size);\n  color: var(--color-content-neutral-muted);\n  text-align: center;\n}\n"],"mappings":"AA4CA,IAAA,EAAa,CAAA,iBAAe,wBAAA,KAAA,cAAA,cAAA,qBAAA,YAAA,mBAAA,MAAA,eAAA,MAAA,eAAA,QAAA,iBAAA,MAAA,eAAA,gBAAA,uBAAA,aAAA,oBAAA,MAAA,eAAA,cAAA,qBAAA,MAAA,eAAA,cAAA,qBAAA,KAAA,cAAA,iBAAA,wBAAA,YAAA,mBAAA,KAAA,cAAA,MAAA,eAAA,WAAA,oBAAA,kBAAA,yBAAA,QAAA,gBAAA"}
+{"version":3,"file":"combobox.module.js","names":[],"sources":["../../../src/atoms/combobox/combobox.module.css"],"sourcesContent":[".root {\n  width: 100%;\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  --field-label-color: var(--color-content-neutral-secondary);\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n  position: relative;\n  width: 100%;\n  border-radius: 999px;\n}\n\n.control[data-size=\"sm\"] {\n  --field-control-height: 1.5rem;\n  --field-control-icon-size: 1.5rem;\n  --field-control-font-size: var(--typography-caption-base-size);\n  --field-control-line-height: var(--typography-caption-base-height);\n  --field-control-font-weight: var(--typography-caption-base-weight);\n  --adornment-icon-size: 1rem;\n  --adornment-button-size: 1.5rem;\n  --input-group-gap: var(--spacing-xs);\n  --combobox-chip-size: 1rem;\n}\n.control[data-size=\"md\"] {\n  --field-control-height: 2rem;\n  --field-control-icon-size: 2rem;\n  --field-control-font-size: var(--typography-body-2-size);\n  --field-control-line-height: var(--typography-body-2-height);\n  --field-control-font-weight: var(--typography-body-2-weight);\n  --adornment-icon-size: 1.5rem;\n  --adornment-button-size: 2rem;\n  --input-group-gap: var(--spacing-xs);\n  --combobox-chip-size: 1rem;\n}\n.control[data-size=\"lg\"] {\n  --field-control-height: 2.5rem;\n  --field-control-icon-size: 2rem;\n  --field-control-font-size: var(--typography-body-1-size);\n  --field-control-line-height: var(--typography-body-1-height);\n  --field-control-font-weight: var(--typography-body-1-weight);\n  --adornment-icon-size: 2rem;\n  --adornment-button-size: 2.5rem;\n  --input-group-gap: var(--spacing-sm);\n  --combobox-chip-size: 1rem;\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.start-adornment,\n.end-adornment {\n  display: flex;\n  align-items: center;\n  height: var(--field-control-icon-size);\n\n  & [data-slot=\"input-adornment-root\"] {\n    &[data-kind=\"icon\"] {\n      width: var(--adornment-icon-size);\n      height: var(--adornment-icon-size);\n      color: var(--field-label-color);\n    }\n    &[data-kind=\"button\"] {\n      width: var(--adornment-button-size);\n      height: var(--adornment-button-size);\n      color: var(--field-label-color);\n    }\n  }\n}\n\n.input-group {\n  box-sizing: border-box;\n  position: relative;\n  flex: 1;\n  min-width: 12rem;\n  min-height: var(--field-control-height);\n  border: 1px solid var(--field-control-border-color);\n  background-color: var(--field-control-bg-color);\n  border-radius: var(--field-control-radius);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--input-group-gap);\n  padding: 0 var(--spacing-sm);\n  transition: border-color 0.2s ease-in-out;\n}\n\n.input-group:focus-within {\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.input {\n  box-sizing: border-box;\n  border-radius: 999px;\n  padding: 0;\n  margin: 0;\n  border: none;\n  border-radius: 0;\n  flex: 1;\n  min-width: 4rem;\n  height: calc(var(--field-control-height) - 2px);\n  font-family: var(--typography-typeface-ltr);\n  font-size: var(--field-control-font-size);\n  line-height: var(--field-control-line-height);\n  font-weight: var(--field-control-font-weight);\n  background-color: transparent;\n  color: var(--field-control-text-color);\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--field-control-placeholder-color);\n}\n\n.input:focus {\n  outline: none;\n}\n\n.chips {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--spacing-xs);\n  padding: var(--spacing-xxs) 0;\n  flex: 1;\n}\n\n.chip {\n  --combobox-chip-bg: var(--color-surface-tertiary);\n  --combobox-chip-color: var(--color-content-neutral-base);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xxs);\n  background-color: var(--combobox-chip-bg);\n  color: var(--combobox-chip-color);\n  padding: 0 var(--spacing-sm);\n  height: calc(var(--field-control-height) * 0.7);\n  border-radius: var(--radius-sm);\n  font-size: var(--typography-caption-base-size);\n  outline: none;\n  cursor: default;\n}\n\n.chip[data-highlighted] {\n  background-color: var(--color-action-neutral-muted);\n}\n\n.chip-text {\n  white-space: nowrap;\n  color: var(--combobox-chip-color);\n}\n\n.chip-remove {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  color: var(--combobox-chip-color);\n  background-color: var(--combobox-chip-bg);\n  cursor: pointer;\n  border-radius: 50%;\n  transition: background-color 0.1s;\n  height: var(--combobox-chip-size);\n  width: var(--combobox-chip-size);\n}\n\n.chip-remove:hover {\n  --combobox-chip-bg: var(--color-surface-tertiary);\n}\n\n.action-buttons {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xxs);\n  margin-left: auto;\n  padding-left: var(--spacing-sm);\n  height: 100%;\n}\n\n.trigger,\n.clear {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--field-control-icon-size);\n  height: var(--field-control-icon-size);\n  color: var(--field-label-color);\n  border: none;\n  padding: var(--spacing-xxs);\n  background: none;\n  border-radius: var(--radius-full);\n  transition:\n    color 0.1s,\n    background-color 0.1s;\n}\n\n.trigger:hover,\n.clear:hover {\n  color: var(--color-content-neutral-base);\n  background-color: var(--color-surface-secondary);\n}\n\n.trigger:focus-visible,\n.clear: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.trigger[data-disabled],\n.clear[data-disabled] {\n  cursor: not-allowed;\n  user-select: none;\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.full-width {\n  width: 100%;\n}\n\n.popup[data-starting-style],\n.popup[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.95);\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: grid;\n  gap: var(--spacing-sm);\n  align-items: center;\n  grid-template-columns: 1rem 1fr;\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  line-height: var(--typography-caption-base-height);\n  font-weight: var(--typography-caption-base-weight);\n}\n\n.item[data-size=\"md\"] {\n  font-size: var(--typography-body-2-size);\n  line-height: var(--typography-body-2-height);\n  font-weight: var(--typography-body-2-weight);\n}\n\n.item[data-size=\"lg\"] {\n  font-size: var(--typography-body-1-size);\n  line-height: var(--typography-body-1-height);\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-selected] {\n  color: var(--color-content-brand-base);\n  font-weight: var(--typography-subheading-2-weight);\n}\n\n.item[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.item-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  grid-column-start: 1;\n  visibility: hidden;\n}\n\n.item[data-selected] .item-indicator {\n  visibility: visible;\n}\n\n.item-text {\n  grid-column-start: 2;\n}\n\n.empty {\n  box-sizing: border-box;\n  padding: var(--spacing-md);\n  font-size: var(--field-control-font-size);\n  color: var(--color-content-neutral-muted);\n  text-align: center;\n}\n"],"mappings":""}

package/dist/atoms/combobox/components/item.js

@@ -1,2 +1,2 @@
-import{Text as e}from"../../text/text.js";import"../../text/index.js";import{Icon as t}from"../../icon/icon.js";import"../../icon/index.js";import n from"../combobox.module.js";import r from"clsx";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{mdiCheck as o}from"@mdi/js";import{Combobox as s}from"@base-ui/react/combobox";function c({item:c,className:l}){return a(s.Item,{value:c,className:r(n.item,l),"data-slot":`combobox-item`,disabled:c.disabled,children:[i(s.ItemIndicator,{className:n[`item-indicator`],"data-slot":`combobox-item-indicator`,children:i(t,{data:o})}),i(e,{as:`span`,variant:`body1`,className:n[`item-text`],"data-slot":`combobox-item-text`,children:c.label})]})}export{c as ItemRow};
+import{Text as e}from"../../text/text.js";import"../../text/index.js";import{Icon as t}from"../../icon/icon.js";import"../../icon/index.js";import n from"../combobox.module.js";import r from"clsx";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{mdiCheck as o}from"@mdi/js";import{Combobox as s}from"@base-ui/react/combobox";function c({item:c,className:l,size:u}){return a(s.Item,{value:c,className:r(n.item,l),"data-slot":`combobox-item`,"data-size":u,disabled:c.disabled,children:[i(s.ItemIndicator,{className:n[`item-indicator`],"data-slot":`combobox-item-indicator`,keepMounted:!0,children:i(t,{data:o})}),i(e,{as:`span`,variant:`body1`,className:n[`item-text`],"data-slot":`combobox-item-text`,children:c.label})]})}export{c as ItemRow};
 //# sourceMappingURL=item.js.map

package/dist/atoms/combobox/components/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","names":["BaseUICombobox","styles"],"sources":["../../../../src/atoms/combobox/components/item.tsx"],"sourcesContent":["import { Combobox as BaseUICombobox } from \"@base-ui/react/combobox\";\nimport { Icon } from \"../../icon\";\nimport { mdiCheck } from \"@mdi/js\";\nimport { Text } from \"../../text\";\nimport clsx from \"clsx\";\nimport styles from \"../combobox.module.css\";\n\n/**\n * Represents an item in the combobox.\n */\nexport interface ComboboxItem<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\nexport function ItemRow<T>({\n  item,\n  className,\n}: {\n  item: ComboboxItem<T>;\n  className?: string;\n}) {\n  return (\n    <BaseUICombobox.Item\n      value={item}\n      className={clsx(styles[\"item\"], className)}\n      data-slot=\"combobox-item\"\n      disabled={item.disabled}\n    >\n      <BaseUICombobox.ItemIndicator\n        className={styles[\"item-indicator\"]}\n        data-slot=\"combobox-item-indicator\"\n      >\n        <Icon data={mdiCheck} />\n      </BaseUICombobox.ItemIndicator>\n      <Text\n        as=\"span\"\n        variant=\"body1\"\n        className={styles[\"item-text\"]}\n        data-slot=\"combobox-item-text\"\n      >\n        {item.label}\n      </Text>\n    </BaseUICombobox.Item>\n  );\n}\n"],"mappings":"6UAqBA,SAAgB,EAAW,CACzB,OACA,aAIC,CACD,OACE,EAACA,EAAe,KAAhB,CACE,MAAO,EACP,UAAW,EAAKC,EAAO,KAAS,CAAS,EACzC,YAAU,gBACV,SAAU,EAAK,kBAJjB,CAME,EAACD,EAAe,cAAhB,CACE,UAAWC,EAAO,kBAClB,YAAU,mCAEV,EAAC,EAAD,CAAM,KAAM,CAAW,CAAA,CACK,CAAA,EAC9B,EAAC,EAAD,CACE,GAAG,OACH,QAAQ,QACR,UAAWA,EAAO,aAClB,YAAU,8BAET,EAAK,KACF,CAAA,CACa,GAEzB"}
+{"version":3,"file":"item.js","names":["BaseUICombobox","styles"],"sources":["../../../../src/atoms/combobox/components/item.tsx"],"sourcesContent":["import { Combobox as BaseUICombobox } from \"@base-ui/react/combobox\";\nimport { Icon } from \"../../icon\";\nimport { mdiCheck } from \"@mdi/js\";\nimport { Text } from \"../../text\";\nimport clsx from \"clsx\";\nimport styles from \"../combobox.module.css\";\n\n/**\n * Represents an item in the combobox.\n */\nexport interface ComboboxItem<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\nexport function ItemRow<T>({\n  item,\n  className,\n  size,\n}: {\n  item: ComboboxItem<T>;\n  className?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n}) {\n  return (\n    <BaseUICombobox.Item\n      value={item}\n      className={clsx(styles[\"item\"], className)}\n      data-slot=\"combobox-item\"\n      data-size={size}\n      disabled={item.disabled}\n    >\n      <BaseUICombobox.ItemIndicator\n        className={styles[\"item-indicator\"]}\n        data-slot=\"combobox-item-indicator\"\n        keepMounted\n      >\n        <Icon data={mdiCheck} />\n      </BaseUICombobox.ItemIndicator>\n      <Text\n        as=\"span\"\n        variant=\"body1\"\n        className={styles[\"item-text\"]}\n        data-slot=\"combobox-item-text\"\n      >\n        {item.label}\n      </Text>\n    </BaseUICombobox.Item>\n  );\n}\n"],"mappings":"6UAqBA,SAAgB,EAAW,CACzB,OACA,YACA,QAKC,CACD,OACE,EAACA,EAAe,KAAhB,CACE,MAAO,EACP,UAAW,EAAKC,EAAO,KAAS,CAAS,EACzC,YAAU,gBACV,YAAW,EACX,SAAU,EAAK,kBALjB,CAOE,EAACD,EAAe,cAAhB,CACE,UAAWC,EAAO,kBAClB,YAAU,0BACV,YAAA,YAEA,EAAC,EAAD,CAAM,KAAM,CAAW,CAAA,CACK,CAAA,EAC9B,EAAC,EAAD,CACE,GAAG,OACH,QAAQ,QACR,UAAWA,EAAO,aAClB,YAAU,8BAET,EAAK,KACF,CAAA,CACa,GAEzB"}

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

@@ -1 +1,2 @@
+import { ComboboxItem } from "./components/item.js";
 import { Combobox, ComboboxGroup, ComboboxProps } from "./combobox.js";

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

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

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

@@ -1,2 +1,3 @@
+import './context-menu.css';
 var e={chevron:`K6vv9G_chevron`,"group-label":`K6vv9G_group-label`,item:`K6vv9G_item`,popup:`K6vv9G_popup`,separator:`K6vv9G_separator`};export{e as default};
 //# sourceMappingURL=context-menu.module.js.map

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

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

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

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

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

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

package/dist/atoms/icon-button/icon-button.css

@@ -1,12 +1 @@
-.fESXeq_root {
-  width: var(--btn-height);
-  padding: 0;
-}
-
-.fESXeq_icon {
-  width: var(--btn-icon-size);
-  height: var(--btn-icon-size);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
+.fESXeq_root{width:var(--btn-height);padding:0}.fESXeq_icon{width:var(--btn-icon-size);height:var(--btn-icon-size);justify-content:center;align-items:center;display:flex}

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

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

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

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

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

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

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

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

package/dist/atoms/index.d.ts

@@ -1,17 +1,32 @@
 import { AlertDialog, AlertDialogProps } from "./alert-dialog/alert-dialog.js";
+import { Autocomplete, AutocompleteGroup, AutocompleteItem, AutocompleteProps } from "./autocomplete/autocomplete.js";
+import { Avatar, AvatarProps } from "./avatar/avatar.js";
+import { IconButton, IconButtonProps } from "./icon-button/icon-button.js";
+import { Badge, BadgeAction, BadgeProps } from "./badge/badge.js";
 import { Button, ButtonProps } from "./button/button.js";
+import { CheckboxGroup, CheckboxGroupItem, CheckboxGroupProps } from "./checkbox-group/checkbox-group.js";
 import { Checkbox, CheckboxProps } from "./checkbox/checkbox.js";
+import { ClickableArea, ClickableAreaProps } from "./clickable-area/clickable-area.js";
+import { Collapsible } from "./collapsible/collapsible.js";
+import { ComboboxItem } from "./combobox/components/item.js";
 import { Combobox, ComboboxGroup, ComboboxProps } from "./combobox/combobox.js";
+import { ConditionGuard, ConditionGuardProps } from "./condition-guard/condition-guard.js";
 import { ContextMenu } from "./context-menu/context-menu.js";
 import { Dialog, DialogProps } from "./dialog/dialog.js";
 import { Icon, IconProps } from "./icon/icon.js";
-import { IconButton, IconButtonProps } from "./icon-button/icon-button.js";
 import { Input, InputProps } from "./input/input.js";
-import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio/radio.js";
+import { BaseItem, CheckboxItem, GroupItem, Menu, MenuItemsByMode, MenuMode, MenuProps, NormalItem, RadioItem, SeparatorItem, SubmenuItem } from "./menu/menu.js";
+import { Menubar, MenubarProps } from "./menubar/menubar.js";
+import { Notice, NoticeProps } from "./notice/notice.js";
+import { Radio, RadioProps } from "./radio/radio.js";
+import { RadioGroup, RadioGroupItem, RadioGroupProps } from "./radio-group/radio-group.js";
+import { SelectItem } from "./select/components/item.js";
+import { Select, SelectGroup, SelectProps } from "./select/select.js";
+import { Slider, SliderProps } from "./slider/slider.js";
+import { Stepper, StepperProps } from "./stepper/stepper.js";
 import { Switch, SwitchProps } from "./switch/switch.js";
 import { Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsTab, TabsTabProps } from "./tabs/tabs.js";
 import { TabsListState, TabsPanelState, TabsRootChangeEventDetails, TabsRootState, TabsTabState, TabsTabValue } from "./tabs/index.js";
 import { Text, TextColor, TextProps, TextVariant } from "./text/text.js";
 import { Toast, ToastData, ToastProps } from "./toast/toast.js";
-import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./tooltip/tooltip.js";
-import { ConditionGuard, ConditionGuardProps } from "./condition-guard/condition-guard.js";
+import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./tooltip/tooltip.js";

package/dist/atoms/index.js

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

package/dist/atoms/input/input.css

@@ -1,29 +1 @@
-.uLevqq_control {
-  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: inherit;
-  font-size: var(--field-control-font-size, var(--typography-body-2-size));
-  line-height: var(--field-control-line-height, var(--typography-body-2-height));
-  font-weight: var(--field-control-font-weight, var(--typography-body-2-weight));
-  background-color: var(--field-control-bg-color);
-  color: var(--field-control-text-color);
-  font-family: var(--typography-typeface-ltr);
-  margin: 0;
-  transition: border-color .2s ease-in-out;
-
-  &::placeholder {
-    color: var(--field-control-placeholder-color);
-    font-family: var(--typography-typeface-ltr);
-  }
-
-  &:focus-visible {
-    outline-style: solid;
-    outline-width: var(--stroke-focus-ring);
-    outline-color: var(--color-action-info-base);
-    outline-offset: var(--spacing-xxs);
-  }
-}
+.uLevqq_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);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:inherit;font-size:var(--field-control-font-size,var(--typography-body-2-size));line-height:var(--field-control-line-height,var(--typography-body-2-height));font-weight:var(--field-control-font-weight,var(--typography-body-2-weight));background-color:var(--field-control-bg-color);color:var(--field-control-text-color);font-family:var(--typography-typeface-ltr);margin:0;transition:border-color .2s ease-in-out;&::placeholder{color:var(--field-control-placeholder-color);font-family:var(--typography-typeface-ltr)}&:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}}.uLevqq_control[data-size=sm]{--field-control-height: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)}.uLevqq_control[data-size=md]{--field-control-height: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)}.uLevqq_control[data-size=lg]{--field-control-height:2.5rem;--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)}.uLevqq_control[data-invalid]{--field-control-border-color:var(--color-content-negative-base);--field-control-text-color:var(--color-content-neutral-muted)}

package/dist/atoms/input/input.d.ts

@@ -1,36 +1,35 @@
-import { FieldProps } from "../../internals/base-field/base-field.js";
 import { InputProps } from "@base-ui/react/input";
 
 //#region src/atoms/input/input.d.ts
-type InputProps$1 = Omit<InputProps, "size" | "className"> & Pick<FieldProps, "label" | "hideLabel" | "name" | "required" | "description" | "invalid" | "errorText" | "dirty" | "size" | "disabled" | "autoFocus"> & {
+type InputProps$1 = Omit<InputProps, "size" | "className"> & {
+  /**
+   * The size of the input.
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Whether the input is in an invalid state.
+   * @default false
+   */
+  invalid?: boolean;
   /**
    * Additional CSS classes for styling.
    */
   classNames?: {
     root?: string;
-    label?: string;
-    description?: string;
-    error?: string;
     control?: string;
   };
 };
 /**
- * An input component with built-in labeling, validation, and theming.
- * Built on top of Base UI's Input component and the internal Field component.
+ * A bare input component without field wrapping (no label/error/description).
+ * Use `InputField` for the full field experience.
  */
 declare function Input$1({
-  label,
-  hideLabel,
   size,
   disabled,
   required,
-  name,
-  description,
   invalid,
-  errorText,
-  dirty,
   readOnly,
-  autoFocus,
   classNames,
   ...props
 }: InputProps$1): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/input/input.js

@@ -1,2 +1,2 @@
-import{Field as e}from"../../internals/base-field/base-field.js";import"../../internals/base-field/index.js";import t from"./input.module.js";import n from"clsx";import{jsx as r}from"react/jsx-runtime";import{Input as i}from"@base-ui/react/input";function a({label:a,hideLabel:o=!1,size:s=`md`,disabled:c=!1,required:l=!1,name:u,description:d,invalid:f,errorText:p,dirty:m,readOnly:h,autoFocus:g,classNames:_,...v}){return r(e,{label:a,hideLabel:o,size:s,disabled:c,required:l,errorText:p,invalid:f,description:d,classNames:{root:_?.root,label:_?.label,description:_?.description,error:_?.error},"data-slot":`input-root`,children:r(i,{disabled:c,required:l,readOnly:h,"data-slot":`input-control`,className:n(t.control,_?.control),...v})})}export{a as Input};
+import e from"./input.module.js";import t from"clsx";import{jsx as n}from"react/jsx-runtime";import{Input as r}from"@base-ui/react/input";function i({size:i=`md`,disabled:a=!1,required:o=!1,invalid:s=!1,readOnly:c,classNames:l,...u}){return n(r,{disabled:a,required:o,readOnly:c,"data-slot":`input-control`,"data-size":i,"data-invalid":s||void 0,className:t(e.control,l?.control),...u})}export{i as Input};
 //# sourceMappingURL=input.js.map

package/dist/atoms/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["Input","BaseInput","styles"],"sources":["../../../src/atoms/input/input.tsx"],"sourcesContent":["import {\n  Input as BaseInput,\n  type InputProps as BaseInputProps,\n} from \"@base-ui/react/input\";\nimport { Field, type FieldProps } from \"../../internals/base-field\";\nimport clsx from \"clsx\";\nimport styles from \"./input.module.css\";\n\nexport type InputProps = Omit<BaseInputProps, \"size\" | \"className\"> &\n  Pick<\n    FieldProps,\n    | \"label\"\n    | \"hideLabel\"\n    | \"name\"\n    | \"required\"\n    | \"description\"\n    | \"invalid\"\n    | \"errorText\"\n    | \"dirty\"\n    | \"size\"\n    | \"disabled\"\n    | \"autoFocus\"\n  > & {\n    /**\n     * Additional CSS classes for styling.\n     */\n    classNames?: {\n      root?: string;\n      label?: string;\n      description?: string;\n      error?: string;\n      control?: string;\n    };\n  };\n\n/**\n * An input component with built-in labeling, validation, and theming.\n * Built on top of Base UI's Input component and the internal Field component.\n */\nexport function Input({\n  label,\n  hideLabel = false,\n  size = \"md\",\n  disabled = false,\n  required = false,\n  name,\n  description,\n  invalid,\n  errorText,\n  dirty,\n  readOnly,\n  autoFocus,\n  classNames,\n  ...props\n}: InputProps) {\n  return (\n    <Field\n      label={label}\n      hideLabel={hideLabel}\n      size={size}\n      disabled={disabled}\n      required={required}\n      errorText={errorText}\n      invalid={invalid}\n      description={description}\n      classNames={{\n        root: classNames?.root,\n        label: classNames?.label,\n        description: classNames?.description,\n        error: classNames?.error,\n      }}\n      data-slot=\"input-root\"\n    >\n      <BaseInput\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        data-slot=\"input-control\"\n        className={clsx(styles[\"control\"], classNames?.control)}\n        {...props}\n      />\n    </Field>\n  );\n}\n"],"mappings":"uPAuCA,SAAgBA,EAAM,CACpB,QACA,YAAY,GACZ,OAAO,KACP,WAAW,GACX,WAAW,GACX,OACA,cACA,UACA,YACA,QACA,WACA,YACA,aACA,GAAG,GACU,CACb,OACE,EAAC,EAAD,CACS,QACI,YACL,OACI,WACA,WACC,YACF,UACI,cACb,WAAY,CACV,KAAM,GAAY,KAClB,MAAO,GAAY,MACnB,YAAa,GAAY,YACzB,MAAO,GAAY,KACrB,EACA,YAAU,sBAEV,EAACC,EAAD,CACY,WACA,WACA,WACV,YAAU,gBACV,UAAW,EAAKC,EAAO,QAAY,GAAY,OAAO,EACtD,GAAI,CACL,CAAA,CACI,CAAA,CAEX"}
+{"version":3,"file":"input.js","names":["Input","BaseInput","styles"],"sources":["../../../src/atoms/input/input.tsx"],"sourcesContent":["import {\n  Input as BaseInput,\n  type InputProps as BaseInputProps,\n} from \"@base-ui/react/input\";\nimport clsx from \"clsx\";\nimport styles from \"./input.module.css\";\n\nexport type InputProps = Omit<BaseInputProps, \"size\" | \"className\"> & {\n  /**\n   * The size of the input.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Whether the input 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  };\n};\n\n/**\n * A bare input component without field wrapping (no label/error/description).\n * Use `InputField` for the full field experience.\n */\nexport function Input({\n  size = \"md\",\n  disabled = false,\n  required = false,\n  invalid = false,\n  readOnly,\n  classNames,\n  ...props\n}: InputProps) {\n  return (\n    <BaseInput\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      data-slot=\"input-control\"\n      data-size={size}\n      data-invalid={invalid || undefined}\n      className={clsx(styles[\"control\"], classNames?.control)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"0IA+BA,SAAgBA,EAAM,CACpB,OAAO,KACP,WAAW,GACX,WAAW,GACX,UAAU,GACV,WACA,aACA,GAAG,GACU,CACb,OACE,EAACC,EAAD,CACY,WACA,WACA,WACV,YAAU,gBACV,YAAW,EACX,eAAc,GAAW,IAAA,GACzB,UAAW,EAAKC,EAAO,QAAY,GAAY,OAAO,EACtD,GAAI,CACL,CAAA,CAEL"}

package/dist/atoms/input/input.module.js

@@ -1,2 +1,3 @@
+import './input.css';
 var e={control:`uLevqq_control`};export{e as default};
 //# sourceMappingURL=input.module.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.module.js","names":[],"sources":["../../../src/atoms/input/input.module.css"],"sourcesContent":[".control {\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: inherit;\n  font-size: var(--field-control-font-size, var(--typography-body-2-size));\n  line-height: var(\n    --field-control-line-height,\n    var(--typography-body-2-height)\n  );\n  font-weight: var(\n    --field-control-font-weight,\n    var(--typography-body-2-weight)\n  );\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  font-family: var(--typography-typeface-ltr);\n\n  &::placeholder {\n    color: var(--field-control-placeholder-color);\n    font-family: var(--typography-typeface-ltr);\n  }\n\n  &: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"],"mappings":"AAEA,IAAA,EAAa,CAAG,QAAU,gBAAI"}
+{"version":3,"file":"input.module.js","names":[],"sources":["../../../src/atoms/input/input.module.css"],"sourcesContent":[".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  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: inherit;\n  font-size: var(--field-control-font-size, var(--typography-body-2-size));\n  line-height: var(\n    --field-control-line-height,\n    var(--typography-body-2-height)\n  );\n  font-weight: var(\n    --field-control-font-weight,\n    var(--typography-body-2-weight)\n  );\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  font-family: var(--typography-typeface-ltr);\n\n  &::placeholder {\n    color: var(--field-control-placeholder-color);\n    font-family: var(--typography-typeface-ltr);\n  }\n\n  &: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\n.control[data-size=\"sm\"] {\n  --field-control-height: 1.5rem;\n  --field-control-font-size: var(--typography-caption-base-size);\n  --field-control-line-height: var(--typography-caption-base-height);\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-line-height: var(--typography-body-2-height);\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-line-height: var(--typography-body-1-height);\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-neutral-muted);\n}\n"],"mappings":""}

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

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

package/dist/atoms/menu/index.js

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

package/dist/atoms/menu/menu.css

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

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

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

package/dist/atoms/menu/menu.js

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+import { Menubar, MenubarProps } from "./menubar.js";

package/dist/atoms/menubar/index.js

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

package/dist/atoms/menubar/menubar.css

@@ -0,0 +1 @@
+.gwaYAW_root{align-items:center;gap:var(--spacing-md);display:flex}.gwaYAW_root [data-slot=menu-trigger]{color:var(--color-content-neutral-base)}

package/dist/atoms/menubar/menubar.d.ts

@@ -0,0 +1,12 @@
+import { MenubarProps } from "@base-ui/react";
+
+//#region src/atoms/menubar/menubar.d.ts
+type MenubarProps$1 = MenubarProps;
+declare function Menubar$1({
+  className,
+  children,
+  ...props
+}: MenubarProps$1): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Menubar$1 as Menubar, MenubarProps$1 as MenubarProps };
+//# sourceMappingURL=menubar.d.ts.map