@koobiq/react-components 0.9.0 → 0.11.0

package/dist/components/Select/Select.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 import { useLocalizedStringFormatter, useDOMRef, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
 import { IconXmarkCircle16, IconChevronDownS16 } from "@koobiq/react-icons";
-import { useMultiSelectState, removeDataAttributes, useMultiSelect, FieldErrorContext } from "@koobiq/react-primitives";
+import { useSlottedContext, FormContext, useMultiSelectState, removeDataAttributes, useMultiSelect, FieldErrorContext } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
 import intlMessages from "./intl.js";
 import s from "./Select.module.css.js";
@@ -26,6 +26,7 @@ function SelectRender(props, ref) {
     isClearable,
     "data-testid": testId,
     selectionMode = "single",
+    noItemsText,
     selectedTagsOverflow = "responsive",
     labelPlacement,
     labelAlign,
@@ -46,6 +47,8 @@ function SelectRender(props, ref) {
   } = props;
   const t = useLocalizedStringFormatter(intlMessages);
   const domRef = useDOMRef(ref);
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
   const state = useMultiSelectState(
     removeDataAttributes({ ...props, selectionMode })
   );
@@ -66,7 +69,8 @@ function SelectRender(props, ref) {
     removeDataAttributes({
       ...props,
       selectionMode,
-      disallowEmptySelection: true
+      disallowEmptySelection: true,
+      validationBehavior
     }),
     state,
     domRef
@@ -85,14 +89,14 @@ function SelectRender(props, ref) {
     style
   });
   const listProps = mergeProps(
-    { className: s.list, state },
-    slotProps?.list,
-    menuProps
+    { className: s.list, state, noItemsText },
+    menuProps,
+    slotProps?.list
   );
   const labelProps = mergeProps(
     { isHidden: isLabelHidden, children: label, isRequired },
-    slotProps?.label,
-    labelPropsAria
+    labelPropsAria,
+    slotProps?.label
   );
   const clearButtonProps = mergeProps(
     {
@@ -150,7 +154,7 @@ function SelectRender(props, ref) {
   const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
   const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage, errorMessageProps);
   const renderDefaultValue = (state2, states) => {
-    if (!state2.selectedItems) return null;
+    if (!state2.selectedItems?.length) return null;
     if (selectionMode === "multiple")
       return /* @__PURE__ */ jsx(
         TagGroup,

package/dist/components/Select/components/SelectList/SelectList.d.ts

@@ -1,8 +1,10 @@
-import type { Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import { type MultiSelectState } from '@koobiq/react-primitives';
 import type { ListProps } from '../../../List';
 export type SelectListProps<T extends object> = {
     state: MultiSelectState<T>;
     listRef?: Ref<HTMLUListElement>;
-} & Omit<ListProps<T>, 'ref'>;
+    /** Content to display when no items are available. */
+    noItemsText?: ReactNode;
+} & Omit<ListProps<T>, 'ref' | 'children'>;
 export declare function SelectList<T extends object>(props: SelectListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/components/SelectList/SelectList.js

@@ -1,16 +1,28 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useDOMRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useLocalizedStringFormatter, useDOMRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
 import { useListBox } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
+import intlMessages from "../../intl.js";
 import s from "./SelectList.module.css.js";
 import { SelectOption } from "../SelectOption/SelectOption.js";
+import { isPrimitiveNode } from "../../../../utils/isPrimitiveNode.js";
 import { Typography } from "../../../Typography/Typography.js";
 import { ListSection } from "../../../List/components/ListSection/ListSection.js";
 import { Divider } from "../../../Divider/Divider.js";
-const { list } = utilClasses;
+const { list, typography } = utilClasses;
 function SelectList(props) {
-  const { label, className, style, slotProps, state, listRef } = props;
+  const {
+    label,
+    className,
+    style,
+    slotProps,
+    state,
+    listRef,
+    noItemsText: noItemsTextProp
+  } = props;
+  const t = useLocalizedStringFormatter(intlMessages);
   const domRef = useDOMRef(listRef);
+  const isEmpty = state.collection.size === 0;
   const { listBoxProps, labelProps } = useListBox(props, state, domRef);
   const titleProps = mergeProps(
     {
@@ -24,15 +36,28 @@ function SelectList(props) {
     {
       style,
       ref: domRef,
-      className: clsx(list, className)
+      className: clsx(list, className),
+      "data-padded": true
     },
     slotProps?.list,
     listBoxProps
   );
+  const noItemsText = noItemsTextProp ?? t.format("empty items");
+  const emptyState = isEmpty ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "option",
+      className: clsx(s.empty, typography["text-normal"]),
+      ...!isPrimitiveNode(noItemsText) && {
+        style: { display: "contents" }
+      },
+      children: noItemsText
+    }
+  ) : null;
   const renderItems = (treeState) => [...treeState.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(SelectOption, { item, state }, item.key);
       case "section":
@@ -43,7 +68,10 @@ function SelectList(props) {
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isNotNil(label) && /* @__PURE__ */ jsx(Typography, { ...titleProps, children: label }),
-    /* @__PURE__ */ jsx("ul", { ...listProps, children: renderItems(state) })
+    /* @__PURE__ */ jsxs("ul", { ...listProps, children: [
+      renderItems(state),
+      emptyState
+    ] })
   ] });
 }
 export {

package/dist/components/Select/components/SelectList/SelectList.module.css.js

@@ -1,11 +1,11 @@
 const label = "kbq-selectlist-label-4b49f4";
-const divider = "kbq-selectlist-divider-7c167f";
+const empty = "kbq-selectlist-empty-e6a9b0";
 const s = {
   label,
-  divider
+  empty
 };
 export {
   s as default,
-  divider,
+  empty,
   label
 };

package/dist/components/Select/intl.js

@@ -1,10 +1,12 @@
 const intlMessages = {
   "ru-RU": {
+    "empty items": "Нет вариантов выбора",
     "selected items": "Выбранные элементы",
     clear: "Очистить",
     more: ({ count }) => `еще ${count}`
   },
   "en-US": {
+    "empty items": "No options available",
     "selected items": "Selected items",
     clear: "Clear",
     more: ({ count }) => `${count} more`

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

@@ -5,8 +5,8 @@ import { type FieldErrorProps, type FieldSelectProps, type FieldCaptionProps, ty
 import { type FormControlPropLabelAlign, type FormControlPropLabelPlacement } from '../FormControl';
 import type { FormControlLabelProps } from '../FormControlLabel';
 import type { IconButtonProps } from '../IconButton';
-import type { ListProps } from '../List';
 import type { PopoverProps } from '../Popover';
+import type { SelectListProps } from './components';
 export declare const selectPropSelectedTagsOverflow: readonly ["multiline", "responsive"];
 export type SelectPropSelectedTagsOverflow = (typeof selectPropSelectedTagsOverflow)[number];
 export declare const selectPropLabelPlacement: readonly ["top", "side"];
@@ -77,11 +77,13 @@ export type SelectProps<T> = ExtendableProps<{
         isDisabled?: boolean;
         isRequired?: boolean;
     }) => ReactNode;
+    /** Content to display when no items are available. */
+    noItemsText?: ReactNode;
     /** The props used for each slot inside. */
     slotProps?: {
         popover?: PopoverProps;
         label?: FormControlLabelProps;
-        list?: ListProps<T>;
+        list?: Omit<SelectListProps<object>, 'state'>;
         control?: FieldSelectProps;
         caption?: FieldCaptionProps;
         group?: FieldContentGroupProps;

package/dist/components/Textarea/Textarea.d.ts

@@ -4,7 +4,7 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<{
     required?: boolean;
     hiddenLabel?: boolean;
     readonly?: boolean;
-} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "cols" | "rows" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "isLabelHidden" | "expand"> & {
+} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "cols" | "rows" | "variant" | "labelPlacement" | "labelAlign" | "fullWidth" | "slotProps" | "data-testid" | "isLabelHidden" | "expand"> & {
     className?: string;
     style?: import("react").CSSProperties;
     variant?: import("./types").TextareaPropVariant;

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.d.ts

@@ -3,4 +3,4 @@ export declare const TextareaContextConsumer: import("react").ForwardRefExoticCo
     isRequired?: boolean;
     isInvalid?: boolean;
     isDisabled?: boolean;
-} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "labelPlacement" | "variant" | "slotProps" | "errorMessage" | "isLabelHidden" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "labelPlacement" | "slotProps" | "errorMessage" | "isLabelHidden" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/TimePicker/TimePicker.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useLocale, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { IconClock16 } from "@koobiq/react-icons";
-import { useTimeFieldState, removeDataAttributes, useTimeField, FieldErrorContext } from "@koobiq/react-primitives";
+import { useSlottedContext, FormContext, useTimeFieldState, removeDataAttributes, useTimeField, FieldErrorContext } from "@koobiq/react-primitives";
 import s from "./TimePicker.module.css.js";
 import { FormControl } from "../FormControl/FormControl.js";
 import { FormControlLabel } from "../FormControlLabel/FormControlLabel.js";
@@ -31,8 +31,11 @@ function TimePickerRender(props, ref) {
     startAddon,
     "data-testid": testId
   } = props;
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
   const state = useTimeFieldState({
     ...removeDataAttributes(props),
+    validationBehavior,
     locale
   });
   const {

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<import("@react-types/tooltip").TooltipTriggerProps, "children" | "className" | "id" | "offset" | `data-${string}` | "variant" | "placement" | "control" | "portalContainer" | "anchorRef" | "hideArrow" | "arrowBoundaryOffset" | "crossOffset" | "delay" | "closeDelay" | keyof {
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<import("@react-types/tooltip").TooltipTriggerProps, "children" | "className" | "id" | "offset" | "variant" | `data-${string}` | "placement" | "control" | "portalContainer" | "anchorRef" | "hideArrow" | "arrowBoundaryOffset" | "crossOffset" | "delay" | "closeDelay" | keyof {
     open?: boolean;
     disabled?: boolean;
 }> & {

package/dist/components/index.d.ts

@@ -37,6 +37,7 @@ export * from './DateInput';
 export * from './DatePicker';
 export * from './TimePicker';
 export * from './SearchInput';
+export * from './Form';
 export * from './layout';
 export { useListData, type ListData, type ListOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
 export { useRouter, useLocale, type Locale, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -82,6 +82,9 @@ import { TimePicker, TimePickerRender } from "./components/TimePicker/TimePicker
 import { timePickerPropLabelAlign, timePickerPropLabelPlacement } from "./components/TimePicker/types.js";
 import { SearchInput } from "./components/SearchInput/SearchInput.js";
 import { searchInputPropLabelAlign, searchInputPropLabelPlacement, searchInputPropVariant } from "./components/SearchInput/types.js";
+import { Fieldset, Form, FormComponent, Legend } from "./components/Form/Form.js";
+import { FormContext, useForm } from "./components/Form/FormContext.js";
+import { formPropLabelInlineSize } from "./components/Form/types.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -101,7 +104,11 @@ export {
   DatePicker,
   DatePickerRender,
   Divider,
+  Fieldset,
   FlexBox,
+  Form,
+  FormComponent,
+  FormContext,
   FormControl,
   FormControlLabel,
   Grid,
@@ -109,6 +116,7 @@ export {
   IconButton,
   Input,
   InputNumber,
+  Legend,
   Link,
   List,
   ListInner,
@@ -173,6 +181,7 @@ export {
   flexPropWrap,
   formControlPropLabelAlign,
   formControlPropLabelPlacement,
+  formPropLabelInlineSize,
   gridPropGap,
   iconButtonPropSize,
   iconButtonPropVariant,
@@ -223,6 +232,7 @@ export {
   typographyPropVariant,
   useBreakpoints,
   useDateFormatter,
+  useForm,
   useListData,
   useLocale,
   useMatchedBreakpoints,

package/dist/style.css

@@ -1352,7 +1352,7 @@
   font-family: inherit;
 }
 
-.kbq-utility-list-792630 {
+.kbq-utility-list-792630, .kbq-utility-list-792630 ul {
   outline: none;
   margin: 0;
   padding: 0;
@@ -1360,6 +1360,22 @@
   overflow: auto;
 }
 
+.kbq-utility-list-792630[data-padded] {
+  padding-block: var(--kbq-size-xxs);
+}
+
+.kbq-utility-list-792630[data-padded] .kbq-utility-list-item-862731, .kbq-utility-list-792630[data-padded] .kbq-utility-list-heading-3c364a {
+  border-inline: var(--kbq-size-xxs) solid transparent;
+  background-clip: padding-box;
+}
+
+.kbq-utility-list-heading-3c364a {
+  -webkit-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  padding: var(--kbq-size-s) var(--kbq-size-m);
+}
+
 .kbq-utility-list-item-862731 {
   --list-item-bg-color: ;
   --list-item-outline-color: transparent;
@@ -1367,17 +1383,33 @@
   cursor: pointer;
   box-sizing: border-box;
   gap: var(--kbq-size-s);
-  border-radius: var(--kbq-size-s);
   color: var(--kbq-foreground-contrast);
-  background-color: var(--list-item-bg-color);
   padding: var(--kbq-size-xs) var(--kbq-size-m);
-  outline-offset: calc(-1 * var(--list-item-outline-width));
-  outline: var(--list-item-outline-width) solid var(--list-item-outline-color);
-  transition: border-color var(--kbq-transition-default), border-radius var(--kbq-transition-default), background-color var(--kbq-transition-default), color var(--kbq-transition-default);
+  z-index: var(--kbq-layer-absolute);
+  transition: border-color var(--kbq-transition-default), border-radius var(--kbq-transition-default), color var(--kbq-transition-default);
+  outline: none;
   flex-shrink: 0;
   align-items: center;
   text-decoration: none;
   display: flex;
+  position: relative;
+}
+
+.kbq-utility-list-item-862731 > * {
+  z-index: var(--kbq-layer-absolute);
+}
+
+.kbq-utility-list-item-862731:before {
+  content: "";
+  outline-offset: calc(-1 * var(--list-item-outline-width));
+  outline: var(--list-item-outline-width) solid var(--list-item-outline-color);
+  transition: background-color var(--kbq-transition-default);
+  background-color: var(--list-item-bg-color);
+  border-radius: var(--kbq-size-s);
+  pointer-events: none;
+  z-index: -1;
+  position: absolute;
+  inset: 0;
 }
 
 .kbq-utility-list-item-862731:where([data-hovered="true"]) {
@@ -1426,12 +1458,12 @@
   --list-item-bg-color: var(--kbq-states-background-contrast-less-active);
 }
 
-.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])) {
+.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])):before {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
 }
 
-.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]) + :is([data-selected="true"], [data-focus-visible="true"]) {
+.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]) + :is([data-selected="true"], [data-focus-visible="true"]):before {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
@@ -3117,24 +3149,6 @@
 .kbq-list-label-e4431c {
   padding: var(--kbq-size-xs) var(--kbq-size-m);
 }
-
-.kbq-list-divider-fd5123 {
-  margin-inline: calc(var(--kbq-size-xxs) * -1);
-  inline-size: initial;
-}
-.kbq-listsection-d94a57 {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: auto;
-}
-
-.kbq-listsection-heading-5bd9e3 {
-  -webkit-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  padding: var(--kbq-size-s) var(--kbq-size-m);
-}
 .kbq-divider-16da20 {
   border-style: solid;
   border-color: var(--kbq-line-contrast-less);
@@ -3209,7 +3223,6 @@
 
 .kbq-select-list-8ffac0 {
   inline-size: 100%;
-  padding: var(--kbq-size-xxs);
 }
 
 .kbq-select-popover-79fc05 {
@@ -3305,9 +3318,10 @@
   padding: var(--kbq-size-xs) var(--kbq-size-m);
 }
 
-.kbq-selectlist-divider-7c167f {
-  margin-inline: calc(var(--kbq-size-xxs) * -1);
-  inline-size: initial;
+.kbq-selectlist-empty-e6a9b0 {
+  color: var(--kbq-foreground-contrast-secondary);
+  padding-block: var(--kbq-size-xs);
+  padding-inline: var(--kbq-size-l);
 }
 .kbq-taggroup-container-c4d544 {
   inline-size: calc(100% + var(--kbq-size-s));
@@ -3457,28 +3471,9 @@
   min-inline-size: 200px;
   max-inline-size: 640px;
 }
-.kbq-menuinner-0117f8 {
-  padding: var(--kbq-size-xxs);
+.kbq-menulist-0e5f46 {
   inline-size: 100%;
 }
-
-.kbq-menuinner-divider-acbe04 {
-  margin-inline: calc(var(--kbq-size-xxs) * -1);
-  inline-size: initial;
-}
-.kbq-menusection-6a5530 {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: auto;
-}
-
-.kbq-menusection-heading-2be1f1 {
-  -webkit-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  padding: var(--kbq-size-s) var(--kbq-size-m);
-}
 .kbq-buttontogglegroup-79a88d {
   --thumb-inline-size-start: ;
   --thumb-transform-start: ;
@@ -4091,7 +4086,7 @@
 }
 
 .kbq-datesegment-3b7153:focus {
-  color: var(--date-input-segment-color);
+  color: highlighttext;
   background-color: highlight;
   outline: none;
 }
@@ -4164,6 +4159,54 @@
 .kbq-searchinput-clearButton-71f872 {
   margin-inline-end: calc(-1 * var(--kbq-size-xxs));
 }
+.kbq-form-40d37e, .kbq-form-fieldset-b2924b {
+  --gap-y: var(--kbq-size-xl);
+  --template-columns: max-content 1fr;
+  display: grid;
+}
+
+:is(.kbq-form-40d37e, .kbq-form-fieldset-b2924b) > [data-slot="form-control"] {
+  width: 100%;
+}
+
+:is(.kbq-form-40d37e, .kbq-form-fieldset-b2924b) > [data-slot="form-control"]:not(:last-child) {
+  margin-block-end: var(--gap-y);
+}
+
+:is(.kbq-form-40d37e, .kbq-form-fieldset-b2924b) > * {
+  grid-column: 1 / -1;
+  justify-self: start;
+}
+
+.kbq-form-fieldset-b2924b {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.kbq-form-fieldset-b2924b .kbq-form-legend-91e738 {
+  margin-block-end: var(--kbq-size-l);
+}
+
+.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b {
+  grid-template-columns: var(--template-columns);
+}
+
+:is(.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b) > [data-slot="form-control"] {
+  grid-template-columns: subgrid;
+  align-items: center;
+  display: grid;
+}
+
+:is(.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b) > [data-slot="form-control"] > :first-child {
+  grid-column: 1;
+  align-self: start;
+}
+
+:is(.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b) > [data-slot="form-control"] > :last-child {
+  grid-column: 2;
+  justify-self: start;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/dist/styles/utility.d.ts

@@ -70,5 +70,6 @@ export declare const utilClasses: {
     };
     list: string;
     listItem: string;
+    listHeading: string;
     scrollable: string;
 };

package/dist/styles/utility.js

@@ -71,7 +71,8 @@ const utilClasses = {
   color,
   typography,
   list: s.list,
-  listItem: s["list-item"]
+  listItem: s["list-item"],
+  listHeading: s["list-heading"]
 };
 export {
   utilClasses

package/dist/styles/utility.module.css.js

@@ -67,7 +67,8 @@ const s = {
   "italic-compact-strong": "kbq-utility-italic-compact-strong-d8e16e",
   inherit,
   list,
-  "list-item": "kbq-utility-list-item-862731"
+  "list-item": "kbq-utility-list-item-862731",
+  "list-heading": "kbq-utility-list-heading-3c364a"
 };
 export {
   s as default,

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './getResponsiveValue';
 export * from './capitalizeFirstLetter';
+export * from './isPrimitiveNode';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.9.0",
-    "@koobiq/react-core": "0.9.0",
-    "@koobiq/react-icons": "0.9.0",
-    "@koobiq/react-primitives": "0.9.0"
+    "@koobiq/react-core": "0.11.0",
+    "@koobiq/logger": "0.11.0",
+    "@koobiq/react-icons": "0.11.0",
+    "@koobiq/react-primitives": "0.11.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",

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

@@ -1,11 +0,0 @@
-const base = "kbq-listsection-d94a57";
-const heading = "kbq-listsection-heading-5bd9e3";
-const s = {
-  base,
-  heading
-};
-export {
-  base,
-  s as default,
-  heading
-};

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

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

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

@@ -1,11 +0,0 @@
-const base = "kbq-menuinner-0117f8";
-const divider = "kbq-menuinner-divider-acbe04";
-const s = {
-  base,
-  divider
-};
-export {
-  base,
-  s as default,
-  divider
-};

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

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

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

@@ -1,11 +0,0 @@
-const base = "kbq-menusection-6a5530";
-const heading = "kbq-menusection-heading-2be1f1";
-const s = {
-  base,
-  heading
-};
-export {
-  base,
-  s as default,
-  heading
-};