@koobiq/react-components 0.22.0 → 0.24.0

package/dist/components/ContenPanel/ContentPanelContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from "react";
+const ContentPanelContext = createContext(null);
+export {
+  ContentPanelContext
+};

package/dist/components/ContenPanel/components/ContentPanelContainer/ContentPanelContainer.d.ts

@@ -0,0 +1,2 @@
+import type { ContentPanelContainerProps } from './types';
+export declare const ContentPanelContainer: import("react").ForwardRefExoticComponent<Omit<ContentPanelContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ContenPanel/components/ContentPanelContainer/ContentPanelContainer.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useMemo } from "react";
+import { useMultiRef, useResizeObserverRefs, mergeProps, clsx } from "@koobiq/react-core";
+import { useOverlayTriggerState, Provider, ButtonContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
+import { TRANSITION_TIMEOUT } from "../../constants.js";
+import { ContentPanelContext } from "../../ContentPanelContext.js";
+import { getInlineSize } from "../../utils/index.js";
+import s from "./ContentPanelContainer.module.css.js";
+import { ContentPanelContainerContext } from "./ContentPanelContainerContext.js";
+import { useContentPanelContainer } from "../../hooks/useContentPanelContainer/useContentPanelContainer.js";
+const ContentPanelContainer = forwardRef((props, ref) => {
+  const {
+    children,
+    isOpen,
+    onOpenChange,
+    disableExitOnEscapeKeyDown,
+    defaultOpen,
+    className,
+    slotProps,
+    ...other
+  } = props;
+  const state = useOverlayTriggerState({
+    isOpen,
+    onOpenChange,
+    defaultOpen
+  });
+  const [portalContainer, setPortalContainer] = useState(
+    null
+  );
+  const { triggerProps, containerProps } = useContentPanelContainer(
+    { isKeyboardDismissDisabled: !!disableExitOnEscapeKeyDown },
+    state
+  );
+  const containerRef = useRef(null);
+  const panelRef = useRef(null);
+  const domRef = useMultiRef([
+    ref,
+    containerRef,
+    setPortalContainer
+  ]);
+  const observedRefs = useMemo(
+    () => [containerRef, panelRef],
+    [panelRef.current, containerRef.current, state.isOpen]
+  );
+  const [containerWidth, panelWidth] = useResizeObserverRefs(
+    observedRefs,
+    (el) => {
+      if (el) return getInlineSize(el);
+      return 0;
+    }
+  );
+  const rootProps = mergeProps(
+    {
+      className: clsx(s.base, className),
+      ref: domRef,
+      ...other
+    },
+    containerProps
+  );
+  const bodyProps = {
+    ...slotProps?.body,
+    className: clsx(s.body, slotProps?.body?.className),
+    children: typeof children === "function" ? children(state) : children,
+    style: {
+      ...slotProps?.body?.style,
+      "--content-panel-inline-size": `${panelWidth}px`,
+      "--content-body-transition-duration": `${TRANSITION_TIMEOUT}ms`
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      values: [
+        [
+          ContentPanelContainerContext,
+          {
+            state,
+            containerWidth: containerWidth || void 0,
+            portalContainer
+          }
+        ],
+        [
+          ContentPanelContext,
+          {
+            ref: panelRef,
+            className: s.panel,
+            disableExitOnEscapeKeyDown
+          }
+        ],
+        [
+          ButtonContext,
+          {
+            slots: {
+              [DEFAULT_SLOT]: {},
+              trigger: triggerProps
+            }
+          }
+        ]
+      ],
+      children: /* @__PURE__ */ jsx("div", { ...rootProps, children: /* @__PURE__ */ jsx("div", { ...bodyProps }) })
+    }
+  );
+});
+ContentPanelContainer.displayName = "ContentPanelContainer";
+export {
+  ContentPanelContainer
+};

package/dist/components/ContenPanel/components/ContentPanelContainer/ContentPanelContainer.module.css.js

@@ -0,0 +1,14 @@
+const base = "kbq-contentpanelcontainer-476965";
+const body = "kbq-contentpanelcontainer-body-b7b172";
+const panel = "kbq-contentpanelcontainer-panel-03cf65";
+const s = {
+  base,
+  body,
+  panel
+};
+export {
+  base,
+  body,
+  s as default,
+  panel
+};

package/dist/components/ContenPanel/components/ContentPanelContainer/ContentPanelContainerContext.d.ts

@@ -0,0 +1,7 @@
+import type { OverlayTriggerState } from '@react-stately/overlays';
+export type ContentPanelStateContextProps = {
+    portalContainer?: HTMLElement | null;
+    containerWidth?: number;
+    state: OverlayTriggerState;
+};
+export declare const ContentPanelContainerContext: import("react").Context<ContentPanelStateContextProps>;

package/dist/components/ContenPanel/components/ContentPanelContainer/ContentPanelContainerContext.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext } from "react";
+const ContentPanelContainerContext = createContext(
+  {}
+);
+export {
+  ContentPanelContainerContext
+};

