@sk-web-gui/core 3.5.0 → 3.7.0

package/dist/types/tooltip/stories/tooltip.stories.d.ts

@@ -0,0 +1,9 @@
+import { TooltipProps } from '../src';
+import React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, TooltipProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;
+export declare const Template: {
+    (args: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const Example: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/user-menu/src/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { UserMenu, MenuItemGroup, UserMenuProps } from './user-menu';
+export { UserMenu };
+export type { UserMenuProps, MenuItemGroup };
+declare const _default: {
+    UserMenu: import("react").ForwardRefExoticComponent<Omit<UserMenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;

package/dist/types/user-menu/src/user-menu.d.ts

@@ -0,0 +1,32 @@
+import { Avatar } from '@sk-web-gui/avatar';
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+export interface MenuItemGroup {
+    label: string;
+    elements: {
+        label: string;
+        element: () => JSX.Element;
+    }[];
+}
+export interface UserMenuProps extends DefaultProps, React.ComponentPropsWithRef<'div'> {
+    menuTitle?: string;
+    menuSubTitle?: string;
+    initials?: string;
+    image?: string;
+    imageAlt?: string;
+    placeholderImage?: string;
+    imageElem?: React.ReactElement;
+    menuGroups: MenuItemGroup[];
+    /**
+     * Size of avatar button
+     * @default lg
+     */
+    buttonSize?: React.ComponentProps<typeof Avatar>['size'];
+    /**
+     * If avatar button should be rounded
+     * @default true
+     */
+    buttonRounded?: React.ComponentProps<typeof Avatar>['rounded'];
+}
+export declare const UserMenu: React.ForwardRefExoticComponent<Omit<UserMenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default UserMenu;

package/dist/types/user-menu/stories/user-menu.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UserMenuProps } from '@sk-web-gui/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, Omit<UserMenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export declare const Template: {
+    (args: UserMenuProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

package/dist/types/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src';
+export type * from './src';

package/dist/types/utils/src/assertion.d.ts

@@ -0,0 +1,6 @@
+import { Dict } from './types';
+export declare function isArray<T>(value: any): value is Array<T>;
+export declare function isObject(value: any): value is Dict;
+export declare const __DEV__: boolean;
+/** @deprecated This should not be used, as it's not reliable */
+export declare const __REACT_NAME__: 'displayName' | 'name';

package/dist/types/utils/src/children.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Gets only the valid children of a component,
+ * and ignores any nullish or falsy child.
+ *
+ * @param children the children
+ */
+export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

package/dist/types/utils/src/color.d.ts

@@ -0,0 +1,10 @@
+import type { Color } from 'color-string';
+export declare function hsl2rgb(h: number, s: number, l: number): [number, number, number];
+export declare function hwb2rgb(h: number, w: number, b: number): [number, number, number];
+export declare function toRGBA(color: string): Color | undefined;
+export declare function toRGB(color: string): number[] | undefined;
+export declare function toColor(colorStr: string): {
+    color: string;
+    opacity: string;
+};
+export declare const rgbStringToHex: (rgbString: string) => string;

package/dist/types/utils/src/index.d.ts

@@ -0,0 +1,20 @@
+import cx from 'clsx';
+export * from './types';
+export type * from './types';
+export * from './color';
+export type * from './color';
+export * from './assertion';
+export type * from './assertion';
+export * from './walk-object';
+export type * from './walk-object';
+export * from './object';
+export type * from './object';
+export * from './children';
+export type * from './children';
+export * from './refs';
+export type * from './refs';
+export * from './slug';
+export type * from './slug';
+export * from './use-on-element-outside';
+export type * from './use-on-element-outside';
+export { cx };

package/dist/types/utils/src/object.d.ts

@@ -0,0 +1,6 @@
+import type { Dict } from './types';
+export declare function omit<T extends Dict, K extends keyof T>(object: T, keys: K[]): Omit<T, K>;
+export declare function pick<T extends Dict, K extends keyof T>(object: T, keys: K[]): { [P in K]: T[P]; };
+export declare function deepmerge<T1, T2>(target: Partial<T1> & any, source: Partial<T2> & any, options?: {
+    clone: boolean;
+}): any;

package/dist/types/utils/src/refs.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
+export declare function setRef<T = any>(ref: ReactRef<T> | undefined, value: T): void;
+export declare function useForkRef<T = any>(refA: ReactRef<T> | undefined, refB: ReactRef<T> | undefined): ((refValue: T) => void) | null;
+export {};

package/dist/types/utils/src/slug.d.ts

@@ -0,0 +1 @@
+export declare const toSlug: (str: string) => string;

package/dist/types/utils/src/types.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+export type Dict<T = any> = Record<string, T>;
+export type CSSMap = Dict<{
+    value: string;
+    var: string;
+    varRef: string;
+}>;
+export type WithCSSVar<T> = T & {
+    __cssVars: Dict;
+    __cssMap: CSSMap;
+};
+export type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
+};
+export interface DefaultProps {
+    className?: string;
+}
+export type PropsOf<C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithoutRef<C>>;
+type AsProp<C extends React.ElementType> = {
+    /**
+     * An override of the default HTML tag.
+     * Can also be another React component.
+     */
+    as?: C;
+};
+/**
+ * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
+ * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
+ * set of props.
+ */
+export type ExtendableProps<ExtendedProps = object, OverrideProps = object> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;
+/**
+ * Allows for inheriting the props from the specified element type so that
+ * props like children, className & style work, as well as element-specific
+ * attributes like aria roles. The component (`C`) must be passed in.
+ */
+export type InheritableElementProps<C extends React.ElementType, Props = object> = ExtendableProps<PropsOf<C>, Props>;
+/**
+ * A more sophisticated version of `InheritableElementProps` where
+ * the passed in `as` prop will determine which props can be included
+ */
+export type PolymorphicComponentProps<C extends React.ElementType, Props = object> = InheritableElementProps<C, Props & AsProp<C>>;
+/** * Utility type to extract the `ref` prop from a polymorphic component */
+export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+/** * A wrapper of `PolymorphicComponentProps` that also includes the `ref` * prop for the polymorphic component */
+export type PolymorphicComponentPropsWithRef<C extends React.ElementType, Props = object> = PolymorphicComponentProps<C, Props> & {
+    ref?: PolymorphicRef<C>;
+};
+/** Custom onChange event, used to return a simulated change from component to e.g. react-hook-form */
+export interface CustomOnChangeEvent<TValue = string | string[], TElement = HTMLInputElement> extends Omit<React.ChangeEvent<TElement>, 'target'> {
+    target: {
+        value: TValue;
+        name: string;
+    };
+}
+export {};

package/dist/types/utils/src/use-on-element-outside.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface UseOnElementOutsideOptions {
+    /**
+     * Extra space added to width and height of the reference element.
+     * If added, the callback will return true this amount of pixles
+     * before it is actually outside of the window.
+     * @default 0
+     */
+    padding?: number;
+    /**
+     * Adds an eventlistener to the window that checks the values on scroll.
+     * @default true
+     */
+    updateOnScroll?: boolean;
+    /**
+     * Adds an eventlistener to the window that checks the values on resize.
+     * @default true
+     */
+    updateOnResize?: boolean;
+    /**
+     * Time to delay scroll and resize values in ms.
+     * @default 50
+     */
+    delay?: number;
+}
+type Callback = (callbackProperties: {
+    /** Returns true if any part of the element is outside any part of the window */
+    isOutside: boolean;
+    /** Returns true if any part of the element is outside the top of the window */
+    isOutsideTop: boolean;
+    /** Returns true if any part of the element is outside the bottom of the window */
+    isOutsideBottom: boolean;
+    /** Returns true if any part of the element is outside the left of the window */
+    isOutsideLeft: boolean;
+    /** Returns true if any part of the element is outside the right of the window */
+    isOutsideRight: boolean;
+}) => void;
+export declare const useOnElementOutside: (ref: React.RefObject<HTMLElement>, callback: Callback, dependencies: React.DependencyList, options?: UseOnElementOutsideOptions) => void;
+export {};

package/dist/types/utils/src/walk-object.d.ts

@@ -0,0 +1,5 @@
+export type WalkObjectPredicate<Leaf = unknown> = (value: unknown, path: string[]) => Leaf;
+export type MappedLeavesObject<Obj, LeafType> = {
+    [Prop in keyof Obj]: Obj[Prop] extends Array<any> ? MappedLeavesObject<Obj[Prop][number], LeafType>[] : Obj[Prop] extends object ? MappedLeavesObject<Obj[Prop], LeafType> : LeafType;
+};
+export declare function walkObject<Target, LeafType>(target: Target, predicate: WalkObjectPredicate<LeafType>): MappedLeavesObject<Target, ReturnType<WalkObjectPredicate<LeafType>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -25,23 +25,18 @@
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
     "build:types": "tsc -p ./tsconfig.production.json --emitDeclarationOnly --declaration --declarationDir dist/types"
   },
-  "peerDependencies": {
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "tailwindcss": "^3.4.0"
-  },
   "devDependencies": {
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
     "autoprefixer": "^10.4.19",
     "clean-css": "^5.3.3",
     "postcss": "^8.4.38",
-    "postcss-import": "^16.1.0",
-    "tailwindcss": "^3.4.3"
+    "postcss-import": "^16.1.0"
   },
   "dependencies": {
-    "@sk-web-gui/theme": "2.3.0",
-    "mini-svg-data-uri": "^1.4.4"
+    "@sk-web-gui/theme": "2.3.1",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.7",
+    "mini-svg-data-uri": "^1.4.4",
+    "tailwindcss": "^3.4.0"
   },
-  "gitHead": "70fb6d46542ebf47d19c64d6c1bc860628d0185a"
+  "gitHead": "01e472001f032907d14364742abf3c66e571b15f"
 }