@hokkiai/discord-emoji-selector 1.0.5 → 1.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.
package/dist/index.cjs CHANGED
@@ -17168,7 +17168,7 @@ function SidebarCategory({
17168
17168
  {
17169
17169
  onClick: () => {
17170
17170
  const elem = picker.current;
17171
- if (searchValue.length > 0) {
17171
+ if ((searchValue || "").length > 0) {
17172
17172
  window["emojipicker-" + id].setSearchValue("");
17173
17173
  setTimeout(() => {
17174
17174
  elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").scrollTop = scrollTop;
@@ -17216,7 +17216,7 @@ function SkinSelector({ id }) {
17216
17216
  opacity: open ? 1 : 0,
17217
17217
  pointerEvents: open ? "all" : "none"
17218
17218
  },
17219
- className: "absolute flex transition-all flex-col cursor-pointer top-full translate-y-2 overflow-hidden -left-2 rounded-sm border-1 bg-neutral-900",
17219
+ className: "absolute flex transition-all flex-col cursor-pointer top-full translate-y-2 overflow-hidden left-0 rounded-sm border-1 bg-neutral-900",
17220
17220
  children: skins.filter((a) => a !== skins[selectedTone]).map((skin, i) => {
17221
17221
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
17222
17222
  "div",
package/dist/index.css ADDED
@@ -0,0 +1,527 @@
1
+ /* src/styles.css */
2
+ @layer properties;
3
+ @layer theme, base, components, utilities;
4
+ @layer theme {
5
+ :root,
6
+ :host {
7
+ --font-sans:
8
+ ui-sans-serif,
9
+ system-ui,
10
+ sans-serif,
11
+ "Apple Color Emoji",
12
+ "Segoe UI Emoji",
13
+ "Segoe UI Symbol",
14
+ "Noto Color Emoji";
15
+ --font-mono:
16
+ ui-monospace,
17
+ SFMono-Regular,
18
+ Menlo,
19
+ Monaco,
20
+ Consolas,
21
+ "Liberation Mono",
22
+ "Courier New",
23
+ monospace;
24
+ --color-neutral-900: oklch(20.5% 0 0);
25
+ --color-white: #fff;
26
+ --spacing: 0.25rem;
27
+ --text-lg: 1.125rem;
28
+ --text-lg--line-height: calc(1.75 / 1.125);
29
+ --text-4xl: 2.25rem;
30
+ --text-4xl--line-height: calc(2.5 / 2.25);
31
+ --font-weight-semibold: 600;
32
+ --radius-sm: 0.25rem;
33
+ --radius-md: 0.375rem;
34
+ --radius-xl: 0.75rem;
35
+ --default-transition-duration: 150ms;
36
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
37
+ --default-font-family: var(--font-sans);
38
+ --default-mono-font-family: var(--font-mono);
39
+ }
40
+ }
41
+ @layer base {
42
+ *,
43
+ ::after,
44
+ ::before,
45
+ ::backdrop,
46
+ ::file-selector-button {
47
+ box-sizing: border-box;
48
+ margin: 0;
49
+ padding: 0;
50
+ border: 0 solid;
51
+ }
52
+ html,
53
+ :host {
54
+ line-height: 1.5;
55
+ -webkit-text-size-adjust: 100%;
56
+ tab-size: 4;
57
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
58
+ font-feature-settings: var(--default-font-feature-settings, normal);
59
+ font-variation-settings: var(--default-font-variation-settings, normal);
60
+ -webkit-tap-highlight-color: transparent;
61
+ }
62
+ hr {
63
+ height: 0;
64
+ color: inherit;
65
+ border-top-width: 1px;
66
+ }
67
+ abbr:where([title]) {
68
+ -webkit-text-decoration: underline dotted;
69
+ text-decoration: underline dotted;
70
+ }
71
+ h1,
72
+ h2,
73
+ h3,
74
+ h4,
75
+ h5,
76
+ h6 {
77
+ font-size: inherit;
78
+ font-weight: inherit;
79
+ }
80
+ a {
81
+ color: inherit;
82
+ -webkit-text-decoration: inherit;
83
+ text-decoration: inherit;
84
+ }
85
+ b,
86
+ strong {
87
+ font-weight: bolder;
88
+ }
89
+ code,
90
+ kbd,
91
+ samp,
92
+ pre {
93
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
94
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
95
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
96
+ font-size: 1em;
97
+ }
98
+ small {
99
+ font-size: 80%;
100
+ }
101
+ sub,
102
+ sup {
103
+ font-size: 75%;
104
+ line-height: 0;
105
+ position: relative;
106
+ vertical-align: baseline;
107
+ }
108
+ sub {
109
+ bottom: -0.25em;
110
+ }
111
+ sup {
112
+ top: -0.5em;
113
+ }
114
+ table {
115
+ text-indent: 0;
116
+ border-color: inherit;
117
+ border-collapse: collapse;
118
+ }
119
+ :-moz-focusring {
120
+ outline: auto;
121
+ }
122
+ progress {
123
+ vertical-align: baseline;
124
+ }
125
+ summary {
126
+ display: list-item;
127
+ }
128
+ ol,
129
+ ul,
130
+ menu {
131
+ list-style: none;
132
+ }
133
+ img,
134
+ svg,
135
+ video,
136
+ canvas,
137
+ audio,
138
+ iframe,
139
+ embed,
140
+ object {
141
+ display: block;
142
+ vertical-align: middle;
143
+ }
144
+ img,
145
+ video {
146
+ max-width: 100%;
147
+ height: auto;
148
+ }
149
+ button,
150
+ input,
151
+ select,
152
+ optgroup,
153
+ textarea,
154
+ ::file-selector-button {
155
+ font: inherit;
156
+ font-feature-settings: inherit;
157
+ font-variation-settings: inherit;
158
+ letter-spacing: inherit;
159
+ color: inherit;
160
+ border-radius: 0;
161
+ background-color: transparent;
162
+ opacity: 1;
163
+ }
164
+ :where(select:is([multiple], [size])) optgroup {
165
+ font-weight: bolder;
166
+ }
167
+ :where(select:is([multiple], [size])) optgroup option {
168
+ padding-inline-start: 20px;
169
+ }
170
+ ::file-selector-button {
171
+ margin-inline-end: 4px;
172
+ }
173
+ ::placeholder {
174
+ opacity: 1;
175
+ }
176
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
177
+ ::placeholder {
178
+ color: currentcolor;
179
+ @supports (color: color-mix(in lab, red, red)) {
180
+ color: color-mix(in oklab, currentcolor 50%, transparent);
181
+ }
182
+ }
183
+ }
184
+ textarea {
185
+ resize: vertical;
186
+ }
187
+ ::-webkit-search-decoration {
188
+ -webkit-appearance: none;
189
+ }
190
+ ::-webkit-date-and-time-value {
191
+ min-height: 1lh;
192
+ text-align: inherit;
193
+ }
194
+ ::-webkit-datetime-edit {
195
+ display: inline-flex;
196
+ }
197
+ ::-webkit-datetime-edit-fields-wrapper {
198
+ padding: 0;
199
+ }
200
+ ::-webkit-datetime-edit,
201
+ ::-webkit-datetime-edit-year-field,
202
+ ::-webkit-datetime-edit-month-field,
203
+ ::-webkit-datetime-edit-day-field,
204
+ ::-webkit-datetime-edit-hour-field,
205
+ ::-webkit-datetime-edit-minute-field,
206
+ ::-webkit-datetime-edit-second-field,
207
+ ::-webkit-datetime-edit-millisecond-field,
208
+ ::-webkit-datetime-edit-meridiem-field {
209
+ padding-block: 0;
210
+ }
211
+ ::-webkit-calendar-picker-indicator {
212
+ line-height: 1;
213
+ }
214
+ :-moz-ui-invalid {
215
+ box-shadow: none;
216
+ }
217
+ button,
218
+ input:where([type=button], [type=reset], [type=submit]),
219
+ ::file-selector-button {
220
+ appearance: button;
221
+ }
222
+ ::-webkit-inner-spin-button,
223
+ ::-webkit-outer-spin-button {
224
+ height: auto;
225
+ }
226
+ [hidden]:where(:not([hidden=until-found])) {
227
+ display: none !important;
228
+ }
229
+ }
230
+ @layer utilities {
231
+ .absolute {
232
+ position: absolute;
233
+ }
234
+ .relative {
235
+ position: relative;
236
+ }
237
+ .sticky {
238
+ position: sticky;
239
+ }
240
+ .top-0 {
241
+ top: calc(var(--spacing) * 0);
242
+ }
243
+ .top-full {
244
+ top: 100%;
245
+ }
246
+ .left-0 {
247
+ left: calc(var(--spacing) * 0);
248
+ }
249
+ .z-50 {
250
+ z-index: 50;
251
+ }
252
+ .my-2 {
253
+ margin-block: calc(var(--spacing) * 2);
254
+ }
255
+ .mt-auto {
256
+ margin-top: auto;
257
+ }
258
+ .flex {
259
+ display: flex;
260
+ }
261
+ .size-5 {
262
+ width: calc(var(--spacing) * 5);
263
+ height: calc(var(--spacing) * 5);
264
+ }
265
+ .size-12\.5 {
266
+ width: calc(var(--spacing) * 12.5);
267
+ height: calc(var(--spacing) * 12.5);
268
+ }
269
+ .h-0 {
270
+ height: calc(var(--spacing) * 0);
271
+ }
272
+ .h-1\.5 {
273
+ height: calc(var(--spacing) * 1.5);
274
+ }
275
+ .h-24 {
276
+ height: calc(var(--spacing) * 24);
277
+ }
278
+ .h-full {
279
+ height: 100%;
280
+ }
281
+ .w-full {
282
+ width: 100%;
283
+ }
284
+ .translate-y-2 {
285
+ --tw-translate-y: calc(var(--spacing) * 2);
286
+ translate: var(--tw-translate-x) var(--tw-translate-y);
287
+ }
288
+ .cursor-pointer {
289
+ cursor: pointer;
290
+ }
291
+ .flex-col {
292
+ flex-direction: column;
293
+ }
294
+ .flex-wrap {
295
+ flex-wrap: wrap;
296
+ }
297
+ .items-center {
298
+ align-items: center;
299
+ }
300
+ .items-start {
301
+ align-items: flex-start;
302
+ }
303
+ .justify-center {
304
+ justify-content: center;
305
+ }
306
+ .gap-1 {
307
+ gap: calc(var(--spacing) * 1);
308
+ }
309
+ .gap-1\.5 {
310
+ gap: calc(var(--spacing) * 1.5);
311
+ }
312
+ .gap-2 {
313
+ gap: calc(var(--spacing) * 2);
314
+ }
315
+ .gap-4 {
316
+ gap: calc(var(--spacing) * 4);
317
+ }
318
+ .gap-y-0\.5 {
319
+ row-gap: calc(var(--spacing) * 0.5);
320
+ }
321
+ .justify-self-start {
322
+ justify-self: flex-start;
323
+ }
324
+ .overflow-hidden {
325
+ overflow: hidden;
326
+ }
327
+ .overflow-y-scroll {
328
+ overflow-y: scroll;
329
+ }
330
+ .rounded-md {
331
+ border-radius: var(--radius-md);
332
+ }
333
+ .rounded-sm {
334
+ border-radius: var(--radius-sm);
335
+ }
336
+ .rounded-xl {
337
+ border-radius: var(--radius-xl);
338
+ }
339
+ .border-1 {
340
+ border-style: var(--tw-border-style);
341
+ border-width: 1px;
342
+ }
343
+ .border-t-1 {
344
+ border-top-style: var(--tw-border-style);
345
+ border-top-width: 1px;
346
+ }
347
+ .border-b-1 {
348
+ border-bottom-style: var(--tw-border-style);
349
+ border-bottom-width: 1px;
350
+ }
351
+ .border-\[\#323337\] {
352
+ border-color: #323337;
353
+ }
354
+ .border-\[\#363639\] {
355
+ border-color: #363639;
356
+ }
357
+ .border-\[\#363639\]\/10 {
358
+ border-color: color-mix(in oklab, #363639 10%, transparent);
359
+ }
360
+ .bg-\[\#070709\] {
361
+ background-color: #070709;
362
+ }
363
+ .bg-\[\#121214\] {
364
+ background-color: #121214;
365
+ }
366
+ .bg-\[\#131416\] {
367
+ background-color: #131416;
368
+ }
369
+ .bg-neutral-900 {
370
+ background-color: var(--color-neutral-900);
371
+ }
372
+ .p-1 {
373
+ padding: calc(var(--spacing) * 1);
374
+ }
375
+ .p-2 {
376
+ padding: calc(var(--spacing) * 2);
377
+ }
378
+ .p-3 {
379
+ padding: calc(var(--spacing) * 3);
380
+ }
381
+ .px-2 {
382
+ padding-inline: calc(var(--spacing) * 2);
383
+ }
384
+ .px-3 {
385
+ padding-inline: calc(var(--spacing) * 3);
386
+ }
387
+ .px-4 {
388
+ padding-inline: calc(var(--spacing) * 4);
389
+ }
390
+ .py-3 {
391
+ padding-block: calc(var(--spacing) * 3);
392
+ }
393
+ .pt-2 {
394
+ padding-top: calc(var(--spacing) * 2);
395
+ }
396
+ .pb-2 {
397
+ padding-bottom: calc(var(--spacing) * 2);
398
+ }
399
+ .text-4xl {
400
+ font-size: var(--text-4xl);
401
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
402
+ }
403
+ .text-lg {
404
+ font-size: var(--text-lg);
405
+ line-height: var(--tw-leading, var(--text-lg--line-height));
406
+ }
407
+ .font-semibold {
408
+ --tw-font-weight: var(--font-weight-semibold);
409
+ font-weight: var(--font-weight-semibold);
410
+ }
411
+ .text-ellipsis {
412
+ text-overflow: ellipsis;
413
+ }
414
+ .whitespace-nowrap {
415
+ white-space: nowrap;
416
+ }
417
+ .text-white {
418
+ color: var(--color-white);
419
+ }
420
+ .opacity-50 {
421
+ opacity: 50%;
422
+ }
423
+ .opacity-75 {
424
+ opacity: 75%;
425
+ }
426
+ .\!outline-0 {
427
+ outline-style: var(--tw-outline-style) !important;
428
+ outline-width: 0px !important;
429
+ }
430
+ .transition-all {
431
+ transition-property: all;
432
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
433
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
434
+ }
435
+ .\*\:size-4\.5 {
436
+ :is(& > *) {
437
+ width: calc(var(--spacing) * 4.5);
438
+ height: calc(var(--spacing) * 4.5);
439
+ }
440
+ }
441
+ .\*\:size-7 {
442
+ :is(& > *) {
443
+ width: calc(var(--spacing) * 7);
444
+ height: calc(var(--spacing) * 7);
445
+ }
446
+ }
447
+ .\*\:size-9 {
448
+ :is(& > *) {
449
+ width: calc(var(--spacing) * 9);
450
+ height: calc(var(--spacing) * 9);
451
+ }
452
+ }
453
+ .\*\:max-w-9 {
454
+ :is(& > *) {
455
+ max-width: calc(var(--spacing) * 9);
456
+ }
457
+ }
458
+ .\*\:min-w-7 {
459
+ :is(& > *) {
460
+ min-width: calc(var(--spacing) * 7);
461
+ }
462
+ }
463
+ .\*\:min-w-9 {
464
+ :is(& > *) {
465
+ min-width: calc(var(--spacing) * 9);
466
+ }
467
+ }
468
+ .hover\:bg-white\/5 {
469
+ &:hover {
470
+ @media (hover: hover) {
471
+ background-color: color-mix(in srgb, #fff 5%, transparent);
472
+ @supports (color: color-mix(in lab, red, red)) {
473
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
474
+ }
475
+ }
476
+ }
477
+ }
478
+ .hover\:bg-white\/15 {
479
+ &:hover {
480
+ @media (hover: hover) {
481
+ background-color: color-mix(in srgb, #fff 15%, transparent);
482
+ @supports (color: color-mix(in lab, red, red)) {
483
+ background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
484
+ }
485
+ }
486
+ }
487
+ }
488
+ .hover\:opacity-100 {
489
+ &:hover {
490
+ @media (hover: hover) {
491
+ opacity: 100%;
492
+ }
493
+ }
494
+ }
495
+ .data-\[focused\=true\]\:border-\[\#3687E9\] {
496
+ &[data-focused=true] {
497
+ border-color: #3687E9;
498
+ }
499
+ }
500
+ .data-\[open\=false\]\:-rotate-90 {
501
+ &[data-open=false] {
502
+ rotate: calc(90deg * -1);
503
+ }
504
+ }
505
+ }
506
+ @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
507
+ @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
508
+ @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
509
+ @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
510
+ @property --tw-font-weight { syntax: "*"; inherits: false; }
511
+ @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
512
+ @layer properties {
513
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
514
+ *,
515
+ ::before,
516
+ ::after,
517
+ ::backdrop {
518
+ --tw-translate-x: 0;
519
+ --tw-translate-y: 0;
520
+ --tw-translate-z: 0;
521
+ --tw-border-style: solid;
522
+ --tw-font-weight: initial;
523
+ --tw-outline-style: solid;
524
+ }
525
+ }
526
+ }
527
+ /*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
package/dist/index.js CHANGED
@@ -17134,7 +17134,7 @@ function SidebarCategory({
17134
17134
  {
17135
17135
  onClick: () => {
17136
17136
  const elem = picker.current;
17137
- if (searchValue.length > 0) {
17137
+ if ((searchValue || "").length > 0) {
17138
17138
  window["emojipicker-" + id].setSearchValue("");
17139
17139
  setTimeout(() => {
17140
17140
  elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").scrollTop = scrollTop;
@@ -17182,7 +17182,7 @@ function SkinSelector({ id }) {
17182
17182
  opacity: open ? 1 : 0,
17183
17183
  pointerEvents: open ? "all" : "none"
17184
17184
  },
17185
- className: "absolute flex transition-all flex-col cursor-pointer top-full translate-y-2 overflow-hidden -left-2 rounded-sm border-1 bg-neutral-900",
17185
+ className: "absolute flex transition-all flex-col cursor-pointer top-full translate-y-2 overflow-hidden left-0 rounded-sm border-1 bg-neutral-900",
17186
17186
  children: skins.filter((a) => a !== skins[selectedTone]).map((skin, i) => {
17187
17187
  return /* @__PURE__ */ jsx6(
17188
17188
  "div",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hokkiai/discord-emoji-selector",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "description": "A lightweight & powerful discord-style emoji picker",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -11,7 +11,8 @@
11
11
  ".": {
12
12
  "import": "./dist/index.js",
13
13
  "require": "./dist/index.cjs"
14
- }
14
+ },
15
+ "./fix.css": "./dist/index.css"
15
16
  },
16
17
  "files": [
17
18
  "dist"