package/dist/components/ContenPanel/components/ContentPanelContainer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ContentPanelContainer';
+export * from './ContentPanelContainerContext';
+export * from './types';

package/dist/components/ContenPanel/components/ContentPanelContainer/types.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithRef, ComponentRef, ReactElement, ReactNode } from 'react';
+import type { DataAttributeProps, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { OverlayTriggerState } from '@react-stately/overlays';
+export type ContentPanelContainerPropContent = ReactNode | ((props: OverlayTriggerState) => ReactElement);
+export type ContentPanelContainerProps = ExtendableComponentPropsWithRef<{
+    /** The content of the container. Can be a render function with panel state. */
+    children?: ContentPanelContainerPropContent;
+    /** If `true`, the panel is open (controlled). */
+    isOpen?: boolean;
+    /** The default open state (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the panel's open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        body?: ComponentPropsWithRef<'div'> & DataAttributeProps;
+    };
+    /**
+     * If `true`, the content panel won't close when the ESC key is pressed.
+     */
+    disableExitOnEscapeKeyDown?: boolean;
+}, 'div'>;
+export type ContentPanelContainerRef = ComponentRef<'div'>;

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

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

package/dist/components/ContenPanel/constants.d.ts

@@ -0,0 +1 @@
+export declare const TRANSITION_TIMEOUT = 300;

package/dist/components/ContenPanel/constants.js

@@ -0,0 +1,4 @@
+const TRANSITION_TIMEOUT = 300;
+export {
+  TRANSITION_TIMEOUT
+};

package/dist/components/ContenPanel/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useContentPanelResize';
+export * from './useContentPanelContainer';

package/dist/components/ContenPanel/hooks/useContentPanelContainer/index.d.ts

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

package/dist/components/ContenPanel/hooks/useContentPanelContainer/useContentPanelContainer.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import type { ButtonBaseProps } from '@koobiq/react-primitives';
+import type { OverlayTriggerState } from '@react-stately/overlays';
+export type UseContentPanelReturnValue = {
+    triggerProps: ButtonBaseProps;
+    closeButtonProps: ButtonBaseProps;
+    containerProps?: HTMLAttributes<HTMLElement>;
+    panelProps?: HTMLAttributes<HTMLElement>;
+    bodyProps?: HTMLAttributes<HTMLElement>;
+};
+export type UseContentPanelContainerProps = {
+    isKeyboardDismissDisabled: boolean;
+};
+export declare function useContentPanelContainer(props: UseContentPanelContainerProps, state: OverlayTriggerState): UseContentPanelReturnValue;

package/dist/components/ContenPanel/hooks/useContentPanelContainer/useContentPanelContainer.js

@@ -0,0 +1,19 @@
+"use client";
+function useContentPanelContainer(props, state) {
+  const { isKeyboardDismissDisabled } = props;
+  return {
+    containerProps: {
+      tabIndex: -1,
+      onKeyDown: (event) => {
+        if (isKeyboardDismissDisabled) return;
+        if (!state.isOpen) return;
+        if (event.key === "Escape") state.close();
+      }
+    },
+    triggerProps: { onPress: state.open },
+    closeButtonProps: { onPress: state.close }
+  };
+}
+export {
+  useContentPanelContainer
+};

package/dist/components/ContenPanel/hooks/useContentPanelResize/index.d.ts

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

package/dist/components/ContenPanel/hooks/useContentPanelResize/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "resize panel": "Изменить ширину панели" },
+  "en-US": { "resize panel": "Resize panel" }
+};
+export {
+  intlMessages as default
+};

