@koobiq/react-components 0.0.1-beta.34 → 0.0.1-beta.35

package/dist/components/Calendar/Calendar.d.ts

@@ -1,2 +1,2 @@
-import type { CalendarComponentProp } from './types';
-export declare const Calendar: CalendarComponentProp;
+import type { CalendarComponent } from './types';
+export declare const Calendar: CalendarComponent;

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

@@ -44,6 +44,6 @@ export type CalendarProps<T extends DateValue> = {
     /** Handler that is called when the focused date changes. */
     onFocusChange?: CalendarPropOnFocusChange<T>;
 };
-export type CalendarComponentProp = <T extends DateValue>(props: CalendarProps<T>) => ReactElement | null;
+export type CalendarComponent = <T extends DateValue>(props: CalendarProps<T>) => ReactElement | null;
 export type CalendarRef = ComponentRef<'div'>;
 export {};

package/dist/components/DateInput/DateInput.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'react';
 import type { DateValue } from '@koobiq/react-primitives';
-import type { DateInputRef, DateInputProps, DateInputComponentProp } from './types';
+import type { DateInputRef, DateInputProps, DateInputComponent } from './types';
 export declare function DateInputRender<T extends DateValue>(props: Omit<DateInputProps<T>, 'ref'>, ref: Ref<DateInputRef>): import("react/jsx-runtime").JSX.Element;
-export declare const DateInput: DateInputComponentProp;
+export declare const DateInput: DateInputComponent;

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

@@ -43,5 +43,5 @@ export type DateInputProps<T extends DateValue> = {
     /** Addon placed after the children. */
     endAddon?: ReactNode;
 } & Omit<AriaDateFieldProps<T>, 'description' | 'validationBehavior' | 'validate' | 'validationState'>;
-export type DateInputComponentProp = <T extends DateValue>(props: DateInputProps<T>) => ReactElement | null;
+export type DateInputComponent = <T extends DateValue>(props: DateInputProps<T>) => ReactElement | null;
 export type DateInputRef = ComponentRef<'div'>;

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

@@ -2,13 +2,13 @@ import type { Ref } from 'react';
 import { type ListState } from '@koobiq/react-primitives';
 import { Item, Section } from '../Collections';
 import { ListItemText } from './components';
-import type { ListComponentProps, ListBaseProps } from './types';
+import type { ListComponent, ListBaseProps } from './types';
 export type ListInnerProps<T extends object> = {
     state: ListState<T>;
     listRef?: Ref<HTMLUListElement>;
 } & Omit<ListBaseProps<T>, 'ref'>;
 export declare function ListInner<T extends object>(props: ListInnerProps<T>): import("react/jsx-runtime").JSX.Element;
