@bolio-ui/core 1.0.4 → 1.0.6

package/esm/use-keyboard/use-keyboard.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export declare type KeyboardOptions = {
+    disableGlobalEvent?: boolean;
+    stopPropagation?: boolean;
+    preventDefault?: boolean;
+    capture?: boolean;
+    event?: 'keydown' | 'keypress' | 'keyup';
+};
+export declare type KeyboardResult = {
+    bindings: {
+        onKeyDown: React.KeyboardEventHandler;
+        onKeyDownCapture: React.KeyboardEventHandler;
+        onKeyPress: React.KeyboardEventHandler;
+        onKeyPressCapture: React.KeyboardEventHandler;
+        onKeyUp: React.KeyboardEventHandler;
+        onKeyUpCapture: React.KeyboardEventHandler;
+    };
+};
+export declare type UseKeyboardHandler = (event: React.KeyboardEvent | KeyboardEvent) => void;
+export declare type UseKeyboard = (handler: UseKeyboardHandler, keyBindings: Array<number> | number, options?: KeyboardOptions) => KeyboardResult;
+declare const useKeyboard: UseKeyboard;
+export default useKeyboard;

package/esm/use-media-query/index.d.ts

@@ -0,0 +1,3 @@
+import useMediaQuery from "./use-media-query";
+export type { ResponsiveBreakpoint, ResponsiveOptions } from "./use-media-query";
+export default useMediaQuery;

package/esm/use-media-query/use-media-query.d.ts

@@ -0,0 +1,12 @@
+declare const breakpoints: ["xs", "sm", "md", "lg", "xl", "mobile"];
+export declare type ResponsiveBreakpoint = typeof breakpoints[number];
+declare const matchType: ["up", "down", "default"];
+export declare type ResponsiveMatchType = typeof matchType[number];
+export declare type ResponsiveOptions = {
+    match?: ResponsiveMatchType;
+    ssrMatchMedia?: (query: string) => {
+        matches: boolean;
+    };
+};
+declare const useMediaQuery: (breakpoint: ResponsiveBreakpoint, options?: ResponsiveOptions) => boolean;
+export default useMediaQuery;

package/esm/use-modal/index.d.ts

@@ -0,0 +1,3 @@
+import useModal from "./use-modal";
+export type { ModalHooksBindings } from "./use-modal";
+export default useModal;

package/esm/use-modal/use-modal.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import { ModalProps } from "../Modal";
+export declare type ModalHooksBindings = Pick<ModalProps, 'visible' | 'onClose'>;
+declare const useModal: (initialVisible?: boolean) => {
+    visible: boolean;
+    setVisible: Dispatch<SetStateAction<boolean>>;
+    currentRef: MutableRefObject<boolean>;
+    bindings: ModalHooksBindings;
+};
+export default useModal;

package/esm/use-scale/index.d.ts

@@ -0,0 +1,6 @@
+import withScale from "./with-scale";
+import { useScale } from "./scale-context";
+export * from "./utils";
+export * from "./scale-context";
+export default useScale;
+export { withScale };

package/esm/use-scale/scale-context.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+export declare const ScalePropKeys: string[];
+export declare type ScaleProps = {
+    width?: string | number;
+    height?: string | number;
+    padding?: string | number;
+    margin?: string | number;
+    w?: string | number;
+    h?: string | number;
+    paddingLeft?: string | number;
+    paddingRight?: string | number;
+    paddingTop?: string | number;
+    paddingBottom?: string | number;
+    pl?: string | number;
+    pr?: string | number;
+    pt?: string | number;
+    pb?: string | number;
+    marginLeft?: string | number;
+    marginRight?: string | number;
+    marginTop?: string | number;
+    marginBottom?: string | number;
+    ml?: string | number;
+    mr?: string | number;
+    mt?: string | number;
+    mb?: string | number;
+    px?: string | number;
+    py?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    font?: string | number;
+    unit?: string;
+    scale?: number;
+};
+export declare type DynamicLayoutPipe = (scale1x: number, defaultValue?: string | number) => string;
+export declare type ScaleInputKeys = 'pl' | 'pr' | 'pt' | 'pb' | 'px' | 'py' | 'ml' | 'mr' | 'mt' | 'mb' | 'mx' | 'my' | 'width' | 'height' | 'font';
+export declare type DynamicScales = {
+    [key in ScaleInputKeys]: DynamicLayoutPipe;
+};
+export declare type GetScalePropsFunction = (key: keyof ScaleProps | Array<keyof ScaleProps>) => ScaleProps[keyof ScaleProps];
+export declare type GetAllScalePropsFunction = () => ScaleProps;
+export interface ScaleConfig {
+    SCALES: DynamicScales;
+    getScaleProps: GetScalePropsFunction;
+    getAllScaleProps: GetAllScalePropsFunction;
+    unit: string;
+}
+export declare const ScaleContext: React.Context<ScaleConfig>;
+export declare const useScale: () => ScaleConfig;