package/dist/components/ContenPanel/hooks/useContentPanelResize/useContentPanelResize.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from 'react';
+export type UseContentPanelResizeProps = {
+    /** The controlled width of the panel (in pixels). */
+    width?: number | null;
+    /** If `true`, the panel can be resized by dragging the resizer. */
+    isResizable?: boolean;
+    /** The initial width of the panel when uncontrolled (in pixels). */
+    defaultWidth?: number | null;
+    /** The minimum allowed width of the panel (in pixels). */
+    minWidth?: number | null;
+    /** The maximum allowed width of the panel (in pixels). */
+    maxWidth?: number | null;
+    /** Handler that is called whenever the panel width changes. */
+    onResize?: (width: number) => void;
+    /** Handler that is called when the user starts resizing the panel. */
+    onResizeStart?: (width: number) => void;
+    /** Handler that is called when the user finishes resizing the panel. */
+    onResizeEnd?: (width: number) => void;
+    /**
+     * Handler that is called when the panel width is reset (double click on the resizer).
+     * Receives the initial width and can return the width to apply.
+     * If nothing is returned, the panel resets to the initial width.
+     */
+    onResetResize?: (initialWidth: number) => number | null | undefined;
+};
+export type UseContentPanelResizeReturnValue = {
+    /** Current panel width in pixels (only when `isResizable` is `true`). */
+    width?: number;
+    /** Props to spread on the resizer element (drag + double click reset + aria). */
+    resizerProps: HTMLAttributes<HTMLElement>;
+};
+export declare function useContentPanelResize(props: UseContentPanelResizeProps): UseContentPanelResizeReturnValue;

package/dist/components/ContenPanel/hooks/useContentPanelResize/useContentPanelResize.js

@@ -0,0 +1,80 @@
+"use client";
+import { useRef, useCallback, useMemo } from "react";
+import { useLocalizedStringFormatter, isNumber, useControlledState, useMove, mergeProps } from "@koobiq/react-core";
+import intlMessages from "./intl.json.js";
+const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+function useContentPanelResize(props) {
+  const {
+    isResizable = false,
+    width: widthProp,
+    defaultWidth,
+    minWidth,
+    maxWidth,
+    onResize,
+    onResetResize,
+    onResizeStart,
+    onResizeEnd
+  } = props;
+  const t = useLocalizedStringFormatter(intlMessages);
+  const min = isNumber(minWidth) ? minWidth : 0;
+  const max = isNumber(maxWidth) ? maxWidth : Number.POSITIVE_INFINITY;
+  const controlledWidth = isNumber(widthProp) ? clamp(widthProp, min, max) : void 0;
+  const defaultUncontrolled = isNumber(defaultWidth) ? clamp(defaultWidth, min, max) : 0;
+  const [width, setWidth] = useControlledState(
+    controlledWidth,
+    defaultUncontrolled,
+    onResize
+  );
+  const widthRef = useRef(width);
+  widthRef.current = width;
+  const initialResetRef = useRef(null);
+  if (initialResetRef.current == null) {
+    initialResetRef.current = isNumber(widthProp) ? clamp(widthProp, min, max) : defaultUncontrolled;
+  }
+  const onReset = useCallback(() => {
+    if (!isResizable) return;
+    const initial = initialResetRef.current ?? 0;
+    const nextRaw = onResetResize?.(initial);
+    const next = clamp(isNumber(nextRaw) ? nextRaw : initial, min, max);
+    setWidth(next);
+  }, [isResizable, onResetResize, min, max, setWidth]);
+  const { moveProps } = useMove({
+    onMoveStart() {
+      if (!isResizable) return;
+      document.body.dataset.resizing = "true";
+      onResizeStart?.(Math.round(widthRef.current));
+    },
+    onMoveEnd() {
+      if (!isResizable) return;
+      delete document.body.dataset.resizing;
+      onResizeEnd?.(Math.round(widthRef.current));
+    },
+    onMove(e) {
+      if (!isResizable) return;
+      setWidth((w) => {
+        const next = clamp(w - e.deltaX, min, max);
+        widthRef.current = next;
+        return next;
+      });
+    }
+  });
+  const resizerProps = useMemo(() => {
+    if (!isResizable) {
+      return {
+        tabIndex: -1,
+        "aria-hidden": "true"
+      };
+    }
+    const aria = {
+      "aria-label": t.format("resize panel"),
+      "aria-valuenow": Math.round(width)
+    };
+    if (isNumber(minWidth)) aria["aria-valuemin"] = min;
+    if (isNumber(maxWidth)) aria["aria-valuemax"] = max;
+    return mergeProps(aria, { onDoubleClick: onReset }, moveProps);
+  }, [isResizable, width, minWidth, maxWidth, min, max, moveProps, onReset]);
+  return { width: isResizable ? width : void 0, resizerProps };
+}
+export {
+  useContentPanelResize
+};

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

