@koobiq/react-components 0.9.0 → 0.11.0

package/dist/components/DateInput/DateInput.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { createCalendar } from "@internationalized/date";
 import { useLocale, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
-import { useDateFieldState, removeDataAttributes, useDateField, FieldErrorContext } from "@koobiq/react-primitives";
+import { useDateFieldState, removeDataAttributes, useSlottedContext, FormContext, useDateField, FieldErrorContext } from "@koobiq/react-primitives";
 import s from "./DateInput.module.css.js";
 import { FieldInputDate } from "../FieldComponents/FieldInputDate/FieldInputDate.js";
 import { DateSegment } from "../DateSegment/DateSegment.js";
@@ -38,6 +38,8 @@ function DateInputRender(props, ref) {
     createCalendar
   });
   const domRef = useDOMRef(ref);
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
   const {
     labelProps: labelPropReactAria,
     fieldProps,
@@ -45,7 +47,11 @@ function DateInputRender(props, ref) {
     errorMessageProps,
     inputProps,
     ...validation
-  } = useDateField({ ...removeDataAttributes(props) }, state, domRef);
+  } = useDateField(
+    { ...removeDataAttributes(props), validationBehavior },
+    state,
+    domRef
+  );
   const { isRequired, isDisabled } = state;
   const { isInvalid } = validation;
   const rootProps = mergeProps(

package/dist/components/Dialog/components/DialogCloseButton.d.ts

@@ -4,10 +4,10 @@ export type DialogCloseButtonRef = ComponentRef<'button'>;
 export type DialogCloseButtonProps = ButtonProps;
 export declare const DialogCloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "children" | "value" | "form" | "style" | "as" | "className" | "autoFocus" | "id" | "tabIndex" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "name" | "target" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "fullWidth" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "variant" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
+}, "children" | "value" | "form" | "style" | "as" | "className" | "autoFocus" | "id" | "tabIndex" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "name" | "target" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "variant" | "fullWidth" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
     progress?: boolean;
     disabled?: boolean;
-}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "fullWidth" | "variant" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
+}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "variant" | "fullWidth" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
     progress?: boolean;
     disabled?: boolean;
 }> & {

package/dist/components/FieldComponents/FieldSelect/FieldSelect.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx, isNotNil } from "@koobiq/react-core";
 import { Button } from "@koobiq/react-primitives";
 import s from "./FieldSelect.module.css.js";
