@hyvor/design 1.1.21-beta.1 → 1.1.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.
Files changed (11) hide show
  1. package/dist/components/Accordion/Accordion.svelte +136 -108
  2. package/dist/components/Accordion/Accordion.svelte.d.ts +5 -0
  3. package/dist/components/ColorPicker/ColorPicker.svelte +32 -3
  4. package/dist/index.css +7 -0
  5. package/dist/marketing/Container/Container.svelte +7 -3
  6. package/dist/marketing/Container/Container.svelte.d.ts +1 -0
  7. package/dist/marketing/Footer/Footer.svelte +4 -2
  8. package/dist/marketing/Footer/Footer.svelte.d.ts +1 -0
  9. package/dist/marketing/Header/Header.svelte +4 -2
  10. package/dist/marketing/Header/Header.svelte.d.ts +1 -0
  11. package/package.json +1 -1
package/dist/components/Accordion/Accordion.svelte CHANGED
@@ -1,115 +1,143 @@
1
1
  <script lang="ts">
2
- import type { Component, Snippet } from 'svelte';
3
- import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
4
-
5
- interface Props {
6
- title: string;
7
- children?: Snippet;
8
- open?: boolean;
9
- icon?: Component;
10
- }
11
-
12
- let { title, children, open = $bindable(false), icon }: Props = $props();
13
- const Icon = icon;
14
-
15
- function handleClick() {
16
- open = !open;
17
- }
2
+ import type { Component, Snippet } from 'svelte';
3
+ import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
4
+
5
+ interface Props {
6
+ title: string;
7
+ children?: Snippet;
8
+ open?: boolean;
9
+ icon?: Component;
10
+ headerColor?: string;
11
+ textColor?: string;
12
+ openedColor?: string;
13
+ borderColor?: string;
14
+ topBorderColor?: string;
15
+ }
16
+
17
+ let {
18
+ title,
19
+ children,
20
+ open = $bindable(false),
21
+ icon,
22
+ headerColor,
23
+ textColor,
24
+ openedColor,
25
+ borderColor,
26
+ topBorderColor
27
+ }: Props = $props();
28
+
29
+ const Icon = icon;
30
+
31
+ function handleClick() {
32
+ open = !open;
33
+ }
18
34
  </script>
19
35
 