@@ -0,0 +1,3 @@
+export * from './ContentPanel';
+export * from './types';
+export * from './components';

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

@@ -0,0 +1,53 @@
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactNode } from 'react';
+import type { DataAttributeProps } from '@koobiq/react-core';
+import type { TransitionProps } from 'react-transition-group/Transition';
+import type { DialogProps } from '../Dialog';
+export type ContentPanelSize = number | `${number}` | `${number}%`;
+export type ContentPanelProps = {
+    /** The content of the panel. */
+    children?: ReactNode;
+    /** The width of the panel. */
+    width?: ContentPanelSize | null;
+    /** The minimum width of the panel. */
+    minWidth?: ContentPanelSize | null;
+    /** The maximum width of the panel. */
+    maxWidth?: ContentPanelSize | null;
+    /** The default width of the panel. */
+    defaultWidth?: ContentPanelSize | null;
+    /**
+     * If `true`, the panel can be resized by the user.
+     * @default false
+     */
+    isResizable?: boolean;
+    /** Handler that is called whenever the panel width changes. */
+    onResize?: (width: number) => void;
+    /** Handler that is called when the user starts resizing the panel. */
+    onResizeStart?: (width: number) => void;
+    /** Handler that is called when the user finishes resizing the panel. */
+    onResizeEnd?: (width: number) => void;
+    /**
+     * Handler that is called when the panel width is reset (double-click on the resizer).
+     * Receives the initial width and can return a new width.
+     * If nothing is returned, the panel resets to the initial width.
+     */
+    onResetResize?: (initialWidth: number) => number | null | undefined;
+    /** If `true`, the panel is shown. */
+    isOpen?: boolean;
+    /** The default open state. Use when the component is not controlled. */
+    defaultOpen?: boolean;
+    /** Handler that is called when the panel's open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        dialog?: DialogProps;
+        transition?: Partial<TransitionProps<HTMLElement>>;
+        resizer?: ComponentPropsWithRef<'div'> & DataAttributeProps;
+    };
+    /** If `true`, the content panel won't close when the ESC key is pressed. */
+    disableExitOnEscapeKeyDown?: boolean;
+} & Pick<DialogProps, 'hideCloseButton'>;
+export type ContentPanelRef = ComponentRef<'div'>;

package/dist/components/ContenPanel/utils/index.d.ts

@@ -0,0 +1,3 @@
+import type { ContentPanelSize } from '../types';
+export declare function getInlineSize(el: HTMLElement | null): number;
+export declare function parseContentPanelSize(containerWidth: number | null | undefined, value: ContentPanelSize | null | undefined): number | null;