-import { isPrimitiveNode } from "./utils.js";
+import { isPrimitiveNode } from "../../../utils/isPrimitiveNode.js";
 const FieldSelect = polymorphicForwardRef(
   ({
     variant = "filled",

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,19 @@
+export declare const FormComponent: import("react").ForwardRefExoticComponent<{
+    labelPlacement?: import("..").FormControlPropLabelPlacement | import("../../utils").ResponsiveValue<import("..").FormControlPropLabelPlacement>;
+    labelAlign?: import("..").FormControlPropLabelAlign | import("../../utils").ResponsiveValue<import("..").FormControlPropLabelAlign>;
+    labelInlineSize?: import("./types").FormPropLabelInlineSize | import("../../utils").ResponsiveValue<import("./types").FormPropLabelInlineSize>;
+} & import("@koobiq/react-primitives").FormProps & import("react").RefAttributes<HTMLFormElement>>;
+export declare const Fieldset: import("@koobiq/react-core").PolyForwardComponent<"div", {
+    className?: string;
+}, import("react").ElementType>;
+export declare const Legend: import("@koobiq/react-core").PolyForwardComponent<"p", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+}, "as" | keyof import("..").TypographyBaseProps> & import("..").TypographyBaseProps & {
+    as?: "p" | undefined;
+}, import("react").ElementType>;
+type CompoundedComponent = typeof FormComponent & {
+    Fieldset: typeof Fieldset;
+    Legend: typeof Legend;
+};
+export declare const Form: CompoundedComponent;
+export {};

package/dist/components/Form/Form.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { Form as Form$1 } from "@koobiq/react-primitives";
+import s from "./Form.module.css.js";
+import { FormContext } from "./FormContext.js";
+import { templatePresets } from "./utils.js";
+import { Typography } from "../Typography/Typography.js";
+import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
+import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
+const FormComponent = forwardRef((props, ref) => {
+  const {
+    labelPlacement: labelPlacementProp,
+    labelAlign: labelAlignProp,
+    labelInlineSize: labelInlineSizeProp,
+    className,
+    style,
+    ...other
+  } = props;
+  const breakpoints = useMatchedBreakpoints();
+  const labelPlacement = getResponsiveValue(labelPlacementProp, breakpoints);
+  const labelAlign = getResponsiveValue(labelAlignProp, breakpoints);
+  const labelInlineSize = getResponsiveValue(labelInlineSizeProp, breakpoints);
+  const orientation = labelPlacement === "side" ? "horizontal" : "vertical";
+  const formStyle = labelInlineSize ? {
+    "--template-columns": templatePresets[labelInlineSize]
+  } : void 0;
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: { labelPlacement, labelAlign }, children: /* @__PURE__ */ jsx(
+    Form$1,
+    {
+      "data-orientation": orientation,
+      className: clsx(s.base, s[orientation], className),
+      style: { ...style, ...formStyle },
+      ...other,
+      ref
+    }
+  ) });
+});
+const Fieldset = polymorphicForwardRef(
+  ({ className, as: Tag = "fieldset", ...other }, ref) => /* @__PURE__ */ jsx(Tag, { className: clsx(s.fieldset, className), ...other, ref })
+);
+const Legend = polymorphicForwardRef(
+  ({ className, as = "p", ...other }, ref) => /* @__PURE__ */ jsx(
+    Typography,
+    {
+      as,
+      variant: "text-big",
+      className: clsx(s.legend, className),
+      ...other,
+      ref
+    }
+  )
+);
+FormComponent.displayName = "Form";
+const Form = FormComponent;
+Form.Fieldset = Fieldset;
+Form.Legend = Legend;
+export {
+  Fieldset,
+  Form,
+  FormComponent,
+  Legend
+};

package/dist/components/Form/Form.module.css.js

@@ -0,0 +1,17 @@
+const base = "kbq-form-40d37e";
+const fieldset = "kbq-form-fieldset-b2924b";
+const legend = "kbq-form-legend-91e738";
+const horizontal = "kbq-form-horizontal-52dea8";
+const s = {
+  base,
+  fieldset,
+  legend,
+  horizontal
+};
+export {
+  base,
+  s as default,
+  fieldset,
+  horizontal,
+  legend
+};

package/dist/components/Form/FormContext.d.ts

@@ -0,0 +1,7 @@
+import type { FormControlPropLabelAlign, FormControlPropLabelPlacement } from '../FormControl';
+export type FormContextProps = {
+    labelPlacement?: FormControlPropLabelPlacement;
+    labelAlign?: FormControlPropLabelAlign;
+};
+export declare const FormContext: import("react").Context<FormContextProps>;
+export declare const useForm: () => FormContextProps;

package/dist/components/Form/FormContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+const FormContext = createContext({});
+const useForm = () => useContext(FormContext);
+export {
+  FormContext,
+  useForm
+};

package/dist/components/Form/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Form';
+export * from './FormContext';
+export * from './types';

