hamzus-ui 0.0.5 → 0.0.7

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 (21) hide show
  1. package/index.d.ts +14 -0
  2. package/index.js +12 -0
  3. package/package.json +1 -1
  4. package/src/components/hamzus-ui/Button/Button.svelte +6 -6
  5. package/src/components/hamzus-ui/Checkboxes/CheckboxCard/index.css +1 -1
  6. package/src/components/hamzus-ui/Code/Code.svelte +1 -1
  7. package/src/components/hamzus-ui/DataList/DataList.svelte +1 -1
  8. package/src/components/hamzus-ui/DropdownMenu/Button.svelte +6 -6
  9. package/src/components/hamzus-ui/IconButton/IconButton.svelte +6 -6
  10. package/src/components/hamzus-ui/InfoCard/InfoCard.svelte +1 -1
  11. package/src/components/hamzus-ui/Input/Input.svelte +5 -5
  12. package/src/components/hamzus-ui/KBD/KBD.svelte +2 -2
  13. package/src/components/hamzus-ui/LoaderCircle/Loader.svelte +1 -1
  14. package/src/components/hamzus-ui/Popover/Button.svelte +6 -6
  15. package/src/components/hamzus-ui/Radios/Radio/index.css +1 -1
  16. package/src/components/hamzus-ui/Radios/RadioCard/index.css +1 -1
  17. package/src/components/hamzus-ui/Swicth/index.css +4 -4
  18. package/src/components/hamzus-ui/Tabs/Tabs.svelte +1 -1
  19. package/src/components/hamzus-ui/TabsLink/Tabs.svelte +1 -1
  20. package/src/styles/font.css +7 -7
  21. package/src/styles/variables.css +6 -6
package/index.d.ts CHANGED
@@ -1,8 +1,22 @@
1
1
  // index.d.ts
2
2
  import type { SvelteComponentTyped } from "svelte";
3
3
 
4
+ // button
4
5
  export class Button extends SvelteComponentTyped<any> {}
5
6
  export class IconButton extends SvelteComponentTyped<any> {}
7
+ // text
8
+ export class Tag extends SvelteComponentTyped<any> {}
9
+ export class InfoCard extends SvelteComponentTyped<any> {}
10
+ export class AlertCard extends SvelteComponentTyped<any> {}
11
+ export class Link extends SvelteComponentTyped<any> {}
12
+ export class Kbd extends SvelteComponentTyped<any> {}
13
+
14
+ // dialog
15
+ export class Dialog extends SvelteComponentTyped<any> {}
16
+
17
+ // form
18
+ export class Input extends SvelteComponentTyped<any> {}
19
+
6
20
 
7
21
  export * as DropdownMenu from "./src/components/hamzus-ui/DropdownMenu";
8
22
  export * as Popover from "./src/components/hamzus-ui/Popover";
package/index.js CHANGED
@@ -1,5 +1,17 @@
1
+ // button
1
2
  export { default as Button } from "./src/components/hamzus-ui/Button/Button.svelte"
2
3
  export { default as IconButton } from "./src/components/hamzus-ui/IconButton/IconButton.svelte"
4
+ // text
5
+ export { default as Tag } from "./src/components/hamzus-ui/Tag/Tag.svelte"
6
+ export { default as InfoCard } from "./src/components/hamzus-ui/InfoCard/InfoCard.svelte"
7
+ export { default as AlertCard } from "./src/components/hamzus-ui/AlertCard/AlertCard.svelte"
8
+ export { default as Link } from "./src/components/hamzus-ui/Link/Link.svelte"
9
+ export { default as Kbd } from "./src/components/hamzus-ui/KBD/KBD.svelte"
10
+ // dialog
11
+ export { default as Dialog } from "./src/components/hamzus-ui/Dialog/Dialog.svelte"
12
+ // form
13
+ export { default as Input } from "./src/components/hamzus-ui/Input/Input.svelte"
14
+
3
15
 
4
16
  export * as DropdownMenu from "./src/components/hamzus-ui/DropdownMenu"
5
17
  export * as Popover from "./src/components/hamzus-ui/Popover"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hamzus-ui",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "svelte": "index.js",
package/src/components/hamzus-ui/Button/Button.svelte CHANGED
@@ -25,26 +25,26 @@
25
25
  secondary: {
26
26
  defaultBg: '--bg-2',
27
27
  defaultBorder:'',
28
- defaultColor: '--font-u',
28
+ defaultColor: '--font-1',
29
29
  hoverBg: '--bg-3',
30
30
  hoverBorder:'',
31
- hoverColor: '--font-d'
31
+ hoverColor: '--font-2'
32
32
  },