package/dist/components/ContenPanel/utils/index.js

@@ -0,0 +1,31 @@
+import { isNumber } from "@koobiq/react-core";
+function getInlineSize(el) {
+  if (!el) return 0;
+  const cs = getComputedStyle(el);
+  const mis = parseFloat(cs.marginInlineStart) || 0;
+  const mie = parseFloat(cs.marginInlineEnd) || 0;
+  return mis + mie + el.getBoundingClientRect().width;
+}
+function parseContentPanelSize(containerWidth, value) {
+  if (value == null) return null;
+  if (isNumber(value)) {
+    return Number.isFinite(value) ? value : null;
+  }
+  const v = value.trim();
+  if (v.endsWith("%")) {
+    if (containerWidth == null || !Number.isFinite(containerWidth)) return null;
+    const n2 = Number(v.slice(0, -1).trim());
+    if (!Number.isFinite(n2)) return null;
+    return containerWidth * (n2 / 100);
+  }
+  if (v.toLowerCase().endsWith("px")) {
+    const n2 = Number(v.slice(0, -2).trim());
+    return Number.isFinite(n2) ? n2 : null;
+  }
+  const n = Number(v);
+  return Number.isFinite(n) ? n : null;
+}
+export {
+  getInlineSize,
+  parseContentPanelSize
+};

package/dist/components/DateInput/DateInput.js

@@ -114,8 +114,8 @@ function DateInputRender(props, ref) {
         state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)),
         /* @__PURE__ */ jsx("input", { ...inputProps })
       ] }) }),
-      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
+      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
     ] })
   ] });
 }

package/dist/components/DatePicker/DatePicker.js

@@ -42,7 +42,6 @@ function DatePickerRender(props, ref) {
   const {
     isInvalid,
     groupProps,
-    labelProps,
     fieldProps,
     buttonProps,
     dialogProps,
@@ -57,6 +56,25 @@ function DatePickerRender(props, ref) {
     state,
     anchorRef
   );
+  const { slotProps: rootSlotProps, ...otherRoot } = slotProps?.root || {};
+  const mergedRootSlotProps = {
+    ...rootSlotProps,
+    group: mergeProps(rootSlotProps?.group, groupProps, {
+      ref: anchorRef,
+      endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        endAddon,
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: isInvalid ? "error" : "fade-contrast",
+            className: s.calendar,
+            ...buttonProps,
+            children: /* @__PURE__ */ jsx(IconCalendarO16, {})
+          }
+        )
+      ] })
+    })
+  };
   const rootProps = mergeProps(
     {
       ref,
@@ -70,27 +88,9 @@ function DatePickerRender(props, ref) {
       labelAlign,
       errorMessage,
       "data-testid": testId,
-      slotProps: {
-        label: mergeProps(labelProps, slotProps?.label),
-        group: {
-          endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
-            endAddon,
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                variant: isInvalid ? "error" : "fade-contrast",
-                className: s.calendar,
-                ...buttonProps,
-                children: /* @__PURE__ */ jsx(IconCalendarO16, {})
-              }
-            )
-          ] }),
-          ...groupProps,
-          ref: anchorRef
-        }
-      }
+      slotProps: mergedRootSlotProps
     },