package/dist/components/Form/types.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentRef } from 'react';
+import type { FormProps as FormPropsPrimitive } from '@koobiq/react-primitives';
+import type { ResponsiveValue } from '../../utils';
+import type { FormControlPropLabelAlign, FormControlPropLabelPlacement } from '../FormControl';
+export declare const formPropLabelInlineSize: readonly ["80", "128", "160", "200", "240", "280", "320", "360", "400", "1/4", "2/5", "1/2", "max-content"];
+export type FormPropLabelInlineSize = (typeof formPropLabelInlineSize)[number];
+export type FormProps = {
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * Responsive values allowed.
+     * @default 'top'
+     */
+    labelPlacement?: FormControlPropLabelPlacement | ResponsiveValue<FormControlPropLabelPlacement>;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * Responsive values allowed.
+     * @default 'start'
+     */
+    labelAlign?: FormControlPropLabelAlign | ResponsiveValue<FormControlPropLabelAlign>;
+    /**
+     * Size of the label column when `labelPlacement="side"`.
+     * Ignored for `"top"`.
+     *
+     * Supports px tokens (`'80'–'400'`), fractions (`'1/4'`, `'2/5'`, `'1/2'`),
+     * or `'max-content'`. Responsive values allowed.
+     * @default 'max-content'
+     */
+    labelInlineSize?: FormPropLabelInlineSize | ResponsiveValue<FormPropLabelInlineSize>;
+} & FormPropsPrimitive;
+export type FormRef = ComponentRef<'form'>;

package/dist/components/Form/types.js

@@ -0,0 +1,18 @@
+const formPropLabelInlineSize = [
+  "80",
+  "128",
+  "160",
+  "200",
+  "240",
+  "280",
+  "320",
+  "360",
+  "400",
+  "1/4",
+  "2/5",
+  "1/2",
+  "max-content"
+];
+export {
+  formPropLabelInlineSize
+};

package/dist/components/Form/utils.d.ts

@@ -0,0 +1,15 @@
+export declare const templatePresets: {
+    'max-content': undefined;
+    '1/4': string;
+    '2/5': string;
+    '1/2': string;
+    '80': string;
+    '128': string;
+    '160': string;
+    '200': string;
+    '240': string;
+    '280': string;
+    '320': string;
+    '360': string;
+    '400': string;
+};

package/dist/components/Form/utils.js

@@ -0,0 +1,18 @@
+const templatePresets = {
+  "max-content": void 0,
+  "1/4": "1fr 3fr",
+  "2/5": "2fr 3fr",
+  "1/2": "1fr 1fr",
+  "80": "80px 1fr",
+  "128": "128px 1fr",
+  "160": "160px 1fr",
+  "200": "200px 1fr",
+  "240": "240px 1fr",
+  "280": "280px 1fr",
+  "320": "320px 1fr",
+  "360": "360px 1fr",
+  "400": "400px 1fr"
+};
+export {
+  templatePresets
+};

package/dist/components/FormControl/FormControl.js