33
33
  ghost: {
34
34
  defaultBg: '',
35
35
  defaultBorder:'',
36
- defaultColor: '--font-d',
36
+ defaultColor: '--font-2',
37
37
  hoverBg: '--bg-3',
38
38
  hoverBorder:'',
39
- hoverColor: '--font-u'
39
+ hoverColor: '--font-1'
40
40
  },
41
41
  outline: {
42
42
  defaultBg: '',
43
43
  defaultBorder:'--stroke',
44
- defaultColor: '--font-d',
44
+ defaultColor: '--font-2',
45
45
  hoverBg: '--bg-2',
46
46
  hoverBorder:'--stroke',
47
- hoverColor: '--font-u'
47
+ hoverColor: '--font-1'
48
48
  },
49
49
  destructive: {
50
50
  defaultBg: '--red',
package/src/components/hamzus-ui/Checkboxes/CheckboxCard/index.css CHANGED
@@ -36,7 +36,7 @@
36
36
  flex-shrink: 0;
37
37
  }
38
38
  .checkbox-card .checkbox-left-content svg path{
39
- fill: var(--font-d);
39
+ fill: var(--font-2);
40
40
  }
41
41
 
42
42
  .checkbox-card:has(input:checked){
package/src/components/hamzus-ui/Code/Code.svelte CHANGED
@@ -153,7 +153,7 @@
153
153
  .line-index {
154
154
  width: 50px;
155
155
  background-color: rgba(133, 133, 133, 0.068);
156
- color: var(--font-u);
156
+ color: var(--font-1);
157
157
  padding: var(--pad-xs) var(--pad-m);
158
158
  user-select: none;
159
159
  }
package/src/components/hamzus-ui/DataList/DataList.svelte CHANGED
@@ -74,7 +74,7 @@
74
74
  background-color: var(--bg-3);
75
75
  }
76
76
  .key{
77
- color: var(--font-u);
77
+ color: var(--font-1);
78
78
  }
79
79
  .value{
80
80
  text-align: right;
package/src/components/hamzus-ui/DropdownMenu/Button.svelte CHANGED
@@ -24,7 +24,7 @@
24
24
  column-gap: var(--pad-m);
25
25
  padding: var(--pad-s) var(--pad-m);
26
26
  border-radius: var(--radius-m);
27
- color: var(--font-d);
27
+ color: var(--font-2);
28
28
  cursor: pointer;
29
29
  transition: transform .2s ease-out;
30
30
  }
@@ -32,15 +32,15 @@
32
32
  transform: scale(.98);
33
33
  }
34
34
  .button :global(> *) {
35
- color: var(--font-d);
36
- fill: var(--font-d);
35
+ color: var(--font-2);
36
+ fill: var(--font-2);
37
37
  }
38
38
  .button:hover{
39
39
  background-color: var(--bg-3);
40
- color: var(--font-u);
40
+ color: var(--font-1);
41
41
  }
42
42
  .button:hover :global(> *) {
43
- color: var(--font-u);
44
- fill: var(--font-d);
43
+ color: var(--font-1);
44
+ fill: var(--font-2);
45
45
  }
46
46
  </style>
package/src/components/hamzus-ui/IconButton/IconButton.svelte CHANGED
@@ -24,26 +24,26 @@
24
24
  secondary: {
25
25
  defaultBg: '--bg-2',
26
26
  defaultBorder:'',
27
- defaultColor: '--font-u',
27
+ defaultColor: '--font-1',
28
28
  hoverBg: '--bg-3',
29
29
  hoverBorder:'',
30
- hoverColor: '--font-d'
30
+ hoverColor: '--font-2'
31
31
  },
32
32
  ghost: {
33
33
  defaultBg: '',
34
34
  defaultBorder:'',
35
- defaultColor: '--font-d',
35
+ defaultColor: '--font-2',
36
36
  hoverBg: '--bg-3',
37
37
  hoverBorder:'',
38
- hoverColor: '--font-u'
38
+ hoverColor: '--font-1'
39
39
  },
40
40
  outline: {
41
41
  defaultBg: '',
42
42
  defaultBorder:'--stroke',
43
- defaultColor: '--font-d',
43
+ defaultColor: '--font-2',
44
44
  hoverBg: '--bg-2',
45
45
  hoverBorder:'--stroke',
46
- hoverColor: '--font-u'
46
+ hoverColor: '--font-1'
47
47
  },
48
48
  destructive: {
49
49
  defaultBg: '--red-b',
package/src/components/hamzus-ui/InfoCard/InfoCard.svelte CHANGED
@@ -27,6 +27,6 @@
27
27
  flex-shrink: 0;
28
28
  }
29
29
  .info-card > svg > path {
30
- fill: var(--font-d);
30
+ fill: var(--font-2);
31
31
  }
32
32
  </style>
package/src/components/hamzus-ui/Input/Input.svelte CHANGED
@@ -201,7 +201,7 @@
201
201
  padding: 2px;