package/esm/use-scale/utils.d.ts

@@ -0,0 +1,3 @@
+import { GetAllScalePropsFunction, GetScalePropsFunction, ScaleProps } from "./scale-context";
+export declare const generateGetScaleProps: <P>(props: P & ScaleProps) => GetScalePropsFunction;
+export declare const generateGetAllScaleProps: <P>(props: P & ScaleProps) => GetAllScalePropsFunction;

package/esm/use-scale/utils.js

@@ -44,10 +44,9 @@ export var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
       for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
         var key = _step2.value;
         var value = props[key];
-
-        if (typeof value !== 'undefined') {
-          scaleProps[key] = value;
-        }
+        console.log('🚀 ~ file: utils.ts:32 ~ value:', value); // if (typeof value !== 'undefined') {
+        //   scaleProps[key as keyof ScaleProps] = value as any
+        // }
       }
     } catch (err) {
       _iterator2.e(err);

package/esm/use-scale/with-scale.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ScaleProps } from "./scale-context";
+declare const withScale: <T, P = {}>(Render: React.ComponentType<P & {
+    ref?: React.Ref<T> | undefined;
+}>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & ScaleProps> & React.RefAttributes<T>>;
+export default withScale;

package/esm/use-tabs/index.d.ts

@@ -0,0 +1,2 @@
+import useTabs from "./use-tabs";
+export default useTabs;

package/esm/use-tabs/use-tabs.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+declare const useTabs: (initialValue: string) => {
+    state: string;
+    setState: Dispatch<SetStateAction<string>>;
+    currentRef: MutableRefObject<string>;
+    bindings: {
+        value: string;
+        onChange: (val: string) => void;
+    };
+};
+export default useTabs;

package/esm/use-theme/index.d.ts

@@ -0,0 +1,2 @@
+import { useTheme } from "./theme-context";
+export default useTheme;

package/esm/use-theme/theme-context.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BolioUIThemes } from "../Themes/Presets";
+export declare const ThemeContext: React.Context<BolioUIThemes>;
+export declare const useTheme: () => BolioUIThemes;

