@koobiq/react-components 0.0.1-beta.1

package/dist/components/InputNumber/InputNumber.d.ts

@@ -0,0 +1,22 @@
+export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").UseNumberFieldProps, "inputElementType">, "caption" | "label" | "style" | "className" | "disabled" | "required" | "error" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "errorMessage" | "startAddon" | "endAddon" | "hiddenLabel"> & {
+    label?: import("react").ReactNode;
+    className?: string;
+    startAddon?: import("react").ReactNode;
+    endAddon?: import("react").ReactNode;
+    variant?: import("./types").InputNumberPropVariant;
+    error?: boolean;
+    errorMessage?: string | number;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    hiddenLabel?: boolean;
+    caption?: string | number;
+    required?: boolean;
+    style?: import("react").CSSProperties;
+    'data-testid'?: string | number;
+    slotProps?: {
+        label?: import("../FieldComponents").FieldLabelProps;
+        input?: import("../FieldComponents").FieldInputProps;
+        caption?: import("../FieldComponents").FieldCaptionProps;
+        errorMessage?: import("../FieldComponents").FieldErrorProps;
+    };
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/InputNumber/InputNumber.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, mergeProps } from "@koobiq/react-core";
+import { FieldNumberControl } from "../FieldComponents/FieldNumberControl/FieldNumberControl.js";
+import { InputNumberCounterControls } from "./components/InputNumberCounterControls.js";
+import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
+import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
+import { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
+import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
+import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
+const InputNumber = forwardRef(
+  (props, ref) => {
+    const {
+      variant = "filled",
+      fullWidth = false,
+      hiddenLabel = false,
+      label,
+      startAddon,
+      endAddon,
+      errorMessage,
+      slotProps,
+      caption,
+      ...other
+    } = props;
+    const domRef = useDOMRef(ref);
+    const rootProps = mergeProps(
+      {
+        label,
+        fullWidth,
+        errorMessage,
+        "data-variant": variant,
+        "data-fullwidth": fullWidth
+      },
+      other
+    );
+    return /* @__PURE__ */ jsx(FieldNumberControl, { ...rootProps, children: ({ error, required, disabled }) => {
+      const labelProps = mergeProps(
+        { hidden: hiddenLabel, required },
+        slotProps?.label
+      );
+      const inputProps = mergeProps(
+        { error, variant, disabled, ref: domRef },
+        slotProps?.input
+      );
+      const captionProps = slotProps?.caption;
+      const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps?.children || label }),
+        /* @__PURE__ */ jsx(
+          FieldInputGroup,
+          {
+            error,
+            disabled,
+            startAddon,
+            endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+              endAddon,
+              /* @__PURE__ */ jsx(InputNumberCounterControls, {})
+            ] }),
+            children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps })
+          }
+        ),
+        /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
+        /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+      ] });
+    } });
+  }
+);
+InputNumber.displayName = "InputNumber";
+export {
+  InputNumber
+};

package/dist/components/InputNumber/components/InputNumberCounterControls.d.ts

@@ -0,0 +1 @@
+export declare const InputNumberCounterControls: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/InputNumber/components/InputNumberCounterControls.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "@koobiq/react-core";
+import { IconChevronUp16, IconChevronDown16 } from "@koobiq/react-icons";
+import s from "./InputNumberCounterControls.module.css.js";
+import { useFieldInputGroup } from "../../FieldComponents/FieldInputGroup/FieldInputGroupContext.js";
+import { IconButton } from "../../IconButton/IconButton.js";
+const InputNumberCounterControls = () => {
+  const { hovered, hasValue, focusWithin } = useFieldInputGroup();
+  const visible = (hovered || focusWithin) && hasValue;
+  return /* @__PURE__ */ jsxs("div", { className: clsx(s.base, visible && s.visible), children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: s.counter,
+        slot: "increment",
+        variant: "fade-contrast",
+        size: "l",
+        compact: true,
+        children: /* @__PURE__ */ jsx(IconChevronUp16, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: s.counter,
+        slot: "decrement",
+        variant: "fade-contrast",
+        size: "l",
+        compact: true,
+        children: /* @__PURE__ */ jsx(IconChevronDown16, {})
+      }
+    )
+  ] });
+};
+export {
+  InputNumberCounterControls
+};