@@ -1,31 +1,32 @@
 import { jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./FormControl.module.css.js";
+import { useForm } from "../Form/FormContext.js";
 const FormControl = polymorphicForwardRef(
-  ({
-    labelPlacement = "top",
-    labelAlign = "start",
-    as: Tag = "div",
-    fullWidth,
-    className,
-    ...other
-  }, ref) => /* @__PURE__ */ jsx(
-    Tag,
-    {
-      className: clsx(
-        s.base,
-        className,
-        s[labelAlign],
-        s[labelPlacement],
-        fullWidth && s.fullWidth
-      ),
-      "data-label-align": labelAlign,
-      "data-label-placement": labelPlacement,
-      "data-fullwidth": fullWidth || void 0,
-      ...other,
-      ref
-    }
-  )
+  (props, ref) => {
+    const { as: Tag = "div", fullWidth, className, ...other } = props;
+    const { labelPlacement: formLabelPlacement, labelAlign: formLabelAlign } = useForm();
+    const labelPlacement = props.labelPlacement ?? formLabelPlacement ?? "top";
+    const labelAlign = props.labelAlign ?? formLabelAlign ?? "start";
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        className: clsx(
+          s.base,
+          className,
+          s[labelAlign],
+          s[labelPlacement],
+          fullWidth && s.fullWidth
+        ),
+        "data-slot": "form-control",
+        "data-label-align": labelAlign,
+        "data-label-placement": labelPlacement,
+        "data-fullwidth": fullWidth || void 0,
+        ...other,
+        ref
+      }
+    );
+  }
 );
 FormControl.displayName = "FormControl";
 export {

package/dist/components/Input/Input.d.ts

@@ -2,7 +2,7 @@ import { TextField } from '@koobiq/react-primitives';
 import { type FieldContentGroupProps, type FieldCaptionProps, type FieldInputProps, type FieldErrorProps } from '../FieldComponents';
 import { type FormControlProps } from '../FormControl';
 import { type FormControlLabelProps } from '../FormControlLabel';
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "labelPlacement" | "labelAlign" | "fullWidth" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;

package/dist/components/InputNumber/InputNumber.d.ts

@@ -2,7 +2,7 @@ import { NumberField } from '@koobiq/react-primitives';
 import { type FieldCaptionProps, type FieldContentGroupProps, type FieldInputProps, type FieldErrorProps } from '../FieldComponents';
 import { type FormControlProps } from '../FormControl';
 import { type FormControlLabelProps } from '../FormControlLabel';
-export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "labelPlacement" | "labelAlign" | "fullWidth" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;

package/dist/components/List/List.js

@@ -15,7 +15,7 @@ import { Typography } from "../Typography/Typography.js";
 import { ListOption } from "./components/ListOption/ListOption.js";
 const { list } = utilClasses;
 function ListInner(props) {
-  const { label, className, style, slotProps, state, listRef } = props;
+  const { label, className, style, slotProps, state, listRef, isPadded } = props;
   const domRef = useDOMRef(listRef);
   const { listBoxProps, labelProps } = useListBox(props, state, domRef);
   const titleProps = mergeProps(
@@ -30,7 +30,8 @@ function ListInner(props) {
     {
       style,
       ref: domRef,
-      className: clsx(list, className)
+      className: clsx(list, className),
+      "data-padded": isPadded || void 0
     },
     slotProps?.list,
     listBoxProps
@@ -38,7 +39,7 @@ function ListInner(props) {
   const renderItems = (listState) => [...listState.collection].map((item) => {
     switch (item.type) {
       case "divider":
-        return /* @__PURE__ */ jsx(Divider, { className: s.divider }, item.key);
+        return /* @__PURE__ */ jsx(Divider, {}, item.key);
       case "item":
         return /* @__PURE__ */ jsx(ListOption, { item, state }, item.key);
       case "section":

package/dist/components/List/List.module.css.js

@@ -1,11 +1,8 @@
 const label = "kbq-list-label-e4431c";
-const divider = "kbq-list-divider-fd5123";
 const s = {
-  label,
-  divider
+  label
 };
 export {
   s as default,
-  divider,
   label
 };

package/dist/components/List/components/ListSection/ListSection.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useListBoxSection } from "@koobiq/react-primitives";
-import s from "./ListSection.module.css.js";
-import { Typography } from "../../../Typography/Typography.js";
+import { utilClasses } from "../../../../styles/utility.js";
 import { ListOption } from "../ListOption/ListOption.js";
+import { Typography } from "../../../Typography/Typography.js";
+const { listHeading } = utilClasses;
 function ListSection({ section, state }) {
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
@@ -17,12 +18,12 @@ function ListSection({ section, state }) {
         display: "block",
         variant: "caps-compact-strong",
         color: "contrast-secondary",
-        className: s.heading,
+        className: listHeading,
         ...headingProps,
         children: section.rendered
       }
     ),
-    /* @__PURE__ */ jsx("ul", { ...groupProps, className: s.base, children: [...section.childNodes].map((node) => /* @__PURE__ */ jsx(ListOption, { item: node, state }, node.key)) })
+    /* @__PURE__ */ jsx("ul", { ...groupProps, children: [...section.childNodes].map((node) => /* @__PURE__ */ jsx(ListOption, { item: node, state }, node.key)) })
   ] }) });
 }
 export {

package/dist/components/List/types.d.ts

@@ -14,6 +14,8 @@ export type ListProps<T> = ExtendableProps<{
         label?: TypographyProps;
         list?: ComponentPropsWithRef<'div'>;
     };
+    /** Whether the component has outer padding. */
+    isPadded?: boolean;
 }, AriaListBoxProps<T>>;
 export type ListRef = ComponentRef<'ul'>;
 export type ListComponent = <T>(props: ListProps<T>) => ReactElement | null;

package/dist/components/Menu/Menu.js

@@ -6,7 +6,7 @@ import { useDOMRef, mergeProps, clsx, Pressable } from "@koobiq/react-core";
 import { useMenuTriggerState, useMenuTrigger } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
 import s from "./Menu.module.css.js";
-import { MenuInner } from "./components/MenuInner/MenuInner.js";
+import { MenuList } from "./components/MenuList/MenuList.js";
 import { Header } from "../Collections/Header.js";
 import { Item } from "../Collections/Item.js";
 import { Section } from "../Collections/Section.js";
@@ -59,7 +59,7 @@ function MenuRender(props, ref) {
       ref: controlRef,
       ...menuTriggerProps
     }),
