tera-system-ui 0.0.19 → 0.0.21

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.
@@ -22,7 +22,7 @@
22
22
  class: className,
23
23
  ...restProps
24
24
  }: $$Props & {
25
- el?: HTMLElement
25
+ el?: HTMLElement,
26
26
  } = $props()
27
27
 
28
28
 
@@ -0,0 +1,63 @@
1
+ ---
2
+ import {type DialogPropsAstro, styles} from "./Dialog";
3
+ import IconX from "../icons/IconX.svelte";
4
+ import {Button} from "../button";
5
+ import './dialog.scss'
6
+
7
+ const {
8
+ closeOnClickOutside = true,
9
+ closeButton = true,
10
+ size = 'sm',
11
+ class: className,
12
+ position = 'center',
13
+ padding,
14
+ focusTriggerAfterClose,
15
+ ...props
16
+ }: DialogPropsAstro = Astro.props
17
+
18
+ const {base, dialog: dialogStyle, dialogContainer, header: headerStyle, body, footer: footerStyle} = styles({
19
+ size,
20
+ padding
21
+ })
22
+
23
+ const hasHeaderSlot = !!Astro.slots["header"];
24
+ const hasFooterSlot = !!Astro.slots["footer"];
25
+ ---
26
+
27
+ <dialog class={dialogStyle() + ` ${className}`}
28
+ data-position={position}
29
+ onmousedown={closeOnClickOutside ? 'event.target==this && this.close()' : ''}
30
+ size={size}
31
+ {...props}
32
+ >
33
+ <button class=""></button>
34
+
35
+ {closeButton &&
36
+ <form method="dialog">
37
+ <Button class="absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90 z-10"
38
+ icon={true}
39
+ client:idle
40
+ variant="ghost"
41
+ size="sm">
42
+ <IconX/>
43
+ </Button>
44
+ </form>
45
+ }
46
+
47
+ <div class={"dialog-box " + dialogContainer()}>
48
+ {hasHeaderSlot &&
49
+ <header class={headerStyle()}>
50
+ <slot name="header"/>
51
+ </header>
52
+ }
53
+
54
+ <main class={body()}>
55
+ <slot/>
56
+ </main>
57
+ {hasFooterSlot &&
58
+ <footer class={footerStyle()}>
59
+ <slot name="footer"/>
60
+ </footer>
61
+ }
62
+ </div>
63
+ </dialog>
@@ -190,18 +190,22 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
190
190
  };
191
191
  }>, unknown, unknown, undefined>>;
192
192
  type DialogVariants = VariantProps<typeof styles>;
193
- export interface DialogProps extends DialogVariants {
194
- children?: any;
193
+ type DialogPropsCommon = {
195
194
  class?: string;
196
195
  id?: string;
197
- open?: boolean;
198
196
  closeOnClickOutside?: boolean;
199
197
  closeButton?: boolean;
198
+ position?: 'top' | 'center';
199
+ focusTriggerAfterClose?: boolean;
200
+ padding?: 'none' | undefined;
201
+ };
202
+ export type DialogProps = DialogVariants & DialogPropsCommon & {
203
+ children?: any;
200
204
  header?: any;
201
205
  footer?: any;
202
- position?: 'top' | 'center';
206
+ open?: boolean;
203
207
  staticRender?: boolean;
204
208
  triggerRef?: HTMLElement;
205
- focusTriggerAfterClose?: boolean;
206
- }
209
+ };
210
+ export type DialogPropsAstro = DialogVariants & DialogPropsCommon & {};
207
211
  export {};
@@ -76,6 +76,8 @@
76
76
  onclose={handleClose}
77
77
  onmousedown={handleClickOutside}
78
78
  size={size}
79
+
80
+ {...props}
79
81
  >
80
82
  <button class=""></button>