202
202
  }
203
203
  .input-container :global(svg path){
204
- fill: var(--font-d);
204
+ fill: var(--font-2);
205
205
  }
206
206
  .input-container input {
207
207
  text-align: left;
@@ -233,11 +233,11 @@
233
233
  /* border: 2px solid var(--accent); */
234
234
  }
235
235
  .input svg path {
236
- fill: var(--font-d);
236
+ fill: var(--font-2);
237
237
  }
238
238
 
239
239
  .input h6{
240
- color: var(--font-d);
240
+ color: var(--font-2);
241
241
  }
242
242
  .input .required{
243
243
  color: var(--red);
@@ -275,13 +275,13 @@
275
275
  column-gap: var(--pad-s);
276
276
  }
277
277
  .input input {
278
- color: var(--font-u);
278
+ color: var(--font-1);
279
279
  width: 100%;
280
280
  flex: 1;
281
281
  font-weight: 300;
282
282
  }
283
283
  .input input::placeholder{
284
- color: var(--font-t);
284
+ color: var(--font-3);
285
285
  }
286
286
  .input .input-line svg {
287
287
  height: var(--icon-size);
package/src/components/hamzus-ui/KBD/KBD.svelte CHANGED
@@ -16,9 +16,9 @@
16
16
  padding: var(--pad-xs) var(--pad-s);
17
17
  background-color: var(--bg-3);
18
18
  border: 1px solid var(--stroke);
19
- color: var(--font-d);
19
+ color: var(--font-2);
20
20
  border-radius: var(--radius-m);
21
21
  font-weight: 300;
22
- color: var(--font-u);
22
+ color: var(--font-1);
23
23
  }
24
24
  </style>
package/src/components/hamzus-ui/LoaderCircle/Loader.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script>
2
2
  export let size = "50px"; // Taille par défaut en pixels
3
3
  export let width = "3px"; // Taille par défaut en pixels
4
- export let color = "var(--font-d)"; // Taille par défaut en pixels
4
+ export let color = "var(--font-2)"; // Taille par défaut en pixels
5
5
  </script>
6
6
 
7
7
  <div class="loader" style="--loader-color:{color};width: {size}; height: {size}; border-width: {width};"></div>
package/src/components/hamzus-ui/Popover/Button.svelte CHANGED
@@ -24,7 +24,7 @@
24
24
  column-gap: var(--pad-m);
25
25
  padding: var(--pad-s) var(--pad-m);
26
26
  border-radius: var(--radius-m);
27
- color: var(--font-d);
27
+ color: var(--font-2);
28
28
  cursor: pointer;
29
29
  transition: transform .2s ease-out;
30
30
  }
@@ -32,15 +32,15 @@
32
32
  transform: scale(.98);
33
33
  }
34
34
  .button :global(*) {
35
- color: var(--font-d);
36
- fill: var(--font-d);
35
+ color: var(--font-2);
36
+ fill: var(--font-2);
37
37
  }
38
38
  .button:hover{
39
39
  background-color: var(--bg-3);
40
- color: var(--font-u);
40
+ color: var(--font-1);
41
41
  }
42
42
  .button:hover :global(*) {
43
- color: var(--font-u);
44
- fill: var(--font-d);
43
+ color: var(--font-1);
44
+ fill: var(--font-2);
45
45
  }
46
46
  </style>
package/src/components/hamzus-ui/Radios/Radio/index.css CHANGED
@@ -7,7 +7,7 @@
7
7
  transition: transform .2s ease-out;
8
8
  }
9
9
  .label-radio:hover:not(.disabled) > h4{
10
- color: var(--font-u);
10
+ color: var(--font-1);
11
11
  transition: color .2s ease-out;
12
12
  }
13
13
 
package/src/components/hamzus-ui/Radios/RadioCard/index.css CHANGED
@@ -33,7 +33,7 @@
33
33
  flex-shrink: 0;
34
34
  }
35
35
  .radio-card .radio-left-content svg path{
36
- fill: var(--font-d);
36
+ fill: var(--font-2);
37
37
  }
38
38
 
39
39
  .radio-card:has(input:checked){
package/src/components/hamzus-ui/Swicth/index.css CHANGED
@@ -66,7 +66,7 @@
66
66
  display:flex;
67
67
  align-items:center;
68
68
  justify-content:center;
69
- color: var(--font-t);
69
+ color: var(--font-3);
70
70
  transform: scale(.6) translateX(5px);
71
71
  opacity: 0;
72
72
  transition-property:transform, opacity ;
@@ -93,7 +93,7 @@
93
93
  display:flex;
94
94
  align-items:center;
95
95
  justify-content:center;
96
- color: var(--font-t);
96
+ color: var(--font-3);
97
97
  transform: scale(.6) translateX(-5px);
98
98
  opacity: 0;
99
99
  transition-property:transform, opacity ;
@@ -111,8 +111,8 @@
111
111
  opacity: 1;
112
112
  }
