@koobiq/react-components 0.0.1-beta.2 → 0.0.1-beta.21

package/dist/components/Popover/Popover.js

@@ -2,146 +2,161 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, cloneElement, isValidElement } from "react";
 import { useDOMRef, useBoolean, mergeProps, clsx } from "@koobiq/react-core";
-import { useOverlayTriggerState, useOverlayTrigger, usePopover, Overlay } from "@koobiq/react-primitives";
+import { useOverlayTrigger, usePopover, Overlay, useOverlayTriggerState } from "@koobiq/react-primitives";
 import { Transition } from "react-transition-group";
 import s from "./Popover.module.css.js";
 import { normalizeInlineSize } from "./utils.js";
 import { Dialog } from "../Dialog/Dialog.js";
-const Popover = forwardRef(
-  (props, ref) => {
-    const {
-      placement: placementProp = "top",
-      arrowBoundaryOffset = 20,
-      hideArrow = false,
-      size = "medium",
-      crossOffset = 0,
-      offset = 0,
-      slotProps,
-      disableExitOnEscapeKeyDown,
-      disableFocusManagement,
-      portalContainer,
-      hideCloseButton,
-      open: openProp,
-      className,
-      defaultOpen,
-      onOpenChange,
+const PopoverInner = (props) => {
+  const {
+    offset = 0,
+    size = "medium",
+    crossOffset = 0,
+    hideArrow = false,
+    containerPadding = 12,
+    arrowBoundaryOffset = 20,
+    placement: placementProp = "top",
+    type = "dialog",
+    state,
+    control,
+    children,
+    anchorRef,
+    slotProps,
+    className,
+    isNonModal,
+    popoverRef,
+    portalContainer,
+    hideCloseButton,
+    disableFocusManagement,
+    disableExitOnEscapeKeyDown,
+    shouldCloseOnInteractOutside,
+    ...other
+  } = props;
+  const showArrow = !hideArrow;
+  const domRef = useDOMRef(popoverRef);
+  const controlRef = useRef(null);
+  const openState = state.isOpen;
+  const [opened, { on, off }] = useBoolean(openState);
+  const { triggerProps, overlayProps } = useOverlayTrigger(
+    { type },
+    { ...state, isOpen: openState }
+  );
+  const {
+    popoverProps,
+    underlayProps,
+    arrowProps: arrowPropsCommon,
+    placement
+  } = usePopover(
+    {
+      ...props,
+      offset,
       isNonModal,
-      anchorRef,
-      children,
-      control,
-      ...other
-    } = props;
-    const showArrow = !hideArrow;
-    const domRef = useDOMRef(ref);
-    const controlRef = useRef(null);
-    const state = useOverlayTriggerState({
-      isOpen: openProp,
-      onOpenChange,
-      defaultOpen,
-      ...other
-    });
-    const openState = state.isOpen;
-    const [opened, { on, off }] = useBoolean(openState);
-    const { triggerProps, overlayProps } = useOverlayTrigger(
-      { type: "dialog" },
-      { ...state, isOpen: openState }
-    );
-    const {
-      popoverProps,
-      underlayProps,
-      arrowProps: arrowPropsCommon,
-      placement
-    } = usePopover(
-      {
-        ...props,
-        offset,
-        isNonModal,
-        crossOffset,
-        maxHeight: 480,
-        popoverRef: domRef,
-        arrowBoundaryOffset,
-        containerPadding: 24,
-        placement: placementProp,
-        isKeyboardDismissDisabled: disableExitOnEscapeKeyDown,
-        triggerRef: anchorRef || controlRef
-      },
-      { ...state, isOpen: opened }
-    );
-    const resolvedChildren = () => {
-      if (typeof children === "function")
-        return cloneElement(children({ close: state.close }), overlayProps);
-      if (isValidElement(children)) return cloneElement(children, overlayProps);
-      return children;
-    };
-    const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
-    const arrowProps = mergeProps(
-      { className: s.arrow },
-      arrowPropsCommon,
-      slotProps?.arrow
-    );
-    const dialogProps = mergeProps(
+      crossOffset,
+      maxHeight: 480,
+      containerPadding,
+      popoverRef: domRef,
+      arrowBoundaryOffset,
+      placement: placementProp,
+      shouldCloseOnInteractOutside,
+      triggerRef: anchorRef || controlRef,
+      isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
+    },
+    { ...state, isOpen: openState || opened }
+  );
+  const resolvedChildren = () => {
+    if (typeof children === "function")
+      return cloneElement(children({ close: state.close }), overlayProps);
+    if (isValidElement(children)) return cloneElement(children, overlayProps);
+    return children;
+  };
+  const { isDisabled, ...otherTriggerProps } = triggerProps;
+  const arrowProps = mergeProps(
+    { className: s.arrow },
+    arrowPropsCommon,
+    slotProps?.arrow
+  );
+  const dialogProps = mergeProps(
+    {
+      role: "dialog",
+      hideCloseButton,
+      className: s.dialog,
+      onClose: state.close
+    },
+    slotProps?.dialog
+  );
+  const backdropProps = mergeProps(
+    { className: s.underlay },
+    slotProps?.backdrop,
+    underlayProps
+  );
+  const transitionProps = mergeProps(
+    {
+      timeout: 120,
+      onEnter: on,
+      onExited: off,
+      appear: true,
+      in: openState,
+      nodeRef: domRef,
+      unmountOnExit: true
+    },
+    slotProps?.transition
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    control?.({
+      ref: controlRef,
+      disabled: isDisabled,
+      ...otherTriggerProps
+    }),
+    /* @__PURE__ */ jsx(Transition, { ...transitionProps, children: (transition) => /* @__PURE__ */ jsxs(
+      Overlay,
       {
-        role: "dialog",
-        className: s.dialog,
-        onClose: state.close,
-        hideCloseButton
-      },
-      slotProps?.dialog
-    );
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      control?.({
-        onClick: onPress,
-        ref: controlRef,
-        disabled: isDisabled,
-        ...otherTriggerProps
-      }),
-      /* @__PURE__ */ jsx(
-        Transition,
-        {
-          onEnter: on,
-          timeout: 300,
-          onExited: off,
-          in: openState,
-          nodeRef: domRef,
-          unmountOnExit: true,
-          appear: true,
-          children: (transition) => /* @__PURE__ */ jsxs(
-            Overlay,
+        portalContainer,
+        disableFocusManagement,
+        children: [
+          /* @__PURE__ */ jsx("div", { ...backdropProps }),
+          /* @__PURE__ */ jsxs(
+            "div",
             {
-              portalContainer,
-              disableFocusManagement,
+              ref: domRef,
+              "data-size": size,
+              "data-arrow": showArrow,
+              "data-placement": placement,
+              "data-transition": transition,
+              className: clsx(s.base, s[size], className),
+              ...mergeProps(popoverProps, other),
+              style: {
+                ...popoverProps.style,
+                "--popover-inline-size": normalizeInlineSize(size)
+              },
               children: [
-                /* @__PURE__ */ jsx("div", { ...underlayProps, className: s.underlay }),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    ref: domRef,
-                    "data-size": size,
-                    "data-arrow": showArrow,
-                    "data-placement": placement,
-                    "data-transition": transition,
-                    className: clsx(s.base, s[size], className),
-                    ...mergeProps(popoverProps, other),
-                    style: {
-                      ...popoverProps.style,
-                      "--popover-inline-size": normalizeInlineSize(size)
-                    },
-                    children: [
-                      showArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, "data-placement": placement }),
-                      /* @__PURE__ */ jsx(Dialog, { ...dialogProps, children: resolvedChildren() })
-                    ]
-                  }
-                )
+                showArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, "data-placement": placement }),
+                /* @__PURE__ */ jsx("div", { className: s.container, children: type === "dialog" ? /* @__PURE__ */ jsx(Dialog, { ...dialogProps, children: resolvedChildren() }) : resolvedChildren() })
               ]
             }
           )
-        },
-        placement
-      )
-    ] });
+        ]
+      }
+    ) })
+  ] });
+};
+const PopoverComponent = forwardRef(
+  (props, ref) => {
+    const { open, onOpenChange, defaultOpen, ...other } = props;
+    const state = useOverlayTriggerState({
+      isOpen: open,
+      onOpenChange,
+      defaultOpen,
+      ...other
+    });
+    return /* @__PURE__ */ jsx(PopoverInner, { popoverRef: ref, ...other, state });
   }
 );