-declare const ListComponent: ListComponentProps;
+declare const ListComponent: ListComponent;
 type CompoundedComponent = typeof ListComponent & {
     Item: typeof Item;
     Section: typeof Section;

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

@@ -50,4 +50,4 @@ export type ListBaseProps<T extends object> = {
 };
 export type ListProps<T extends object> = ListBaseProps<T>;
 export type ListRef = ComponentRef<'ul'>;
-export type ListComponentProps = <T extends object>(props: ListProps<T>) => ReactElement | null;
+export type ListComponent = <T extends object>(props: ListProps<T>) => ReactElement | null;

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

@@ -1,8 +1,8 @@
 import { Pressable } from '@koobiq/react-core';
 import { Divider, Item, Section, Header } from '../Collections';
 import { ListItemText } from '../List';
-import type { MenuComponentProps } from './index';
-declare const MenuComponent: MenuComponentProps;
+import type { MenuComponent } from './index';
+declare const MenuComponent: MenuComponent;
 type CompoundedComponent = typeof MenuComponent & {
     Item: typeof Item;
     Header: typeof Header;

package/dist/components/Menu/Menu.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { useDOMRef, mergeProps, clsx, Pressable } from "@koobiq/react-core";
 import { useMenuTriggerState, useMenuTrigger } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
@@ -18,12 +19,19 @@ function MenuRender(props, ref) {
     control,
     style,
     open,
+    isOpen: isOpenProp,
     anchorRef,
     className,
     slotProps,
     ...other
   } = props;
-  const state = useMenuTriggerState({ ...props, isOpen: open });
+  const isOpen = isOpenProp ?? open;
+  if (process.env.NODE_ENV !== "production" && "open" in props) {
+    deprecate(
+      'Menu: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+    );
+  }
+  const state = useMenuTriggerState({ ...props, isOpen });
   const domRef = useDOMRef(ref);
   const controlRef = useRef(null);
   const { menuTriggerProps, menuProps } = useMenuTrigger(

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

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

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

@@ -13,6 +13,15 @@ export type MenuPropSelected<T extends object> = AriaMenuProps<T>['selectedKeys'
 export type MenuPropSelectionChange<T extends object> = AriaMenuProps<T>['onSelectionChange'];
 export type MenuPropDisabledKeys<T extends object> = AriaMenuProps<T>['disabledKeys'];
 export type MenuPropPlacement = PopoverPropPlacement;
+type MenuDeprecatedProps = {
+    /**
+     * If `true`, the component is shown.
+     *
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: boolean;
+};
 export type MenuProps<T extends object> = {
     /** Additional CSS-classes. */
     className?: string;
@@ -25,7 +34,7 @@ export type MenuProps<T extends object> = {
     /** The render function of the control for displaying the modal window. */
     control?: MenuPropControl;
     /** Whether the overlay is open by default (controlled). */
-    open?: boolean;
+    isOpen?: boolean;
     /** Whether the overlay is open by default (uncontrolled). */
     defaultOpen?: boolean;
     /** Handler that is called when the overlay's open state changes. */
@@ -58,6 +67,7 @@ export type MenuProps<T extends object> = {
         popover?: PopoverBaseProps;
         list?: ComponentPropsWithRef<'ul'>;
     };
-};
-export type MenuComponentProps = <T extends object>(props: MenuProps<T>) => ReactElement | null;
+} & MenuDeprecatedProps;
+export type MenuComponent = <T extends object>(props: MenuProps<T>) => ReactElement | null;
 export type MenuRef = ComponentRef<'div'>;
+export {};

package/dist/components/Modal/Modal.d.ts

@@ -1,6 +1,29 @@
-import { Dialog } from '../Dialog';
-import type { ModalProps } from './types';
-declare const ModalComponent: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;
+import { type BackdropProps } from '../Backdrop';
+import { Dialog, type DialogProps } from '../Dialog';
+declare const ModalComponent: import("react").ForwardRefExoticComponent<{
+    size?: import("./types").ModalPropSize;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    children?: import("./types").ModalPropContent;
+    control?: import("./types").ModalPropControl;
+    hideCloseButton?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    portalContainer?: Element;
+    disableExitOnClickOutside?: boolean;
+    disableExitOnEscapeKeyDown?: boolean;
+    hideBackdrop?: boolean;
+    className?: string;
+    'data-testid'?: string | number;
+    disableFocusManagement?: boolean;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    slotProps?: {
+        dialog?: DialogProps;
+        backdrop?: BackdropProps;
+        modal?: import("react").ComponentPropsWithRef<"div">;
+    };
+} & {
+    open?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
 type CompoundedComponent = typeof ModalComponent & {
     Header: typeof Dialog.Header;
     Body: typeof Dialog.Body;

package/dist/components/Modal/Modal.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, cloneElement, isValidElement } from "react";
+import { deprecate } from "@koobiq/logger";
 import { useBoolean, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { useOverlayTriggerState, useOverlayTrigger, useModalOverlay, Overlay } from "@koobiq/react-primitives";
 import { Transition } from "react-transition-group";
@@ -17,7 +18,8 @@ const ModalComponent = forwardRef((props, ref) => {
     defaultOpen,
     hideBackdrop,
     onOpenChange,
-    open: openProp,
+    open,
+    isOpen: isOpenProp,
     portalContainer,
     disableFocusManagement,
     disableExitOnClickOutside,
@@ -25,19 +27,25 @@ const ModalComponent = forwardRef((props, ref) => {
     shouldCloseOnInteractOutside,
     ...other
   } = props;
+  const isOpen = isOpenProp ?? open;
+  if (process.env.NODE_ENV !== "production" && "open" in props) {
+    deprecate(
+      'Modal: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+    );
+  }
   const state = useOverlayTriggerState({
-    isOpen: openProp,
+    isOpen,
     onOpenChange,
     defaultOpen,
     ...other
   });
-  const { isOpen: openState, close } = state;
-  const [opened, { on, off }] = useBoolean(openState);
+  const { isOpen: isOpenState, close } = state;
+  const [isOpened, { on, off }] = useBoolean(isOpenState);
   const modalRef = useDOMRef(null);
   const containerRef = useDOMRef(ref);
   const { triggerProps, overlayProps } = useOverlayTrigger(
     { type: "dialog" },
-    { ...state, isOpen: openState }
+    { ...state, isOpen: isOpenState }
   );
   const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
     {
@@ -46,7 +54,7 @@ const ModalComponent = forwardRef((props, ref) => {
       isDismissable: !disableExitOnClickOutside,
       isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
     },
-    { ...state, isOpen: opened },
+    { ...state, isOpen: isOpened },
     modalRef
   );
   const resolvedChildren = () => {
@@ -63,7 +71,11 @@ const ModalComponent = forwardRef((props, ref) => {
     },
     other
   );
-  const backdropProps = mergeProps({ isOpen: openState && !hideBackdrop }, underlayProps, slotProps?.backdrop);
+  const backdropProps = mergeProps(
+    { isOpen: isOpenState && !hideBackdrop },
+    underlayProps,
+    slotProps?.backdrop
+  );
   const dialogProps = mergeProps(
     {
       onClose: close,
@@ -89,7 +101,7 @@ const ModalComponent = forwardRef((props, ref) => {
         onEnter: on,
         timeout: 300,
         onExited: off,
-        in: openState,
+        in: isOpenState,
         nodeRef: containerRef,
         unmountOnExit: true,
         appear: true,

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

@@ -8,6 +8,15 @@ export type ModalPropContent = ReactNode | ((props: {
     close(): void;
 }) => ReactElement);
 export type ModalPropControl = (props: ButtonOptions) => ReactElement;
+type ModalDeprecatedProps = {
+    /**
+     * If `true`, the component is shown.
+     *
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: boolean;
+};
 export type ModalProps = {
     /**
      * Component width size.
@@ -15,7 +24,7 @@ export type ModalProps = {
      */
     size?: ModalPropSize;
     /** If `true`, the component is shown. */
-    open?: boolean;
+    isOpen?: boolean;
     /** The default open state. Use when the component is not controlled. */
     defaultOpen?: boolean;
     /** The content of the component. */
@@ -71,5 +80,6 @@ export type ModalProps = {
         backdrop?: BackdropProps;
         modal?: ComponentPropsWithRef<'div'>;
     };
-};
+} & ModalDeprecatedProps;
 export type ModalRef = ComponentRef<'div'>;
+export {};

package/dist/components/Popover/Popover.d.ts

@@ -1,5 +1,38 @@
 import { Dialog } from '../Dialog';
-declare const PopoverComponent: import("react").ForwardRefExoticComponent<import("./types").PopoverBaseProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const PopoverComponent: import("react").ForwardRefExoticComponent<{
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    children?: import("./types").PopoverPropContent;
+    control?: import("./types").PopoverPropControl;
+    size?: import("./types").PopoverPropSize;
+    hideCloseButton?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    portalContainer?: Element;
+    disableExitOnEscapeKeyDown?: boolean;
+    className?: string;
+    style?: import("react").CSSProperties;
+    'data-testid'?: string | number;
+    disableFocusManagement?: boolean;
+    placement?: import("./types").PopoverPropPlacement;
+    anchorRef?: import("react").RefObject<HTMLElement | null>;
+    hideArrow?: boolean;
+    isNonModal?: boolean;
+    arrowBoundaryOffset?: number;
+    containerPadding?: number;
+    offset?: number;
+    crossOffset?: number;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    type?: import("./types").PopoverPropType;
+    maxBlockSize?: number;
+    slotProps?: {
+        dialog?: import("../Dialog").DialogProps;
+        arrow?: import("react").ComponentPropsWithRef<"div">;
+        backdrop?: import("react").ComponentPropsWithRef<"div">;
+        transition?: Partial<import("react-transition-group/Transition").TransitionProps<HTMLElement>>;
+    };
+} & {
+    open?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
 type CompoundedComponent = typeof PopoverComponent & {
     Header: typeof Dialog.Header;
     Body: typeof Dialog.Body;

package/dist/components/Popover/Popover.js

@@ -1,14 +1,27 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { useOverlayTriggerState } from "@koobiq/react-primitives";
 import { PopoverInner } from "./PopoverInner.js";
 import { Dialog } from "../Dialog/Dialog.js";
 const PopoverComponent = forwardRef(
   (props, ref) => {
-    const { open, onOpenChange, defaultOpen, ...other } = props;
+    const {
+      open,
+      isOpen: isOpenProp,
+      onOpenChange,
+      defaultOpen,
+      ...other
+    } = props;
+    const isOpen = isOpenProp ?? open;
+    if (process.env.NODE_ENV !== "production" && "open" in props) {
+      deprecate(
+        'Popover: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+      );
+    }
     const state = useOverlayTriggerState({
-      isOpen: open,
+      isOpen,
       onOpenChange,
       defaultOpen,
       ...other

package/dist/components/Popover/PopoverInner.js

@@ -123,6 +123,7 @@ const PopoverInner = (props) => {
               className: clsx(s.base, s[size], className),
               ...mergeProps(popoverProps, other),
               style: {
+                ...props.style,
                 ...popoverProps.style,
                 "--popover-inline-size": normalizeInlineSize(size)
               },

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

@@ -14,9 +14,18 @@ export declare const popoverPropSize: readonly ["small", "medium", "large"];
 export type PopoverPropSize = (typeof popoverPropSize)[number] | CSSProperties['inlineSize'];
 export declare const popoverPropType: readonly ["dialog", "menu", "listbox", "tree", "grid"];
 export type PopoverPropType = (typeof popoverPropType)[number];
+type PopoverDeprecatedProps = {
+    /**
+     * If `true`, the component is shown.
+     *
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: boolean;
+};
 export type PopoverBaseProps = {
     /** If `true`, the component is shown. */
-    open?: boolean;
+    isOpen?: boolean;
     /** The default open state. Use when the component is not controlled. */
     defaultOpen?: boolean;
     /** The content of the component. */
@@ -47,6 +56,8 @@ export type PopoverBaseProps = {
     disableExitOnEscapeKeyDown?: boolean;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /**
@@ -118,9 +129,10 @@ export type PopoverBaseProps = {
         backdrop?: ComponentPropsWithRef<'div'>;
         transition?: Partial<TransitionProps<HTMLElement>>;
     };
-};
+} & PopoverDeprecatedProps;
 export type PopoverInnerProps = {
     state: OverlayTriggerState;
     popoverRef?: Ref<HTMLDivElement>;
 } & Omit<PopoverBaseProps, 'ref'>;
 export type PopoverProps = PopoverBaseProps;
+export {};

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

@@ -1,7 +1,7 @@
 import { Item, Section } from '../Collections';
 import { ListItemText } from '../List';
-import type { SelectComponentProp } from './index';
-declare const SelectComponent: SelectComponentProp;
+import type { SelectComponent } from './index';
+declare const SelectComponent: SelectComponent;
 type CompoundedComponent = typeof SelectComponent & {
     Item: typeof Item;
     Section: typeof Section;

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

@@ -124,6 +124,6 @@ export type SelectProps<T extends object> = {
         errorMessage?: FieldErrorProps;
     };
 } & SelectDeprecatedProps;
-export type SelectComponentProp = <T extends object>(props: SelectProps<T>) => ReactElement | null;
+export type SelectComponent = <T extends object>(props: SelectProps<T>) => ReactElement | null;
 export type SelectRef = ComponentRef<'button'>;
 export {};

package/dist/components/SidePanel/SidePanel.d.ts

@@ -1,6 +1,31 @@
-import { Dialog } from '../Dialog';
-import type { SidePanelProps } from './types';
-declare const SidePanelComponent: import("react").ForwardRefExoticComponent<SidePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+import { type BackdropProps } from '../Backdrop';
+import { Dialog, type DialogProps } from '../Dialog';
+declare const SidePanelComponent: import("react").ForwardRefExoticComponent<{
+    size?: import("./types").SidePanelPropSize;
+    placement?: import("./types").SidePanelPropPlacement;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    children?: import("./types").SidePanelPropContent;
+    control?: import("./types").SidePanelPropControl;
+    hideCloseButton?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    portalContainer?: Element;
+    disableExitOnClickOutside?: boolean;
+    disableExitOnEscapeKeyDown?: boolean;
+    hideBackdrop?: boolean;
+    className?: string;
+    'data-testid'?: string | number;
+    disableFocusManagement?: boolean;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    slotProps?: {
+        dialog?: DialogProps;
+        backdrop?: BackdropProps;
+        panel?: import("react").ComponentPropsWithRef<"div">;
+    };
+} & {
+    open?: boolean;
+    position?: import("./types").SidePanelPropPosition;
+} & import("react").RefAttributes<HTMLDivElement>>;
 type CompoundedComponent = typeof SidePanelComponent & {
     Header: typeof Dialog.Header;
     Body: typeof Dialog.Body;

package/dist/components/SidePanel/SidePanel.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, cloneElement, isValidElement } from "react";
+import { deprecate } from "@koobiq/logger";
 import { useBoolean, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { useOverlayTriggerState, useOverlayTrigger, useModalOverlay, Overlay } from "@koobiq/react-primitives";
 import { Transition } from "react-transition-group";
@@ -12,6 +13,7 @@ const SidePanelComponent = forwardRef(
     const {
       size = "medium",
       position = "left",
+      placement = "start",
       hideCloseButton = false,
       control,
       children,
@@ -19,7 +21,8 @@ const SidePanelComponent = forwardRef(
       defaultOpen,
       onOpenChange,
       hideBackdrop,
-      open: openProp,
+      open,
+      isOpen: isOpenProp,
       portalContainer,
       disableFocusManagement,
       disableExitOnClickOutside,
@@ -27,19 +30,30 @@ const SidePanelComponent = forwardRef(
       shouldCloseOnInteractOutside,
       ...other
     } = props;
+    const isOpen = isOpenProp ?? open;
+    if (process.env.NODE_ENV !== "production" && "open" in props) {
+      deprecate(
+        'SidePanel: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "position" in props) {
+      deprecate(
+        'SidePanel: the "position" prop is deprecated. Use "placement" prop to replace it.'
+      );
+    }
     const state = useOverlayTriggerState({
-      isOpen: openProp,
+      isOpen,
       onOpenChange,
       defaultOpen,
       ...other
     });
-    const { isOpen: openState, close } = state;
-    const [opened, { on, off }] = useBoolean(openState);
+    const { isOpen: isOpenState, close } = state;
+    const [isOpened, { on, off }] = useBoolean(isOpenState);
     const modalRef = useDOMRef(null);
     const containerRef = useDOMRef(ref);
     const { triggerProps, overlayProps } = useOverlayTrigger(
       { type: "dialog" },
-      { ...state, isOpen: openState }
+      { ...state, isOpen: isOpenState }
     );
     const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
       {
@@ -48,7 +62,7 @@ const SidePanelComponent = forwardRef(
         isDismissable: !disableExitOnClickOutside,
         isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
       },
-      { ...state, isOpen: opened },
+      { ...state, isOpen: isOpened },
       modalRef
     );
     const resolvedChildren = () => {
@@ -61,13 +75,13 @@ const SidePanelComponent = forwardRef(
       {
         ref: containerRef,
         "data-size": size,
-        "data-position": position,
-        className: clsx(s.base, s[size], s[position])
+        "data-placement": placement,
+        className: clsx(s.base, s[size], s[position], s[placement])
       },
       other
     );
     const backdropProps = mergeProps(
-      { isOpen: openState && !hideBackdrop },
+      { isOpen: isOpenState && !hideBackdrop },
       underlayProps,
       slotProps?.backdrop
     );
@@ -96,7 +110,7 @@ const SidePanelComponent = forwardRef(
           onEnter: on,
           timeout: 300,
           onExited: off,
-          in: openState,
+          in: isOpenState,
           nodeRef: containerRef,
           unmountOnExit: true,
           appear: true,

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

@@ -4,6 +4,8 @@ const medium = "kbq-sidepanel-medium-64ac8f";
 const large = "kbq-sidepanel-large-e885ab";
 const left = "kbq-sidepanel-left-e8e188";
 const right = "kbq-sidepanel-right-4fdda0";
+const start = "kbq-sidepanel-start-636741";
+const end = "kbq-sidepanel-end-1bddfa";
 const panel = "kbq-sidepanel-panel-4a4aa4";
 const s = {
   base,
@@ -12,15 +14,19 @@ const s = {
   large,
   left,
   right,
+  start,
+  end,
   panel
 };
 export {
   base,
   s as default,
+  end,
   large,
   left,
   medium,
   panel,
   right,
-  small
+  small,
+  start
 };

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

@@ -6,10 +6,29 @@ export declare const sidePanelPropSize: readonly ["small", "medium", "large"];
 export type SidePanelPropSize = (typeof sidePanelPropSize)[number];
 export declare const sidePanelPropPosition: readonly ["left", "right"];
 export type SidePanelPropPosition = (typeof sidePanelPropPosition)[number];
+export declare const sidePanelPropPlacement: readonly ["start", "end"];
+export type SidePanelPropPlacement = (typeof sidePanelPropPlacement)[number];
 export type SidePanelPropContent = ReactNode | ((props: {
     close(): void;
 }) => ReactElement);
 export type SidePanelPropControl = (props: ButtonOptions) => ReactElement;
+type SidePanelDeprecatedProps = {
+    /**
+     * If `true`, the component is shown.
+     *
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: boolean;
+    /**
+     * Side from which the side panel will appear.
+     * @default left
+     *
+     * @deprecated
+     * The "position" prop is deprecated. Use "placement" prop to replace it.
+     */
+    position?: SidePanelPropPosition;
+};
 export type SidePanelProps = {
     /**
      * Component width size.
@@ -18,11 +37,11 @@ export type SidePanelProps = {
     size?: SidePanelPropSize;
     /**
      * Side from which the side panel will appear.
-     * @default left
+     * @default start
      */
-    position?: SidePanelPropPosition;
+    placement?: SidePanelPropPlacement;
     /** If `true`, the component is shown. */
-    open?: boolean;
+    isOpen?: boolean;
     /** The default open state. Use when the component is not controlled. */
     defaultOpen?: boolean;
     /** The content of the component. */
@@ -78,5 +97,6 @@ export type SidePanelProps = {
         backdrop?: BackdropProps;
         panel?: ComponentPropsWithRef<'div'>;
     };
-};
+} & SidePanelDeprecatedProps;
 export type SidePanelRef = ComponentRef<'div'>;
+export {};

package/dist/components/SidePanel/types.js

@@ -1,6 +1,8 @@
 const sidePanelPropSize = ["small", "medium", "large"];
 const sidePanelPropPosition = ["left", "right"];
+const sidePanelPropPlacement = ["start", "end"];
 export {
+  sidePanelPropPlacement,
   sidePanelPropPosition,
   sidePanelPropSize
 };

package/dist/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import { Cell, Row, Column, TableBody, TableHeader } from '../Collections';
-import type { TableComponentProp } from './types';
-declare const TableComponent: TableComponentProp;
+import type { TableComponent } from './types';
+declare const TableComponent: TableComponent;
 type CompoundedComponent = typeof TableComponent & {
     Header: typeof TableHeader;
     Body: typeof TableBody;

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

@@ -67,5 +67,5 @@ export type TableProps<T> = ExtendableComponentPropsWithRef<{
         table?: ComponentPropsWithRef<'table'>;
     };
 }, 'div'>;
-export type TableComponentProp = <T extends object>(props: TableProps<T>) => ReactElement | null;
+export type TableComponent = <T extends object>(props: TableProps<T>) => ReactElement | null;
 export type TableRef = ComponentRef<'table'>;

package/dist/components/TagGroup/TagGroup.d.ts

@@ -1,2 +1,2 @@
-import type { TagGroupComponentProp } from './types';
-export declare const TagGroup: TagGroupComponentProp;
+import type { TagGroupComponent } from './types';
+export declare const TagGroup: TagGroupComponent;

package/dist/components/TagGroup/components/TagInner/TagInner.js

@@ -54,8 +54,8 @@ function TagInner(props) {
   const removeButtonProps = mergeProps(
     {
       tabIndex: -1,
-      compact: true,
-      disabled: isDisabled,
+      isCompact: true,
+      isDisabled,
       className: s.cancelIcon,
       variant: matchVariantToCloseButton[variant],
       "aria-label": stringFormatter.format("close")

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

@@ -33,5 +33,5 @@ export type TagGroupProps<T extends object> = {
         root?: ComponentPropsWithRef<'div'>;
     };
 };
-export type TagGroupComponentProp = <T extends object>(props: TagGroupProps<T>) => ReactElement | null;
+export type TagGroupComponent = <T extends object>(props: TagGroupProps<T>) => ReactElement | null;
 export type TagGroupRef = ComponentRef<'div'>;

package/dist/index.js

@@ -48,7 +48,7 @@ import { Modal } from "./components/Modal/Modal.js";
 import { modalPropSize } from "./components/Modal/types.js";
 import { ModalContent, ModalFooter, ModalHeader } from "./components/Modal/index.js";
 import { SidePanel } from "./components/SidePanel/SidePanel.js";
-import { sidePanelPropPosition, sidePanelPropSize } from "./components/SidePanel/types.js";
+import { sidePanelPropPlacement, sidePanelPropPosition, sidePanelPropSize } from "./components/SidePanel/types.js";
 import { SidePanelContent, SidePanelFooter, SidePanelHeader } from "./components/SidePanel/index.js";
 import { Popover } from "./components/Popover/Popover.js";
 import { popoverPropPlacement, popoverPropSize, popoverPropType } from "./components/Popover/types.js";
@@ -175,6 +175,7 @@ export {
   radioGroupPropSize,
   radioPropLabelPlacement,
   radioPropSize,
+  sidePanelPropPlacement,
   sidePanelPropPosition,
   sidePanelPropSize,
   spacing,

package/dist/style.css

@@ -2782,6 +2782,16 @@
   justify-content: flex-end;
 }
 
+.kbq-sidepanel-start-636741 {
+  --side-panel-start-position: -100%;
+  justify-content: flex-start;
+}
+
+.kbq-sidepanel-end-1bddfa {
+  --side-panel-start-position: 100%;
+  justify-content: flex-end;
+}
+
 .kbq-sidepanel-2aae74[data-transition="entering"] .kbq-sidepanel-panel-4a4aa4, .kbq-sidepanel-2aae74[data-transition="entered"] .kbq-sidepanel-panel-4a4aa4 {
   transform: translate(0);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.34",
+  "version": "0.0.1-beta.35",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/react-core": "0.0.1-beta.34",
-    "@koobiq/react-icons": "0.0.1-beta.34",
-    "@koobiq/react-primitives": "0.0.1-beta.34",
-    "@koobiq/logger": "0.0.1-beta.34"
+    "@koobiq/logger": "0.0.1-beta.35",
+    "@koobiq/react-core": "0.0.1-beta.35",
+    "@koobiq/react-icons": "0.0.1-beta.35",
+    "@koobiq/react-primitives": "0.0.1-beta.35"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",