hanbiro-react16-sdk 1.0.11 → 1.0.13
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/README.md +59 -0
- package/dist/components/ChatAIDraft/index.d.ts +6 -2
- package/dist/components/index.d.ts +1 -1
- package/dist/hanbiro-react16-sdk.es.js +3168 -2087
- package/dist/hanbiro-react16-sdk.style.css +187 -3
- package/dist/hanbiro-react16-sdk.umd.js +4950 -109
- package/package.json +6 -3
|
@@ -1,5 +1,189 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* hanbiro-react16-sdk v1.0.
|
|
3
|
-
* Build Date: 2026-03-
|
|
2
|
+
* hanbiro-react16-sdk v1.0.12
|
|
3
|
+
* Build Date: 2026-03-31
|
|
4
4
|
*/
|
|
5
|
-
@charset "UTF-8";
|
|
5
|
+
@charset "UTF-8";
|
|
6
|
+
button.icon-button {
|
|
7
|
+
background: transparent;
|
|
8
|
+
border: none;
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
border-radius: 999px;
|
|
14
|
+
transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
|
|
15
|
+
color: var(--grey-main);
|
|
16
|
+
}
|
|
17
|
+
button.icon-button:hover {
|
|
18
|
+
background-color: rgb(244, 244, 244);
|
|
19
|
+
}
|
|
20
|
+
button.icon-button:active {
|
|
21
|
+
background-color: rgb(244, 244, 244);
|
|
22
|
+
}
|
|
23
|
+
button.icon-button[disabled] {
|
|
24
|
+
cursor: not-allowed;
|
|
25
|
+
color: var(--grey-lighter);
|
|
26
|
+
}
|
|
27
|
+
button.icon-button.primary, button.icon-button[color=primary] {
|
|
28
|
+
color: var(--primary-main);
|
|
29
|
+
}
|
|
30
|
+
button.icon-button.primary:hover, button.icon-button[color=primary]:hover {
|
|
31
|
+
background-color: var(--primary-lighter);
|
|
32
|
+
}
|
|
33
|
+
button.icon-button.primary:active, button.icon-button[color=primary]:active {
|
|
34
|
+
background-color: var(--primary-light);
|
|
35
|
+
}
|
|
36
|
+
button.icon-button.primary[disabled], button.icon-button[color=primary][disabled] {
|
|
37
|
+
cursor: not-allowed;
|
|
38
|
+
color: var(--primary-lighter);
|
|
39
|
+
background: transparent;
|
|
40
|
+
}
|
|
41
|
+
button.icon-button {
|
|
42
|
+
width: 36px;
|
|
43
|
+
height: 36px;
|
|
44
|
+
}
|
|
45
|
+
button.icon-button svg {
|
|
46
|
+
width: 18px;
|
|
47
|
+
height: 18px;
|
|
48
|
+
}
|
|
49
|
+
button.icon-button.small {
|
|
50
|
+
width: 32px;
|
|
51
|
+
height: 32px;
|
|
52
|
+
}
|
|
53
|
+
button.icon-button.small svg {
|
|
54
|
+
width: 16px;
|
|
55
|
+
height: 16px;
|
|
56
|
+
}
|
|
57
|
+
button.icon-button.large {
|
|
58
|
+
width: 40px;
|
|
59
|
+
height: 40px;
|
|
60
|
+
}
|
|
61
|
+
button.icon-button.large svg {
|
|
62
|
+
width: 20px;
|
|
63
|
+
height: 20px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.circular-container {
|
|
67
|
+
display: inline-block;
|
|
68
|
+
animation: rotate 1.4s linear infinite; /* Xoay cả khối SVG */
|
|
69
|
+
}
|
|
70
|
+
.circular-container .circular-svg {
|
|
71
|
+
display: block;
|
|
72
|
+
}
|
|
73
|
+
.circular-container .circular-circle {
|
|
74
|
+
stroke-linecap: round; /* Bo tròn hai đầu thanh loading */
|
|
75
|
+
animation: dash 1.4s ease-in-out infinite; /* Hiệu ứng co giãn thanh dash */
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Animation xoay vòng tròn */
|
|
79
|
+
@keyframes rotate {
|
|
80
|
+
0% {
|
|
81
|
+
transform: rotate(0deg);
|
|
82
|
+
}
|
|
83
|
+
100% {
|
|
84
|
+
transform: rotate(360deg);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
/* Animation co giãn thanh stroke (giống MUI) */
|
|
88
|
+
@keyframes dash {
|
|
89
|
+
0% {
|
|
90
|
+
stroke-dasharray: 1px, 200px;
|
|
91
|
+
stroke-dashoffset: 0;
|
|
92
|
+
}
|
|
93
|
+
50% {
|
|
94
|
+
stroke-dasharray: 100px, 200px;
|
|
95
|
+
stroke-dashoffset: -15px;
|
|
96
|
+
}
|
|
97
|
+
100% {
|
|
98
|
+
stroke-dasharray: 100px, 200px;
|
|
99
|
+
stroke-dashoffset: -125px;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
.hb-tooltip-wrapper {
|
|
103
|
+
position: relative;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.hb-tooltip {
|
|
107
|
+
pointer-events: none;
|
|
108
|
+
opacity: 0;
|
|
109
|
+
visibility: hidden;
|
|
110
|
+
transition: opacity 0.15s ease, visibility 0.15s ease;
|
|
111
|
+
max-width: 300px;
|
|
112
|
+
word-wrap: break-word;
|
|
113
|
+
}
|
|
114
|
+
.hb-tooltip--visible {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
visibility: visible;
|
|
117
|
+
}
|
|
118
|
+
.hb-tooltip__content {
|
|
119
|
+
background: var(--grey-darker);
|
|
120
|
+
color: #fff;
|
|
121
|
+
font-size: 13px;
|
|
122
|
+
border-radius: 4px;
|
|
123
|
+
text-align: center;
|
|
124
|
+
padding: 4px 8px;
|
|
125
|
+
line-height: 1.4;
|
|
126
|
+
white-space: pre-line;
|
|
127
|
+
}
|
|
128
|
+
.hb-tooltip__arrow {
|
|
129
|
+
position: absolute;
|
|
130
|
+
width: 0;
|
|
131
|
+
height: 0;
|
|
132
|
+
}
|
|
133
|
+
.hb-tooltip--top .hb-tooltip__arrow {
|
|
134
|
+
bottom: -6px;
|
|
135
|
+
left: 50%;
|
|
136
|
+
transform: translateX(-50%);
|
|
137
|
+
border-left: 6px solid transparent;
|
|
138
|
+
border-right: 6px solid transparent;
|
|
139
|
+
border-top: 6px solid var(--grey-darker);
|
|
140
|
+
}
|
|
141
|
+
.hb-tooltip--bottom .hb-tooltip__arrow {
|
|
142
|
+
top: -6px;
|
|
143
|
+
left: 50%;
|
|
144
|
+
transform: translateX(-50%);
|
|
145
|
+
border-left: 6px solid transparent;
|
|
146
|
+
border-right: 6px solid transparent;
|
|
147
|
+
border-bottom: 6px solid var(--grey-darker);
|
|
148
|
+
}
|
|
149
|
+
.hb-tooltip--left .hb-tooltip__arrow {
|
|
150
|
+
right: -6px;
|
|
151
|
+
top: 50%;
|
|
152
|
+
transform: translateY(-50%);
|
|
153
|
+
border-top: 6px solid transparent;
|
|
154
|
+
border-bottom: 6px solid transparent;
|
|
155
|
+
border-left: 6px solid var(--grey-darker);
|
|
156
|
+
}
|
|
157
|
+
.hb-tooltip--right .hb-tooltip__arrow {
|
|
158
|
+
left: -6px;
|
|
159
|
+
top: 50%;
|
|
160
|
+
transform: translateY(-50%);
|
|
161
|
+
border-top: 6px solid transparent;
|
|
162
|
+
border-bottom: 6px solid transparent;
|
|
163
|
+
border-right: 6px solid var(--grey-darker);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
p {
|
|
167
|
+
font-size: 13px;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
:root {
|
|
171
|
+
--primary-lighter: #d9edfd;
|
|
172
|
+
--primary-light: #42a5f5;
|
|
173
|
+
--primary-main: #0080fe;
|
|
174
|
+
--primary-dark: #064476;
|
|
175
|
+
--primary-darker: #03223b;
|
|
176
|
+
--primary-contrasttext: #fff;
|
|
177
|
+
--grey-lighter: #bebebe;
|
|
178
|
+
--grey-light: #a9a9a9;
|
|
179
|
+
--grey-main: #7f7f7f;
|
|
180
|
+
--grey-dark: #6a6a6a;
|
|
181
|
+
--grey-darker: #3f3f3f;
|
|
182
|
+
--text-primary: #001737;
|
|
183
|
+
--text-secondary: #8392a5;
|
|
184
|
+
--background-softGrey: #f4f4f4;
|
|
185
|
+
--background-lightGrey: #f9f9f9;
|
|
186
|
+
--border-light: #f0f0f0;
|
|
187
|
+
--border-main: #d9d9d9;
|
|
188
|
+
--border-dark: #a1a1a1;
|
|
189
|
+
}
|