-    /* @__PURE__ */ jsx(PopoverInner, { type: "menu", placement, ...popoverProps, children: /* @__PURE__ */ jsx(MenuInner, { ...listProps }) })
+    /* @__PURE__ */ jsx(PopoverInner, { type: "menu", placement, ...popoverProps, children: /* @__PURE__ */ jsx(MenuList, { ...listProps }) })
   ] });
 }
 const MenuComponent = forwardRef(MenuRender);

package/dist/components/Menu/components/MenuList/MenuList.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentRef, ReactElement } from 'react';
+import type { AriaMenuOptions } from '@koobiq/react-primitives';
+export type MenuListProps<T> = AriaMenuOptions<T>;
+export type MenuListComponent = <T>(props: MenuListProps<T>) => ReactElement | null;
+export type MenuListRef = ComponentRef<'ul'>;
+export declare const MenuList: MenuListComponent;

package/dist/components/Menu/components/{MenuInner/MenuInner.js → MenuList/MenuList.js}

@@ -4,13 +4,13 @@ import { forwardRef } from "react";
 import { useDOMRef, clsx } from "@koobiq/react-core";
 import { useTreeState, useMenu } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
-import s from "./MenuInner.module.css.js";
+import s from "./MenuList.module.css.js";
 import { MenuSection } from "../MenuSection/MenuSection.js";
 import { MenuHeader } from "../MenuHeader/MenuHeader.js";
 import { MenuItem } from "../MenuItem/MenuItem.js";
 import { Divider } from "../../../Divider/Divider.js";
 const { list } = utilClasses;
