@koobiq/react-components 0.0.1-beta.1

package/dist/components/Popover/Popover.js

@@ -0,0 +1,147 @@
+"use client";
+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 { 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,
+      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(
+      {
+        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", { ...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() })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        },
+        placement
+      )
+    ] });
+  }
+);
+Popover.displayName = "Popover";
+export {
+  Popover
+};

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

@@ -0,0 +1,17 @@
+const base = "kbq-popover-f14dc5";
+const arrow = "kbq-popover-arrow-3bdadb";
+const underlay = "kbq-popover-underlay-9c5b07";
+const dialog = "kbq-popover-dialog-e39a6d";
+const s = {
+  base,
+  arrow,
+  underlay,
+  dialog
+};
+export {
+  arrow,
+  base,
+  s as default,
+  dialog,
+  underlay
+};

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

@@ -0,0 +1,4 @@
+export * from './Popover';
+export * from './types';
+export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
+export { DialogHeader as PopoverHeader, DialogContent as PopoverContent, DialogFooter as PopoverFooter, } from '../Dialog';

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

@@ -0,0 +1,97 @@
+import type { ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode, Ref, RefObject } from 'react';
+import type { ButtonOptions } from '@koobiq/react-primitives';
+import type { DialogProps } from '../Dialog';
+export type PopoverPropContent = ReactNode | ((props: {
+    close(): void;
+}) => ReactElement);
+export type PopoverPropControl = (props: ButtonOptions & {
+    ref?: Ref<HTMLButtonElement>;
+}) => ReactElement;
+export declare const popoverPropPlacement: readonly ["bottom", "bottom start", "bottom end", "top", "top start", "top end", "start", "start top", "start bottom", "end", "end top", "end bottom"];
+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 = {
+    /** 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. */
+    control?: PopoverPropControl;
+    /**
+     * Component width size.
+     * @default medium
+     * */
+    size?: PopoverPropSize;
+    /**
+     * 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 the ESC key is pressed.
+     * @default false
+     */
+    disableExitOnEscapeKeyDown?: 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 placement of the element with respect to its anchor element.
+     * @default top
+     * */
+    placement?: PopoverPropPlacement;
+    /** The ref for the element which the popover positions itself with respect to. */
+    anchorRef?: RefObject<HTMLElement>;
+    /**
+     * If `true`, the arrow isn't shown.
+     * @default false
+     * */
+    hideArrow?: boolean;
+    /**
+     * Whether the popover is non-modal, i.e. elements outside the popover may be
+     * interacted with by assistive technologies.
+     *
+     * Most popovers should not use this option as it may negatively impact the screen
+     * reader experience. Only use with components such as combobox, which are designed
+     * to handle this situation carefully.
+     */
+    isNonModal?: boolean;
+    /**
+     * The minimum distance the arrow's edge should be from the edge of the overlay element.
+     * @default 0
+     */
+    arrowBoundaryOffset?: number;
+    /**
+     * The additional offset applied along the main axis between the element and its
+     * anchor element.
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * The additional offset applied along the cross axis between the element and its
+     * anchor element.
+     * @default 0
+     */
+    crossOffset?: number;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        dialog?: DialogProps;
+        arrow?: ComponentPropsWithRef<'div'>;
+    };
+};

package/dist/components/Popover/types.js

@@ -0,0 +1,19 @@
+const popoverPropPlacement = [
+  "bottom",
+  "bottom start",
+  "bottom end",
+  "top",
+  "top start",
+  "top end",
+  "start",
+  "start top",
+  "start bottom",
+  "end",
+  "end top",
+  "end bottom"
+];
+const popoverPropSize = ["small", "medium", "large"];
+export {
+  popoverPropPlacement,
+  popoverPropSize
+};

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

@@ -0,0 +1,2 @@
+import type { PopoverPropSize } from './types';
+export declare const normalizeInlineSize: (value: PopoverPropSize | undefined) => string | undefined;

package/dist/components/Popover/utils.js

@@ -0,0 +1,11 @@
+import { isNumber } from "@koobiq/react-core";
+const normalizeInlineSize = (value) => {
+  if (value === "small") return `240px`;
+  if (value === "medium") return `400px`;
+  if (value === "large") return `640px`;
+  if (isNumber(value)) return `${value}px`;
+  return value;
+};
+export {
+  normalizeInlineSize
+};