-Popover.displayName = "Popover";
+PopoverComponent.displayName = "Popover";
+const Popover = PopoverComponent;
+Popover.Header = Dialog.Header;
+Popover.Body = Dialog.Body;
+Popover.Footer = Dialog.Footer;
 export {
-  Popover
+  Popover,
+  PopoverInner
 };

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

@@ -1,9 +1,11 @@
 const base = "kbq-popover-f14dc5";
+const container = "kbq-popover-container-332b0b";
 const arrow = "kbq-popover-arrow-3bdadb";
 const underlay = "kbq-popover-underlay-9c5b07";
 const dialog = "kbq-popover-dialog-e39a6d";
 const s = {
   base,
+  container,
   arrow,
   underlay,
   dialog
@@ -11,6 +13,7 @@ const s = {
 export {
   arrow,
   base,
+  container,
   s as default,
   dialog,
   underlay

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

@@ -1,4 +1,17 @@
 export * from './Popover';
 export * from './types';
-export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
-export { DialogHeader as PopoverHeader, DialogContent as PopoverContent, DialogFooter as PopoverFooter, } from '../Dialog';
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Header` instead.
+ */
+export declare const PopoverHeader: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Body` instead.
+ */
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Footer` instead.
+ */
+export declare const PopoverFooter: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Popover/index.js

@@ -0,0 +1,9 @@
+import { Dialog } from "../Dialog/Dialog.js";
+const PopoverHeader = Dialog.Header;
+const PopoverContent = Dialog.Body;
+const PopoverFooter = Dialog.Footer;
+export {
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader
+};

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

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode, Ref, RefObject } from 'react';
-import type { ButtonOptions } from '@koobiq/react-primitives';
+import type { ButtonOptions, OverlayTriggerState } from '@koobiq/react-primitives';
+import type { TransitionProps } from 'react-transition-group/Transition';
 import type { DialogProps } from '../Dialog';
 export type PopoverPropContent = ReactNode | ((props: {
     close(): void;
@@ -11,14 +12,16 @@ export declare const popoverPropPlacement: readonly ["bottom", "bottom start", "
 export type PopoverPropPlacement = (typeof popoverPropPlacement)[number];
 export declare const popoverPropSize: readonly ["small", "medium", "large"];
 export type PopoverPropSize = (typeof popoverPropSize)[number] | CSSProperties['inlineSize'];
-export type PopoverProps = {
+export declare const popoverPropType: readonly ["dialog", "menu", "listbox", "tree", "grid"];
+export type PopoverPropType = (typeof popoverPropType)[number];
+export type PopoverBaseProps = {
     /** 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?: PopoverPropContent;
-    /** The render function of the control for displaying the modal window. */
+    /** The render function of the control for displaying the popover. */
     control?: PopoverPropControl;
     /**
      * Component width size.
@@ -57,7 +60,7 @@ export type PopoverProps = {
      * */
     placement?: PopoverPropPlacement;
     /** The ref for the element which the popover positions itself with respect to. */
-    anchorRef?: RefObject<HTMLElement>;
+    anchorRef?: RefObject<HTMLElement | null>;
     /**
      * If `true`, the arrow isn't shown.
      * @default false
@@ -77,6 +80,12 @@ export type PopoverProps = {
      * @default 0
      */
     arrowBoundaryOffset?: number;
+    /**
+     * The placement padding that should be applied between the element and its
+     * surrounding container.
+     * @default 12
+     */
+    containerPadding?: number;
     /**
      * The additional offset applied along the main axis between the element and its
      * anchor element.
@@ -89,9 +98,24 @@ export type PopoverProps = {
      * @default 0
      */
     crossOffset?: number;
+    /**
+     * When user interacts with the argument element outside of the popover ref,
+     * return true if onClose should be called. This gives you a chance to filter
+     * out interaction with elements that should not dismiss the popover.
+     * By default, onClose will always be called on interaction outside the popover ref.
+     */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    type?: PopoverPropType;
     /** The props used for each slot inside. */
     slotProps?: {
         dialog?: DialogProps;
         arrow?: ComponentPropsWithRef<'div'>;
+        backdrop?: ComponentPropsWithRef<'div'>;
+        transition?: TransitionProps<HTMLElement>;
     };
 };
+export type PopoverInnerProps = {
+    state: OverlayTriggerState;
+    popoverRef?: Ref<HTMLDivElement>;
+} & Omit<PopoverBaseProps, 'ref'>;
+export type PopoverProps = PopoverBaseProps;

package/dist/components/Popover/types.js

@@ -13,7 +13,15 @@ const popoverPropPlacement = [
   "end bottom"
 ];
 const popoverPropSize = ["small", "medium", "large"];
+const popoverPropType = [
+  "dialog",
+  "menu",
+  "listbox",
+  "tree",
+  "grid"
+];
 export {
   popoverPropPlacement,
-  popoverPropSize
+  popoverPropSize,
+  popoverPropType
 };

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

@@ -4,8 +4,7 @@ const indeterminate = "kbq-progressbar-indeterminate-80b42e";
 const s = {
   base,
   fill,
-  indeterminate,
-  "progress-bar-animation": "kbq-progressbar-progress-bar-animation-6e2ae1"
+  indeterminate
 };
 export {
   base,

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

@@ -6,8 +6,7 @@ const s = {
   base,
   spin,
   circle,
-  indeterminate,
-  "progress-spin-animation": "kbq-progressspinner-progress-spin-animation-82d376"
+  indeterminate
 };
 export {
   base,

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

@@ -3,8 +3,9 @@ import type { Breakpoints } from './types';
 export type BreakpointsProviderProps = {
     children: ReactNode;
     breakpoints: Breakpoints;
+    defaultMatches?: boolean[];
 };
 export declare const BreakpointsProvider: {
-    ({ children, breakpoints: _breakpoints, }: BreakpointsProviderProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, defaultMatches, breakpoints: _breakpoints, }: BreakpointsProviderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Provider/BreakpointsProvider.js

@@ -4,9 +4,16 @@ import { BreakpointsContext } from "./BreakpointsContext.js";
 import { useBreakpoints } from "./utils/useBreakpoints.js";
 const BreakpointsProvider = ({
   children,
+  defaultMatches,
   breakpoints: _breakpoints
 }) => {
-  const breakpoints = useBreakpoints(_breakpoints);
+  const breakpoints = useBreakpoints(
+    _breakpoints,
+    defaultMatches && {
+      ssr: true,
+      defaultMatches
+    }
+  );
   return /* @__PURE__ */ jsx(BreakpointsContext.Provider, { value: breakpoints, children });
 };
 BreakpointsProvider.displayName = "BreakpointsProvider";

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

@@ -1,6 +1,6 @@
 import type { Breakpoints, ProviderProps } from './types';
 export declare const defaultBreakpoints: Breakpoints;
 export declare const Provider: {
-    ({ breakpoints, children, locale, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
+    ({ breakpoints, breakpointsFallback, children, locale, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Provider/Provider.js

@@ -19,9 +19,17 @@ const defaultBreakpoints = {
 };
 const Provider = ({
   breakpoints = defaultBreakpoints,
+  breakpointsFallback,
   children,
   locale
-}) => /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { breakpoints, locale }, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(BreakpointsProvider, { breakpoints, children }) }) });
+}) => /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { breakpoints, locale }, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(
+  BreakpointsProvider,
+  {
+    breakpoints,
+    defaultMatches: breakpointsFallback,
+    children
+  }
+) }) });
 Provider.displayName = "Provider";
 export {
   Provider,

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

@@ -10,7 +10,12 @@ export type Breakpoints = {
     [custom: string]: number | undefined;
 };
 export type ProviderProps = {
+    /** The content of the component. */
     children?: ReactNode;
+    /** Responsive breakpoints for your application. */
     breakpoints?: Breakpoints;
+    /** SSR-fallback for responsive breakpoints for your application. */
+    breakpointsFallback?: boolean[];
+    /** The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. Defaults to the browser/OS language setting. */
     locale?: I18nProviderProps['locale'];
 };

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

@@ -1,2 +1,3 @@
+import type { UseMediaQueryOptions } from '@koobiq/react-core';
 import type { Breakpoints } from '../types';
-export declare function useBreakpoints(breakpoints: Breakpoints): {};
+export declare function useBreakpoints(breakpoints: Breakpoints, options?: UseMediaQueryOptions): {};

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

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

package/dist/components/RadioGroup/RadioContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from "react";
 const RadioGroupContext = createContext(
   {}

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,11 +1,12 @@
+"use client";
 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";
+import { flex } from "../layout/flex/flex.js";
 const RadioGroup = forwardRef(
   (props, ref) => {
     const { size, label, children, slotProps, description, orientation } = props;

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { clsx, mergeProps, isNotNil } from "@koobiq/react-core";
+import { mergeProps, isNotNil, clsx } from "@koobiq/react-core";
+import { IconCircleXs16 } from "@koobiq/react-icons";
 import { Radio as Radio$1 } from "@koobiq/react-primitives";
 import s from "./Radio.module.css.js";
 import { useRadioGroupState } from "../../RadioContext.js";
@@ -33,7 +34,7 @@ const Radio = forwardRef(
     const circleProps = mergeProps({ className: s.circle }, slotProps?.circle);
     const labelProps = slotProps?.label;
     return /* @__PURE__ */ jsxs(Radio$1, { ...commonProps, ref, children: [
-      /* @__PURE__ */ jsx("span", { ...circleProps }),
+      /* @__PURE__ */ jsx("span", { ...circleProps, children: /* @__PURE__ */ jsx(IconCircleXs16, { className: s.icon }) }),
       isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
     ] });
   }

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

@@ -1,5 +1,6 @@
 const base = "kbq-radio-c3ed31";
 const circle = "kbq-radio-circle-a0903b";
+const icon = "kbq-radio-icon-148a68";
 const normal = "kbq-radio-normal-81ed3e";
 const big = "kbq-radio-big-06db10";
 const hovered = "kbq-radio-hovered-3999f1";
@@ -12,6 +13,7 @@ const end = "kbq-radio-end-8689f9";
 const s = {
   base,
   circle,
+  icon,
   normal,
   big,
   hovered,
@@ -33,6 +35,7 @@ export {
   error,
   focusVisible,
   hovered,
+  icon,
   normal,
   start
 };

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

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