@koobiq/react-components 0.21.1 → 0.23.0

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/RadioGroup/RadioGroup.js

@@ -114,8 +114,8 @@ const RadioGroup = forwardRef(
         /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
         /* @__PURE__ */ jsxs("div", { className: s.body, children: [
           /* @__PURE__ */ jsx("div", { ...radioGroupProps, children }),
-          /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-          /* @__PURE__ */ jsx(FormField.Error, { ...errorProps })
+          /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }),
+          /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
         ] })
       ] });
     } }) });

package/dist/components/SearchInput/SearchInput.js

@@ -126,8 +126,8 @@ const SearchInput = forwardRef(
       /* @__PURE__ */ jsx(FormField.Label, { ...labelProps, children: label }),
       /* @__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(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/Select/Select.js

@@ -194,8 +194,8 @@ function SelectRender(props, ref) {
           isDisabled: props.isDisabled,
           isRequired: props.isRequired
         }) }) }),
-        /* @__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 })
       ] })
     ] }),
     /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })

package/dist/components/Select/intl.js

@@ -3,13 +3,13 @@ const intlMessages = {
     "empty items": "Нет вариантов выбора",
     loading: "Загрузка…",
     "selected items": "Выбранные элементы",
-    more: ({ count }) => `еще ${count}`
+    more: ({ count }) => `+${count}`
   },
   "en-US": {
     "empty items": "No options available",
     "selected items": "Selected items",
     loading: "Loading…",
-    more: ({ count }) => `${count} more`
+    more: ({ count }) => `+${count}`
   }
 };
 export {

package/dist/components/Table/components/TableColumnHeader/TableColumnHeader.js

@@ -37,7 +37,7 @@ function TableColumnHeader({
   const defaultIcon = direction === "ascending" ? /* @__PURE__ */ jsx(IconChevronUpS16, {}) : /* @__PURE__ */ jsx(IconChevronDownS16, {});
   const iconToRender = renderSortIcon?.({ direction, isActive }) ?? defaultIcon;
   const columnSortIcon = allowsSorting && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: clsx(s.sortIcon, isActive && s.active), children: iconToRender });
-  const isResizable = allowsResizing && layoutState;
+  const isResizable = !!(allowsResizing && layoutState);
   return /* @__PURE__ */ jsx(
     "th",
     {
@@ -69,8 +69,8 @@ function TableColumnHeader({
           Resizer,
           {
             column,
-            layoutState,
             onResize,
+            layoutState,
             onResizeEnd,
             onResizeStart
           }

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js

@@ -60,8 +60,8 @@ const TextareaContextConsumer = 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, { as: "textarea", ...textareaProps }) }),
-      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FormField.Error, { ...errorProps })
+      /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }),
+      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
     ] })
   ] });
 });

package/dist/components/TimePicker/TimePicker.js

@@ -120,8 +120,8 @@ function TimePickerRender(props, ref) {
           ] })
         }
       ),
-      /* @__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/index.d.ts

@@ -42,6 +42,8 @@ export * from './Tabs';
 export * from './Autocomplete';
 export * from './ToastProvider';
 export * from './Breadcrumbs';
+export * from './Accordion';
+export * from './ContenPanel';
 export * from './layout';
 export { useListData, useAsyncList, type ListData, type ListOptions, type AsyncListData, type AsyncListOptions, type AsyncListLoadFunction, type AsyncListLoadOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
 export { useRouter, useLocale, useFilter, type Locale, type SortDescriptor, type Selection, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -104,9 +104,21 @@ import { toastPlacement, toastPropStatus, toastStackDirection } from "./componen
 import { Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs.js";
 import { breadcrumbsPropOverflowMode, breadcrumbsPropSize } from "./components/Breadcrumbs/types.js";
 import { BreadcrumbItem } from "./components/Breadcrumbs/components/BreadcrumbItem/BreadcrumbItem.js";
+import { Accordion, AccordionComponent } from "./components/Accordion/Accordion.js";
+import { AccordionGroup } from "./components/Accordion/components/AccordionGroup/AccordionGroup.js";
+import { AccordionGroupStateContext } from "./components/Accordion/components/AccordionGroup/AccordionGroupContext.js";
+import { AccordionStateContext } from "./components/Accordion/AccordionStateContext.js";
+import { ContentPanel } from "./components/ContenPanel/ContentPanel.js";
+import { ContentPanelContainer } from "./components/ContenPanel/components/ContentPanelContainer/ContentPanelContainer.js";
+import { ContentPanelContainerContext } from "./components/ContenPanel/components/ContentPanelContainer/ContentPanelContainerContext.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 {
+  Accordion,
+  AccordionComponent,
+  AccordionGroup,
+  AccordionGroupStateContext,
+  AccordionStateContext,
   Alert,
   AnimatedIcon,
   Autocomplete,
@@ -123,6 +135,9 @@ export {
   Checkbox,
   CheckboxGroup,
   Container,
+  ContentPanel,
+  ContentPanelContainer,
+  ContentPanelContainerContext,
   DateInput,
   DateInputRender,
   DatePicker,