package/dist/components/InputNumber/components/InputNumberCounterControls.module.css.js

@@ -0,0 +1,14 @@
+const base = "kbq-inputnumbercountercontrols-77ed13";
+const visible = "kbq-inputnumbercountercontrols-visible-5885f8";
+const counter = "kbq-inputnumbercountercontrols-counter-1126db";
+const s = {
+  base,
+  visible,
+  counter
+};
+export {
+  base,
+  counter,
+  s as default,
+  visible
+};

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

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

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

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

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

@@ -0,0 +1,62 @@
+import type { ComponentRef, CSSProperties, ReactNode } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { UseNumberFieldProps } from '@koobiq/react-primitives';
+import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
+export declare const inputNumberPropVariant: readonly ["filled", "transparent"];
+export type InputNumberPropVariant = (typeof inputNumberPropVariant)[number];
+export type InputNumberProps = ExtendableProps<{
+    /** The content to display as the label. */
+    label?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+    /**
+     * The variant to use.
+     * @default filled
+     * */
+    variant?: InputNumberPropVariant;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     * */
+    error?: boolean;
+    /** Message for the error state */
+    errorMessage?: string | number;
+    /**
+     * If true, the input will take up the full width of its container.
+     * @default false
+     * */
+    fullWidth?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * */
+    disabled?: boolean;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     * */
+    hiddenLabel?: boolean;
+    /** The helper text content. */
+    caption?: string | number;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     * */
+    required?: boolean;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        label?: FieldLabelProps;
+        input?: FieldInputProps;
+        caption?: FieldCaptionProps;
+        errorMessage?: FieldErrorProps;
+    };
+}, Omit<UseNumberFieldProps, 'inputElementType'>>;
+export type InputNumberRef = ComponentRef<'input'>;

package/dist/components/InputNumber/types.js

@@ -0,0 +1,4 @@
+const inputNumberPropVariant = ["filled", "transparent"];
+export {
+  inputNumberPropVariant
+};

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { LinkBaseProps } from './types';
+export declare const Link: import("@koobiq/react-core").PolyForwardComponent<"a", LinkBaseProps, ElementType>;
+export type LinkProps<As extends ElementType = 'a'> = ComponentPropsWithRef<typeof Link<As>>;

package/dist/components/Link/Link.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs } from "react/jsx-runtime";
+import { polymorphicForwardRef, useDOMRef, clsx } from "@koobiq/react-core";
+import { useLink } from "@koobiq/react-primitives";
+import s from "./Link.module.css.js";
+const Link = polymorphicForwardRef((props, ref) => {
+  const {
+    variant = "text-normal",
+    visitable = false,
+    pseudo = false,
+    as = "a",
+    startIcon,
+    endIcon,
+    children,
+    className,
+    style
+  } = props;
+  const Tag = as;
+  const domRef = useDOMRef(ref);
+  const elementType = as !== "a" && as !== "button" ? `${as}` : void 0;
+  const { linkProps, hovered, pressed, focusVisible } = useLink(
+    { ...props, elementType },
+    domRef
+  );
+  const hasIcon = Boolean(startIcon || endIcon);
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ...linkProps,
+      className: clsx(
+        s.base,
+        s[variant],
+        pseudo && s.pseudo,
+        hovered && s.hovered,
+        pressed && s.pressed,
+        hasIcon && s.hasIcon,
+        visitable && s.visitable,
+        focusVisible && s.focusVisible,
+        className
+      ),
+      style,
+      ref: domRef,
+      children: [
+        startIcon,
+        children,
+        endIcon
+      ]
+    }
+  );
+});
+Link.displayName = "Link";
+export {
+  Link
+};

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

@@ -0,0 +1,32 @@
+const base = "kbq-link-093ccd";
+const hovered = "kbq-link-hovered-1916bc";
+const pressed = "kbq-link-pressed-0b493d";
+const focusVisible = "kbq-link-focusVisible-a98307";
+const visitable = "kbq-link-visitable-c8175e";
+const pseudo = "kbq-link-pseudo-5f21eb";
+const hasIcon = "kbq-link-hasIcon-ea84d7";
+const inherit = "kbq-link-inherit-aa3736";
+const s = {
+  base,
+  hovered,
+  pressed,
+  focusVisible,
+  visitable,
+  pseudo,
+  hasIcon,
+  "text-normal": "kbq-link-text-normal-814a6c",
+  "text-big": "kbq-link-text-big-a56241",
+  "text-compact": "kbq-link-text-compact-e205e9",
+  inherit
+};
+export {
+  base,
+  s as default,
+  focusVisible,
+  hasIcon,
+  hovered,
+  inherit,
+  pressed,
+  pseudo,
+  visitable
+};

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

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

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