package/esm/use-theme/theme-context.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Themes from '../themes';
+import Themes from '../Themes';
 var defaultTheme = Themes.getPresetStaticTheme();
 export var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
 export var useTheme = function useTheme() {

package/esm/use-toasts/helpers.d.ts

@@ -0,0 +1,16 @@
+import { Toast } from "./use-toast";
+import { BolioUIThemesPalette } from "../Themes";
+export declare const makeToastActions: (actions: Toast['actions'], cancelHandle: () => void) => JSX.Element[] | null;
+export declare const getColors: (palette: BolioUIThemesPalette, type?: "success" | "primary" | "secondary" | "error" | "warning" | "info" | "default" | undefined) => {
+    bgColor: string;
+    color: string;
+};
+declare const toastPlacement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
+export declare type ToastPlacement = typeof toastPlacement[number];
+export declare const isTopPlacement: (placement: ToastPlacement) => boolean;
+export declare const isLeftPlacement: (placement: ToastPlacement) => boolean;
+export declare const getTranslateByPlacement: (placement: ToastPlacement) => {
+    enter: string;
+    leave: string;
+};
+export {};

package/esm/use-toasts/helpers.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '../button';
+import Button from '../Button';
 import { tuple } from '../utils/prop-types';
 export var makeToastActions = function makeToastActions(actions, cancelHandle) {
   var handler = function handler(event, userHandler) {

package/esm/use-toasts/index.d.ts

@@ -0,0 +1,3 @@
+import useToasts from "./use-toast";
+export type { ToastAction, Toast, ToastTypes, ToastInput, ToastLayout } from "./use-toast";
+export default useToasts;

package/esm/use-toasts/toast-container.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ToastContainer: React.FC<React.PropsWithChildren<unknown>>;
+export default ToastContainer;

package/esm/use-toasts/toast-item.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Toast, ToastLayout } from "./use-toast";
+export interface ToastItemProps {
+    toast: Toast;
+    layout: Required<ToastLayout>;
+}
+declare const ToastItem: React.FC<ToastItemProps>;
+export default ToastItem;

package/esm/use-toasts/toast-item.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
-import CssTransition from '../shared/css-transition';
+import CssTransition from '../Shared/css-transition';
 import { makeToastActions, getColors, getTranslateByPlacement } from './helpers';
 var ToastItem = /*#__PURE__*/React.memo(function (_ref) {
   var toast = _ref.toast,

package/esm/use-toasts/use-toast.d.ts

@@ -0,0 +1,40 @@
+import React, { CSSProperties } from 'react';
+import type { NormalTypes } from "../utils/prop-types";
+import { ToastPlacement } from "./helpers";
+export interface ToastAction {
+    name: string;
+    handler: (event: React.MouseEvent<HTMLButtonElement>, cancel: () => void) => void;
+    passive?: boolean;
+}
+export declare type ToastTypes = NormalTypes;
+export declare type ToastLayout = {
+    padding?: CSSProperties['padding'];
+    margin?: CSSProperties['margin'];
+    width?: CSSProperties['width'];
+    maxWidth?: CSSProperties['maxWidth'];
+    maxHeight?: CSSProperties['maxHeight'];
+    placement?: ToastPlacement;
+};
+export interface ToastInput {
+    text: string | React.ReactNode;
+    type?: ToastTypes;
+    id?: string;
+    delay?: number;
+    actions?: Array<ToastAction>;
+}
+export declare type ToastInstance = {
+    visible: boolean;
+    cancel: () => void;
+    _timeout: null | number;
+    _internalIdent: string;
+};
+export declare type Toast = Required<ToastInput> & ToastInstance;
+export declare type ToastHooksResult = {
+    toasts: Array<Toast>;
+    setToast: (toast: ToastInput) => void;
+    removeAll: () => void;
+    findToastOneByID: (ident: string) => Toast | undefined;
+    removeToastOneByID: (ident: string) => void;
+};
+declare const useToasts: (layout?: ToastLayout | undefined) => ToastHooksResult;
+export default useToasts;

package/esm/utils/calculations.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Calculate the ratio of two numbers, maximum decimal length can be specified.
+ *
+ * (0, 100) => 0
+ * (50, 100) => 50
+ * (11.22, 100) => 11.22
+ * (11.22, 100, 4) => 11.2200
+ */
+export declare const getProportions: (value: number, max: number, maxFixed?: number) => number;
+export declare const useProportions: (value: number, max: number, maxFixed?: number) => number;

package/esm/utils/collections.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+export declare const getId: () => string;
+export declare const capitalize: (str: string | symbol | number | undefined | null) => string;
+export declare const hasChild: (children: ReactNode | undefined, child: React.ElementType) => boolean;
+export declare const pickChild: (children: ReactNode | undefined, targetChild: React.ElementType) => [ReactNode | undefined, ReactNode | undefined];
+export declare const pickChildByProps: (children: ReactNode | undefined, key: string, value: any) => [ReactNode | undefined, ReactNode | undefined];
+export declare const pickChildrenFirst: (children: ReactNode | undefined) => ReactNode | undefined;
+export declare const setChildrenProps: (children: ReactNode | undefined, props: Record<string, unknown>, targetComponents?: Array<React.ElementType>) => ReactNode | undefined;
+export declare const setChildrenIndex: (children: ReactNode | undefined, targetComponents?: Array<React.ElementType>) => ReactNode | undefined;
+export declare const getReactNode: (node?: React.ReactNode | (() => React.ReactNode)) => React.ReactNode;
+export declare const isChildElement: (parent: Element | null | undefined, child: Element | null | undefined) => boolean;
+export declare const isBolioUIElement: (el?: HTMLElement | undefined) => boolean;
+export declare const isBrowser: () => boolean;
+export declare const isMac: () => boolean;
+export declare const isCSSNumberValue: (value?: string | number | undefined) => boolean;

package/esm/utils/color.d.ts

@@ -0,0 +1,2 @@
+export declare const colorToRgbValues: (color: string) => number[];
+export declare const addColorAlpha: (color: string, alpha: number) => string;

package/esm/utils/layouts.d.ts

@@ -0,0 +1,20 @@
+import { MouseEvent, FocusEvent, MutableRefObject } from 'react';
+export declare const getElementOffset: (el?: HTMLElement | null | undefined) => {
+    top: number;
+    left: number;
+};
+export interface ReactiveDomReact {
+    top: number;
+    left: number;
+    right: number;
+    width: number;
+    height: number;
+    elementTop: number;
+}
+export declare const isUnplacedRect: (rect?: ReactiveDomReact | undefined) => boolean;
+export declare const getRefRect: (ref?: MutableRefObject<HTMLElement | null> | undefined, getContainer?: (() => HTMLElement | null) | undefined) => ReactiveDomReact;
+export declare const getEventRect: (event?: FocusEvent<HTMLElement> | MouseEvent<HTMLElement, globalThis.MouseEvent> | undefined, getContainer?: (() => HTMLElement | null) | undefined) => ReactiveDomReact;
+export declare const useRect: (initialState?: ReactiveDomReact | (() => ReactiveDomReact) | undefined) => {
+    rect: ReactiveDomReact;
+    setRect: (eventOrRef: MouseEvent<HTMLElement> | FocusEvent<HTMLElement> | MutableRefObject<HTMLElement | null>, getContainer?: (() => HTMLElement | null) | undefined) => void;
+};

package/esm/utils/prop-types.d.ts

@@ -0,0 +1,19 @@
+export declare const tuple: <T extends string[]>(...args: T) => T;
+export declare const tupleNumber: <T extends number[]>(...args: T) => T;
+declare const buttonTypes: ["default", "primary", "secondary", "info", "success", "warning", "error", "abort", "primary-light", "secondary-light", "info-light", "success-light", "warning-light", "error-light"];
+declare const normalTypes: ["default", "primary", "secondary", "success", "warning", "error", "info"];
+declare const snippetTypes: ["default", "primary", "secondary", "success", "warning", "error", "info", "dark", "lite"];
+declare const cardTypes: ["default", "primary", "secondary", "success", "warning", "error", "dark", "lite", "info"];
+declare const copyTypes: ["default", "silent", "prevent"];
+declare const triggerTypes: ["hover", "click"];
+declare const placement: ["top", "topStart", "topEnd", "left", "leftStart", "leftEnd", "bottom", "bottomStart", "bottomEnd", "right", "rightStart", "rightEnd"];
+declare const dividerAlign: ["start", "center", "end", "left", "right"];
+export declare type ButtonTypes = typeof buttonTypes[number];
+export declare type NormalTypes = typeof normalTypes[number];
+export declare type SnippetTypes = typeof snippetTypes[number];
+export declare type CardTypes = typeof cardTypes[number];
+export declare type CopyTypes = typeof copyTypes[number];
+export declare type TriggerTypes = typeof triggerTypes[number];
+export declare type Placement = typeof placement[number];
+export declare type DividerAlign = typeof dividerAlign[number];
+export {};

package/esm/utils/types.d.ts

@@ -0,0 +1,3 @@
+export declare type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Record<string, any> ? DeepPartial<T[P]> : T[P];
+};

package/esm/utils/use-body-scroll.d.ts

@@ -0,0 +1,2 @@
+import useBodyScroll from "../use-body-scroll";
+export default useBodyScroll;

package/esm/utils/use-bolio-ui-context.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ToastLayout, Toast } from "../use-toasts/use-toast";
+export declare const defaultToastLayout: Required<ToastLayout>;
+export declare type UpdateToastsFunction = (fn: (toasts: Array<Toast>) => Array<Toast>) => any;
+export declare type UpdateToastsLayoutFunction = (fn: (layout: Required<ToastLayout>) => Required<ToastLayout>) => any;
+export declare type UpdateToastsIDFunction = (fn: () => string | null) => any;
+export interface BolioUIContextParams {
+    toasts: Array<Toast>;
+    updateToasts: UpdateToastsFunction;
+    toastLayout: Required<ToastLayout>;
+    updateToastLayout: UpdateToastsLayoutFunction;
+    lastUpdateToastId: string | null;
+    updateLastToastId: UpdateToastsIDFunction;
+}
+export declare const BolioUIContent: React.Context<BolioUIContextParams>;
+export declare const useBolioUIContext: () => BolioUIContextParams;

package/esm/utils/use-click-anywhere.d.ts

@@ -0,0 +1,2 @@
+declare const useClickAnyWhere: (handler: (event: Event) => void) => void;
+export default useClickAnyWhere;

package/esm/utils/use-click-away.d.ts

@@ -0,0 +1,2 @@
+import { default as useClickAway } from "../use-click-away";
+export default useClickAway;

package/esm/utils/use-clipboard.d.ts

@@ -0,0 +1,2 @@
+import useClipboard from "../use-clipboard";
+export default useClipboard;

package/esm/utils/use-current-state.d.ts

@@ -0,0 +1,2 @@
+import useCurrentState from "../use-current-state";
+export default useCurrentState;

package/esm/utils/use-dom-observer.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const useDOMObserver: (ref: MutableRefObject<HTMLElement | null> | undefined, callback?: MutationCallback) => void;
+export default useDOMObserver;

package/esm/utils/use-drag.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+export declare type DraggingEvent = {
+    startX: number;
+    currentX: number;
+};
+export declare type DraggingHandler = (event: DraggingEvent) => void;
+declare const useDrag: (elementRef: RefObject<HTMLElement> | null, draggingHandler?: DraggingHandler, dragStartHandler?: DraggingHandler, dragEndHandler?: DraggingHandler) => void;
+export default useDrag;

package/esm/utils/use-portal.d.ts

@@ -0,0 +1,2 @@
+declare const usePortal: (selectId?: string, getContainer?: (() => HTMLElement | null) | undefined) => HTMLElement | null;
+export default usePortal;

package/esm/utils/use-previous.d.ts

@@ -0,0 +1,2 @@
+declare const usePrevious: <T>(state: T) => T | null | undefined;
+export default usePrevious;

package/esm/utils/use-real-shape.d.ts

@@ -0,0 +1,9 @@
+import { MutableRefObject } from 'react';
+export declare type ShapeType = {
+    width: number;
+    height: number;
+};
+export declare const getRealShape: (el: HTMLElement | null) => ShapeType;
+export declare type ShapeResult = [ShapeType, () => void];
+declare const useRealShape: <T extends HTMLElement>(ref: MutableRefObject<T | null>) => ShapeResult;
+export default useRealShape;

package/esm/utils/use-resize.d.ts

@@ -0,0 +1,2 @@
+declare const useResize: (callback: () => unknown, immediatelyInvoke?: boolean) => void;
+export default useResize;

package/esm/utils/use-ssr.d.ts

@@ -0,0 +1,6 @@
+export declare type SSRState = {
+    isBrowser: boolean;
+    isServer: boolean;
+};
+declare const useSSR: () => SSRState;
+export default useSSR;

package/esm/utils/use-warning.d.ts

@@ -0,0 +1,2 @@
+declare const useWarning: (message: string, component?: string | undefined) => void;
+export default useWarning;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolio-ui/core",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "license": "MIT",
   "description": "Amazing, modern and creative tools for React UI. 🥷🏼",
   "homepage": "https://bolio-ui.com/",
@@ -51,7 +51,8 @@
     "build:babel": "babel --no-babelrc --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" ./core --out-dir ./esm --ignore \"**/__tests__/**/*,**/*.d.ts\"",
     "build:after": "node scripts/move-built-in.js",
     "build:webpack": "webpack --config scripts/webpack.config.js",
-    "build:package": "yarn build:clear && yarn build:rollup && yarn build:babel && yarn build:after",
+    "build:types": "ttsc -p ./scripts & ttsc -p ./scripts --outDir ./esm",
+    "build:package": "yarn build:clear && yarn build:rollup && yarn build:babel && yarn build:types && yarn build:after",
     "clear-all": "rm -rf .next _static node_modules",
     "re-start": "rm -rf .next _static node_modules && yarn install && yarn dev",
     "re-build": "rm -rf .next _static node_modules && yarn install && yarn build",
@@ -73,7 +74,6 @@
     "jest-styled-components": "^7.0.5",
     "kbar": "0.1.0-beta.6",
     "next": "12.3.1",
-    "next-pwa": "^5.2.24",
     "next-seo": "^5.5.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^18.2.0",