-    slotProps?.root,
+    otherRoot,
     fieldProps
   );
   const popoverProps = mergeProps(

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

@@ -36,6 +36,7 @@ export type DatePickerProps<T extends DateValue> = {
     /** The props used for each slot inside. */
     slotProps?: {
         root?: DateInputProps<T>;
+        /** @deprecated */
         label?: FormFieldLabelProps;
         popover?: PopoverProps;
         calendar?: CalendarProps<T>;

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

@@ -21,5 +21,5 @@ export type DialogBaseProps = {
         'close-button'?: DialogCloseButtonProps;
     };
 } & AriaDialogProps;
-export type DialogProps = ExtendableComponentPropsWithRef<DialogBaseProps, 'section'>;
+export type DialogProps = ExtendableComponentPropsWithRef<DialogBaseProps & DataAttributeProps, 'section'>;
 export type DialogRef = ComponentRef<'section'>;

package/dist/components/FormField/FormFieldInputDate/FormFieldInputDate.d.ts

@@ -1,8 +1,9 @@
 import { type ReactNode, type Ref } from 'react';
-export type FormFieldInputDateProps = {
+import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type FormFieldInputDateProps = ExtendableComponentPropsWithRef<{
     className?: string;
     children?: ReactNode;
     'data-testid'?: string;
     ref?: Ref<HTMLDivElement>;
-};
+}, 'div'>;
 export declare const FormFieldInputDate: import("react").ForwardRefExoticComponent<Omit<FormFieldInputDateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/IconButton/IconButton.js

@@ -56,6 +56,7 @@ const IconButton = polymorphicForwardRef(
         className: classNameFn,
         "data-size": size,
         "data-variant": variant,
+        "data-slot": "icon-button",
         "data-compact": isCompact || void 0,
         ...other,
         ref,

package/dist/components/Input/Input.js

@@ -132,8 +132,8 @@ const Input = forwardRef((props, ref) => {
       /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
       /* @__PURE__ */ jsxs("div", { className: s.body, children: [
         /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
-        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-        /* @__PURE__ */ jsx(FormField.Error, { ...errorProps })
+        /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }),
+        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
       ] })
     ] });
   } });

package/dist/components/InputNumber/InputNumber.js

@@ -117,8 +117,8 @@ const InputNumber = forwardRef(
         /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
         /* @__PURE__ */ jsxs("div", { className: s.body, children: [
           /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
-          /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-          /* @__PURE__ */ jsx(FormField.Error, { ...errorProps })
+          /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }),
+          /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
         ] })
       ] });
     } });

package/dist/components/Link/Link.js

@@ -39,13 +39,11 @@ const Link = polymorphicForwardRef((props, ref) => {
       'Link: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
     );
   }
-  const elementType = as !== "a" && as !== "button" ? `${as}` : void 0;
   return /* @__PURE__ */ jsxs(
     Link$1,
     {
       as,
       isDisabled,
-      elementType,
       ...isDisabled && { tabIndex: -1 },
       className: ({ isHovered, isPressed, isFocusVisible }) => clsx(
         s.base,

package/dist/components/Menu/components/MenuItem/MenuItem.js

@@ -17,6 +17,11 @@ function MenuItem({ item, state }) {
   const { hoverProps, isHovered: hovered } = useHover({ isDisabled: disabled });
   const { isPressed: pressed, pressProps } = usePress({ isDisabled: disabled });
   const Tag = item.props.href ? "a" : "li";
+  const {
+    style,
+    className,
+    "data-testid": dataTestId
+  } = item.props;
   return /* @__PURE__ */ jsx(
     Tag,
     {
@@ -25,7 +30,9 @@ function MenuItem({ item, state }) {
       "data-pressed": pressed,
       "data-selected": selected,
       "data-focus-visible": focusVisible,
-      className: clsx(listItem, textVariant["text-normal"]),
+      style,
+      "data-testid": dataTestId,
+      className: clsx(listItem, textVariant["text-normal"], className),
       ref,
       children: item.rendered
     }

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,15 @@
+import { NavbarAppItem, NavbarBody, NavbarFooter, NavbarHeader, NavbarItem } from './components';
+import type { NavbarProps } from './types';
+export declare const NavbarComponent: {
+    ({ variant, isCollapsed, isToggleButtonHidden, defaultCollapsed, className, children, onCollapse, ref, ...other }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type CompoundedComponent = typeof NavbarComponent & {
+    Header: typeof NavbarHeader;
+    Body: typeof NavbarBody;
+    Footer: typeof NavbarFooter;
+    Item: typeof NavbarItem;
+    AppItem: typeof NavbarAppItem;
+};
+export declare const Navbar: CompoundedComponent;
+export {};