@optigrit/optigrit-ui 0.0.1 → 0.0.2

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.
Files changed (9) hide show
  1. package/README.md +66 -0
  2. package/dist/{chunk-2LJSVQ6B.js → chunk-EUAKUHDG.js} +109 -16
  3. package/dist/components/index.d.ts +94 -2
  4. package/dist/components/index.js +499 -102
  5. package/dist/core/index.d.ts +55 -1
  6. package/dist/core/index.js +7 -3
  7. package/index.css +165 -125
  8. package/package.json +3 -3
  9. package/tailwind.preset.js +1 -1
package/dist/core/index.d.ts CHANGED
@@ -1,10 +1,64 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { P as PopoverProps } from '../Input-CL3wQvR_.js';
3
3
  export { I as Input, a as InputProps } from '../Input-CL3wQvR_.js';
4
+ import * as react from 'react';
4
5
  import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
5
6
 
6
7
  declare function Popover(props: PopoverProps): react_jsx_runtime.JSX.Element;
7
8
 
9
+ interface RippleRef {
10
+ /**
11
+ * Triggers a ripple effect at the coordinates of the mouse event.
12
+ * The event should be a mouse event from the element that acts as the ripple container.
13
+ */
14
+ addRipple: (event: React.MouseEvent<HTMLElement>) => void;
15
+ }
16
+ interface RippleProps {
17
+ /**
18
+ * Color of the ripple effect.
19
+ * @default "rgba(255, 255, 255, 0.3)"
20
+ */
21
+ color?: string;
22
+ /**
23
+ * Duration of the ripple animation in milliseconds.
24
+ * @default 600
25
+ */
26
+ duration?: number;
27
+ }
28
+ /**
29
+ * Ripple component that provides a material-like ripple effect.
30
+ * It should be placed inside a container with `relative` and `overflow-hidden` styles.
31
+ */
32
+ declare const Ripple: react.ForwardRefExoticComponent<RippleProps & react.RefAttributes<RippleRef>>;
33
+
34
+ type SpinnerColor = "primary" | "secondary" | "error" | "info" | "success" | "warning" | "inherit";
35
+ interface SpinnerProps {
36
+ /**
37
+ * Size of the spinner. Can be a number (pixels) or a string (e.g. "2rem").
38
+ * @default 40
39
+ */
40
+ size?: number | string;
41
+ /**
42
+ * Thickness of the circle stroke.
43
+ * @default 3.6
44
+ */
45
+ thickness?: number;
46
+ /**
47
+ * Color of the spinner.
48
+ * @default "primary"
49
+ */
50
+ color?: SpinnerColor;
51
+ /**
52
+ * Additional CSS classes.
53
+ */
54
+ className?: string;
55
+ }
56
+ /**
57
+ * A circular spinner component inspired by Material UI's CircularProgress.
58
+ * Uses the custom animations defined in the tailwind preset.
59
+ */
60
+ declare function Spinner({ size, thickness, color, className, }: SpinnerProps): react_jsx_runtime.JSX.Element;
61
+
8
62
  type AnimationStyles = {
9
63
  children: {
10
64
  from: CSSProperties;
@@ -38,4 +92,4 @@ type ShowProps = {
38
92
  };
39
93
  declare function Show({ when, children, otherwise }: ShowProps): ReactNode;
40
94
 
41
- export { Popover, PopoverProps, Show, type ShowProps, type ShowWhenProps, ShowWithAnimation };
95
+ export { Popover, PopoverProps, Ripple, type RippleProps, type RippleRef, Show, type ShowProps, type ShowWhenProps, ShowWithAnimation, Spinner, type SpinnerColor, type SpinnerProps };
package/dist/core/index.js CHANGED
@@ -1,14 +1,18 @@
1
1
  import {
2
2
  Input,
3
3
  Popover,
4
+ Ripple,
4
5
  Show,
5
- ShowWithAnimation
6
- } from "../chunk-2LJSVQ6B.js";
6
+ ShowWithAnimation,
7
+ Spinner
8
+ } from "../chunk-EUAKUHDG.js";
7
9
  import "../chunk-MCQS3QNN.js";
8
10
  import "../chunk-U65NGM6F.js";
9
11
  export {
10
12
  Input,
11
13
  Popover,
14
+ Ripple,
12
15
  Show,
13
- ShowWithAnimation
16
+ ShowWithAnimation,
17
+ Spinner
14
18
  };
package/index.css CHANGED
@@ -2,130 +2,170 @@
2
2
  @tailwind components;
3
3
  @tailwind utilities;
4
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;
5
+ @layer utilities {
6
+ .hide-scrollbar::-webkit-scrollbar {
7
+ display: none;
67
8
  }
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;
9
+
10
+ .hide-scrollbar {
11
+ -ms-overflow-style: none;
12
+ scrollbar-width: none;
130
13
  }
131
- }
14
+ }
15
+
16
+ @layer base {
17
+ :root {
18
+ --primary-main: #2563eb;
19
+ --primary-light: #60a5fa;
20
+ --primary-dark: #1d4ed8;
21
+ --primary-contrast: #ffffff;
22
+
23
+ --secondary-main: #64748b;
24
+ --secondary-light: #94a3b8;
25
+ --secondary-dark: #475569;
26
+ --secondary-contrast: #ffffff;
27
+
28
+ --grey-50: #f9fafb;
29
+ --grey-100: #f3f4f6;
30
+ --grey-200: #e5e7eb;
31
+ --grey-300: #d1d5db;
32
+ --grey-400: #9ca3af;
33
+ --grey-500: #6b7280;
34
+ --grey-600: #4b5563;
35
+ --grey-700: #374151;
36
+ --grey-800: #1f2937;
37
+ --grey-900: #111827;
38
+ --grey-A100: #f5f5f5;
39
+ --grey-A200: #eeeeee;
40
+ --grey-A400: #bdbdbd;
41
+ --grey-A700: #616161;
42
+
43
+ --error-main: #ef4444;
44
+ --error-light: #fef2f2;
45
+ --error-dark: #dc2626;
46
+ --error-contrast: #ffffff;
47
+
48
+ --warning-main: #f59e0b;
49
+ --warning-light: #fbbf24;
50
+ --warning-dark: #d97706;
51
+ --warning-contrast: #ffffff;
52
+
53
+ --info-main: #3b82f6;
54
+ --info-light: #60a5fa;
55
+ --info-dark: #2563eb;
56
+ --info-contrast: #ffffff;
57
+
58
+ --success-main: #10b981;
59
+ --success-light: #34d399;
60
+ --success-dark: #059669;
61
+ --success-contrast: #ffffff;
62
+
63
+ --background-default: #f5f5f5;
64
+ --background-paper: #ffffff;
65
+
66
+ --text-primary: #0f172a;
67
+ --text-secondary: #475569;
68
+ --text-disabled: #94a3b8;
69
+
70
+ --divider: #e5e7eb;
71
+
72
+ --action-active: rgba(0, 0, 0, 0.54);
73
+ --action-hover: rgba(0, 0, 0, 0.04);
74
+ --action-selected: rgba(0, 0, 0, 0.08);
75
+ --action-disabled: rgba(0, 0, 0, 0.26);
76
+ --action-disabled-bg: rgba(0, 0, 0, 0.12);
77
+ --action-focus: #93c5fd;
78
+ }
79
+
80
+ .dark {
81
+ --primary-main: #60a5fa;
82
+ --primary-light: #93c5fd;
83
+ --primary-dark: #3b82f6;
84
+ --primary-contrast: #0f172a;
85
+
86
+ --secondary-main: #94a3b8;
87
+ --secondary-light: #cbd5e1;
88
+ --secondary-dark: #64748b;
89
+ --secondary-contrast: #0f172a;
90
+
91
+ --grey-50: #1f2937;
92
+ --grey-100: #374151;
93
+ --grey-200: #4b5563;
94
+ --grey-300: #6b7280;
95
+ --grey-400: #9ca3af;
96
+ --grey-500: #d1d5db;
97
+ --grey-600: #e5e7eb;
98
+ --grey-700: #f3f4f6;
99
+ --grey-800: #f9fafb;
100
+ --grey-900: #ffffff;
101
+ --grey-A100: #374151;
102
+ --grey-A200: #4b5563;
103
+ --grey-A400: #9ca3af;
104
+ --grey-A700: #d1d5db;
105
+
106
+ --error-main: #f87171;
107
+ --error-light: #fef2f2;
108
+ --error-dark: #ef4444;
109
+ --error-contrast: #0f172a;
110
+
111
+ --warning-main: #fbbf24;
112
+ --warning-light: #fcd34d;
113
+ --warning-dark: #f59e0b;
114
+ --warning-contrast: #0f172a;
115
+
116
+ --info-main: #60a5fa;
117
+ --info-light: #93c5fd;
118
+ --info-dark: #3b82f6;
119
+ --info-contrast: #0f172a;
120
+
121
+ --success-main: #34d399;
122
+ --success-light: #6ee7b7;
123
+ --success-dark: #10b981;
124
+ --success-contrast: #0f172a;
125
+
126
+ --background-default: #0f172a;
127
+ --background-paper: #1e293b;
128
+
129
+ --text-primary: #f8fafc;
130
+ --text-secondary: #94a3b8;
131
+ --text-disabled: #64748b;
132
+
133
+ --divider: #334155;
134
+
135
+ --action-active: rgba(255, 255, 255, 0.56);
136
+ --action-hover: rgba(255, 255, 255, 0.08);
137
+ --action-selected: rgba(255, 255, 255, 0.16);
138
+ --action-disabled: rgba(255, 255, 255, 0.3);
139
+ --action-disabled-bg: rgba(255, 255, 255, 0.12);
140
+ --action-focus: #60a5fa;
141
+ }
142
+ }
143
+
144
+ @keyframes circular-rotate {
145
+ 100% {
146
+ transform: rotate(360deg);
147
+ }
148
+ }
149
+
150
+ @keyframes circular-dash {
151
+ 0% {
152
+ stroke-dasharray: 1, 200;
153
+ stroke-dashoffset: 0;
154
+ }
155
+ 50% {
156
+ stroke-dasharray: 89, 200;
157
+ stroke-dashoffset: -35px;
158
+ }
159
+ 100% {
160
+ stroke-dasharray: 89, 200;
161
+ stroke-dashoffset: -124px;
162
+ }
163
+ }
164
+
165
+ .animate-circular-rotate {
166
+ animation: circular-rotate 1.4s linear infinite;
167
+ }
168
+
169
+ .animate-circular-dash {
170
+ animation: circular-dash 1.4s ease-in-out infinite;
171
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@optigrit/optigrit-ui",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "UI components library for optigrit apps",
5
5
  "license": "ISC",
6
6
  "author": "",
@@ -49,8 +49,8 @@
49
49
  },
50
50
  "scripts": {
51
51
  "build": "tsup",
52
+ "verify:changelog": "node scripts/verify-changelog.mjs",
52
53
  "prepublishOnly": "npm run build",
53
- "release": "npm publish",
54
54
  "lint": "tsc",
55
55
  "storybook": "storybook dev -p 6006",
56
56
  "build-storybook": "storybook build",
@@ -88,4 +88,4 @@
88
88
  "magicast": "^0.5.2",
89
89
  "prompts": "^2.4.2"
90
90
  }
91
- }
91
+ }
package/tailwind.preset.js CHANGED
@@ -84,4 +84,4 @@ export default {
84
84
  }
85
85
  }
86
86
  }
87
- }
87
+ }