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

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":["Combobox","BaseUICombobox","styles"],"sources":["../../../src/atoms/combobox/combobox.tsx"],"sourcesContent":["import {\n  Combobox as BaseUICombobox,\n  type ComboboxRootProps,\n} from \"@base-ui/react/combobox\";\nimport { mdiChevronDown, mdiClose } from \"@mdi/js\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { usePortalConfig } from \"../../helpers/portal\";\nimport { Field, type FieldProps } from \"../../internals/base-field\";\nimport { Icon } from \"../icon\";\nimport styles from \"./combobox.module.css\";\nimport { Chip } from \"./components/chip\";\nimport { ItemRow, type ComboboxItem } from \"./components/item\";\n\n/**\n * Represents a group of items in the combobox.\n */\nexport interface ComboboxGroup {\n  /** The text label of the group */\n  label: string;\n  /** The items in the group */\n  items: ComboboxItem[];\n}\n\n/**\n * Props for the Combobox component.\n */\nexport type ComboboxProps<\n  T = string,\n  Multiple extends boolean | undefined = false,\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  ComboboxRootProps<T, Multiple> & {\n    /**\n     * Whether the combobox is clearable when a value is selected.\n     * @default false\n     */\n    clearable?: boolean;\n    /**\n     * Whether the combobox is searchable.\n     * @default true\n     */\n    searchable?: boolean;\n    /**\n     * Whether the combobox contents should be full width.\n     * @default false\n     */\n    fullWidthContents?: boolean;\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      inputGroup?: string;\n      startAdornment?: string;\n      endAdornment?: string;\n      input?: string;\n      actionButtons?: string;\n      chips?: string;\n      chip?: string;\n      chipText?: string;\n      chipRemove?: string;\n      positioner?: string;\n      empty?: string;\n      list?: string;\n      group?: string;\n      item?: string;\n      groupLabel?: string;\n      trigger?: string;\n      clear?: string;\n      popup?: string;\n    };\n    /**\n     * Slot for element placed at the start of the input group.\n     */\n    startAdornment?: React.ReactNode;\n    /**\n     * Slot for element placed at the end of the input group.\n     */\n    endAdornment?: React.ReactNode;\n    /**\n     * Placeholder text for the input.\n     */\n    placeholder?: string;\n  };\n\n/**\n * A combobox component that combines an input with a list of selectable items.\n * Built on top of Base UI's combobox primitive with zero-runtime CSS styling.\n *\n * @example\n * ```tsx\n * <Combobox\n *   label=\"Favorite Fruit\"\n *   items={[\n *     { id: \"1\", label: \"Apple\", value: \"apple\" },\n *     { id: \"2\", label: \"Banana\", value: \"banana\" },\n *   ]}\n *   placeholder=\"Select a fruit\"\n * />\n * ```\n */\nexport const Combobox = <\n  T = string,\n  Multiple extends boolean | undefined = false,\n>({\n  label,\n  description,\n  fullWidthContents = false,\n  invalid = false,\n  errorText,\n  hideLabel = false,\n  clearable = false,\n  searchable = true,\n  required = false,\n  size = \"md\",\n  readOnly = false,\n  disabled = false,\n  endAdornment,\n  startAdornment,\n  placeholder = \"Select an option\",\n  classNames,\n  items,\n  multiple,\n  ...props\n}: ComboboxProps<T, Multiple>) => {\n  const { resolveContainer } = usePortalConfig();\n  const portalContainer = resolveContainer();\n\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=\"combobox-root\"\n    >\n      <BaseUICombobox.Root<T, Multiple>\n        items={items}\n        multiple={multiple}\n        disabled={disabled}\n        readOnly={readOnly}\n        {...props}\n      >\n        <div\n          className={clsx(styles[\"control\"], classNames?.control)}\n          data-size={size}\n          data-slot=\"combobox-control\"\n        >\n          <BaseUICombobox.InputGroup\n            className={clsx(styles[\"input-group\"], classNames?.inputGroup)}\n            data-slot=\"combobox-input-group\"\n          >\n            {startAdornment && (\n              <div\n                className={clsx(\n                  styles[\"start-adornment\"],\n                  classNames?.startAdornment,\n                )}\n                data-slot=\"combobox-start-adornment\"\n              >\n                {startAdornment}\n              </div>\n            )}\n\n            {multiple ? (\n              <BaseUICombobox.Chips\n                className={clsx(styles[\"chips\"], classNames?.chips)}\n                data-slot=\"combobox-chips\"\n              >\n                <BaseUICombobox.Value>\n                  {(selectedValues: ComboboxItem[]) => (\n                    <>\n                      {selectedValues.map(item => (\n                        <Chip\n                          item={item}\n                          classNames={{\n                            root: classNames?.chip,\n                            text: classNames?.chipText,\n                            remove: classNames?.chipRemove,\n                          }}\n                          key={item.id}\n                        />\n                      ))}\n                      <BaseUICombobox.Input\n                        className={clsx(styles[\"input\"], classNames?.input)}\n                        data-slot=\"combobox-input\"\n                        placeholder={\n                          selectedValues.length > 0 ? \"\" : placeholder\n                        }\n                      />\n                    </>\n                  )}\n                </BaseUICombobox.Value>\n              </BaseUICombobox.Chips>\n            ) : (\n              <BaseUICombobox.Input\n                className={clsx(styles[\"input\"], classNames?.input)}\n                data-slot=\"combobox-input\"\n                placeholder={placeholder}\n              />\n            )}\n\n            <div\n              className={clsx(\n                styles[\"action-buttons\"],\n                classNames?.actionButtons,\n              )}\n              data-slot=\"combobox-action-buttons\"\n            >\n              {clearable && (\n                <BaseUICombobox.Clear\n                  className={clsx(styles[\"clear\"], classNames?.clear)}\n                  data-slot=\"combobox-clear\"\n                  aria-label=\"Clear selection\"\n                  disabled={disabled}\n                >\n                  <Icon data={mdiClose} />\n                </BaseUICombobox.Clear>\n              )}\n\n              <BaseUICombobox.Trigger\n                className={clsx(styles[\"trigger\"], classNames?.trigger)}\n                data-slot=\"combobox-trigger\"\n                disabled={disabled}\n                aria-label=\"Open dropdown\"\n              >\n                <Icon data={mdiChevronDown} />\n              </BaseUICombobox.Trigger>\n\n              {endAdornment && (\n                <div\n                  className={clsx(\n                    styles[\"end-adornment\"],\n                    classNames?.endAdornment,\n                  )}\n                  data-slot=\"combobox-end-adornment\"\n                >\n                  {endAdornment}\n                </div>\n              )}\n            </div>\n          </BaseUICombobox.InputGroup>\n        </div>\n\n        <BaseUICombobox.Portal container={portalContainer}>\n          <BaseUICombobox.Positioner\n            className={clsx(styles[\"positioner\"], classNames?.positioner)}\n            data-slot=\"combobox-positioner\"\n            sideOffset={4}\n          >\n            <BaseUICombobox.Popup\n              className={clsx(styles[\"popup\"], classNames?.popup, {\n                [styles[\"full-width\"]!]: fullWidthContents,\n              })}\n              data-slot=\"combobox-popup\"\n            >\n              <BaseUICombobox.Empty>\n                <div\n                  className={clsx(styles[\"empty\"], classNames?.empty)}\n                  data-slot=\"combobox-empty\"\n                >\n                  No items found.\n                </div>\n              </BaseUICombobox.Empty>\n\n              <BaseUICombobox.List\n                className={clsx(styles[\"list\"], classNames?.list)}\n                data-slot=\"combobox-list\"\n              >\n                {(itemOrGroup: ComboboxItem | ComboboxGroup) => {\n                  if (\"items\" in itemOrGroup) {\n                    return (\n                      <BaseUICombobox.Group\n                        className={clsx(styles[\"group\"], classNames?.group)}\n                        key={itemOrGroup.label}\n                        items={itemOrGroup.items}\n                        data-slot=\"combobox-group\"\n                      >\n                        <BaseUICombobox.GroupLabel\n                          className={clsx(\n                            styles[\"group-label\"],\n                            classNames?.groupLabel,\n                          )}\n                          data-slot=\"combobox-group-label\"\n                        >\n                          {itemOrGroup.label}\n                        </BaseUICombobox.GroupLabel>\n                        <BaseUICombobox.Collection>\n                          {(item: ComboboxItem) => (\n                            <ItemRow\n                              className={classNames?.item}\n                              key={item.id}\n                              item={item}\n                            />\n                          )}\n                        </BaseUICombobox.Collection>\n                      </BaseUICombobox.Group>\n                    );\n                  }\n\n                  return (\n                    <ItemRow\n                      className={classNames?.item}\n                      key={itemOrGroup.id}\n                      item={itemOrGroup}\n                    />\n                  );\n                }}\n              </BaseUICombobox.List>\n            </BaseUICombobox.Popup>\n          </BaseUICombobox.Positioner>\n        </BaseUICombobox.Portal>\n      </BaseUICombobox.Root>\n    </Field>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"combobox.js","names":["Combobox","styles","BaseUICombobox"],"sources":["../../../src/atoms/combobox/combobox.tsx"],"sourcesContent":["import {\n  Combobox as BaseUICombobox,\n  type ComboboxRootProps,\n} from \"@base-ui/react/combobox\";\nimport { mdiChevronDown, mdiClose } from \"@mdi/js\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { usePortalConfig } from \"../../helpers/portal\";\nimport { Icon } from \"../icon\";\nimport styles from \"./combobox.module.css\";\nimport { Chip } from \"./components/chip\";\nimport { ItemRow, type ComboboxItem } from \"./components/item\";\n\n/**\n * Represents a group of items in the combobox.\n */\nexport interface ComboboxGroup {\n  /** The text label of the group */\n  label: string;\n  /** The items in the group */\n  items: ComboboxItem[];\n}\n\n/**\n * Props for the Combobox component.\n */\nexport type ComboboxProps<\n  T = string,\n  Multiple extends boolean | undefined = false,\n> = ComboboxRootProps<T, Multiple> & {\n  /**\n   * The size of the combobox.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Whether the combobox is in an invalid state.\n   * @default false\n   */\n  invalid?: boolean;\n  /**\n   * Whether the combobox is clearable when a value is selected.\n   * @default false\n   */\n  clearable?: boolean;\n  /**\n   * Whether the combobox is searchable.\n   * @default true\n   */\n  searchable?: boolean;\n  /**\n   * Whether the combobox contents should be full width.\n   * @default false\n   */\n  fullWidthContents?: boolean;\n  /**\n   * Additional CSS classes for styling.\n   */\n  classNames?: {\n    root?: string;\n    control?: string;\n    inputGroup?: string;\n    startAdornment?: string;\n    endAdornment?: string;\n    input?: string;\n    actionButtons?: string;\n    chips?: string;\n    chip?: string;\n    chipText?: string;\n    chipRemove?: string;\n    positioner?: string;\n    empty?: string;\n    list?: string;\n    group?: string;\n    item?: string;\n    groupLabel?: string;\n    trigger?: string;\n    clear?: string;\n    popup?: string;\n  };\n  /**\n   * Slot for element placed at the start of the input group.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Slot for element placed at the end of the input group.\n   */\n  endAdornment?: React.ReactNode;\n  /**\n   * Placeholder text for the input.\n   */\n  placeholder?: string;\n};\n\n/**\n * A combobox component that combines an input with a list of selectable items.\n * Built on top of Base UI's combobox primitive with zero-runtime CSS styling.\n *\n * @example\n * ```tsx\n * <Combobox\n *   label=\"Favorite Fruit\"\n *   items={[\n *     { id: \"1\", label: \"Apple\", value: \"apple\" },\n *     { id: \"2\", label: \"Banana\", value: \"banana\" },\n *   ]}\n *   placeholder=\"Select a fruit\"\n * />\n * ```\n */\nexport const Combobox = <\n  T = string,\n  Multiple extends boolean | undefined = false,\n>({\n  fullWidthContents = false,\n  invalid = false,\n  clearable = false,\n  searchable = true,\n  size = \"md\",\n  readOnly = false,\n  disabled = false,\n  endAdornment,\n  startAdornment,\n  placeholder = \"Select an option\",\n  classNames,\n  items,\n  multiple,\n  ...props\n}: ComboboxProps<T, Multiple>) => {\n  const { resolveContainer } = usePortalConfig();\n  const portalContainer = resolveContainer();\n  return (\n    <div\n      data-slot=\"combobox-root\"\n      className={clsx(styles[\"root\"], classNames?.root)}\n    >\n      <BaseUICombobox.Root<T, Multiple>\n        items={items}\n        multiple={multiple}\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=\"combobox-control\"\n        >\n          <BaseUICombobox.InputGroup\n            className={clsx(styles[\"input-group\"], classNames?.inputGroup)}\n            data-slot=\"combobox-input-group\"\n          >\n            {startAdornment && (\n              <div\n                className={clsx(\n                  styles[\"start-adornment\"],\n                  classNames?.startAdornment,\n                )}\n                data-slot=\"combobox-start-adornment\"\n              >\n                {startAdornment}\n              </div>\n            )}\n\n            {multiple ? (\n              <BaseUICombobox.Chips\n                className={clsx(styles[\"chips\"], classNames?.chips)}\n                data-slot=\"combobox-chips\"\n              >\n                <BaseUICombobox.Value>\n                  {(selectedValues: ComboboxItem[]) => (\n                    <>\n                      {selectedValues.map(item => (\n                        <Chip\n                          item={item}\n                          classNames={{\n                            root: classNames?.chip,\n                            text: classNames?.chipText,\n                            remove: classNames?.chipRemove,\n                          }}\n                          key={item.id}\n                        />\n                      ))}\n                      <BaseUICombobox.Input\n                        className={clsx(styles[\"input\"], classNames?.input)}\n                        data-slot=\"combobox-input\"\n                        placeholder={\n                          selectedValues.length > 0 ? \"\" : placeholder\n                        }\n                      />\n                    </>\n                  )}\n                </BaseUICombobox.Value>\n              </BaseUICombobox.Chips>\n            ) : (\n              <BaseUICombobox.Input\n                className={clsx(styles[\"input\"], classNames?.input)}\n                data-slot=\"combobox-input\"\n                placeholder={placeholder}\n              />\n            )}\n\n            <div\n              className={clsx(\n                styles[\"action-buttons\"],\n                classNames?.actionButtons,\n              )}\n              data-slot=\"combobox-action-buttons\"\n            >\n              {clearable && (\n                <BaseUICombobox.Clear\n                  className={clsx(styles[\"clear\"], classNames?.clear)}\n                  data-slot=\"combobox-clear\"\n                  aria-label=\"Clear selection\"\n                  disabled={disabled}\n                >\n                  <Icon data={mdiClose} />\n                </BaseUICombobox.Clear>\n              )}\n\n              <BaseUICombobox.Trigger\n                className={clsx(styles[\"trigger\"], classNames?.trigger)}\n                data-slot=\"combobox-trigger\"\n                disabled={disabled}\n                aria-label=\"Open dropdown\"\n              >\n                <Icon data={mdiChevronDown} />\n              </BaseUICombobox.Trigger>\n\n              {endAdornment && (\n                <div\n                  className={clsx(\n                    styles[\"end-adornment\"],\n                    classNames?.endAdornment,\n                  )}\n                  data-slot=\"combobox-end-adornment\"\n                >\n                  {endAdornment}\n                </div>\n              )}\n            </div>\n          </BaseUICombobox.InputGroup>\n        </div>\n\n        <BaseUICombobox.Portal container={portalContainer}>\n          <BaseUICombobox.Positioner\n            className={clsx(styles[\"positioner\"], classNames?.positioner)}\n            data-slot=\"combobox-positioner\"\n            sideOffset={4}\n          >\n            <BaseUICombobox.Popup\n              className={clsx(styles[\"popup\"], classNames?.popup, {\n                [styles[\"full-width\"]!]: fullWidthContents,\n              })}\n              data-slot=\"combobox-popup\"\n            >\n              <BaseUICombobox.Empty>\n                <div\n                  className={clsx(styles[\"empty\"], classNames?.empty)}\n                  data-slot=\"combobox-empty\"\n                >\n                  No items found.\n                </div>\n              </BaseUICombobox.Empty>\n\n              <BaseUICombobox.List\n                className={clsx(styles[\"list\"], classNames?.list)}\n                data-slot=\"combobox-list\"\n              >\n                {(itemOrGroup: ComboboxItem | ComboboxGroup) => {\n                  if (\"items\" in itemOrGroup) {\n                    return (\n                      <BaseUICombobox.Group\n                        className={clsx(styles[\"group\"], classNames?.group)}\n                        key={itemOrGroup.label}\n                        items={itemOrGroup.items}\n                        data-slot=\"combobox-group\"\n                      >\n                        <BaseUICombobox.GroupLabel\n                          className={clsx(\n                            styles[\"group-label\"],\n                            classNames?.groupLabel,\n                          )}\n                          data-slot=\"combobox-group-label\"\n                        >\n                          {itemOrGroup.label}\n                        </BaseUICombobox.GroupLabel>\n                        <BaseUICombobox.Collection>\n                          {(item: ComboboxItem) => (\n                            <ItemRow\n                              className={classNames?.item}\n                              key={item.id}\n                              item={item}\n                              size={size}\n                            />\n                          )}\n                        </BaseUICombobox.Collection>\n                      </BaseUICombobox.Group>\n                    );\n                  }\n\n                  return (\n                    <ItemRow\n                      className={classNames?.item}\n                      key={itemOrGroup.id}\n                      item={itemOrGroup}\n                      size={size}\n                    />\n                  );\n                }}\n              </BaseUICombobox.List>\n            </BaseUICombobox.Popup>\n          </BaseUICombobox.Positioner>\n        </BaseUICombobox.Portal>\n      </BaseUICombobox.Root>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
 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`,"start-adornment":`KAWYaW_start-adornment`,trigger:`KAWYaW_trigger`};export{e as default};
+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":""}
+{"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/context-menu/context-menu.css

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

@@ -3,8 +3,8 @@ 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$1.ReactNode;
+  /** The icon data to render inside the button. */
+  iconData: string;
   /** Required accessible label for screen readers. */
   label: string;
 }

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

@@ -1,6 +1,10 @@
 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";
@@ -9,11 +13,17 @@ 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 { IconButton, IconButtonProps } from "./icon-button/icon-button.js";
 import { Icon, IconProps } from "./icon/icon.js";
 import { Input, InputProps } from "./input/input.js";
 import { BaseItem, CheckboxItem, GroupItem, Menu, MenuItemsByMode, MenuMode, MenuProps, NormalItem, RadioItem, SeparatorItem, SubmenuItem } from "./menu/menu.js";
-import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio/radio.js";
+import { 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";

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"./avatar/avatar.js";import"./avatar/index.js";import"./icon/icon.js";import"./icon/index.js";import"./checkbox/checkbox.js";import"./checkbox/index.js";import"./clickable-area/clickable-area.js";import"./clickable-area/index.js";import"./collapsible/collapsible.js";import"./collapsible/index.js";import"./combobox/combobox.js";import"./combobox/index.js";import"./condition-guard/condition-guard.js";import"./condition-guard/index.js";import"./context-menu/context-menu.js";import"./context-menu/index.js";import"./dialog/dialog.js";import"./dialog/index.js";import"./icon-button/icon-button.js";import"./icon-button/index.js";import"./input/input.js";import"./input/index.js";import"./menu/menu.js";import"./menu/index.js";import"./radio/radio.js";import"./radio/index.js";import"./switch/switch.js";import"./switch/index.js";import"./tabs/tabs.js";import"./tabs/index.js";import"./toast/toast.js";import"./toast/index.js";import"./tooltip/tooltip.js";import"./tooltip/index.js";
+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 +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.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":""}
+{"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/menu.css

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

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

@@ -1 +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                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":"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"}
+{"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":"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"}

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

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

package/dist/atoms/menubar/menubar.js

@@ -0,0 +1,2 @@
+import e from"./menubar.module.js";import t from"clsx";import{jsx as n}from"react/jsx-runtime";import{Menubar as r}from"@base-ui/react";function i({className:i,children:a,...o}){return n(r,{...o,"data-slot":`menubar-root`,className:t(e.root,i),children:a})}export{i as Menubar};
+//# sourceMappingURL=menubar.js.map

package/dist/atoms/menubar/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":["Menubar","BaseUiMenubar","styles"],"sources":["../../../src/atoms/menubar/menubar.tsx"],"sourcesContent":["import {\n  Menubar as BaseUiMenubar,\n  type MenubarProps as BaseUiMenubarProps,\n} from \"@base-ui/react\";\nimport clsx from \"clsx\";\nimport styles from \"./menubar.module.css\";\n\nexport type MenubarProps = BaseUiMenubarProps;\n\nexport function Menubar({ className, children, ...props }: MenubarProps) {\n  return (\n    <BaseUiMenubar\n      {...props}\n      data-slot=\"menubar-root\"\n      className={clsx(styles[\"root\"], className)}\n    >\n      {children}\n    </BaseUiMenubar>\n  );\n}\n"],"mappings":"wIASA,SAAgBA,EAAQ,CAAE,YAAW,WAAU,GAAG,GAAuB,CACvE,OACE,EAACC,EAAD,CACE,GAAI,EACJ,YAAU,eACV,UAAW,EAAKC,EAAO,KAAS,CAAS,EAExC,UACY,CAAA,CAEnB"}

package/dist/atoms/menubar/menubar.module.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.module.js","names":[],"sources":["../../../src/atoms/menubar/menubar.module.css"],"sourcesContent":[".root {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n}\n\n.root [data-slot=\"menu-trigger\"] {\n  color: var(--color-content-neutral-base);\n}\n"],"mappings":""}

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

@@ -0,0 +1 @@
+import { Notice, NoticeProps } from "./notice.js";

package/dist/atoms/notice/index.js

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

package/dist/atoms/notice/notice.d.ts

@@ -0,0 +1,28 @@
+import { MergeElementProps } from "../../types.js";
+import { IconButtonProps } from "../icon-button/icon-button.js";
+//#region src/atoms/notice/notice.d.ts
+type NoticeProps = Omit<MergeElementProps<"div", {
+  classNames?: {
+    root?: string;
+    icon?: string;
+    body?: string;
+    title?: string;
+    content?: string;
+    action?: string;
+  }; /** The title of the notice. */
+  title: string; /** The body content of the notice. */
+  content?: React.ReactNode; /** Custom leading icon. */
+  iconData?: string; /** Whether  to hide the leading icon. */
+  hideIcon?: boolean; /** Optional dismiss/action button. */
+  action?: Omit<IconButtonProps, "aria-label" | "aria-labelledby"> & {
+    label: string;
+  };
+  /**
+   * @default "info"
+   */
+  severity?: "positive" | "negative" | "warn" | "info";
+}>, "children" | "aria-labelledby" | "aria-describedby" | "defaultValue" | "defaultChecked">;
+declare const Notice: (props: NoticeProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Notice, NoticeProps };
+//# sourceMappingURL=notice.d.ts.map

package/dist/atoms/notice/notice.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";import{mdiAlert as o,mdiCheckCircle as s,mdiCloseCircle as c,mdiInformation as l}from"@mdi/js";const u=u=>{let{ref:d,classNames:f,title:p,content:m,iconData:h,action:g,severity:_=`info`,id:v,hideIcon:y=!1,...b}=u,x=v?`${v}-title`:void 0,S=v?`${v}-content`:void 0,C=h??{positive:s,negative:c,warn:o,info:l}[_]??void 0;return a(`div`,{...b,ref:d,id:v,role:`note`,"data-color":_,"data-slot":`notice-root`,"aria-labelledby":x,"aria-describedby":S,className:r(n.root,f?.root),children:[C&&!y&&i(`div`,{"aria-hidden":!0,"data-slot":`notice-icon`,className:r(n.icon,f?.icon),children:i(e,{data:C})}),a(`div`,{"data-slot":`notice-body`,className:r(n.body,f?.body),children:[i(`span`,{id:x,"data-slot":`notice-title`,className:r(n.title,f?.title),children:p}),m?i(`div`,{id:S,"data-slot":`notice-content`,className:r(n.content,f?.content),children:m}):null]}),g&&(()=>{let{label:e,...a}=g;return i(t,{...a,size:`sm`,variant:`ghost`,"data-slot":`notice-action`,className:r(n.action,f?.action),label:e})})()]})};export{u as Notice};
+//# sourceMappingURL=notice.js.map

package/dist/atoms/notice/notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.js","names":["classes"],"sources":["../../../src/atoms/notice/notice.tsx"],"sourcesContent":["import {\n  mdiAlert,\n  mdiCheckCircle,\n  mdiCloseCircle,\n  mdiInformation,\n} from \"@mdi/js\";\nimport clsx from \"clsx\";\nimport type { MergeElementProps } from \"../../types\";\nimport { Icon } from \"../icon\";\nimport { type IconButtonProps, IconButton } from \"../icon-button\";\nimport classes from \"./styles.module.css\";\n\nexport type NoticeProps = Omit<\n  MergeElementProps<\n    \"div\",\n    {\n      classNames?: {\n        root?: string;\n        icon?: string;\n        body?: string;\n        title?: string;\n        content?: string;\n        action?: string;\n      };\n\n      /** The title of the notice. */\n      title: string;\n\n      /** The body content of the notice. */\n      content?: React.ReactNode;\n\n      /** Custom leading icon. */\n      iconData?: string;\n\n      /** Whether  to hide the leading icon. */\n      hideIcon?: boolean;\n\n      /** Optional dismiss/action button. */\n      action?: Omit<IconButtonProps, \"aria-label\" | \"aria-labelledby\"> & {\n        label: string;\n      };\n\n      /**\n       * @default \"info\"\n       */\n      severity?: \"positive\" | \"negative\" | \"warn\" | \"info\";\n    }\n  >,\n  | \"children\"\n  | \"aria-labelledby\"\n  | \"aria-describedby\"\n  | \"defaultValue\"\n  | \"defaultChecked\"\n>;\n\nexport const Notice = (props: NoticeProps) => {\n  const {\n    ref,\n    classNames,\n    title,\n    content,\n    iconData: iconDataProp,\n    action,\n    severity = \"info\",\n    id,\n    hideIcon = false,\n    ...otherProps\n  } = props;\n\n  const titleId = id ? `${id}-title` : undefined;\n  const contentId = id ? `${id}-content` : undefined;\n\n  const defaultIconMap = {\n    positive: mdiCheckCircle,\n    negative: mdiCloseCircle,\n    warn: mdiAlert,\n    info: mdiInformation,\n  } as const;\n\n  const iconData = iconDataProp ?? defaultIconMap[severity] ?? undefined;\n\n  return (\n    <div\n      {...otherProps}\n      ref={ref}\n      id={id}\n      role=\"note\"\n      data-color={severity}\n      data-slot=\"notice-root\"\n      aria-labelledby={titleId}\n      aria-describedby={contentId}\n      className={clsx(classes[\"root\"], classNames?.root)}\n    >\n      {iconData && !hideIcon && (\n        <div\n          aria-hidden\n          data-slot=\"notice-icon\"\n          className={clsx(classes[\"icon\"], classNames?.icon)}\n        >\n          <Icon data={iconData} />\n        </div>\n      )}\n\n      <div\n        data-slot=\"notice-body\"\n        className={clsx(classes[\"body\"], classNames?.body)}\n      >\n        <span\n          id={titleId}\n          data-slot=\"notice-title\"\n          className={clsx(classes[\"title\"], classNames?.title)}\n        >\n          {title}\n        </span>\n        {content ? (\n          <div\n            id={contentId}\n            data-slot=\"notice-content\"\n            className={clsx(classes[\"content\"], classNames?.content)}\n          >\n            {content}\n          </div>\n        ) : null}\n      </div>\n\n      {action &&\n        (() => {\n          const { label, ...etc } = action;\n\n          return (\n            <IconButton\n              {...etc}\n              size=\"sm\"\n              variant=\"ghost\"\n              data-slot=\"notice-action\"\n              className={clsx(classes[\"action\"], classNames?.action)}\n              label={label}\n            />\n          );\n        })()}\n    </div>\n  );\n};\n"],"mappings":"kWAuDA,MAAa,EAAU,GAAuB,CAC5C,GAAM,CACJ,MACA,aACA,QACA,UACA,SAAU,EACV,SACA,WAAW,OACX,KACA,WAAW,GACX,GAAG,GACD,EAEE,EAAU,EAAK,GAAG,EAAG,QAAU,IAAA,GAC/B,EAAY,EAAK,GAAG,EAAG,UAAY,IAAA,GASnC,EAAW,GAAgB,CAN/B,SAAU,EACV,SAAU,EACV,KAAM,EACN,KAAM,CAGsC,EAAE,IAAa,IAAA,GAE7D,OACE,EAAC,MAAD,CACE,GAAI,EACC,MACD,KACJ,KAAK,OACL,aAAY,EACZ,YAAU,cACV,kBAAiB,EACjB,mBAAkB,EAClB,UAAW,EAAKA,EAAQ,KAAS,GAAY,IAAI,WATnD,CAWG,GAAY,CAAC,GACZ,EAAC,MAAD,CACE,cAAA,GACA,YAAU,cACV,UAAW,EAAKA,EAAQ,KAAS,GAAY,IAAI,WAEjD,EAAC,EAAD,CAAM,KAAM,CAAW,CAAA,CACpB,CAAA,EAGP,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EAAKA,EAAQ,KAAS,GAAY,IAAI,WAFnD,CAIE,EAAC,OAAD,CACE,GAAI,EACJ,YAAU,eACV,UAAW,EAAKA,EAAQ,MAAU,GAAY,KAAK,WAElD,CACG,CAAA,EACL,EACC,EAAC,MAAD,CACE,GAAI,EACJ,YAAU,iBACV,UAAW,EAAKA,EAAQ,QAAY,GAAY,OAAO,WAEtD,CACE,CAAA,EACH,IACD,IAEJ,QACQ,CACL,GAAM,CAAE,QAAO,GAAG,GAAQ,EAE1B,OACE,EAAC,EAAD,CACE,GAAI,EACJ,KAAK,KACL,QAAQ,QACR,YAAU,gBACV,UAAW,EAAKA,EAAQ,OAAW,GAAY,MAAM,EAC9C,OACR,CAAA,CAEL,GAAG,CACF,GAET"}

package/dist/atoms/notice/styles.css

@@ -0,0 +1 @@
+._69HH5G_root{--notice-background:transparent;--notice-border-color:transparent;--notice-icon-color:transparent;background-color:var(--notice-background);border:1px solid var(--notice-border-color);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);font-family:var(--typography-typeface-ltr);align-items:flex-start;gap:var(--spacing-sm);display:flex}._69HH5G_root[data-color=neutral]{--notice-background:color-mix(in oklab, var(--color-neutral) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-neutral) 25%, transparent);--notice-icon-color:var(--color-neutral)}._69HH5G_root[data-color=brand]{--notice-background:color-mix(in oklab, var(--color-brand) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-brand) 50%, transparent);--notice-icon-color:var(--color-brand)}._69HH5G_root[data-color=positive]{--notice-background:color-mix(in oklab, var(--color-positive) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-positive) 50%, transparent);--notice-icon-color:var(--color-positive)}._69HH5G_root[data-color=negative]{--notice-background:color-mix(in oklab, var(--color-negative) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-negative) 50%, transparent);--notice-icon-color:var(--color-negative)}._69HH5G_root[data-color=info]{--notice-background:color-mix(in oklab, var(--color-info) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-info) 50%, transparent);--notice-icon-color:var(--color-info)}._69HH5G_root[data-color=warn]{--notice-background:color-mix(in oklab, var(--color-warn) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-warn) 50%, transparent);--notice-icon-color:var(--color-warn)}._69HH5G_icon{width:1rem;max-width:1rem;height:1rem;max-height:1rem;color:var(--notice-icon-color);flex-shrink:0;justify-content:center;align-items:center;margin-top:.125rem;display:flex}._69HH5G_body{gap:var(--spacing-xs);flex-direction:column;flex:1;min-width:0;display:flex}._69HH5G_title{font-size:var(--typography-subheading-1-size);color:var(--color-content-neutral-base);font-weight:600}._69HH5G_content{font-size:var(--typography-body-1-size);color:var(--color-content-neutral-base);font-weight:400}._69HH5G_action{flex-shrink:0;margin-inline-start:auto;margin-inline-end:calc(-1 * var(--spacing-sm))}

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

@@ -0,0 +1,3 @@
+import './styles.css';
+var e={action:`_69HH5G_action`,body:`_69HH5G_body`,content:`_69HH5G_content`,icon:`_69HH5G_icon`,root:`_69HH5G_root`,title:`_69HH5G_title`};export{e as default};
+//# sourceMappingURL=styles.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.js","names":[],"sources":["../../../src/atoms/notice/styles.module.css"],"sourcesContent":[".root {\n  --notice-background: transparent;\n  --notice-border-color: transparent;\n  --notice-icon-color: transparent;\n\n  display: flex;\n  align-items: flex-start;\n\n  background-color: var(--notice-background);\n  border: 1px solid var(--notice-border-color);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-sm) var(--spacing-md);\n\n  font-family: var(--typography-typeface-ltr);\n\n  gap: var(--spacing-sm);\n}\n\n.root[data-color=\"neutral\"] {\n  --notice-background: color-mix(\n    in oklab,\n    var(--color-neutral) 10%,\n    transparent\n  );\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-neutral) 25%,\n    transparent\n  );\n  --notice-icon-color: var(--color-neutral);\n}\n\n.root[data-color=\"brand\"] {\n  --notice-background: color-mix(in oklab, var(--color-brand) 10%, transparent);\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-brand) 50%,\n    transparent\n  );\n  --notice-icon-color: var(--color-brand);\n}\n\n.root[data-color=\"positive\"] {\n  --notice-background: color-mix(\n    in oklab,\n    var(--color-positive) 10%,\n    transparent\n  );\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-positive) 50%,\n    transparent\n  );\n  --notice-icon-color: var(--color-positive);\n}\n\n.root[data-color=\"negative\"] {\n  --notice-background: color-mix(\n    in oklab,\n    var(--color-negative) 10%,\n    transparent\n  );\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-negative) 50%,\n    transparent\n  );\n  --notice-icon-color: var(--color-negative);\n}\n\n.root[data-color=\"info\"] {\n  --notice-background: color-mix(in oklab, var(--color-info) 10%, transparent);\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-info) 50%,\n    transparent\n  );\n  --notice-icon-color: var(--color-info);\n}\n\n.root[data-color=\"warn\"] {\n  --notice-background: color-mix(in oklab, var(--color-warn) 10%, transparent);\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-warn) 50%,\n    transparent\n  );\n  --notice-icon-color: var(--color-warn);\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  margin-top: 0.125rem;\n\n  color: var(--notice-icon-color);\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  flex: 1;\n  min-width: 0;\n}\n\n.title {\n  font-size: var(--typography-subheading-1-size);\n  font-weight: 600;\n  color: var(--color-content-neutral-base);\n}\n\n.content {\n  font-size: var(--typography-body-1-size);\n  font-weight: 400;\n  color: var(--color-content-neutral-base);\n}\n\n.action {\n  flex-shrink: 0;\n  margin-inline-start: auto;\n  margin-inline-end: calc(-1 * var(--spacing-sm));\n}\n"],"mappings":""}