package/dist/components/ProgressBar/ProgressBar.d.ts

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

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { isNotNil, clsx } from "@koobiq/react-core";
+import { ProgressBar as ProgressBar$1 } from "@koobiq/react-primitives";
+import s from "./ProgressBar.module.css.js";
+const ProgressBar = forwardRef(
+  (props, ref) => {
+    const {
+      variant = "determinate",
+      minValue = 0,
+      maxValue = 100,
+      className,
+      value,
+      slotProps,
+      style,
+      ...other
+    } = props;
+    const indeterminate = variant === "indeterminate" || !isNotNil(value);
+    const setProgressTrackStyles = () => {
+      if (indeterminate) return void 0;
+      const translateX = Math.max(
+        -maxValue,
+        Math.min(minValue, (value || minValue) - maxValue)
+      );
+      return {
+        "--progressbar-fill-translate-x": `translateX(${translateX}%)`
+      };
+    };
+    return /* @__PURE__ */ jsx(
+      ProgressBar$1,
+      {
+        value,
+        minValue,
+        maxValue,
+        indeterminate,
+        "data-variant": indeterminate ? "indeterminate" : "determinate",
+        style: { ...style, ...setProgressTrackStyles() },
+        className: clsx(s.base, indeterminate && s.indeterminate, className),
+        ...other,
+        ref,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(s.fill, slotProps?.fill?.className),
+            ref: slotProps?.fill?.ref,
+            ...slotProps?.fill
+          }
+        )
+      }
+    );
+  }
+);
+ProgressBar.displayName = "ProgressBar";
+export {
+  ProgressBar
+};

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

@@ -0,0 +1,15 @@
+const base = "kbq-progressbar-824268";
+const fill = "kbq-progressbar-fill-f590ca";
+const indeterminate = "kbq-progressbar-indeterminate-80b42e";
+const s = {
+  base,
+  fill,
+  indeterminate,
+  "progress-bar-animation": "kbq-progressbar-progress-bar-animation-6e2ae1"
+};
+export {
+  base,
+  s as default,
+  fill,
+  indeterminate
+};

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

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

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

@@ -0,0 +1,34 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export declare const progressBarPropVariant: readonly ["indeterminate", "determinate"];
+export type ProgressBarPropVariant = (typeof progressBarPropVariant)[number];
+export type ProgressBarBaseProps = {
+    children?: never;
+    /**
+     * The current value (controlled).
+     * @default 0
+     */
+    value?: number;
+    /**
+     * The smallest value allowed for the input.
+     * @default 0
+     */
+    minValue?: number;
+    /**
+     * The largest value allowed for the input.
+     * @default 100
+     */
+    maxValue?: number;
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * The variant to use. Use indeterminate or query when there is no progress value.
+     * @default determinate
+     * */
+    variant?: ProgressBarPropVariant;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        fill?: ComponentPropsWithRef<'span'>;
+    };
+};
+export type ProgressBarProps = ExtendableComponentPropsWithRef<ProgressBarBaseProps, 'div'>;

package/dist/components/ProgressBar/types.js

@@ -0,0 +1,4 @@
+const progressBarPropVariant = ["indeterminate", "determinate"];
+export {
+  progressBarPropVariant
+};

package/dist/components/ProgressSpinner/ProgressSpinner.d.ts

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

package/dist/components/ProgressSpinner/ProgressSpinner.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { isNotNil, clsx } from "@koobiq/react-core";
+import { ProgressBar } from "@koobiq/react-primitives";
+import s from "./ProgressSpinner.module.css.js";
+import { getSvgParamsBySize } from "./utils.js";
+const ProgressSpinner = forwardRef((props, ref) => {
+  const {
+    variant = "determinate",
+    size = "compact",
+    minValue = 0,
+    maxValue = 100,
+    className,
+    value,
+    slotProps,
+    ...other
+  } = props;
+  const indeterminate = variant === "indeterminate" || !isNotNil(value);
+  const [sizeOfPixels, strokeWidth, radius, strokeDasharray] = useMemo(
+    () => getSvgParamsBySize(size),
+    [size]
+  );
+  return /* @__PURE__ */ jsx(
+    ProgressBar,
+    {
+      value,
+      "data-size": size,
+      minValue,
+      maxValue,
+      indeterminate,
+      "data-variant": indeterminate ? "indeterminate" : "determinate",
+      className: clsx(s.base, indeterminate && s.indeterminate, className),
+      ...other,
+      ref,
+      children: ({ percentage = 0 }) => {
+        const progress = indeterminate ? 75 : percentage;
+        return /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: sizeOfPixels,
+            height: sizeOfPixels,
+            className: clsx(s.spin, slotProps?.spin?.className),
+            viewBox: `0 0 ${sizeOfPixels} ${sizeOfPixels}`,
+            ...slotProps?.spin,
+            children: /* @__PURE__ */ jsx(
+              "circle",
+              {
+                r: radius,
+                className: s.circle,
+                cx: sizeOfPixels / 2,
+                cy: sizeOfPixels / 2,
+                strokeLinecap: "round",
+                strokeWidth,
+                strokeDasharray,
+                strokeDashoffset: strokeDasharray - progress / 100 * strokeDasharray
+              }
+            )
+          }
+        );
+      }
+    }
+  );
+});
+ProgressSpinner.displayName = "ProgressSpinner";
+export {
+  ProgressSpinner
+};

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