-function MenuInnerRender(props, ref) {
+function MenuListRender(props, ref) {
   const state = useTreeState(props);
   const domRef = useDOMRef(ref);
   const { menuProps } = useMenu(props, state, domRef);
@@ -20,7 +20,7 @@ function MenuInnerRender(props, ref) {
       case "header":
         return /* @__PURE__ */ jsx(MenuHeader, { item }, item.key);
       case "divider":
-        return /* @__PURE__ */ jsx(Divider, { className: s.divider }, item.key);
+        return /* @__PURE__ */ jsx(Divider, {}, item.key);
       case "item":
         return /* @__PURE__ */ jsx(MenuItem, { item, state }, item.key);
       case "section":
@@ -33,6 +33,7 @@ function MenuInnerRender(props, ref) {
     "ul",
     {
       ...menuProps,
+      "data-padded": true,
       className: clsx(s.base, list),
       ...multiple && { "aria-multiselectable": true },
       ref: domRef,
@@ -40,7 +41,7 @@ function MenuInnerRender(props, ref) {
     }
   );
 }
-const MenuInner = forwardRef(MenuInnerRender);
+const MenuList = forwardRef(MenuListRender);
 export {
-  MenuInner
+  MenuList
 };

package/dist/components/Menu/components/MenuList/MenuList.module.css.js

@@ -0,0 +1,8 @@
+const base = "kbq-menulist-0e5f46";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/Menu/components/MenuList/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuList';

package/dist/components/Menu/components/MenuSection/MenuSection.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMenuSection } from "@koobiq/react-primitives";
-import s from "./MenuSection.module.css.js";
+import { utilClasses } from "../../../../styles/utility.js";
 import { MenuItem } from "../MenuItem/MenuItem.js";
 import { Typography } from "../../../Typography/Typography.js";
+const { listHeading } = utilClasses;
 function MenuSection({ section, state }) {
   const { itemProps, headingProps, groupProps } = useMenuSection({
     heading: section.rendered,
@@ -17,12 +18,12 @@ function MenuSection({ section, state }) {
         display: "block",
         variant: "caps-compact-strong",
         color: "contrast-secondary",
-        className: s.heading,
+        className: listHeading,
         ...headingProps,
         children: section.rendered
       }
     ),
-    /* @__PURE__ */ jsx("ul", { ...groupProps, className: s.base, children: [...section.childNodes].map((node) => /* @__PURE__ */ jsx(MenuItem, { item: node, state }, node.key)) })
+    /* @__PURE__ */ jsx("ul", { ...groupProps, children: [...section.childNodes].map((node) => /* @__PURE__ */ jsx(MenuItem, { item: node, state }, node.key)) })
   ] });
 }
 export {

package/dist/components/Menu/components/index.d.ts

@@ -1 +1 @@
-export * from './MenuInner';
+export * from './MenuList';

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,7 +1,7 @@
 import { type FieldCaptionProps, type FieldContentGroupProps, type FieldInputProps, type FieldErrorProps } from '../FieldComponents';
 import { type FormControlProps } from '../FormControl';
 import { type FormControlLabelProps } from '../FormControlLabel';
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "validationState" | "description">, "caption" | "style" | "className" | `data-${string}` | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "startAddon" | "endAddon" | "isLabelHidden"> & {
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "validationState" | "description">, "caption" | "style" | "className" | "variant" | "labelPlacement" | "labelAlign" | `data-${string}` | "fullWidth" | "slotProps" | "startAddon" | "endAddon" | "isLabelHidden"> & {
     className?: string;
     style?: import("react").CSSProperties;
     isLabelHidden?: boolean;

package/dist/components/SearchInput/SearchInput.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { IconMagnifyingGlass16, IconXmarkCircle16 } from "@koobiq/react-icons";
-import { useSearchFieldState, removeDataAttributes, useSearchField, FieldErrorContext } from "@koobiq/react-primitives";
+import { useSearchFieldState, removeDataAttributes, useSlottedContext, FormContext, useSearchField, FieldErrorContext } from "@koobiq/react-primitives";
 import s from "./SearchInput.module.css.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { FormControl } from "../FormControl/FormControl.js";
@@ -36,6 +36,8 @@ const SearchInput = forwardRef(
     } = props;
     const state = useSearchFieldState(removeDataAttributes(props));
     const domRef = useDOMRef(ref);
+    const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+    const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
     const hasClearButton = state.value !== "" && !isDisabled && !isReadOnly;
     const {
       labelProps: labelPropsAria,
@@ -44,7 +46,11 @@ const SearchInput = forwardRef(
       errorMessageProps: errorMessagePropsAria,
       clearButtonProps: clearButtonPropsAria,
       ...validation
-    } = useSearchField(removeDataAttributes(props), state, domRef);
+    } = useSearchField(
+      { ...removeDataAttributes(props), validationBehavior },
+      state,
+      domRef
+    );
     const { isInvalid } = validation;
     const rootProps = mergeProps(
       {