113
113
  .switch:not(.active) .state .not-active *{
114
- color: var(--font-u);
115
- fill: var(--font-u);
114
+ color: var(--font-1);
115
+ fill: var(--font-1);
116
116
  }
117
117
  .label-switch:has(.switch.disabled), .switch.disabled{
118
118
  opacity: .9;
package/src/components/hamzus-ui/Tabs/Tabs.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script>
2
2
  export let links = [];
3
3
 
4
- let activeStyle = 'color:var(--font-u);background-color:var(--bg-2);';
4
+ let activeStyle = 'color:var(--font-1);background-color:var(--bg-2);';
5
5
 
6
6
  import TinyScrollArea from '@hamzus-ui/TinyScrollArea/TinyScrollArea.svelte';
7
7
  import Button from '@hamzus-ui/Button/Button.svelte';
package/src/components/hamzus-ui/TabsLink/Tabs.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script>
2
2
  export let links = [];
3
3
 
4
- let activeStyle = 'color:var(--font-u);background-color:var(--bg-2);';
4
+ let activeStyle = 'color:var(--font-1);background-color:var(--bg-2);';
5
5
 
6
6
  import TinyScrollArea from '@hamzus-ui/TinyScrollArea/TinyScrollArea.svelte';
7
7
  import Button from '@hamzus-ui/Button/Button.svelte';
package/src/styles/font.css CHANGED
@@ -16,7 +16,7 @@
16
16
  font-size: var(--text-1);
17
17
  font-family: 'Geist', 'Inter', sans-serif;
18
18
  font-weight: bold;
19
- color: var(--font-u);
19
+ color: var(--font-1);
20
20
  }
21
21
 
22
22
  .h2, h2 {
@@ -24,7 +24,7 @@
24
24
  line-height: 2rem;
25
25
  font-family: 'Geist', 'Inter', sans-serif;
26
26
  font-weight: bold;
27
- color: var(--font-u);
27
+ color: var(--font-1);
28
28
  }
29
29
 
30
30
  .h3, h3 {
@@ -32,7 +32,7 @@
32
32
  line-height: 1.75rem;
33
33
  font-family: 'Geist', 'Inter', sans-serif;
34
34
  font-weight: bold;
35
- color: var(--font-u);
35
+ color: var(--font-1);
36
36
  }
37
37
 
38
38
  .h4, h4 {
@@ -40,7 +40,7 @@
40
40
  line-height: 1.5rem;
41
41
  font-family: 'Geist', 'Inter', sans-serif;
42
42
  font-weight: 500;
43
- color: var(--font-d);
43
+ color: var(--font-2);
44
44
  }
45
45
 
46
46
  .h5, h5 {
@@ -48,7 +48,7 @@
48
48
  line-height: 1.25rem;
49
49
  font-family: 'Geist', 'Inter', sans-serif;
50
50
  font-weight: 400;
51
- color: var(--font-d);
51
+ color: var(--font-2);
52
52
  }
53
53
 
54
54
  .h6, h6 {
@@ -56,14 +56,14 @@
56
56
  line-height: 1rem;
57
57
  font-family: 'Geist', 'Inter', sans-serif;
58
58
  font-weight: 300;
59
- color: var(--font-u);
59
+ color: var(--font-1);
60
60
  }
61
61
 
62
62
  .p, p {
63
63
  font-size: var(--text-p);
64
64
  font-family: 'Geist', 'Inter', sans-serif;
65
65
  font-weight: 300;
66
- color: var(--font-d);
66
+ color: var(--font-2);
67
67
  }
68
68
 
69
69
  .mono {
package/src/styles/variables.css CHANGED
@@ -17,9 +17,9 @@
17
17
  --white: #F6F6F6;
18
18
  --white-d: #d6dedf;
19
19
  /* font color */
20
- --font-u: #121212;
21
- --font-d: #666666;
22
- --font-t: #93939B;
20
+ --font-1: #121212;
21
+ --font-2: #666666;
22
+ --font-3: #93939B;
23
23
  /* background */
24
24
  --bg-1: #F6F6F6;
25
25
  --bg-2: #dddddd;
@@ -56,9 +56,9 @@
56
56
  @media (prefers-color-scheme: dark) {
57
57
  :root {
58
58
  /* font color */
59
- --font-u: #ECEBFF;
60
- --font-d: #899098;
61
- --font-t: #454545;
59
+ --font-1: #ECEBFF;
60
+ --font-2: #899098;
61
+ --font-3: #454545;
62
62
  /* background */
63
63
  --bg-1: #161616;
64
64
  --bg-2: #1F1F1F;