@koobiq/react-components 0.0.1-beta.1

package/dist/components/Provider/Provider.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { I18nProvider } from "@koobiq/react-primitives";
+import { BreakpointsProvider } from "./BreakpointsProvider.js";
+import { ProviderContext } from "./ProviderContext.js";
+const defaultBreakpoints = {
+  xs: 0,
+  // (min-width: 0px)
+  s: 480,
+  // (min-width: 480px)
+  m: 768,
+  // (min-width: 768px)
+  l: 1024,
+  // (min-width: 1024px)
+  xl: 1280,
+  // (min-width: 1280px)
+  xxl: 1536
+  // (min-width: 1536px)
+};
+const Provider = ({
+  breakpoints = defaultBreakpoints,
+  children,
+  locale
+}) => /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { breakpoints, locale }, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(BreakpointsProvider, { breakpoints, children }) }) });
+Provider.displayName = "Provider";
+export {
+  Provider,
+  defaultBreakpoints
+};

package/dist/components/Provider/ProviderContext.d.ts

@@ -0,0 +1,3 @@
+import type { ProviderProps } from './types';
+export declare const ProviderContext: import("react").Context<ProviderProps>;
+export declare function useProvider(): ProviderProps;

package/dist/components/Provider/ProviderContext.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext, useContext } from "react";
+const ProviderContext = createContext(
+  {}
+);
+function useProvider() {
+  return useContext(ProviderContext);
+}
+export {
+  ProviderContext,
+  useProvider
+};

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

@@ -0,0 +1,5 @@
+export * from './Provider';
+export * from './BreakpointsProvider';
+export * from './ProviderContext';
+export * from './BreakpointsContext';
+export * from './types';

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { I18nProviderProps } from '@koobiq/react-primitives';
+export type Breakpoints = {
+    xs?: number;
+    s?: number;
+    m?: number;
+    l?: number;
+    xl?: number;
+    xxl?: number;
+    [custom: string]: number | undefined;
+};
+export type ProviderProps = {
+    children?: ReactNode;
+    breakpoints?: Breakpoints;
+    locale?: I18nProviderProps['locale'];
+};

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

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

package/dist/components/Provider/utils/useBreakpoints.d.ts

@@ -0,0 +1,2 @@
+import type { Breakpoints } from '../types';
+export declare function useBreakpoints(breakpoints: Breakpoints): {};

package/dist/components/Provider/utils/useBreakpoints.js

@@ -0,0 +1,15 @@
+"use client";
+import { useMediaQuery } from "@koobiq/react-core";
+function useBreakpoints(breakpoints) {
+  const queries = Object.values(breakpoints).map(
+    (width) => `(min-width: ${width}px)`
+  );
+  const matches = useMediaQuery(queries);
+  return Object.keys(breakpoints).reduce(
+    (acc, item, index) => ({ ...acc, [item]: matches[index] }),
+    {}
+  );
+}
+export {
+  useBreakpoints
+};

package/dist/components/Provider/utils/useMatchedBreakpoints.d.ts

@@ -0,0 +1,2 @@
+import type { Breakpoints } from '../types';
+export declare function useMatchedBreakpoints(breakpoints: Breakpoints): {};

package/dist/components/RadioGroup/RadioContext.d.ts

@@ -0,0 +1,6 @@
+import type { RadioGroupPropSize } from './index';
+export type RadioGroupContextProps = {
+    size?: RadioGroupPropSize;
+};
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextProps>;
+export declare const useRadioGroupState: () => RadioGroupContextProps;

package/dist/components/RadioGroup/RadioContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const RadioGroupContext = createContext(
+  {}
+);
+const useRadioGroupState = () => useContext(RadioGroupContext);
+export {
+  RadioGroupContext,
+  useRadioGroupState
+};

