@kakadu/components 1.0.2 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components.css +1 -1
- package/build/footer.js +1 -1
- package/build/footer.mjs +2 -2
- package/build/icon.d.ts +25 -0
- package/build/wrapper.d.ts +11 -0
- package/build/wrapper.js +1 -0
- package/build/wrapper.mjs +23 -0
- package/index.d.ts +63 -60
- package/package.json +7 -2
- package/readme.md +34 -15
- package/build/build/aria-text.d.ts +0 -8
- package/build/build/atom.d.ts +0 -9
- package/build/build/bankid-logo.d.ts +0 -5
- package/build/build/box.d.ts +0 -6
- package/build/build/button-tooltip.d.ts +0 -5
- package/build/build/button.d.ts +0 -23
- package/build/build/card.d.ts +0 -11
- package/build/build/click-ripples.d.ts +0 -6
- package/build/build/datum.d.ts +0 -6
- package/build/build/dnb-logo.d.ts +0 -5
- package/build/build/dot.d.ts +0 -4
- package/build/build/flex.d.ts +0 -12
- package/build/build/footer.d.ts +0 -4
- package/build/build/gauge.d.ts +0 -6
- package/build/build/gjensidige-logo.d.ts +0 -5
- package/build/build/hooks/use-media-query.d.ts +0 -2
- package/build/build/hover-gradient.d.ts +0 -8
- package/build/build/icon-button.d.ts +0 -10
- package/build/build/icon.d.ts +0 -8
- package/build/build/icons/arrow-down.d.ts +0 -5
- package/build/build/icons/caret-down.d.ts +0 -5
- package/build/build/icons/caret-right.d.ts +0 -5
- package/build/build/icons/check.d.ts +0 -5
- package/build/build/icons/chevron-down.d.ts +0 -5
- package/build/build/icons/chevron-up.d.ts +0 -5
- package/build/build/icons/chrome-browser-logo.d.ts +0 -5
- package/build/build/icons/copy.d.ts +0 -5
- package/build/build/icons/edge-browser-logo.d.ts +0 -5
- package/build/build/icons/edit.d.ts +0 -5
- package/build/build/icons/exclamation-triangle.d.ts +0 -5
- package/build/build/icons/kakadu-guide-glyph.d.ts +0 -5
- package/build/build/icons/kakadu-guide.d.ts +0 -5
- package/build/build/icons/menu.d.ts +0 -5
- package/build/build/icons/plus.d.ts +0 -5
- package/build/build/icons/test.d.ts +0 -5
- package/build/build/icons/times.d.ts +0 -5
- package/build/build/jsx-runtime-BB_1_6y_.d.ts +0 -2
- package/build/build/kakadu-guide-icon.d.ts +0 -4
- package/build/build/kakadu-guide-logo.d.ts +0 -11
- package/build/build/kakadu-index-logo.d.ts +0 -5
- package/build/build/kakadu-logo.d.ts +0 -5
- package/build/build/modal.d.ts +0 -22
- package/build/build/moving-gradients.d.ts +0 -8
- package/build/build/moving-stars.d.ts +0 -11
- package/build/build/notice.d.ts +0 -10
- package/build/build/notification.d.ts +0 -15
- package/build/build/revealer.d.ts +0 -24
- package/build/build/separator.d.ts +0 -10
- package/build/build/skeleton.d.ts +0 -16
- package/build/build/sparebank1-logo.d.ts +0 -5
- package/build/build/spinner.d.ts +0 -11
- package/build/build/sto-logo.d.ts +0 -5
- package/build/build/storebrand-logo.d.ts +0 -5
- package/build/build/text-button.d.ts +0 -12
- package/build/build/text.d.ts +0 -30
- package/build/build/theme-setter.d.ts +0 -9
- package/build/build/theme.d.ts +0 -22
- package/build/build/utilities/copy-to-clipboard.d.ts +0 -2
- package/build/build/utilities/generate-random-id.d.ts +0 -2
- package/build/build/utilities/scale.d.ts +0 -11
- package/build/build/veil.d.ts +0 -4
package/readme.md
CHANGED
|
@@ -4,36 +4,55 @@
|
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
First, install the package via npm:
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
npm install @kakadu/components
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
Next, import the base stylesheet in your application’s entry point (for example `_app.
|
|
13
|
+
Next, import the base stylesheet and the `ThemeSetter` in your application’s entry point (for example `_app.tsx`):
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
|
-
import '
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
Finally, wrap your application with the `theme`, and render the `ThemeSetter`. You can start using components right away:
|
|
20
|
-
|
|
21
|
-
```tsx
|
|
22
|
-
import theme from '@kakadu/components/theme';
|
|
16
|
+
import React from 'react';
|
|
17
|
+
import {type AppProps} from 'next/app';
|
|
23
18
|
import ThemeSetter from '@kakadu/components/theme-setter';
|
|
24
|
-
import
|
|
19
|
+
import '@kakadu/components/components.css';
|
|
25
20
|
|
|
26
|
-
export default function
|
|
21
|
+
export default function App({Component, pageProps}: AppProps) {
|
|
27
22
|
return (
|
|
28
|
-
|
|
29
|
-
<Box>Hello!</Box>
|
|
30
|
-
{children}
|
|
23
|
+
<>
|
|
31
24
|
<ThemeSetter />
|
|
32
|
-
|
|
25
|
+
<Component {...pageProps} />
|
|
26
|
+
</>
|
|
33
27
|
);
|
|
34
28
|
}
|
|
35
29
|
```
|
|
36
30
|
|
|
31
|
+
Then, in your `_document.tsx` (or equivalent), import the `theme` class name and the `FontFamilyHeadLink`:
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import React from 'react';
|
|
35
|
+
import Document, {Html, Head, Main, NextScript} from 'next/document';
|
|
36
|
+
import {theme, FontFamilyHeadLink} from '@kakadu/components/theme';
|
|
37
|
+
|
|
38
|
+
export default class CustomDocument extends Document {
|
|
39
|
+
render() {
|
|
40
|
+
return (
|
|
41
|
+
<Html suppressHydrationWarning className={theme}>
|
|
42
|
+
<Head>
|
|
43
|
+
<FontFamilyHeadLink />
|
|
44
|
+
</Head>
|
|
45
|
+
|
|
46
|
+
<body>
|
|
47
|
+
<Main />
|
|
48
|
+
<NextScript />
|
|
49
|
+
</body>
|
|
50
|
+
</Html>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
37
56
|
## Development
|
|
38
57
|
|
|
39
58
|
### Storybook
|
package/build/build/atom.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export default o;
|
|
2
|
-
export { e as defaultAtomElementType };
|
|
3
|
-
declare function o({ as: t, reference: r, ...u }: {
|
|
4
|
-
[x: string]: any;
|
|
5
|
-
as: any;
|
|
6
|
-
reference: any;
|
|
7
|
-
}): l.DetailedReactHTMLElement<l.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
8
|
-
declare const e: "div";
|
|
9
|
-
import l = require("react");
|
package/build/build/box.d.ts
DELETED
package/build/build/button.d.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
export default O;
|
|
2
|
-
declare var k: any;
|
|
3
|
-
declare const S: "kakadu-components-1978976872";
|
|
4
|
-
declare const j: "kakadu-components-2244098950";
|
|
5
|
-
declare const _: "kakadu-components-3923184173";
|
|
6
|
-
declare const y: "kakadu-components-317965671";
|
|
7
|
-
declare function O({ type: s, variant: t, className: a, children: n, label: R, tooltip: c, iconLeft: r, iconRight: i, isLoading: u, hasMovingGradients: b, movingGradientsCount: m, hasMovingStars: f, movingStarsCount: d, ...E }: {
|
|
8
|
-
[x: string]: any;
|
|
9
|
-
type: any;
|
|
10
|
-
variant?: string | undefined;
|
|
11
|
-
className: any;
|
|
12
|
-
children: any;
|
|
13
|
-
label: any;
|
|
14
|
-
tooltip: any;
|
|
15
|
-
iconLeft: any;
|
|
16
|
-
iconRight: any;
|
|
17
|
-
isLoading: any;
|
|
18
|
-
hasMovingGradients?: boolean | undefined;
|
|
19
|
-
movingGradientsCount?: number | undefined;
|
|
20
|
-
hasMovingStars?: boolean | undefined;
|
|
21
|
-
movingStarsCount?: number | undefined;
|
|
22
|
-
}): any;
|
|
23
|
-
export { k as ButtonVariant, S as buttonDangerStyles, j as buttonSecondaryStyles, _ as buttonSuccessStyles, y as buttonWarningStyles };
|
package/build/build/card.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export default R;
|
|
2
|
-
declare function R({ icon: a, title: u, description: c, action: l, href: s, target: x, rel: d, ...m }: {
|
|
3
|
-
[x: string]: any;
|
|
4
|
-
icon: any;
|
|
5
|
-
title: any;
|
|
6
|
-
description: any;
|
|
7
|
-
action: any;
|
|
8
|
-
href: any;
|
|
9
|
-
target: any;
|
|
10
|
-
rel: any;
|
|
11
|
-
}): any;
|
package/build/build/datum.d.ts
DELETED
package/build/build/dot.d.ts
DELETED
package/build/build/flex.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export { a as FlexAlignment };
|
|
2
|
-
export default m;
|
|
3
|
-
declare var a: any;
|
|
4
|
-
declare function m({ as: o, direction: s, alignment: n, gap: e, wrap: u, className: c, ...k }: {
|
|
5
|
-
[x: string]: any;
|
|
6
|
-
as: any;
|
|
7
|
-
direction?: string | undefined;
|
|
8
|
-
alignment: any;
|
|
9
|
-
gap?: number | undefined;
|
|
10
|
-
wrap?: boolean | undefined;
|
|
11
|
-
className: any;
|
|
12
|
-
}): any;
|
package/build/build/footer.d.ts
DELETED
package/build/build/gauge.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export { m as IconButtonVariant };
|
|
2
|
-
export default R;
|
|
3
|
-
declare var m: any;
|
|
4
|
-
declare function R({ icon: e, variant: u, label: a, className: p, ...k }: {
|
|
5
|
-
[x: string]: any;
|
|
6
|
-
icon: any;
|
|
7
|
-
variant?: string | undefined;
|
|
8
|
-
label: any;
|
|
9
|
-
className: any;
|
|
10
|
-
}): any;
|
package/build/build/icon.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export default d;
|
|
2
|
-
declare function x({ fill: c, ...t }: {
|
|
3
|
-
[x: string]: any;
|
|
4
|
-
fill: any;
|
|
5
|
-
}): any;
|
|
6
|
-
declare var i: any;
|
|
7
|
-
declare function d({ variant: c, height: t }: {
|
|
8
|
-
variant?: string | undefined;
|
|
9
|
-
height?: number | undefined;
|
|
10
|
-
}): any;
|
|
11
|
-
export { x as KakaduGuideLogoSvg, i as KakaduGuideLogoVariant };
|
package/build/build/modal.d.ts
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
export default pt;
|
|
2
|
-
declare function pt({ root: r, maxWidth: e, className: t, isVisible: a, isFullWidth: u, shouldCloseOnOutsideClick: l, shouldCloseOnEscapePress: n, showCloseButton: p, onClose: y, children: E }: {
|
|
3
|
-
root: any;
|
|
4
|
-
maxWidth: any;
|
|
5
|
-
className: any;
|
|
6
|
-
isVisible: any;
|
|
7
|
-
isFullWidth?: boolean | undefined;
|
|
8
|
-
shouldCloseOnOutsideClick?: boolean | undefined;
|
|
9
|
-
shouldCloseOnEscapePress?: boolean | undefined;
|
|
10
|
-
showCloseButton?: boolean | undefined;
|
|
11
|
-
onClose: any;
|
|
12
|
-
children: any;
|
|
13
|
-
}): any;
|
|
14
|
-
declare function bt(r: any, e: any): {
|
|
15
|
-
isVisible: boolean;
|
|
16
|
-
show: () => Promise<any>;
|
|
17
|
-
modal: any;
|
|
18
|
-
};
|
|
19
|
-
declare function De(): {
|
|
20
|
-
isVisible: boolean;
|
|
21
|
-
};
|
|
22
|
-
export { bt as useModal, De as useModalContext };
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export default O;
|
|
2
|
-
declare function O({ className: S, colors: C, maximumGradientsCount: m, speed: b, opacity: X }: {
|
|
3
|
-
className: any;
|
|
4
|
-
colors?: string[] | undefined;
|
|
5
|
-
maximumGradientsCount?: number | undefined;
|
|
6
|
-
speed?: number | undefined;
|
|
7
|
-
opacity?: number | undefined;
|
|
8
|
-
}): any;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export default B;
|
|
2
|
-
declare function B({ color: y, opacity: R, className: W, minimumSize: A, maximumSize: S, maximumStarsCount: x, speed: C, hasMask: j }: {
|
|
3
|
-
color: any;
|
|
4
|
-
opacity: any;
|
|
5
|
-
className: any;
|
|
6
|
-
minimumSize?: number | undefined;
|
|
7
|
-
maximumSize?: number | undefined;
|
|
8
|
-
maximumStarsCount?: number | undefined;
|
|
9
|
-
speed?: number | undefined;
|
|
10
|
-
hasMask?: boolean | undefined;
|
|
11
|
-
}): any;
|
package/build/build/notice.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export default x;
|
|
2
|
-
declare function C({ children: n }: {
|
|
3
|
-
children: any;
|
|
4
|
-
}): any;
|
|
5
|
-
declare function x({ type: n, icon: d, index: c, className: u, children: f, onDismiss: o, ...i }: {
|
|
6
|
-
[x: string]: any;
|
|
7
|
-
type: any;
|
|
8
|
-
icon: any;
|
|
9
|
-
index: any;
|
|
10
|
-
className: any;
|
|
11
|
-
children: any;
|
|
12
|
-
onDismiss: any;
|
|
13
|
-
}): any;
|
|
14
|
-
declare function E(): () => never;
|
|
15
|
-
export { C as NotificationProvider, E as useCreateNotification };
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
export default q;
|
|
2
|
-
export { k as useRevealer };
|
|
3
|
-
declare function q({ delay: t, animationDelay: c, duration: n, threshold: l, distance: d, isMoving: r, isCentered: m, shouldReveal: f, children: v, className: a, ...o }: {
|
|
4
|
-
[x: string]: any;
|
|
5
|
-
delay: any;
|
|
6
|
-
animationDelay: any;
|
|
7
|
-
duration: any;
|
|
8
|
-
threshold: any;
|
|
9
|
-
distance: any;
|
|
10
|
-
isMoving: any;
|
|
11
|
-
isCentered: any;
|
|
12
|
-
shouldReveal: any;
|
|
13
|
-
children: any;
|
|
14
|
-
className: any;
|
|
15
|
-
}): any;
|
|
16
|
-
declare function k(t: any, c?: {}): {
|
|
17
|
-
isVisible: boolean;
|
|
18
|
-
style: {
|
|
19
|
-
"--distance": string;
|
|
20
|
-
"--duration": string;
|
|
21
|
-
"--animation-delay": string;
|
|
22
|
-
};
|
|
23
|
-
className: string;
|
|
24
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export { u as SkeletonInstance };
|
|
2
|
-
export default l;
|
|
3
|
-
declare function u({ label: s, width: t, height: r, className: i, children: n, isAnimated: o, ...c }: {
|
|
4
|
-
[x: string]: any;
|
|
5
|
-
label: any;
|
|
6
|
-
width: any;
|
|
7
|
-
height: any;
|
|
8
|
-
className: any;
|
|
9
|
-
children: any;
|
|
10
|
-
isAnimated?: boolean | undefined;
|
|
11
|
-
}): any;
|
|
12
|
-
declare function l({ label: s, lines: t, isAnimated: r }: {
|
|
13
|
-
label: any;
|
|
14
|
-
lines?: number | undefined;
|
|
15
|
-
isAnimated?: boolean | undefined;
|
|
16
|
-
}): any;
|
package/build/build/spinner.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export { x as RevealSpinner };
|
|
2
|
-
export default i;
|
|
3
|
-
declare function x({ isVisible: e, ...o }: {
|
|
4
|
-
[x: string]: any;
|
|
5
|
-
isVisible: any;
|
|
6
|
-
}): any;
|
|
7
|
-
declare function i({ size: e, strokeWidth: o, isAnimated: c }: {
|
|
8
|
-
size?: number | undefined;
|
|
9
|
-
strokeWidth?: number | undefined;
|
|
10
|
-
isAnimated?: boolean | undefined;
|
|
11
|
-
}): any;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export { u as TextButtonVariant };
|
|
2
|
-
export default f;
|
|
3
|
-
declare var u: any;
|
|
4
|
-
declare function f({ icon: t, variant: i, tooltip: n, className: l, children: s, label: x, ...c }: {
|
|
5
|
-
[x: string]: any;
|
|
6
|
-
icon: any;
|
|
7
|
-
variant?: string | undefined;
|
|
8
|
-
tooltip: any;
|
|
9
|
-
className: any;
|
|
10
|
-
children: any;
|
|
11
|
-
label: any;
|
|
12
|
-
}): any;
|
package/build/build/text.d.ts
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
export default i;
|
|
2
|
-
declare function d({ reference: e, as: t, className: s, ...x }: {
|
|
3
|
-
[x: string]: any;
|
|
4
|
-
reference: any;
|
|
5
|
-
as: any;
|
|
6
|
-
className: any;
|
|
7
|
-
}): any;
|
|
8
|
-
declare function k({ as: e, className: t, ...s }: {
|
|
9
|
-
[x: string]: any;
|
|
10
|
-
as: any;
|
|
11
|
-
className: any;
|
|
12
|
-
}): any;
|
|
13
|
-
declare function m({ as: e, className: t, ...s }: {
|
|
14
|
-
[x: string]: any;
|
|
15
|
-
as: any;
|
|
16
|
-
className: any;
|
|
17
|
-
}): any;
|
|
18
|
-
declare function p({ as: e, className: t, ...s }: {
|
|
19
|
-
[x: string]: any;
|
|
20
|
-
as: any;
|
|
21
|
-
className: any;
|
|
22
|
-
}): any;
|
|
23
|
-
declare function i({ as: e, className: t, ...s }: {
|
|
24
|
-
[x: string]: any;
|
|
25
|
-
as: any;
|
|
26
|
-
className: any;
|
|
27
|
-
}): any;
|
|
28
|
-
declare const r: string;
|
|
29
|
-
declare const u: "kakadu-components-1538322784";
|
|
30
|
-
export { d as Heading, k as Hero, m as Paragraph, p as Span, r as spanStyles, u as textShadowStyles };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export default E;
|
|
2
|
-
declare function E(): any;
|
|
3
|
-
declare function d(): string;
|
|
4
|
-
declare function y(e: any): void;
|
|
5
|
-
declare const o: string[];
|
|
6
|
-
declare function g(e: any): boolean;
|
|
7
|
-
declare function l(e: any): boolean;
|
|
8
|
-
declare function u(e: any): string;
|
|
9
|
-
export { d as getThemePreference, y as setThemePreference, o as themePreferences, g as useIsDarkMode, l as useIsLightMode, u as useTheme };
|
package/build/build/theme.d.ts
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
export default u;
|
|
2
|
-
declare function i(): any;
|
|
3
|
-
declare const m: "kakadu-components-216224454";
|
|
4
|
-
declare const l: "#0c0d12";
|
|
5
|
-
declare const u: "kakadu-components-2735574809";
|
|
6
|
-
declare const n: "kakadu-components-352310015";
|
|
7
|
-
declare namespace e {
|
|
8
|
-
let family: string;
|
|
9
|
-
let stylesheet: string;
|
|
10
|
-
let preconnect: ({
|
|
11
|
-
url: string;
|
|
12
|
-
crossorigin?: undefined;
|
|
13
|
-
} | {
|
|
14
|
-
url: string;
|
|
15
|
-
crossorigin: boolean;
|
|
16
|
-
})[];
|
|
17
|
-
}
|
|
18
|
-
declare const a: "#4ca486";
|
|
19
|
-
declare const c: "#f8fafc";
|
|
20
|
-
declare const p: string;
|
|
21
|
-
declare const f: "kakadu-components-4178476647";
|
|
22
|
-
export { i as FontFamilyHeadLink, m as buttonResetStyles, l as darkBackgroundColor, n as effectStyles, e as font, a as greenColor, c as lightBackgroundColor, p as nonInteractiveEffectStyles, f as overflowProtectionStyles };
|