@optigrit/optigrit-ui 0.0.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/bin/cli.js +99 -0
- package/dist/Input-CL3wQvR_.d.ts +40 -0
- package/dist/ThemeProvider-D_1vZWeu.d.ts +17 -0
- package/dist/chunk-2LJSVQ6B.js +465 -0
- package/dist/chunk-KBOYMK4Y.js +76 -0
- package/dist/chunk-MCQS3QNN.js +8 -0
- package/dist/chunk-U65NGM6F.js +48 -0
- package/dist/components/index.d.ts +69 -0
- package/dist/components/index.js +575 -0
- package/dist/core/index.d.ts +41 -0
- package/dist/core/index.js +14 -0
- package/dist/hooks/index.d.ts +31 -0
- package/dist/hooks/index.js +12 -0
- package/dist/theme/index.d.ts +7 -0
- package/dist/theme/index.js +12 -0
- package/index.css +131 -0
- package/package.json +91 -0
- package/tailwind.preset.js +87 -0
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { P as PopoverProps } from '../Input-CL3wQvR_.js';
|
|
3
|
+
export { I as Input, a as InputProps } from '../Input-CL3wQvR_.js';
|
|
4
|
+
import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
|
|
5
|
+
|
|
6
|
+
declare function Popover(props: PopoverProps): react_jsx_runtime.JSX.Element;
|
|
7
|
+
|
|
8
|
+
type AnimationStyles = {
|
|
9
|
+
children: {
|
|
10
|
+
from: CSSProperties;
|
|
11
|
+
active: CSSProperties;
|
|
12
|
+
to?: CSSProperties;
|
|
13
|
+
};
|
|
14
|
+
otherwise?: {
|
|
15
|
+
from: CSSProperties;
|
|
16
|
+
active: CSSProperties;
|
|
17
|
+
to?: CSSProperties;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
type AnimationsType = 'fade' | 'slide';
|
|
21
|
+
type ShowWhenProps = {
|
|
22
|
+
when: boolean;
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
otherwise?: ReactNode;
|
|
25
|
+
removeOnHide?: boolean;
|
|
26
|
+
animationDuration?: number;
|
|
27
|
+
animationType?: AnimationsType;
|
|
28
|
+
animationStyle?: AnimationStyles;
|
|
29
|
+
containerProps?: HTMLAttributes<HTMLDivElement>;
|
|
30
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
31
|
+
|
|
32
|
+
declare function ShowWithAnimation(props: ShowWhenProps): react_jsx_runtime.JSX.Element | null;
|
|
33
|
+
|
|
34
|
+
type ShowProps = {
|
|
35
|
+
when: boolean;
|
|
36
|
+
children: ReactNode;
|
|
37
|
+
otherwise?: ReactNode;
|
|
38
|
+
};
|
|
39
|
+
declare function Show({ when, children, otherwise }: ShowProps): ReactNode;
|
|
40
|
+
|
|
41
|
+
export { Popover, PopoverProps, Show, type ShowProps, type ShowWhenProps, ShowWithAnimation };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export { u as useTheme } from '../ThemeProvider-D_1vZWeu.js';
|
|
2
|
+
import 'react/jsx-runtime';
|
|
3
|
+
import 'react';
|
|
4
|
+
|
|
5
|
+
type ShortcutOptions = {
|
|
6
|
+
ctrl?: boolean;
|
|
7
|
+
shift?: boolean;
|
|
8
|
+
alt?: boolean;
|
|
9
|
+
meta?: boolean;
|
|
10
|
+
preventDefault?: boolean;
|
|
11
|
+
customKeyCheck?: (event: KeyboardEvent) => boolean;
|
|
12
|
+
};
|
|
13
|
+
type Shortcut = {
|
|
14
|
+
key: string;
|
|
15
|
+
callback: (event: KeyboardEvent) => void;
|
|
16
|
+
options?: ShortcutOptions;
|
|
17
|
+
};
|
|
18
|
+
declare function useKeyboardShortcuts(shortcuts: Shortcut[]): void;
|
|
19
|
+
|
|
20
|
+
type UseTabNavigationOptions = {
|
|
21
|
+
defaultTab?: string;
|
|
22
|
+
urlKey?: string;
|
|
23
|
+
replaceTab?: boolean;
|
|
24
|
+
tabs?: string[];
|
|
25
|
+
};
|
|
26
|
+
declare function useTabNavigation(options?: UseTabNavigationOptions): {
|
|
27
|
+
tab: string;
|
|
28
|
+
setTab: (newTab: string, replace?: boolean) => void;
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export { type UseTabNavigationOptions, useKeyboardShortcuts, useTabNavigation };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { T as Theme, a as ThemeProvider, b as ThemeProviderProps, c as ThemeProviderState, u as useTheme } from '../ThemeProvider-D_1vZWeu.js';
|
|
2
|
+
import 'react/jsx-runtime';
|
|
3
|
+
import 'react';
|
|
4
|
+
|
|
5
|
+
declare function colorMix(primaryColor?: string, colorRatio?: number, secondaryColor?: string, secondaryColorRatio?: number): string;
|
|
6
|
+
|
|
7
|
+
export { colorMix };
|
package/index.css
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
@tailwind base;
|
|
2
|
+
@tailwind components;
|
|
3
|
+
@tailwind utilities;
|
|
4
|
+
|
|
5
|
+
@layer base {
|
|
6
|
+
:root {
|
|
7
|
+
--primary-main: #2563eb;
|
|
8
|
+
--primary-light: #60a5fa;
|
|
9
|
+
--primary-dark: #1d4ed8;
|
|
10
|
+
--primary-contrast: #ffffff;
|
|
11
|
+
|
|
12
|
+
--secondary-main: #64748b;
|
|
13
|
+
--secondary-light: #94a3b8;
|
|
14
|
+
--secondary-dark: #475569;
|
|
15
|
+
--secondary-contrast: #ffffff;
|
|
16
|
+
|
|
17
|
+
--grey-50: #f9fafb;
|
|
18
|
+
--grey-100: #f3f4f6;
|
|
19
|
+
--grey-200: #e5e7eb;
|
|
20
|
+
--grey-300: #d1d5db;
|
|
21
|
+
--grey-400: #9ca3af;
|
|
22
|
+
--grey-500: #6b7280;
|
|
23
|
+
--grey-600: #4b5563;
|
|
24
|
+
--grey-700: #374151;
|
|
25
|
+
--grey-800: #1f2937;
|
|
26
|
+
--grey-900: #111827;
|
|
27
|
+
--grey-A100: #f5f5f5;
|
|
28
|
+
--grey-A200: #eeeeee;
|
|
29
|
+
--grey-A400: #bdbdbd;
|
|
30
|
+
--grey-A700: #616161;
|
|
31
|
+
|
|
32
|
+
--error-main: #ef4444;
|
|
33
|
+
--error-light: #fef2f2;
|
|
34
|
+
--error-dark: #dc2626;
|
|
35
|
+
--error-contrast: #ffffff;
|
|
36
|
+
|
|
37
|
+
--warning-main: #f59e0b;
|
|
38
|
+
--warning-light: #fbbf24;
|
|
39
|
+
--warning-dark: #d97706;
|
|
40
|
+
--warning-contrast: #ffffff;
|
|
41
|
+
|
|
42
|
+
--info-main: #3b82f6;
|
|
43
|
+
--info-light: #60a5fa;
|
|
44
|
+
--info-dark: #2563eb;
|
|
45
|
+
--info-contrast: #ffffff;
|
|
46
|
+
|
|
47
|
+
--success-main: #10b981;
|
|
48
|
+
--success-light: #34d399;
|
|
49
|
+
--success-dark: #059669;
|
|
50
|
+
--success-contrast: #ffffff;
|
|
51
|
+
|
|
52
|
+
--background-default: #f5f5f5;
|
|
53
|
+
--background-paper: #ffffff;
|
|
54
|
+
|
|
55
|
+
--text-primary: #0f172a;
|
|
56
|
+
--text-secondary: #475569;
|
|
57
|
+
--text-disabled: #94a3b8;
|
|
58
|
+
|
|
59
|
+
--divider: #e5e7eb;
|
|
60
|
+
|
|
61
|
+
--action-active: rgba(0, 0, 0, 0.54);
|
|
62
|
+
--action-hover: rgba(0, 0, 0, 0.04);
|
|
63
|
+
--action-selected: rgba(0, 0, 0, 0.08);
|
|
64
|
+
--action-disabled: rgba(0, 0, 0, 0.26);
|
|
65
|
+
--action-disabled-bg: rgba(0, 0, 0, 0.12);
|
|
66
|
+
--action-focus: #93c5fd;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.dark {
|
|
70
|
+
--primary-main: #60a5fa;
|
|
71
|
+
--primary-light: #93c5fd;
|
|
72
|
+
--primary-dark: #3b82f6;
|
|
73
|
+
--primary-contrast: #0f172a;
|
|
74
|
+
|
|
75
|
+
--secondary-main: #94a3b8;
|
|
76
|
+
--secondary-light: #cbd5e1;
|
|
77
|
+
--secondary-dark: #64748b;
|
|
78
|
+
--secondary-contrast: #0f172a;
|
|
79
|
+
|
|
80
|
+
--grey-50: #1f2937;
|
|
81
|
+
--grey-100: #374151;
|
|
82
|
+
--grey-200: #4b5563;
|
|
83
|
+
--grey-300: #6b7280;
|
|
84
|
+
--grey-400: #9ca3af;
|
|
85
|
+
--grey-500: #d1d5db;
|
|
86
|
+
--grey-600: #e5e7eb;
|
|
87
|
+
--grey-700: #f3f4f6;
|
|
88
|
+
--grey-800: #f9fafb;
|
|
89
|
+
--grey-900: #ffffff;
|
|
90
|
+
--grey-A100: #374151;
|
|
91
|
+
--grey-A200: #4b5563;
|
|
92
|
+
--grey-A400: #9ca3af;
|
|
93
|
+
--grey-A700: #d1d5db;
|
|
94
|
+
|
|
95
|
+
--error-main: #f87171;
|
|
96
|
+
--error-light: #fef2f2;
|
|
97
|
+
--error-dark: #ef4444;
|
|
98
|
+
--error-contrast: #0f172a;
|
|
99
|
+
|
|
100
|
+
--warning-main: #fbbf24;
|
|
101
|
+
--warning-light: #fcd34d;
|
|
102
|
+
--warning-dark: #f59e0b;
|
|
103
|
+
--warning-contrast: #0f172a;
|
|
104
|
+
|
|
105
|
+
--info-main: #60a5fa;
|
|
106
|
+
--info-light: #93c5fd;
|
|
107
|
+
--info-dark: #3b82f6;
|
|
108
|
+
--info-contrast: #0f172a;
|
|
109
|
+
|
|
110
|
+
--success-main: #34d399;
|
|
111
|
+
--success-light: #6ee7b7;
|
|
112
|
+
--success-dark: #10b981;
|
|
113
|
+
--success-contrast: #0f172a;
|
|
114
|
+
|
|
115
|
+
--background-default: #0f172a;
|
|
116
|
+
--background-paper: #1e293b;
|
|
117
|
+
|
|
118
|
+
--text-primary: #f8fafc;
|
|
119
|
+
--text-secondary: #94a3b8;
|
|
120
|
+
--text-disabled: #64748b;
|
|
121
|
+
|
|
122
|
+
--divider: #334155;
|
|
123
|
+
|
|
124
|
+
--action-active: rgba(255, 255, 255, 0.56);
|
|
125
|
+
--action-hover: rgba(255, 255, 255, 0.08);
|
|
126
|
+
--action-selected: rgba(255, 255, 255, 0.16);
|
|
127
|
+
--action-disabled: rgba(255, 255, 255, 0.3);
|
|
128
|
+
--action-disabled-bg: rgba(255, 255, 255, 0.12);
|
|
129
|
+
--action-focus: #60a5fa;
|
|
130
|
+
}
|
|
131
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@optigrit/optigrit-ui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "UI components library for optigrit apps",
|
|
5
|
+
"license": "ISC",
|
|
6
|
+
"author": "",
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"access": "public"
|
|
9
|
+
},
|
|
10
|
+
"type": "module",
|
|
11
|
+
"main": "./dist/components/index.js",
|
|
12
|
+
"types": "./dist/components/index.d.ts",
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"types": "./dist/components/index.d.ts",
|
|
16
|
+
"import": "./dist/components/index.js",
|
|
17
|
+
"require": "./dist/components/index.js",
|
|
18
|
+
"default": "./dist/components/index.js"
|
|
19
|
+
},
|
|
20
|
+
"./core": {
|
|
21
|
+
"types": "./dist/core/index.d.ts",
|
|
22
|
+
"import": "./dist/core/index.js",
|
|
23
|
+
"require": "./dist/core/index.js",
|
|
24
|
+
"default": "./dist/core/index.js"
|
|
25
|
+
},
|
|
26
|
+
"./theme": {
|
|
27
|
+
"types": "./dist/theme/index.d.ts",
|
|
28
|
+
"import": "./dist/theme/index.js",
|
|
29
|
+
"require": "./dist/theme/index.js",
|
|
30
|
+
"default": "./dist/theme/index.js"
|
|
31
|
+
},
|
|
32
|
+
"./hooks": {
|
|
33
|
+
"types": "./dist/hooks/index.d.ts",
|
|
34
|
+
"import": "./dist/hooks/index.js",
|
|
35
|
+
"require": "./dist/hooks/index.js",
|
|
36
|
+
"default": "./dist/hooks/index.js"
|
|
37
|
+
},
|
|
38
|
+
"./preset": "./tailwind.preset.js",
|
|
39
|
+
"./index.css": "./index.css"
|
|
40
|
+
},
|
|
41
|
+
"files": [
|
|
42
|
+
"dist",
|
|
43
|
+
"bin",
|
|
44
|
+
"tailwind.preset.js",
|
|
45
|
+
"index.css"
|
|
46
|
+
],
|
|
47
|
+
"bin": {
|
|
48
|
+
"optigrit-ui": "./bin/cli.js"
|
|
49
|
+
},
|
|
50
|
+
"scripts": {
|
|
51
|
+
"build": "tsup",
|
|
52
|
+
"prepublishOnly": "npm run build",
|
|
53
|
+
"release": "npm publish",
|
|
54
|
+
"lint": "tsc",
|
|
55
|
+
"storybook": "storybook dev -p 6006",
|
|
56
|
+
"build-storybook": "storybook build",
|
|
57
|
+
"dev:yalc": "chokidar \"src/**/*\" -c \"npm run build && yalc push\" --polling"
|
|
58
|
+
},
|
|
59
|
+
"devDependencies": {
|
|
60
|
+
"@chromatic-com/storybook": "^5.1.2",
|
|
61
|
+
"@storybook/addon-a11y": "^10.3.5",
|
|
62
|
+
"@storybook/addon-docs": "^10.3.5",
|
|
63
|
+
"@storybook/addon-onboarding": "^10.3.5",
|
|
64
|
+
"@storybook/addon-vitest": "^10.3.5",
|
|
65
|
+
"@storybook/react-vite": "^10.3.5",
|
|
66
|
+
"@types/node": "^25.6.0",
|
|
67
|
+
"@types/react": "^19.2.14",
|
|
68
|
+
"@types/react-dom": "^19.2.3",
|
|
69
|
+
"@vitest/browser-playwright": "^4.1.5",
|
|
70
|
+
"@vitest/coverage-v8": "^4.1.5",
|
|
71
|
+
"autoprefixer": "^10.5.0",
|
|
72
|
+
"chokidar-cli": "^3.0.0",
|
|
73
|
+
"playwright": "^1.59.1",
|
|
74
|
+
"postcss": "^8.5.12",
|
|
75
|
+
"storybook": "^10.3.5",
|
|
76
|
+
"tailwindcss": "^3.4.19",
|
|
77
|
+
"tsup": "^8.5.1",
|
|
78
|
+
"typescript": "^6.0.3",
|
|
79
|
+
"vitest": "^4.1.5",
|
|
80
|
+
"yalc": "^1.0.0-pre.53"
|
|
81
|
+
},
|
|
82
|
+
"peerDependencies": {
|
|
83
|
+
"react": "^19.2.5",
|
|
84
|
+
"react-dom": "^19.2.5",
|
|
85
|
+
"tailwindcss": "^3.4.19"
|
|
86
|
+
},
|
|
87
|
+
"dependencies": {
|
|
88
|
+
"magicast": "^0.5.2",
|
|
89
|
+
"prompts": "^2.4.2"
|
|
90
|
+
}
|
|
91
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
darkMode: ["class"],
|
|
3
|
+
theme: {
|
|
4
|
+
extend: {
|
|
5
|
+
colors: {
|
|
6
|
+
primary: {
|
|
7
|
+
DEFAULT: "var(--primary-main)",
|
|
8
|
+
main: "var(--primary-main)",
|
|
9
|
+
light: "var(--primary-light)",
|
|
10
|
+
dark: "var(--primary-dark)",
|
|
11
|
+
contrastText: "var(--primary-contrast)",
|
|
12
|
+
},
|
|
13
|
+
secondary: {
|
|
14
|
+
DEFAULT: "var(--secondary-main)",
|
|
15
|
+
main: "var(--secondary-main)",
|
|
16
|
+
light: "var(--secondary-light)",
|
|
17
|
+
dark: "var(--secondary-dark)",
|
|
18
|
+
contrastText: "var(--secondary-contrast)",
|
|
19
|
+
},
|
|
20
|
+
error: {
|
|
21
|
+
DEFAULT: "var(--error-main)",
|
|
22
|
+
main: "var(--error-main)",
|
|
23
|
+
light: "var(--error-light)",
|
|
24
|
+
dark: "var(--error-dark)",
|
|
25
|
+
contrastText: "var(--error-contrast)",
|
|
26
|
+
},
|
|
27
|
+
warning: {
|
|
28
|
+
DEFAULT: "var(--warning-main)",
|
|
29
|
+
main: "var(--warning-main)",
|
|
30
|
+
light: "var(--warning-light)",
|
|
31
|
+
dark: "var(--warning-dark)",
|
|
32
|
+
contrastText: "var(--warning-contrast)",
|
|
33
|
+
},
|
|
34
|
+
info: {
|
|
35
|
+
DEFAULT: "var(--info-main)",
|
|
36
|
+
main: "var(--info-main)",
|
|
37
|
+
light: "var(--info-light)",
|
|
38
|
+
dark: "var(--info-dark)",
|
|
39
|
+
contrastText: "var(--info-contrast)",
|
|
40
|
+
},
|
|
41
|
+
success: {
|
|
42
|
+
DEFAULT: "var(--success-main)",
|
|
43
|
+
main: "var(--success-main)",
|
|
44
|
+
light: "var(--success-light)",
|
|
45
|
+
dark: "var(--success-dark)",
|
|
46
|
+
contrastText: "var(--success-contrast)",
|
|
47
|
+
},
|
|
48
|
+
grey: {
|
|
49
|
+
50: "var(--grey-50)",
|
|
50
|
+
100: "var(--grey-100)",
|
|
51
|
+
200: "var(--grey-200)",
|
|
52
|
+
300: "var(--grey-300)",
|
|
53
|
+
400: "var(--grey-400)",
|
|
54
|
+
500: "var(--grey-500)",
|
|
55
|
+
600: "var(--grey-600)",
|
|
56
|
+
700: "var(--grey-700)",
|
|
57
|
+
800: "var(--grey-800)",
|
|
58
|
+
900: "var(--grey-900)",
|
|
59
|
+
A100: "var(--grey-A100)",
|
|
60
|
+
A200: "var(--grey-A200)",
|
|
61
|
+
A400: "var(--grey-A400)",
|
|
62
|
+
A700: "var(--grey-A700)",
|
|
63
|
+
},
|
|
64
|
+
background: {
|
|
65
|
+
DEFAULT: "var(--background-default)",
|
|
66
|
+
default: "var(--background-default)",
|
|
67
|
+
paper: "var(--background-paper)",
|
|
68
|
+
},
|
|
69
|
+
text: {
|
|
70
|
+
DEFAULT: "var(--text-primary)",
|
|
71
|
+
primary: "var(--text-primary)",
|
|
72
|
+
secondary: "var(--text-secondary)",
|
|
73
|
+
disabled: "var(--text-disabled)",
|
|
74
|
+
},
|
|
75
|
+
divider: "var(--divider)",
|
|
76
|
+
action: {
|
|
77
|
+
active: "var(--action-active)",
|
|
78
|
+
hover: "var(--action-hover)",
|
|
79
|
+
selected: "var(--action-selected)",
|
|
80
|
+
disabled: "var(--action-disabled)",
|
|
81
|
+
disabledBackground: "var(--action-disabled-bg)",
|
|
82
|
+
focus: "var(--action-focus)",
|
|
83
|
+
},
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|