@@ -0,0 +1,25 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ButtonOptions } from '@koobiq/react-primitives';
+import type { TypographyPropVariant } from '../Typography';
+export type LinkPropVariant = Extract<TypographyPropVariant, 'text-compact' | 'text-normal' | 'text-big' | 'inherit'>;
+export type LinkBaseProps = {
+    /** The content of the component. */
+    children?: ReactNode;
+    /** The variant of the component. */
+    variant?: LinkPropVariant;
+    /** Icon placed before the children. */
+    startIcon?: ReactNode;
+    /** Icon placed after the children. */
+    endIcon?: ReactNode;
+    /** If `true`, the component is disabled. */
+    disabled?: boolean;
+    /** If `true`, displays :visited CSS-state. */
+    visitable?: boolean;
+    /** If `true`, displays the link as a pseudo-link. */
+    pseudo?: boolean;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    onClick?: ButtonOptions['onPress'];
+};

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

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

package/dist/components/Modal/Modal.js

@@ -0,0 +1,121 @@
+"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 "./Modal.module.css.js";
+import { Backdrop } from "../Backdrop/Backdrop.js";
+import { Dialog } from "../Dialog/Dialog.js";
+const Modal = forwardRef((props, ref) => {
+  const {
+    hideCloseButton = false,
+    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]),
+      ref: containerRef,
+      "data-size": size
+    },
+    other
+  );
+  const backdropProps = mergeProps(
+    { open: openState && !hideBackdrop },
+    underlayProps,
+    slotProps?.backdrop
+  );
+  const dialogProps = mergeProps(
+    {
+      onClose: close,
+      role: "dialog",
+      hideCloseButton,
+      children: resolvedChildren()
+    },
+    slotProps?.dialog
+  );
+  const modalProps = mergeProps(
+    modalCommonProps,
+    {
+      ref: modalRef,
+      className: s.modal
+    },
+    slotProps?.modal
+  );
+  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", { ...modalProps, children: /* @__PURE__ */ jsx(Dialog, { ...dialogProps }) })
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+});
+Modal.displayName = "Modal";
+export {
+  Modal
+};

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

@@ -0,0 +1,20 @@
+const base = "kbq-modal-4b03cd";
+const small = "kbq-modal-small-7273e9";
+const medium = "kbq-modal-medium-5db542";
+const large = "kbq-modal-large-534723";
+const modal = "kbq-modal-modal-3e5b95";
+const s = {
+  base,
+  small,
+  medium,
+  large,
+  modal
+};
+export {
+  base,
+  s as default,
+  large,
+  medium,
+  modal,
+  small
+};

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

@@ -0,0 +1,4 @@
+export * from './Modal';
+export * from './types';
+export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
+export { DialogHeader as ModalHeader, DialogContent as ModalContent, DialogFooter as ModalFooter, } from '../Dialog';

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

@@ -0,0 +1,68 @@
+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 modalPropSize: readonly ["small", "medium", "large"];
+export type ModalPropSize = (typeof modalPropSize)[number];
+export type ModalPropContent = ReactNode | ((props: {
+    close(): void;
+}) => ReactElement);
+export type ModalPropControl = (props: ButtonOptions) => ReactElement;
+export type ModalProps = {
+    /**
+     * Component width size.
+     * @default medium
+     * */
+    size?: ModalPropSize;
+    /** 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?: ModalPropContent;
+    /** The render function of the control for displaying the modal window. */
+    control?: ModalPropControl;
+    /**
+     * 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;
+        modal?: ComponentPropsWithRef<'div'>;
+    };
+};
+export type ModalRef = ComponentRef<'div'>;

package/dist/components/Modal/types.js

@@ -0,0 +1,4 @@
+const modalPropSize = ["small", "medium", "large"];
+export {
+  modalPropSize
+};

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

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