package/dist/components/RadioGroup/RadioGroup.d.ts

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

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { mergeProps, clsx } from "@koobiq/react-core";
+import { RadioGroup as RadioGroup$1 } from "@koobiq/react-primitives";
+import { flex } from "../layout/flex/flex.js";
+import { RadioGroupLabel } from "./components/RadioGroupLabel/RadioGroupLabel.js";
+import { RadioGroupContext } from "./RadioContext.js";
+import { RadioGroupDescription } from "./components/RadioGroupDescription/RadioGroupDescription.js";
+const RadioGroup = forwardRef(
+  (props, ref) => {
+    const { size, label, children, slotProps, description, orientation } = props;
+    const commonRootProps = mergeProps(
+      props,
+      {
+        className: clsx(
+          flex({
+            direction: orientation === "horizontal" ? "row" : "column",
+            alignItems: orientation === "horizontal" ? "center" : "flex-start",
+            gap: "m"
+          })
+        )
+      },
+      slotProps?.root
+    );
+    return /* @__PURE__ */ jsxs(RadioGroup$1, { ...commonRootProps, ref, children: [
+      /* @__PURE__ */ jsx(RadioGroupLabel, { ...slotProps?.label, children: label }),
+      /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { size }, children }),
+      /* @__PURE__ */ jsx(RadioGroupDescription, { ...slotProps?.description, children: description })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+export {
+  RadioGroup
+};

package/dist/components/RadioGroup/components/Radio/Radio.d.ts

@@ -0,0 +1,12 @@
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/radio").AriaRadioProps, "isDisabled">, "disabled"> & {
+    disabled?: boolean;
+} & {
+    caption?: string;
+    size?: import("./types").RadioPropSize;
+    labelPlacement?: import("./types").RadioPropLabelPlacement;
+    className?: string;
+    slotProps?: {
+        circle?: import("react").ComponentPropsWithRef<"span">;
+        label?: import("react").ComponentPropsWithRef<"span">;
+    };
+} & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/RadioGroup/components/Radio/Radio.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx, mergeProps, isNotNil } from "@koobiq/react-core";
+import { Radio as Radio$1 } from "@koobiq/react-primitives";
+import s from "./Radio.module.css.js";
+import { useRadioGroupState } from "../../RadioContext.js";
+const Radio = forwardRef(
+  (props, ref) => {
+    const {
+      labelPlacement = "end",
+      size: sizeProp,
+      children,
+      slotProps,
+      className,
+      ...other
+    } = props;
+    const { size: sizeState } = useRadioGroupState();
+    const size = sizeProp || sizeState || "normal";
+    const commonProps = {
+      className: ({ error, checked, hovered, disabled, focusVisible }) => clsx(
+        s.base,
+        s[size],
+        error && s.error,
+        checked && s.checked,
+        hovered && s.hovered,
+        disabled && s.disabled,
+        s[labelPlacement],
+        focusVisible && s.focusVisible,
+        className
+      ),
+      ...other
+    };
+    const circleProps = mergeProps({ className: s.circle }, slotProps?.circle);
+    const labelProps = slotProps?.label;
+    return /* @__PURE__ */ jsxs(Radio$1, { ...commonProps, ref, children: [
+      /* @__PURE__ */ jsx("span", { ...circleProps }),
+      isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+export {
+  Radio
+};

package/dist/components/RadioGroup/components/Radio/Radio.module.css.js

@@ -0,0 +1,38 @@
+const base = "kbq-radio-c3ed31";
+const circle = "kbq-radio-circle-a0903b";
+const normal = "kbq-radio-normal-81ed3e";
+const big = "kbq-radio-big-06db10";
+const hovered = "kbq-radio-hovered-3999f1";
+const checked = "kbq-radio-checked-a71e68";
+const error = "kbq-radio-error-52bb9e";
+const focusVisible = "kbq-radio-focusVisible-6613a5";
+const disabled = "kbq-radio-disabled-d60f1e";
+const start = "kbq-radio-start-e3dab7";
+const end = "kbq-radio-end-8689f9";
+const s = {
+  base,
+  circle,
+  normal,
+  big,
+  hovered,
+  checked,
+  error,
+  focusVisible,
+  disabled,
+  start,
+  end
+};
+export {
+  base,
+  big,
+  checked,
+  circle,
+  s as default,
+  disabled,
+  end,
+  error,
+  focusVisible,
+  hovered,
+  normal,
+  start
+};

package/dist/components/RadioGroup/components/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './types';

package/dist/components/RadioGroup/components/Radio/types.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { UseRadioProps } from '@koobiq/react-primitives';
+export declare const radioPropSize: readonly ["normal", "big"];
+export type RadioPropSize = (typeof radioPropSize)[number];
+export declare const radioPropLabelPlacement: readonly ["start", "end"];
+export type RadioPropLabelPlacement = (typeof radioPropLabelPlacement)[number];
+export type RadioProps = UseRadioProps & {
+    /** The helper text content. */
+    caption?: string;
+    /**
+     * Size.
+     * @default normal
+     * */
+    size?: RadioPropSize;
+    /**
+     * The position of the label.
+     * @default end
+     * */
+    labelPlacement?: RadioPropLabelPlacement;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        circle?: ComponentPropsWithRef<'span'>;
+        label?: ComponentPropsWithRef<'span'>;
+    };
+};

package/dist/components/RadioGroup/components/Radio/types.js

@@ -0,0 +1,6 @@
+const radioPropSize = ["normal", "big"];
+const radioPropLabelPlacement = ["start", "end"];
+export {
+  radioPropLabelPlacement,
+  radioPropSize
+};

package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.d.ts

@@ -0,0 +1,7 @@
+import { type TypographyProps } from '../../../Typography';
+export type RadioGroupDescriptionProps = TypographyProps;
+export declare const RadioGroupDescription: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+}, "as" | keyof import("../../..").TypographyBaseProps> & import("../../..").TypographyBaseProps & {
+    as?: "p" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { isNotNil } from "@koobiq/react-core";
+import { Typography } from "../../../Typography/Typography.js";
+const RadioGroupDescription = forwardRef(
+  ({ children, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "text-compact",
+      slot: "description",
+      color: "contrast-secondary",
+      ...other,
+      ref,
+      children
+    }
+  ) : null
+);
+RadioGroupDescription.displayName = "RadioGroupDescription";
+export {
+  RadioGroupDescription
+};

package/dist/components/RadioGroup/components/RadioGroupDescription/index.d.ts

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

package/dist/components/RadioGroup/components/RadioGroupLabel/RadioGroupLabel.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import { type TypographyProps } from '../../../Typography';
+export type RadioGroupLabelProps = TypographyProps<'span'> & {
+    children?: ReactNode;
+};
+export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<Omit<RadioGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/RadioGroup/components/RadioGroupLabel/RadioGroupLabel.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { isNotNil } from "@koobiq/react-core";
+import { Label } from "@koobiq/react-primitives";
+import { Typography } from "../../../Typography/Typography.js";
+const RadioGroupLabelTypography = forwardRef((props, ref) => /* @__PURE__ */ jsx(Typography, { as: "span", ...props, ref }));
+RadioGroupLabelTypography.displayName = "RadioGroupLabelTypography";
+const RadioGroupLabel = forwardRef(
+  ({ children, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(Label, { as: RadioGroupLabelTypography, ...other, ref, children }) : null
+);
+RadioGroupLabel.displayName = "RadioGroupLabel";
+export {
+  RadioGroupLabel
+};

package/dist/components/RadioGroup/components/RadioGroupLabel/index.d.ts

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

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

@@ -0,0 +1,3 @@
+export * from './Radio';
+export * from './RadioGroupLabel';
+export * from './RadioGroupDescription';

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

@@ -0,0 +1,4 @@
+export * from './RadioGroup';
+export * from './RadioContext';
+export * from './components';
+export * from './types';

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

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef, ExtendableProps } from '@koobiq/react-core';
+import type { UseRadioGroupProps } from '@koobiq/react-primitives';
+import type { RadioGroupDescriptionProps, RadioGroupLabelProps } from './components';
+export declare const radioGroupPropSize: readonly ["normal", "big"];
+export type RadioGroupPropSize = (typeof radioGroupPropSize)[number];
+export declare const radioGroupPropOrientation: readonly ["horizontal", "vertical"];
+export type RadioGroupPropOrientation = (typeof radioGroupPropOrientation)[number];
+export type RadioGroupBaseProps = ExtendableProps<{
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /**
+     * Size.
+     * @default normal
+     * */
+    size?: RadioGroupPropSize;
+    /** Slots */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+        description?: RadioGroupDescriptionProps;
+        label?: RadioGroupLabelProps;
+    };
+    /**
+     * The axis the Radio Button(s) should align with.
+     * @default 'vertical'
+     */
+    orientation?: RadioGroupPropOrientation;
+    /** The current value (controlled). */
+    value?: UseRadioGroupProps['value'];
+    /** The default value (uncontrolled). */
+    defaultValue?: UseRadioGroupProps['defaultValue'];
+    /** Handler that is called when the value changes. */
+    onChange?: UseRadioGroupProps['onChange'];
+}, UseRadioGroupProps>;
+export type RadioGroupProps = ExtendableComponentPropsWithRef<RadioGroupBaseProps, 'div'>;

package/dist/components/RadioGroup/types.js

@@ -0,0 +1,6 @@
+const radioGroupPropSize = ["normal", "big"];
+const radioGroupPropOrientation = ["horizontal", "vertical"];
+export {
+  radioGroupPropOrientation,
+  radioGroupPropSize
+};

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

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

package/dist/components/SidePanel/SidePanel.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, cloneElement, isValidElement } from "react";
+import { useBoolean, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useOverlayTriggerState, useOverlayTrigger, useModalOverlay, Overlay } from "@koobiq/react-primitives";
+import { Transition } from "react-transition-group";
+import s from "./SidePanel.module.css.js";
+import { Backdrop } from "../Backdrop/Backdrop.js";
+import { Dialog } from "../Dialog/Dialog.js";
+const SidePanel = forwardRef(
+  (props, ref) => {
+    const {
+      hideCloseButton = false,
+      position = "left",
+      size = "medium",
+      disableExitOnEscapeKeyDown,
+      disableExitOnClickOutside,
+      disableFocusManagement,
+      portalContainer,
+      open: openProp,
+      hideBackdrop,
+      onOpenChange,
+      defaultOpen,
+      children,
+      control,
+      slotProps,
+      ...other
+    } = props;
+    const state = useOverlayTriggerState({
+      isOpen: openProp,
+      onOpenChange,
+      defaultOpen,
+      ...other
+    });
+    const { isOpen: openState, close } = state;
+    const [opened, { on, off }] = useBoolean(openState);
+    const modalRef = useDOMRef(null);
+    const containerRef = useDOMRef(ref);
+    const { triggerProps, overlayProps } = useOverlayTrigger(
+      { type: "dialog" },
+      { ...state, isOpen: openState }
+    );
+    const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
+      {
+        ...props,
+        isDismissable: !disableExitOnClickOutside,
+        isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
+      },
+      { ...state, isOpen: opened },
+      modalRef
+    );
+    const resolvedChildren = () => {
+      if (typeof children === "function")
+        return cloneElement(children({ close }), overlayProps);
+      if (isValidElement(children)) return cloneElement(children, overlayProps);
+      return children;
+    };
+    const containerProps = mergeProps(
+      {
+        className: clsx(s.base, s[size], s[position]),
+        "data-size": size,
+        "data-position": position,
+        ref: containerRef
+      },
+      other
+    );
+    const backdropProps = mergeProps(
+      { open: openState && !hideBackdrop },
+      underlayProps,
+      slotProps?.backdrop
+    );
+    const dialogProps = mergeProps(
+      {
+        onClose: close,
+        role: "dialog",
+        hideCloseButton,
+        children: resolvedChildren()
+      },
+      slotProps?.dialog
+    );
+    const panelProps = mergeProps(
+      modalCommonProps,
+      {
+        className: s.panel,
+        ref: modalRef
+      },
+      slotProps?.panel
+    );
+    const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      control?.({
+        onClick: onPress,
+        disabled: isDisabled,
+        ...otherTriggerProps
+      }),
+      /* @__PURE__ */ jsx(
+        Transition,
+        {
+          onEnter: on,
+          timeout: 300,
+          onExited: off,
+          in: openState,
+          nodeRef: containerRef,
+          unmountOnExit: true,
+          appear: true,
+          children: (transition) => /* @__PURE__ */ jsx(
+            Overlay,
+            {
+              portalContainer,
+              disableFocusManagement,
+              children: /* @__PURE__ */ jsxs("div", { ...containerProps, "data-transition": transition, children: [
+                /* @__PURE__ */ jsx(Backdrop, { ...backdropProps }),
+                /* @__PURE__ */ jsx("div", { ...panelProps, children: /* @__PURE__ */ jsx(Dialog, { ...dialogProps }) })
+              ] })
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+SidePanel.displayName = "SidePanel";
+export {
+  SidePanel
+};

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

@@ -0,0 +1,26 @@
+const base = "kbq-sidepanel-2aae74";
+const small = "kbq-sidepanel-small-c39c6a";
+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 panel = "kbq-sidepanel-panel-4a4aa4";
+const s = {
+  base,
+  small,
+  medium,
+  large,
+  left,
+  right,
+  panel
+};
+export {
+  base,
+  s as default,
+  large,
+  left,
+  medium,
+  panel,
+  right,
+  small
+};

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

@@ -0,0 +1,4 @@
+export * from './SidePanel';
+export * from './types';
+export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
+export { DialogHeader as SidePanelHeader, DialogContent as SidePanelContent, DialogFooter as SidePanelFooter, } from '../Dialog';

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

@@ -0,0 +1,75 @@
+import type { ComponentPropsWithRef, ComponentRef, ReactElement, ReactNode } from 'react';
+import type { ButtonOptions } from '@koobiq/react-primitives';
+import type { BackdropProps } from '../Backdrop';
+import type { DialogProps } from '../Dialog';
+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 type SidePanelPropContent = ReactNode | ((props: {
+    close(): void;
+}) => ReactElement);
+export type SidePanelPropControl = (props: ButtonOptions) => ReactElement;
+export type SidePanelProps = {
+    /**
+     * Component width size.
+     * @default medium
+     * */
+    size?: SidePanelPropSize;
+    /**
+     * Side from which the side panel will appear.
+     * @default left
+     * */
+    position?: SidePanelPropPosition;
+    /** If `true`, the component is shown. */
+    open?: boolean;
+    /** The default open state. Use when the component is not controlled. */
+    defaultOpen?: boolean;
+    /** The content of the component. */
+    children?: SidePanelPropContent;
+    /** The render function of the control for displaying the modal window. */
+    control?: SidePanelPropControl;
+    /**
+     * If `true`, the close button isn't shown.
+     * @default false
+     * */
+    hideCloseButton?: boolean;
+    /** Handler that is called when the modal's open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The container element in which the component portal will be placed.
+     * @default document.body
+     */
+    portalContainer?: Element;
+    /**
+     * If `true`, the modal window won't close when clicked outside of it.
+     * @default false
+     */
+    disableExitOnClickOutside?: boolean;
+    /**
+     * If `true`, the modal window won't close when the ESC key is pressed.
+     * @default false
+     */
+    disableExitOnEscapeKeyDown?: boolean;
+    /**
+     * If `true`, the underlay (backdrop) under the modal window isn't shown.
+     * @default false
+     */
+    hideBackdrop?: boolean;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /**
+     * If `true`, the focus trap in modal window is disabled.
+     * @default false
+     */
+    disableFocusManagement?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        dialog?: DialogProps;
+        backdrop?: BackdropProps;
+        panel?: ComponentPropsWithRef<'div'>;
+    };
+};
+export type SidePanelRef = ComponentRef<'div'>;

package/dist/components/SidePanel/types.js

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