81
83
  {#if (closeButton)}
@@ -1,5 +1,5 @@
1
1
  .dialog-box {
2
- max-height: calc(100svh - 1rem);
2
+ max-height: min(calc(100svh - 1rem), 55rem);
3
3
  overflow-y: auto;
4
4
  overscroll-behavior: contain;
5
5
  display: grid;
@@ -7,6 +7,9 @@
7
7
  width: 100%;
8
8
  @apply bg-neutral-token-1 relative top-0 left-0 bottom-0;
9
9
 
10
+ main {
11
+ overflow: auto;
12
+ }
10
13
  }
11
14
 
12
15
  dialog, dialog:modal {
@@ -1 +1,2 @@
1
1
  export { default as Dialog } from './Dialog.svelte';
2
+ export { default as DialogAstro } from './Dialog.astro';
@@ -1 +1,2 @@
1
1
  export { default as Dialog } from './Dialog.svelte';
2
+ export { default as DialogAstro } from './Dialog.astro';
@@ -47,7 +47,7 @@
47
47
 
48
48
  let globalContext = getGlobalContext()
49
49
 
50
-
50
+ console.log('SideNavigation get global context', globalContext)
51
51
 
52
52
  function isSelected(href: string) {
53
53
  const pathname = globalContext?.sideNavHref
@@ -4,6 +4,7 @@ export type TeraUiContext = {
4
4
  supportLanguages?: AvailableLanguageTag[];
5
5
  language?: AvailableLanguageTag;
6
6
  sideNavHref?: string;
7
+ isAstroEnv?: boolean;
7
8
  };
8
9
  export interface TeraUiContextProps extends TeraUiContext {
9
10
  children?: any;
@@ -0,0 +1,3 @@
1
+ import { type Writable } from 'svelte/store';
2
+ import type { TeraUiContext } from "./TeraUiContext";
3
+ export declare const globalContextStore: Writable<TeraUiContext>;
@@ -0,0 +1,2 @@
1
+ import { writable } from 'svelte/store';
2
+ export const globalContextStore = writable();
@@ -1,11 +1,19 @@
1
1
  import { getContext, setContext } from "svelte";
2
+ import { globalContextStore } from "./global-context-store";
3
+ import { get } from "svelte/store";
2
4
  export function setGlobalContext(data) {
3
- setContext('globalContext', data);
5
+ if (data.isAstroEnv) {
6
+ globalContextStore.set(data);
7
+ }
8
+ else {
9
+ setContext('globalContext', data);
10
+ }
11
+ console.log('tera-system-ui', 'set global context', data);
4
12
  }
5
13
  export function getGlobalContext() {
6
- let context = getContext('globalContext');
14
+ let context = getContext('globalContext') || get(globalContextStore);
7
15
  if (!context) {
8
- console.warn('tera-system-ui', 'Not set global context yet!', 'Using default context data');
16
+ console.error('tera-system-ui', 'Not set global context yet!', 'Using default context data');
9
17
  return {
10
18
  language: 'en',
11
19
  supportLanguages: ['en']
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@ export { BrandLogo } from './components/brand-logo';
2
2
  export { Button } from './components/button';
3
3
  export { Combobox } from './components/combobox';
4
4
  export { Command } from './components/command';
5
- export { Dialog } from './components/dialog';
5
+ export { Dialog, DialogAstro } from './components/dialog';
6
6
  export { Header } from './components/header';
7
7
  export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconMoon, IconPointFilled, IconSearch, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
8
8
  export { Input } from './components/input';
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ export { BrandLogo } from './components/brand-logo';
2
2
  export { Button } from './components/button';
3
3
  export { Combobox } from './components/combobox';
4
4
  export { Command } from './components/command';
5
- export { Dialog } from './components/dialog';
5
+ export { Dialog, DialogAstro } from './components/dialog';
6
6
  export { Header } from './components/header';
7
7
  export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconMoon, IconPointFilled, IconSearch, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
8
8
  export { Input } from './components/input';
@@ -1,174 +1,210 @@
1
- @import "scrollbar.scss";
2
-
3
-
4
- :root {
5
- --border-radius-base: 0.25rem;
6
- --border-radius-container: 0.5rem;
7
- --tw---alias-color-primary-50: 215 90 96;
8
- --tw---alias-color-primary-100: 217 91 87;
9
- --tw---alias-color-primary-200: 217 91 82;
10
- --tw---alias-color-primary-300: 217 91 73;
11
- --tw---alias-color-primary-400: 217 91 68;
12
- --tw---alias-color-primary-500: 217 91 60;
13
- --tw---alias-color-primary-600: 217 73 55;
14
- --tw---alias-color-primary-700: 217 61 43;
15
- --tw---alias-color-primary-800: 217 62 33;
16
- --tw---alias-color-primary-900: 217 61 25;
17
- --tw---alias-color-error-50: 0 81 96;
18
- --tw---alias-color-error-100: 0 84 88;
19
- --tw---alias-color-error-200: 0 85 82;
20
- --tw---alias-color-error-300: 0 84 73;
21
- --tw---alias-color-error-400: 0 84 68;
22
- --tw---alias-color-error-500: 0 84 60;
23
- --tw---alias-color-error-600: 0 67 55;
24
- --tw---alias-color-error-700: 0 56 43;
25
- --tw---alias-color-error-800: 0 56 33;
26
- --tw---alias-color-error-900: 0 55 25;
27
- --tw---alias-color-success-50: 143 57 95;
28
- --tw---alias-color-success-100: 142 59 83;
29
- --tw---alias-color-success-200: 142 58 75;
30
- --tw---alias-color-success-300: 142 58 63;
31
- --tw---alias-color-success-400: 142 59 56;
32
- --tw---alias-color-success-500: 142 71 45;
33
- --tw---alias-color-success-600: 142 70 41;
34
- --tw---alias-color-success-700: 142 71 32;
35
- --tw---alias-color-success-800: 142 70 25;
36
- --tw---alias-color-success-900: 142 71 19;
37
- --tw---alias-color-neutral-1: 0 0 100;
38
- --tw---alias-color-neutral-2: 0 0 99;
39
- --tw---alias-color-neutral-3: 0 0 96;
40
- --tw---alias-color-neutral-4: 0 0 94;
41
- --tw---alias-color-neutral-5: 0 0 85;
42
- --tw---alias-color-neutral-6: 0 0 75;
43
- --tw---alias-color-neutral-7: 0 0 55;
44
- --tw---alias-color-neutral-8: 0 0 35;
45
- --tw---alias-color-neutral-9: 0 0 27;
46
- --tw---alias-color-neutral-10: 0 0 15;
47
- --tw---alias-color-neutral-11: 0 0 12;
48
- --tw---alias-color-neutral-12: 0 0 8;
49
- --tw---alias-color-neutral-13: 0 0 0;
50
- --tw---alias-color-warning-50: 25 92 95;
51
- --tw---alias-color-warning-100: 25 95 85;
52
- --tw---alias-color-warning-200: 25 95 78;
53
- --tw---alias-color-warning-300: 24 95 69;
54
- --tw---alias-color-warning-400: 25 95 63;
55
- --tw---alias-color-warning-500: 25 95 53;
56
- --tw---alias-color-warning-600: 25 84 48;
57
- --tw---alias-color-warning-700: 25 83 38;
58
- --tw---alias-color-warning-800: 24 84 29;
59
- --tw---alias-color-warning-900: 24 84 22;
60
- --tw---alias-color-information-50: 215 90 96;
61
- --tw---alias-color-information-100: 217 91 87;
62
- --tw---alias-color-information-200: 217 91 82;
63
- --tw---alias-color-information-300: 217 91 73;
64
- --tw---alias-color-information-400: 217 91 68;
65
- --tw---alias-color-information-500: 217 91 60;
66
- --tw---alias-color-information-600: 217 73 55;
67
- --tw---alias-color-information-700: 217 61 43;
68
- --tw---alias-color-information-800: 217 62 33;
69
- --tw---alias-color-information-900: 217 61 25;
70
- --tw---alias-color-secondary-50: 330 80 96;
71
- --tw---alias-color-secondary-100: 331 81 88;
72
- --tw---alias-color-secondary-200: 330 81 82;
73
- --tw---alias-color-secondary-300: 330 81 73;
74
- --tw---alias-color-secondary-400: 331 81 68;
75
- --tw---alias-color-secondary-500: 330 81 60;
76
- --tw---alias-color-secondary-600: 331 65 55;
77
- --tw---alias-color-secondary-700: 330 53 43;
78
- --tw---alias-color-secondary-800: 331 53 33;
79
- --tw---alias-color-secondary-900: 330 53 25;
80
- --tw---alias-color-brand-500: 212 100 47;
81
- --tw---token-color-brand-token-5: 212 100 47;
82
- --tw---token-color-neutral-token-1: 0 0 100;
83
- --tw---token-color-neutral-token-2: 0 0 99;
84
- --tw---token-color-neutral-token-3: 0 0 96;
85
- --tw---token-color-neutral-token-4: 0 0 94;
86
- --tw---token-color-neutral-token-5: 0 0 85;
87
- --tw---token-color-neutral-token-6: 0 0 75;
88
- --tw---token-color-neutral-token-7: 0 0 55;
89
- --tw---token-color-neutral-token-8: 0 0 35;
90
- --tw---token-color-neutral-token-9: 0 0 27;
91
- --tw---token-color-neutral-token-10: 0 0 15;
92
- --tw---token-color-neutral-token-11: 0 0 12;
93
- --tw---token-color-neutral-token-12: 0 0 8;
94
- --tw---token-color-neutral-token-13: 0 0 0;
95
- --tw---token-color-primary-token-1: 215 90 96;
96
- --tw---token-color-primary-token-2: 217 91 87;
97
- --tw---token-color-primary-token-3: 217 91 82;
98
- --tw---token-color-primary-token-4: 217 91 73;
99
- --tw---token-color-primary-token-5: 217 91 68;
100
- --tw---token-color-primary-token-6: 217 91 60;
101
- --tw---token-color-primary-token-7: 217 73 55;
102
- --tw---token-color-primary-token-8: 217 61 43;
103
- --tw---token-color-primary-token-9: 217 62 33;
104
- --tw---token-color-primary-token-10: 217 61 25;
105
- }
106
-
107
-
108
-
109
- :root.dark {
110
- --tw---token-color-brand-token-5: 212 100 47;
111
- --tw---token-color-neutral-token-1: 0 0 0;
112
- --tw---token-color-neutral-token-2: 0 0 8;
113
- --tw---token-color-neutral-token-3: 0 0 12;
114
- --tw---token-color-neutral-token-4: 0 0 15;
115
- --tw---token-color-neutral-token-5: 0 0 27;
116
- --tw---token-color-neutral-token-6: 0 0 35;
117
- --tw---token-color-neutral-token-7: 0 0 55;
118
- --tw---token-color-neutral-token-8: 0 0 75;
119
- --tw---token-color-neutral-token-9: 0 0 85;
120
- --tw---token-color-neutral-token-10: 0 0 94;
121
- --tw---token-color-neutral-token-11: 0 0 96;
122
- --tw---token-color-neutral-token-12: 0 0 99;
123
- --tw---token-color-neutral-token-13: 0 0 100;
124
- --tw---token-color-primary-token-1: 217 61 25;
125
- --tw---token-color-primary-token-2: 217 62 33;
126
- --tw---token-color-primary-token-3: 217 61 43;
127
- --tw---token-color-primary-token-4: 217 73 55;
128
- --tw---token-color-primary-token-5: 217 91 60;
129
- --tw---token-color-primary-token-6: 217 91 68;
130
- --tw---token-color-primary-token-7: 217 91 73;
131
- --tw---token-color-primary-token-8: 217 91 82;
132
- --tw---token-color-primary-token-9: 217 91 87;
133
- --tw---token-color-primary-token-10: 215 90 96;
134
- }
135
-
136
-
137
-
138
- /* Base responsive variable */
139
- :root {
140
- --header-height: 3rem;
141
- }
142
-
143
- @media (min-width: theme(screens.md)) {
144
- :root {
145
- --header-height: 3.5rem;
146
- }
147
- }
148
-
149
- @media (min-width: theme(screens.lg)) {
150
- :root {
151
- }
152
- }
153
-
154
-
155
- .ripple {
156
- position: absolute;
157
- border-radius: 50%;
158
- transform: scale(0);
159
- animation: ripple-animation 1s ease-out;
160
- pointer-events: none;
161
- }
162
-
163
- @keyframes ripple-animation {
164
- to {
165
- transform: scale(4);
166
- opacity: 0;
167
- }
168
- }
169
-
170
- body {
171
- background: theme(colors.neutral.token.1);
172
- color: theme(colors.neutral.token.13);
173
- }
174
-
1
+ /* Default base style */
2
+ @tailwind base;
3
+ @tailwind components;
4
+ @tailwind utilities;
5
+
6
+ @import "scrollbar.scss";
7
+
8
+ .ripple {
9
+ position: absolute;
10
+ border-radius: 50%;
11
+ transform: scale(0);
12
+ animation: ripple-animation 1s ease-out;
13
+ pointer-events: none;
14
+ }
15
+
16
+ @keyframes ripple-animation {
17
+ to {
18
+ transform: scale(4);
19
+ opacity: 0;
20
+ }
21
+ }
22
+
23
+ body {
24
+ background: theme(colors.neutral.token.1);
25
+ color: theme(colors.neutral.token.13);
26
+ }
27
+
28
+
29
+
30
+ @layer components {
31
+ .border,
32
+ .border-r,
33
+ .border-l,
34
+ .border-t,
35
+ .border-b,
36
+ .border-x,
37
+ .border-y {
38
+ border-color: theme(colors.neutral.token.5);
39
+ }
40
+ }
41
+
42
+
43
+ @layer utilities {
44
+ /* Hide scrollbar for Chrome, Safari and Opera */
45
+ .hide-scrollbar::-webkit-scrollbar {
46
+ display: none !important;
47
+ }
48
+ /* Hide scrollbar for IE, Edge and Firefox */
49
+ .hide-scrollbar {
50
+ -ms-overflow-style: none !important; /* IE and Edge */
51
+ scrollbar-width: none !important; /* Firefox */
52
+ }
53
+
54
+ .skeleton {
55
+ @apply animate-pulse bg-neutral-token-4 rounded h-4 w-full;
56
+ }
57
+ }
58
+
59
+
60
+
61
+
62
+ :root {
63
+ --border-radius-base: 0.25rem;
64
+ --border-radius-container: 0.5rem;
65
+ --tw---alias-color-primary-50: 215 90 96;
66
+ --tw---alias-color-primary-100: 217 91 87;
67
+ --tw---alias-color-primary-200: 217 91 82;
68
+ --tw---alias-color-primary-300: 217 91 73;
69
+ --tw---alias-color-primary-400: 217 91 68;
70
+ --tw---alias-color-primary-500: 217 91 60;
71
+ --tw---alias-color-primary-600: 217 73 55;
72
+ --tw---alias-color-primary-700: 217 61 43;
73
+ --tw---alias-color-primary-800: 217 62 33;
74
+ --tw---alias-color-primary-900: 217 61 25;
75
+ --tw---alias-color-error-50: 0 81 96;
76
+ --tw---alias-color-error-100: 0 84 88;
77
+ --tw---alias-color-error-200: 0 85 82;
78
+ --tw---alias-color-error-300: 0 84 73;
79
+ --tw---alias-color-error-400: 0 84 68;
80
+ --tw---alias-color-error-500: 0 84 60;
81
+ --tw---alias-color-error-600: 0 67 55;
82
+ --tw---alias-color-error-700: 0 56 43;
83
+ --tw---alias-color-error-800: 0 56 33;
84
+ --tw---alias-color-error-900: 0 55 25;
85
+ --tw---alias-color-success-50: 143 57 95;
86
+ --tw---alias-color-success-100: 142 59 83;
87
+ --tw---alias-color-success-200: 142 58 75;
88
+ --tw---alias-color-success-300: 142 58 63;
89
+ --tw---alias-color-success-400: 142 59 56;
90
+ --tw---alias-color-success-500: 142 71 45;
91
+ --tw---alias-color-success-600: 142 70 41;
92
+ --tw---alias-color-success-700: 142 71 32;
93
+ --tw---alias-color-success-800: 142 70 25;
94
+ --tw---alias-color-success-900: 142 71 19;
95
+ --tw---alias-color-neutral-1: 0 0 100;
96
+ --tw---alias-color-neutral-2: 0 0 99;
97
+ --tw---alias-color-neutral-3: 0 0 96;
98
+ --tw---alias-color-neutral-4: 0 0 94;
99
+ --tw---alias-color-neutral-5: 0 0 85;
100
+ --tw---alias-color-neutral-6: 0 0 75;
101
+ --tw---alias-color-neutral-7: 0 0 55;
102
+ --tw---alias-color-neutral-8: 0 0 35;
103
+ --tw---alias-color-neutral-9: 0 0 27;
104
+ --tw---alias-color-neutral-10: 0 0 15;
105
+ --tw---alias-color-neutral-11: 0 0 12;
106
+ --tw---alias-color-neutral-12: 0 0 8;
107
+ --tw---alias-color-neutral-13: 0 0 0;
108
+ --tw---alias-color-warning-50: 25 92 95;
109
+ --tw---alias-color-warning-100: 25 95 85;
110
+ --tw---alias-color-warning-200: 25 95 78;
111
+ --tw---alias-color-warning-300: 24 95 69;
112
+ --tw---alias-color-warning-400: 25 95 63;
113
+ --tw---alias-color-warning-500: 25 95 53;
114
+ --tw---alias-color-warning-600: 25 84 48;
115
+ --tw---alias-color-warning-700: 25 83 38;
116
+ --tw---alias-color-warning-800: 24 84 29;
117
+ --tw---alias-color-warning-900: 24 84 22;
118
+ --tw---alias-color-information-50: 215 90 96;
119
+ --tw---alias-color-information-100: 217 91 87;
120
+ --tw---alias-color-information-200: 217 91 82;
121
+ --tw---alias-color-information-300: 217 91 73;
122
+ --tw---alias-color-information-400: 217 91 68;
123
+ --tw---alias-color-information-500: 217 91 60;
124
+ --tw---alias-color-information-600: 217 73 55;
125
+ --tw---alias-color-information-700: 217 61 43;
126
+ --tw---alias-color-information-800: 217 62 33;
127
+ --tw---alias-color-information-900: 217 61 25;
128
+ --tw---alias-color-secondary-50: 330 80 96;
129
+ --tw---alias-color-secondary-100: 331 81 88;
130
+ --tw---alias-color-secondary-200: 330 81 82;
131
+ --tw---alias-color-secondary-300: 330 81 73;
132
+ --tw---alias-color-secondary-400: 331 81 68;
133
+ --tw---alias-color-secondary-500: 330 81 60;
134
+ --tw---alias-color-secondary-600: 331 65 55;
135
+ --tw---alias-color-secondary-700: 330 53 43;
136
+ --tw---alias-color-secondary-800: 331 53 33;
137
+ --tw---alias-color-secondary-900: 330 53 25;
138
+ --tw---alias-color-brand-500: 212 100 47;
139
+ --tw---token-color-brand-token-5: 212 100 47;
140
+ --tw---token-color-neutral-token-1: 0 0 100;
141
+ --tw---token-color-neutral-token-2: 0 0 99;
142
+ --tw---token-color-neutral-token-3: 0 0 96;
143
+ --tw---token-color-neutral-token-4: 0 0 94;
144
+ --tw---token-color-neutral-token-5: 0 0 85;
145
+ --tw---token-color-neutral-token-6: 0 0 75;
146
+ --tw---token-color-neutral-token-7: 0 0 55;
147
+ --tw---token-color-neutral-token-8: 0 0 35;
148
+ --tw---token-color-neutral-token-9: 0 0 27;
149
+ --tw---token-color-neutral-token-10: 0 0 15;
150
+ --tw---token-color-neutral-token-11: 0 0 12;
151
+ --tw---token-color-neutral-token-12: 0 0 8;
152
+ --tw---token-color-neutral-token-13: 0 0 0;
153
+ --tw---token-color-primary-token-1: 215 90 96;
154
+ --tw---token-color-primary-token-2: 217 91 87;
155
+ --tw---token-color-primary-token-3: 217 91 82;
156
+ --tw---token-color-primary-token-4: 217 91 73;
157
+ --tw---token-color-primary-token-5: 217 91 68;
158
+ --tw---token-color-primary-token-6: 217 91 60;
159
+ --tw---token-color-primary-token-7: 217 73 55;
160
+ --tw---token-color-primary-token-8: 217 61 43;
161
+ --tw---token-color-primary-token-9: 217 62 33;
162
+ --tw---token-color-primary-token-10: 217 61 25;
163
+ }
164
+
165
+
166
+
167
+ :root.dark {
168
+ --tw---token-color-brand-token-5: 212 100 47;
169
+ --tw---token-color-neutral-token-1: 0 0 0;
170
+ --tw---token-color-neutral-token-2: 0 0 8;
171
+ --tw---token-color-neutral-token-3: 0 0 12;
172
+ --tw---token-color-neutral-token-4: 0 0 15;
173
+ --tw---token-color-neutral-token-5: 0 0 27;
174
+ --tw---token-color-neutral-token-6: 0 0 35;
175
+ --tw---token-color-neutral-token-7: 0 0 55;
176
+ --tw---token-color-neutral-token-8: 0 0 75;
177
+ --tw---token-color-neutral-token-9: 0 0 85;
178
+ --tw---token-color-neutral-token-10: 0 0 94;
179
+ --tw---token-color-neutral-token-11: 0 0 96;
180
+ --tw---token-color-neutral-token-12: 0 0 99;
181
+ --tw---token-color-neutral-token-13: 0 0 100;
182
+ --tw---token-color-primary-token-1: 217 61 25;
183
+ --tw---token-color-primary-token-2: 217 62 33;
184
+ --tw---token-color-primary-token-3: 217 61 43;
185
+ --tw---token-color-primary-token-4: 217 73 55;
186
+ --tw---token-color-primary-token-5: 217 91 60;
187
+ --tw---token-color-primary-token-6: 217 91 68;
188
+ --tw---token-color-primary-token-7: 217 91 73;
189
+ --tw---token-color-primary-token-8: 217 91 82;
190
+ --tw---token-color-primary-token-9: 217 91 87;
191
+ --tw---token-color-primary-token-10: 215 90 96;
192
+ }
193
+
194
+
195
+
196
+ /* Base responsive variable */
197
+ :root {
198
+ --header-height: 3rem;
199
+ }
200
+
201
+ @media (min-width: theme(screens.md)) {
202
+ :root {
203
+ --header-height: 3.5rem;
204
+ }
205
+ }
206
+
207
+ @media (min-width: theme(screens.lg)) {
208
+ :root {
209
+ }
210
+ }
@@ -1,151 +1,154 @@
1
- module.exports = {
2
- theme: {
3
- extend: {
4
- colors: {
5
- primary: {
6
- 50: 'hsl(var(--tw---alias-color-primary-50))',
7
- 100: 'hsl(var(--tw---alias-color-primary-100))',
8
- 200: 'hsl(var(--tw---alias-color-primary-200))',
9
- 300: 'hsl(var(--tw---alias-color-primary-300))',
10
- 400: 'hsl(var(--tw---alias-color-primary-400))',
11
- 500: 'hsl(var(--tw---alias-color-primary-500))',
12
- 600: 'hsl(var(--tw---alias-color-primary-600))',
13
- 700: 'hsl(var(--tw---alias-color-primary-700))',
14
- 800: 'hsl(var(--tw---alias-color-primary-800))',
15
- 900: 'hsl(var(--tw---alias-color-primary-900))',
16
- token: {
17
- 1: 'hsl(var(--tw---token-color-primary-token-1))',
18
- 2: 'hsl(var(--tw---token-color-primary-token-2))',
19
- 3: 'hsl(var(--tw---token-color-primary-token-3))',
20
- 4: 'hsl(var(--tw---token-color-primary-token-4))',
21
- 5: 'hsl(var(--tw---token-color-primary-token-5))',
22
- 6: 'hsl(var(--tw---token-color-primary-token-6))',
23
- 7: 'hsl(var(--tw---token-color-primary-token-7))',
24
- 8: 'hsl(var(--tw---token-color-primary-token-8))',
25
- 9: 'hsl(var(--tw---token-color-primary-token-9))',
26
- 10: 'hsl(var(--tw---token-color-primary-token-10))'
27
- }
28
- },
29
- error: {
30
- 50: 'hsl(var(--tw---alias-color-error-50))',
31
- 100: 'hsl(var(--tw---alias-color-error-100))',
32
- 200: 'hsl(var(--tw---alias-color-error-200))',
33
- 300: 'hsl(var(--tw---alias-color-error-300))',
34
- 400: 'hsl(var(--tw---alias-color-error-400))',
35
- 500: 'hsl(var(--tw---alias-color-error-500))',
36
- 600: 'hsl(var(--tw---alias-color-error-600))',
37
- 700: 'hsl(var(--tw---alias-color-error-700))',
38
- 800: 'hsl(var(--tw---alias-color-error-800))',
39
- 900: 'hsl(var(--tw---alias-color-error-900))'
40
- },
41
- success: {
42
- 50: 'hsl(var(--tw---alias-color-success-50))',
43
- 100: 'hsl(var(--tw---alias-color-success-100))',
44
- 200: 'hsl(var(--tw---alias-color-success-200))',
45
- 300: 'hsl(var(--tw---alias-color-success-300))',
46
- 400: 'hsl(var(--tw---alias-color-success-400))',
47
- 500: 'hsl(var(--tw---alias-color-success-500))',
48
- 600: 'hsl(var(--tw---alias-color-success-600))',
49
- 700: 'hsl(var(--tw---alias-color-success-700))',
50
- 800: 'hsl(var(--tw---alias-color-success-800))',
51
- 900: 'hsl(var(--tw---alias-color-success-900))'
52
- },
53
- neutral: {
54
- 1: 'hsl(var(--tw---alias-color-neutral-1))',
55
- 2: 'hsl(var(--tw---alias-color-neutral-2))',
56
- 3: 'hsl(var(--tw---alias-color-neutral-3))',
57
- 4: 'hsl(var(--tw---alias-color-neutral-4))',
58
- 5: 'hsl(var(--tw---alias-color-neutral-5))',
59
- 6: 'hsl(var(--tw---alias-color-neutral-6))',
60
- 7: 'hsl(var(--tw---alias-color-neutral-7))',
61
- 8: 'hsl(var(--tw---alias-color-neutral-8))',
62
- 9: 'hsl(var(--tw---alias-color-neutral-9))',
63
- 10: 'hsl(var(--tw---alias-color-neutral-10))',
64
- 11: 'hsl(var(--tw---alias-color-neutral-11))',
65
- 12: 'hsl(var(--tw---alias-color-neutral-12))',
66
- 13: 'hsl(var(--tw---alias-color-neutral-13))',
67
- token: {
68
- 1: 'hsl(var(--tw---token-color-neutral-token-1))',
69
- 2: 'hsl(var(--tw---token-color-neutral-token-2))',
70
- 3: 'hsl(var(--tw---token-color-neutral-token-3))',
71
- 4: 'hsl(var(--tw---token-color-neutral-token-4))',
72
- 5: 'hsl(var(--tw---token-color-neutral-token-5))',
73
- 6: 'hsl(var(--tw---token-color-neutral-token-6))',
74
- 7: 'hsl(var(--tw---token-color-neutral-token-7))',
75
- 8: 'hsl(var(--tw---token-color-neutral-token-8))',
76
- 9: 'hsl(var(--tw---token-color-neutral-token-9))',
77
- 10: 'hsl(var(--tw---token-color-neutral-token-10))',
78
- 11: 'hsl(var(--tw---token-color-neutral-token-11))',
79
- 12: 'hsl(var(--tw---token-color-neutral-token-12))',
80
- 13: 'hsl(var(--tw---token-color-neutral-token-13))'
81
- }
82
- },
83
- warning: {
84
- 50: 'hsl(var(--tw---alias-color-warning-50))',
85
- 100: 'hsl(var(--tw---alias-color-warning-100))',
86
- 200: 'hsl(var(--tw---alias-color-warning-200))',
87
- 300: 'hsl(var(--tw---alias-color-warning-300))',
88
- 400: 'hsl(var(--tw---alias-color-warning-400))',
89
- 500: 'hsl(var(--tw---alias-color-warning-500))',
90
- 600: 'hsl(var(--tw---alias-color-warning-600))',
91
- 700: 'hsl(var(--tw---alias-color-warning-700))',
92
- 800: 'hsl(var(--tw---alias-color-warning-800))',
93
- 900: 'hsl(var(--tw---alias-color-warning-900))'
94
- },
95
- information: {
96
- 50: 'hsl(var(--tw---alias-color-information-50))',
97
- 100: 'hsl(var(--tw---alias-color-information-100))',
98
- 200: 'hsl(var(--tw---alias-color-information-200))',
99
- 300: 'hsl(var(--tw---alias-color-information-300))',
100
- 400: 'hsl(var(--tw---alias-color-information-400))',
101
- 500: 'hsl(var(--tw---alias-color-information-500))',
102
- 600: 'hsl(var(--tw---alias-color-information-600))',
103
- 700: 'hsl(var(--tw---alias-color-information-700))',
104
- 800: 'hsl(var(--tw---alias-color-information-800))',
105
- 900: 'hsl(var(--tw---alias-color-information-900))'
106
- },
107
- secondary: {
108
- 50: 'hsl(var(--tw---alias-color-secondary-50))',
109
- 100: 'hsl(var(--tw---alias-color-secondary-100))',
110
- 200: 'hsl(var(--tw---alias-color-secondary-200))',
111
- 300: 'hsl(var(--tw---alias-color-secondary-300))',
112
- 400: 'hsl(var(--tw---alias-color-secondary-400))',
113
- 500: 'hsl(var(--tw---alias-color-secondary-500))',
114
- 600: 'hsl(var(--tw---alias-color-secondary-600))',
115
- 700: 'hsl(var(--tw---alias-color-secondary-700))',
116
- 800: 'hsl(var(--tw---alias-color-secondary-800))',
117
- 900: 'hsl(var(--tw---alias-color-secondary-900))'
118
- },
119
- brand: {
120
- 500: 'hsl(var(--tw---alias-color-brand-500))',
121
- token: {
122
- 5: 'hsl(var(--tw---token-color-brand-token-5))'
123
- }
124
- }
125
- },
126
- spacing: {
127
- "icon-xs": '1.25rem',
128
- "icon-sm": '1.5rem',
129
- "icon-md": '1.75rem',
130
- "icon-lg": '2rem',
131
- "icon-xl": '2.25rem',
132
- "icon-2xl": '2.5rem',
133
- "header-height": 'var(--header-height)'
134
- },
135
- borderWidth: {
136
- base: '1px',
137
- large: '2px'
138
- },
139
- stroke: {
140
- icon: '1.5rem'
141
- },
142
- borderRadius: {
143
- DEFAULT: 'var(--border-radius-base)',
144
- container: 'var(--border-radius-container)'
145
- },
146
- transitionDuration: {
147
- "element-react": '350ms'
148
- }
149
- }
150
- }
1
+ module.exports = {
2
+ theme: {
3
+ extend: {
4
+ colors: {
5
+ primary: {
6
+ 50: 'hsl(var(--tw---alias-color-primary-50))',
7
+ 100: 'hsl(var(--tw---alias-color-primary-100))',
8
+ 200: 'hsl(var(--tw---alias-color-primary-200))',
9
+ 300: 'hsl(var(--tw---alias-color-primary-300))',
10
+ 400: 'hsl(var(--tw---alias-color-primary-400))',
11
+ 500: 'hsl(var(--tw---alias-color-primary-500))',
12
+ 600: 'hsl(var(--tw---alias-color-primary-600))',
13
+ 700: 'hsl(var(--tw---alias-color-primary-700))',
14
+ 800: 'hsl(var(--tw---alias-color-primary-800))',
15
+ 900: 'hsl(var(--tw---alias-color-primary-900))',
16
+ token: {
17
+ 1: 'hsl(var(--tw---token-color-primary-token-1))',
18
+ 2: 'hsl(var(--tw---token-color-primary-token-2))',
19
+ 3: 'hsl(var(--tw---token-color-primary-token-3))',
20
+ 4: 'hsl(var(--tw---token-color-primary-token-4))',
21
+ 5: 'hsl(var(--tw---token-color-primary-token-5))',
22
+ 6: 'hsl(var(--tw---token-color-primary-token-6))',
23
+ 7: 'hsl(var(--tw---token-color-primary-token-7))',
24
+ 8: 'hsl(var(--tw---token-color-primary-token-8))',
25
+ 9: 'hsl(var(--tw---token-color-primary-token-9))',
26
+ 10: 'hsl(var(--tw---token-color-primary-token-10))'
27
+ }
28
+ },
29
+ error: {
30
+ 50: 'hsl(var(--tw---alias-color-error-50))',
31
+ 100: 'hsl(var(--tw---alias-color-error-100))',
32
+ 200: 'hsl(var(--tw---alias-color-error-200))',
33
+ 300: 'hsl(var(--tw---alias-color-error-300))',
34
+ 400: 'hsl(var(--tw---alias-color-error-400))',
35
+ 500: 'hsl(var(--tw---alias-color-error-500))',
36
+ 600: 'hsl(var(--tw---alias-color-error-600))',
37
+ 700: 'hsl(var(--tw---alias-color-error-700))',
38
+ 800: 'hsl(var(--tw---alias-color-error-800))',
39
+ 900: 'hsl(var(--tw---alias-color-error-900))'
40
+ },
41
+ success: {
42
+ 50: 'hsl(var(--tw---alias-color-success-50))',
43
+ 100: 'hsl(var(--tw---alias-color-success-100))',
44
+ 200: 'hsl(var(--tw---alias-color-success-200))',
45
+ 300: 'hsl(var(--tw---alias-color-success-300))',
46
+ 400: 'hsl(var(--tw---alias-color-success-400))',
47
+ 500: 'hsl(var(--tw---alias-color-success-500))',
48
+ 600: 'hsl(var(--tw---alias-color-success-600))',
49
+ 700: 'hsl(var(--tw---alias-color-success-700))',
50
+ 800: 'hsl(var(--tw---alias-color-success-800))',
51
+ 900: 'hsl(var(--tw---alias-color-success-900))'
52
+ },
53
+ neutral: {
54
+ 1: 'hsl(var(--tw---alias-color-neutral-1))',
55
+ 2: 'hsl(var(--tw---alias-color-neutral-2))',
56
+ 3: 'hsl(var(--tw---alias-color-neutral-3))',
57
+ 4: 'hsl(var(--tw---alias-color-neutral-4))',
58
+ 5: 'hsl(var(--tw---alias-color-neutral-5))',
59
+ 6: 'hsl(var(--tw---alias-color-neutral-6))',
60
+ 7: 'hsl(var(--tw---alias-color-neutral-7))',
61
+ 8: 'hsl(var(--tw---alias-color-neutral-8))',
62
+ 9: 'hsl(var(--tw---alias-color-neutral-9))',
63
+ 10: 'hsl(var(--tw---alias-color-neutral-10))',
64
+ 11: 'hsl(var(--tw---alias-color-neutral-11))',
65
+ 12: 'hsl(var(--tw---alias-color-neutral-12))',
66
+ 13: 'hsl(var(--tw---alias-color-neutral-13))',
67
+ token: {
68
+ 1: 'hsl(var(--tw---token-color-neutral-token-1))',
69
+ 2: 'hsl(var(--tw---token-color-neutral-token-2))',
70
+ 3: 'hsl(var(--tw---token-color-neutral-token-3))',
71
+ 4: 'hsl(var(--tw---token-color-neutral-token-4))',
72
+ 5: 'hsl(var(--tw---token-color-neutral-token-5))',
73
+ 6: 'hsl(var(--tw---token-color-neutral-token-6))',
74
+ 7: 'hsl(var(--tw---token-color-neutral-token-7))',
75
+ 8: 'hsl(var(--tw---token-color-neutral-token-8))',
76
+ 9: 'hsl(var(--tw---token-color-neutral-token-9))',
77
+ 10: 'hsl(var(--tw---token-color-neutral-token-10))',
78
+ 11: 'hsl(var(--tw---token-color-neutral-token-11))',
79
+ 12: 'hsl(var(--tw---token-color-neutral-token-12))',
80
+ 13: 'hsl(var(--tw---token-color-neutral-token-13))'
81
+ }
82
+ },
83
+ warning: {
84
+ 50: 'hsl(var(--tw---alias-color-warning-50))',
85
+ 100: 'hsl(var(--tw---alias-color-warning-100))',
86
+ 200: 'hsl(var(--tw---alias-color-warning-200))',
87
+ 300: 'hsl(var(--tw---alias-color-warning-300))',
88
+ 400: 'hsl(var(--tw---alias-color-warning-400))',
89
+ 500: 'hsl(var(--tw---alias-color-warning-500))',
90
+ 600: 'hsl(var(--tw---alias-color-warning-600))',
91
+ 700: 'hsl(var(--tw---alias-color-warning-700))',
92
+ 800: 'hsl(var(--tw---alias-color-warning-800))',
93
+ 900: 'hsl(var(--tw---alias-color-warning-900))'
94
+ },
95
+ information: {
96
+ 50: 'hsl(var(--tw---alias-color-information-50))',
97
+ 100: 'hsl(var(--tw---alias-color-information-100))',
98
+ 200: 'hsl(var(--tw---alias-color-information-200))',
99
+ 300: 'hsl(var(--tw---alias-color-information-300))',
100
+ 400: 'hsl(var(--tw---alias-color-information-400))',
101
+ 500: 'hsl(var(--tw---alias-color-information-500))',
102
+ 600: 'hsl(var(--tw---alias-color-information-600))',
103
+ 700: 'hsl(var(--tw---alias-color-information-700))',
104
+ 800: 'hsl(var(--tw---alias-color-information-800))',
105
+ 900: 'hsl(var(--tw---alias-color-information-900))'
106
+ },
107
+ secondary: {
108
+ 50: 'hsl(var(--tw---alias-color-secondary-50))',
109
+ 100: 'hsl(var(--tw---alias-color-secondary-100))',
110
+ 200: 'hsl(var(--tw---alias-color-secondary-200))',
111
+ 300: 'hsl(var(--tw---alias-color-secondary-300))',
112
+ 400: 'hsl(var(--tw---alias-color-secondary-400))',
113
+ 500: 'hsl(var(--tw---alias-color-secondary-500))',
114
+ 600: 'hsl(var(--tw---alias-color-secondary-600))',
115
+ 700: 'hsl(var(--tw---alias-color-secondary-700))',
116
+ 800: 'hsl(var(--tw---alias-color-secondary-800))',
117
+ 900: 'hsl(var(--tw---alias-color-secondary-900))'
118
+ },
119
+ brand: {
120
+ 500: 'hsl(var(--tw---alias-color-brand-500))',
121
+ token: {
122
+ 5: 'hsl(var(--tw---token-color-brand-token-5))'
123
+ }
124
+ }
125
+ },
126
+ spacing: {
127
+ "icon-xs": '1.25rem',
128
+ "icon-sm": '1.5rem',
129
+ "icon-md": '1.75rem',
130
+ "icon-lg": '2rem',
131
+ "icon-xl": '2.25rem',
132
+ "icon-2xl": '2.5rem',
133
+ "header-height": 'var(--header-height)'
134
+ },
135
+ borderWidth: {
136
+ base: '1px',
137
+ large: '2px'
138
+ },
139
+ stroke: {
140
+ icon: '1.5rem'
141
+ },
142
+ borderRadius: {
143
+ DEFAULT: 'var(--border-radius-base)',
144
+ container: 'var(--border-radius-container)'
145
+ },
146
+ borderColor: {
147
+ DEFAULT: 'hsl(var(--tw---token-color-neutral-token-5))'
148
+ },
149
+ transitionDuration: {
150
+ "element-react": '350ms'
151
+ }
152
+ }
153
+ }
151
154
  };
@@ -142,6 +142,10 @@ export namespace theme {
142
142
  let DEFAULT: string;
143
143
  let container: string;
144
144
  }
145
+ namespace borderColor {
146
+ let DEFAULT_1: string;
147
+ export { DEFAULT_1 as DEFAULT };
148
+ }
145
149
  let transitionDuration: {
146
150
  "element-react": string;
147
151
  };
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "tera-system-ui",
3
- "version": "0.0.19",
3
+ "version": "0.0.21",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && npm run package",
7
7
  "preview": "vite preview",
8
8
  "package": "svelte-kit sync && svelte-package && publint",
9
9
  "customPrepublish": "node ./scripts/prepublish.js",
10
+ "postpublish": "node ./scripts/postpublish.js",
10
11
  "prepublishOnly": "npm run lang-compile && npm run customPrepublish && npm run package",
11
12
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
12
13
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -27,8 +28,9 @@
27
28
  "**/*.css"
28
29
  ],
29
30
  "svelte": "./dist/index.js",
30
- "types": "./dist/index.d.ts",
31
+ "types": "dist/index.d.ts",
31
32
  "type": "module",
33
+ "main": "dist/index.js",
32
34
  "exports": {
33
35
  ".": {
34
36
  "types": "./dist/index.d.ts",
@@ -1,4 +1,4 @@
1
- #!/usr/bin/env node
1
+ #!/usr/bin/env node
2
2
 
3
3
  import fs from "fs";
4
4
 
@@ -73,7 +73,7 @@ function findFilesByPattern(folderPath, namePattern) {
73
73
  const result = [];
74
74
 
75
75
  function searchFolder(currentPath) {
76
- const filesAndDirs = fs.readdirSync(currentPath);
76
+ const filesAndDirs = fs.readFileSync(currentPath);
77
77
 
78
78
  for (const item of filesAndDirs) {
79
79
  const itemPath = path.join(currentPath, item);
@@ -124,7 +124,7 @@ const importComponentTemplate = `export {Component} from 'path'`;
124
124
  let components = extractExportNames(file.filePath)
125
125
  if (components.length === 0) return
126
126
 
127
- let importFromPath = './components/' + file.filePath.split(`\\components\\`)[1].replace('\\index.ts', '');
127
+ let importFromPath = './components/' + file.filePath.split(path.sep + `components` + path.sep)[1].replace(path.sep + 'index.ts', '');
128
128
 
129
129
  content += importComponentTemplate.replace('path', importFromPath)
130
130
  .replace('Component', components.join(', '));