20
- <div class="accordion-item">
21
- <button class="accordion-header" class:open onclick={handleClick}>
22
- {#if icon}
23
- <span class="icon">
24
- <Icon size={20} />
25
- </span>
26
- {/if}
27
- <span class="title">{title}</span>
28
- <span class="chevron" class:rotated={open}>
29
- <IconCaretDownFill />
30
- </span>
31
- </button>
32
-
33
- <div class="accordion-content" class:show={open}>
34
- <div class="content-text">
35
- {@render children?.()}
36
- </div>
37
- </div>
36
+ <div
37
+ class="accordion-item"
38
+ style:--custom-border={borderColor}
39
+ style:--custom-text={textColor}
40
+ style:--custom-opened={openedColor}
41
+ style:--custom-header={headerColor}
42
+ >
43
+ <button class="accordion-header" class:open onclick={handleClick}>
44
+ {#if icon}
45
+ <span class="icon">
46
+ <Icon size={20} />
47
+ </span>
48
+ {/if}
49
+ <span class="title">{title}</span>
50
+ <span class="chevron" class:rotated={open}>
51
+ <IconCaretDownFill />
52
+ </span>
53
+ </button>
54
+
55
+ <div class="accordion-content"
56
+ class:show={open}>
57
+ <div class="content-text"
58
+ style:--custom-top-border={topBorderColor}
59
+ style:--custom-header={headerColor}
60
+ >
61
+ {@render children?.()}
62
+ </div>
63
+ </div>
38
64
  </div>
39
65
 
40
66
  <style>
41
- .accordion-item {
42
- overflow: hidden;
43
- border-radius: 20px;
44
- border: 1px solid var(--border);
45
- }
46
-
47
- .accordion-header {
48
- width: 100%;
49
- padding: 14px 20px;
50
- background: none;
51
- border: none;
52
- display: flex;
53
- justify-content: space-between;
54
- align-items: center;
55
- cursor: pointer;
56
- font-size: 16px;
57
- border-radius: 20px;
58
- }
59
-
60
- .accordion-header.open {
61
- border-radius: 20px 20px 0 0;
62
- background-color: var(--hover);
63
- }
64
-
65
- .title {
66
- font-weight: 500;
67
- text-align: left;
68
- }
69
-
70
- .chevron {
71
- display: flex;
72
- align-items: center;
73
- transition: transform 0.3s ease;
74
- color: var(--text);
75
- }
76
-
77
- .chevron.rotated {
78
- transform: rotate(180deg);
79
- }
80
-
81
- .accordion-content {
82
- height: 0;
83
- overflow: hidden;
84
- }
85
-
86
- .accordion-content.show {
87
- height: auto;
88
- overflow: visible;
89
- animation: slideDown 0.3s ease-out;
90
- }
91
-
92
- .content-text {
93
- padding: 20px;
94
- color: var(--text);
95
- line-height: 1.6;
96
- border-top: 1px solid var(--border);
97
- }
98
-
99
- .icon {
100
- display: inline-block;
101
- margin-right: 10px;
102
- vertical-align: middle;
103
- }
104
-
105
- @keyframes slideDown {
106
- from {
107
- opacity: 0;
108
- transform: translateY(-10px);
109
- }
110
- to {
111
- opacity: 1;
112
- transform: translateY(0);
113
- }
114
- }
67
+ .accordion-item {
68
+ overflow: hidden;
69
+ border-radius: 20px;
70
+ border: 1px solid var(--custom-border, var(--border));
71
+ }
72
+
73
+ .accordion-header {
74
+ width: 100%;
75
+ padding: 14px 20px;
76
+ background: var(--custom-header, none);
77
+ border: none;
78
+ display: flex;
79
+ justify-content: space-between;
80
+ align-items: center;
81
+ cursor: pointer;
82
+ font-size: 16px;
83
+ border-radius: 20px;
84
+ color: var(--custom-text, var(--text));
85
+ }
86
+
87
+ .accordion-header.open {
88
+ border-radius: 20px 20px 0 0;
89
+ background-color: var(--custom-opened, var(--hover));
90
+ }
91
+
92
+ .title {
93
+ font-weight: 500;
94
+ text-align: left;
95
+ }
96
+
97
+ .chevron {
98
+ display: flex;
99
+ align-items: center;
100
+ transition: transform 0.3s ease;
101
+ color: var(--custom-text, var(--text));
102
+ }
103
+
104
+ .chevron.rotated {
105
+ transform: rotate(180deg);
106
+ }
107
+
108
+ .accordion-content {
109
+ height: 0;
110
+ overflow: hidden;
111
+ }
112
+
113
+ .accordion-content.show {
114
+ height: auto;
115
+ overflow: visible;
116
+ animation: slideDown 0.3s ease-out;
117
+ }
118
+
119
+ .content-text {
120
+ padding: 20px;
121
+ color: var(--custom-text, var(--text));
122
+ line-height: 1.6;
123
+ border-top: 1px solid var(--custom-top-border, var(--border));
124
+ background: var(--custom-header, none);
125
+ }
126
+
127
+ .icon {
128
+ display: inline-block;
129
+ margin-right: 10px;
130
+ vertical-align: middle;
131
+ }
132
+
133
+ @keyframes slideDown {
134
+ from {
135
+ opacity: 0;
136
+ transform: translateY(-10px);
137
+ }
138
+ to {
139
+ opacity: 1;
140
+ transform: translateY(0);
141
+ }
142
+ }
115
143
  </style>
package/dist/components/Accordion/Accordion.svelte.d.ts CHANGED
@@ -4,6 +4,11 @@ interface Props {
4
4
  children?: Snippet;
5
5
  open?: boolean;
6
6
  icon?: Component;
7
+ headerColor?: string;
8
+ textColor?: string;
9
+ openedColor?: string;
10
+ borderColor?: string;
11
+ topBorderColor?: string;
7
12
  }
8
13
  declare const Accordion: Component<Props, {}, "open">;
9
14
  type Accordion = ReturnType<typeof Accordion>;
package/dist/components/ColorPicker/ColorPicker.svelte CHANGED
@@ -28,6 +28,34 @@
28
28
  change: string;
29
29
  }>();
30
30
 
31
+ let buttonElement: HTMLButtonElement;
32
+ let pickerTop = $state(0);
33
+ let pickerLeft = $state(0);
34
+
35
+ function updatePosition() {
36
+ if (buttonElement) {
37
+ const rect = buttonElement.getBoundingClientRect();
38
+ pickerLeft = rect.right;
39
+ pickerTop = rect.bottom;
40
+ }
41
+ }
42
+
43
+ $effect(() => {
44
+ if (show) {
45
+ updatePosition();
46
+ window.addEventListener('scroll', updatePosition, true);
47
+ window.addEventListener('resize', updatePosition);
48
+ } else {
49
+ window.removeEventListener('scroll', updatePosition, true);
50
+ window.removeEventListener('resize', updatePosition);
51
+ }
52
+
53
+ return () => {
54
+ window.removeEventListener('scroll', updatePosition, true);
55
+ window.removeEventListener('resize', updatePosition);
56
+ };
57
+ });
58
+
31
59
  function handleInput() {
32
60
  dispatch('input', color);
33
61
  oninput?.(color);
@@ -42,6 +70,7 @@
42
70
 
43
71
  <span class="color-picker">
44
72
  <button
73
+ bind:this={buttonElement}
45
74
  style:width="{size}px"
46
75
  style:height="{size}px"
47
76
  style:background-color={color}
@@ -58,6 +87,8 @@
58
87
  {#if show}
59
88
  <div
60
89
  class="color-picker-wrap"
90
+ style:top="{pickerTop}px"
91
+ style:left="{pickerLeft}px"
61
92
  use:clickOutside={{
62
93
  callback: () => handleClose()
63
94
  }}
@@ -82,9 +113,7 @@
82
113
  border: 1px solid var(--border);
83
114
  }
84
115
  div {
85
- position: absolute;
86
- left: 0;
87
- top: 100%;
116
+ position: fixed;
88
117
  width: 0;
89
118
  z-index: 1000;
90
119
  }
package/dist/index.css CHANGED
@@ -50,6 +50,13 @@ a {
50
50
  margin: auto;
51
51
  }
52
52
 
53
+ .hds-container-max {
54
+ width: 1400px;
55
+ max-width: 100%;
56
+ padding: 0 15px;
57
+ margin: auto;
58
+ }
59
+
53
60
  .hds-link {
54
61
  color: var(--link);
55
62
  text-decoration: underline;
package/dist/marketing/Container/Container.svelte CHANGED
@@ -2,18 +2,22 @@
2
2
  interface Props {
3
3
  as?: string;
4
4
  children?: import('svelte').Snippet;
5
+ max?: boolean;
5
6
  }
6
7
 
7
- let { as = 'div', children }: Props = $props();
8
+ let { as = 'div', children, max = false
9
+ }: Props = $props();
10
+
11
+ let width= max ? '1400px' : '1000px';
8
12
  </script>
9
13
 
10
- <svelte:element this={as} class="container">
14
+ <svelte:element this={as} class="container" style:width={width}>
11
15
  {@render children?.()}
12
16
  </svelte:element>
13
17
 
14
18
  <style>
15
19
  .container {
16
- width: 1000px;
20
+ /*width: 1000px;*/
17
21
  max-width: 100%;
18
22
  padding: 0 15px;
19
23
  margin: auto;
package/dist/marketing/Container/Container.svelte.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  interface Props {
2
2
  as?: string;
3
3
  children?: import('svelte').Snippet;
4
+ max?: boolean;
4
5
  }
5
6
  declare const Container: import("svelte").Component<Props, {}, "">;
6
7
  type Container = ReturnType<typeof Container>;
package/dist/marketing/Footer/Footer.svelte CHANGED
@@ -24,6 +24,7 @@
24
24
  center?: import('svelte').Snippet;
25
25
  affiliate?: boolean;
26
26
  recordVisit?: boolean;
27
+ max?: boolean;
27
28
  }
28
29
 
29
30
  let {
@@ -31,7 +32,8 @@
31
32
  social = $bindable({} as Record<string, string | null>),
32
33
  center,
33
34
  affiliate = true,
34
- recordVisit = true
35
+ recordVisit = true,
36
+ max = false,
35
37
  }: Props = $props();
36
38
 
37
39
  social = {
@@ -51,7 +53,7 @@
51
53
  </script>
52
54
 
53
55
  <footer>
54
- <Container>
56
+ <Container {max}>
55
57
  <div class="footer-top">
56
58
  <div class="footer-top-left">
57
59
  {#if email}
package/dist/marketing/Footer/Footer.svelte.d.ts CHANGED
@@ -5,6 +5,7 @@ interface Props {
5
5
  center?: import('svelte').Snippet;
6
6
  affiliate?: boolean;
7
7
  recordVisit?: boolean;
8
+ max?: boolean;
8
9
  }
9
10
  declare const Footer: import("svelte").Component<Props, {}, "social">;
10
11
  type Footer = ReturnType<typeof Footer>;
package/dist/marketing/Header/Header.svelte CHANGED
@@ -13,6 +13,7 @@
13
13
  darkToggle?: boolean;
14
14
  center?: import('svelte').Snippet;
15
15
  end?: import('svelte').Snippet;
16
+ max?: boolean;
16
17
  }
17
18
 
18
19
  let {
@@ -22,12 +23,13 @@
22
23
  subName = undefined,
23
24
  darkToggle = true,
24
25
  center,
25
- end
26
+ end,
27
+ max = false,
26
28
  }: Props = $props();
27
29
  </script>
28
30
 
29
31
  <header>
30
- <Container as="nav">
32
+ <Container as="nav" {max}>
31
33
  <div class="nav-start">
32
34
  <a class="nav-brand" {href}>
33
35
  <img src={logo} alt="Hyvor Logo" width="30" height="30" />
package/dist/marketing/Header/Header.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ interface Props {
6
6
  darkToggle?: boolean;
7
7
  center?: import('svelte').Snippet;
8
8
  end?: import('svelte').Snippet;
9
+ max?: boolean;
9
10
  }
10
11
  declare const Header: import("svelte").Component<Props, {}, "">;
11
12
  type Header = ReturnType<typeof Header>;
package/package.json CHANGED
@@ -60,5 +60,5 @@
60
60
  "publishConfig": {
61
61
  "access": "public"
62
62
  },
63
- "version": "1.1.21-beta.1"
63
+ "version": "1.1.21"
64
64
  }