@@ -0,0 +1,18 @@
+const base = "kbq-progressspinner-c0a44b";
+const spin = "kbq-progressspinner-spin-537b53";
+const circle = "kbq-progressspinner-circle-6442ab";
+const indeterminate = "kbq-progressspinner-indeterminate-1cf6d1";
+const s = {
+  base,
+  spin,
+  circle,
+  indeterminate,
+  "progress-spin-animation": "kbq-progressspinner-progress-spin-animation-82d376"
+};
+export {
+  base,
+  circle,
+  s as default,
+  indeterminate,
+  spin
+};

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

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

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

@@ -0,0 +1,41 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export declare const progressSpinnerPropSize: readonly ["compact", "big"];
+export type ProgressSpinnerPropSize = (typeof progressSpinnerPropSize)[number];
+export declare const progressSpinnerPropVariant: readonly ["indeterminate", "determinate"];
+export type ProgressSpinnerPropVariant = (typeof progressSpinnerPropVariant)[number];
+export type ProgressSpinnerBaseProps = {
+    children?: never;
+    /**
+     * The current value (controlled).
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Size.
+     * @default compact
+     * */
+    size?: ProgressSpinnerPropSize;
+    /**
+     * The smallest value allowed for the input.
+     * @default 0
+     */
+    minValue?: number;
+    /**
+     * The largest value allowed for the input.
+     * @default 100
+     */
+    maxValue?: number;
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * The variant to use. Use indeterminate or query when there is no progress value.
+     * @default determinate
+     * */
+    variant?: ProgressSpinnerPropVariant;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        spin?: ComponentPropsWithRef<'svg'>;
+    };
+};
+export type ProgressSpinnerProps = ExtendableComponentPropsWithRef<ProgressSpinnerBaseProps, 'div'>;

package/dist/components/ProgressSpinner/types.js

@@ -0,0 +1,9 @@
+const progressSpinnerPropSize = ["compact", "big"];
+const progressSpinnerPropVariant = [
+  "indeterminate",
+  "determinate"
+];
+export {
+  progressSpinnerPropSize,
+  progressSpinnerPropVariant
+};

package/dist/components/ProgressSpinner/utils.d.ts

@@ -0,0 +1,2 @@
+import type { ProgressSpinnerPropSize } from './index';
+export declare function getSvgParamsBySize(size: ProgressSpinnerPropSize): [number, number, number, number];

package/dist/components/ProgressSpinner/utils.js

@@ -0,0 +1,18 @@
+const sizeMap = {
+  compact: 16,
+  big: 48
+};
+const strokeWidthMap = {
+  compact: 2,
+  big: 3
+};
+function getSvgParamsBySize(size) {
+  const sizeOfPixels = sizeMap[size];
+  const strokeWidth = strokeWidthMap[size];
+  const radius = (sizeOfPixels - strokeWidth) / 2;
+  const strokeDasharray = radius * 2 * Math.PI;
+  return [sizeOfPixels, strokeWidth, radius, strokeDasharray];
+}
+export {
+  getSvgParamsBySize
+};

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

@@ -0,0 +1,5 @@
+import type { Breakpoints } from './types';
+export type BreakpointsContextType = Record<keyof Breakpoints, boolean>;
+export declare const BreakpointsContext: import("react").Context<BreakpointsContextType>;
+export declare function useBreakpoints(): BreakpointsContextType;
+export declare function useMatchedBreakpoints(): string[];

package/dist/components/Provider/BreakpointsContext.js

@@ -0,0 +1,17 @@
+"use client";
+import { createContext, useContext } from "react";
+const BreakpointsContext = createContext(
+  {}
+);
+function useBreakpoints() {
+  return useContext(BreakpointsContext);
+}
+function useMatchedBreakpoints() {
+  const breakpoints = useContext(BreakpointsContext);
+  return Object.keys(breakpoints).filter((key) => breakpoints[key]);
+}
+export {
+  BreakpointsContext,
+  useBreakpoints,
+  useMatchedBreakpoints
+};

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { Breakpoints } from './types';
+export type BreakpointsProviderProps = {
+    children: ReactNode;
+    breakpoints: Breakpoints;
+};
+export declare const BreakpointsProvider: {
+    ({ children, breakpoints: _breakpoints, }: BreakpointsProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Provider/BreakpointsProvider.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { BreakpointsContext } from "./BreakpointsContext.js";
+import { useBreakpoints } from "./utils/useBreakpoints.js";
+const BreakpointsProvider = ({
+  children,
+  breakpoints: _breakpoints
+}) => {
+  const breakpoints = useBreakpoints(_breakpoints);
+  return /* @__PURE__ */ jsx(BreakpointsContext.Provider, { value: breakpoints, children });
+};
+BreakpointsProvider.displayName = "BreakpointsProvider";
+export {
+  BreakpointsProvider
+};

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

@@ -0,0 +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;
+    displayName: string;
+};