npm - @hokkiai/discord-emoji-selector - Versions diffs - 1.0.9 → 1.1.0 - Mend

@hokkiai/discord-emoji-selector 1.0.9 → 1.1.0

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 (4) hide show

package/dist/index.cjs CHANGED Viewed

@@ -17216,7 +17216,7 @@ function SkinSelector({ id }) {
           opacity: open ? 1 : 0,
           pointerEvents: open ? "all" : "none"
         },
-        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",
+        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",
         children: skins.filter((a) => a !== skins[selectedTone]).map((skin, i) => {
           return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "div",
@@ -17523,7 +17523,7 @@ function EmojiSelector({
   const id = Math.random().toString(36).substring(2, 15);
   const picker = (0, import_react7.useRef)(null);
   console.log(id);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "HOKKIEMOJIPICKER-emojiContainer", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ref: picker,
@@ -17641,7 +17641,7 @@ function EmojiSelector({
         ] })
       ]
     }
-  );
+  ) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.css CHANGED Viewed

@@ -1,242 +1,245 @@
 /* src/styles.css */
-.absolute {
+.HOKKIEMOJIPICKER-emojiContainer .absolute {
   position: absolute;
 }
-.relative {
+.HOKKIEMOJIPICKER-emojiContainer .relative {
   position: relative;
 }
-.sticky {
+.HOKKIEMOJIPICKER-emojiContainer .sticky {
   position: sticky;
 }
-.top-0 {
+.HOKKIEMOJIPICKER-emojiContainer .top-0 {
   top: calc(var(--spacing) * 0);
 }
-.top-full {
+.HOKKIEMOJIPICKER-emojiContainer .top-full {
   top: 100%;
 }
-.left-0 {
+.HOKKIEMOJIPICKER-emojiContainer .left-0 {
   left: calc(var(--spacing) * 0);
 }
-.z-50 {
+.HOKKIEMOJIPICKER-emojiContainer .-left-2 {
+  left: calc(var(--spacing) * -2);
+}
+.HOKKIEMOJIPICKER-emojiContainer .z-50 {
   z-index: 50;
 }
-.my-2 {
+.HOKKIEMOJIPICKER-emojiContainer .my-2 {
   margin-block: calc(var(--spacing) * 2);
 }
-.mt-auto {
+.HOKKIEMOJIPICKER-emojiContainer .mt-auto {
   margin-top: auto;
 }
-.flex {
+.HOKKIEMOJIPICKER-emojiContainer .flex {
   display: flex;
 }
-.size-5 {
+.HOKKIEMOJIPICKER-emojiContainer .size-5 {
   width: calc(var(--spacing) * 5);
   height: calc(var(--spacing) * 5);
 }
-.size-12\.5 {
+.HOKKIEMOJIPICKER-emojiContainer .size-12\.5 {
   width: calc(var(--spacing) * 12.5);
   height: calc(var(--spacing) * 12.5);
 }
-.h-0 {
+.HOKKIEMOJIPICKER-emojiContainer .h-0 {
   height: calc(var(--spacing) * 0);
 }
-.h-1\.5 {
+.HOKKIEMOJIPICKER-emojiContainer .h-1\.5 {
   height: calc(var(--spacing) * 1.5);
 }
-.h-24 {
+.HOKKIEMOJIPICKER-emojiContainer .h-24 {
   height: calc(var(--spacing) * 24);
 }
-.h-full {
+.HOKKIEMOJIPICKER-emojiContainer .h-full {
   height: 100%;
 }
-.w-full {
+.HOKKIEMOJIPICKER-emojiContainer .w-full {
   width: 100%;
 }
-.translate-y-2 {
+.HOKKIEMOJIPICKER-emojiContainer .translate-y-2 {
   --tw-translate-y: calc(var(--spacing) * 2);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
-.cursor-pointer {
+.HOKKIEMOJIPICKER-emojiContainer .cursor-pointer {
   cursor: pointer;
 }
-.flex-col {
+.HOKKIEMOJIPICKER-emojiContainer .flex-col {
   flex-direction: column;
 }
-.flex-wrap {
+.HOKKIEMOJIPICKER-emojiContainer .flex-wrap {
   flex-wrap: wrap;
 }
-.items-center {
+.HOKKIEMOJIPICKER-emojiContainer .items-center {
   align-items: center;
 }
-.items-start {
+.HOKKIEMOJIPICKER-emojiContainer .items-start {
   align-items: flex-start;
 }
-.justify-center {
+.HOKKIEMOJIPICKER-emojiContainer .justify-center {
   justify-content: center;
 }
-.gap-1 {
+.HOKKIEMOJIPICKER-emojiContainer .gap-1 {
   gap: calc(var(--spacing) * 1);
 }
-.gap-1\.5 {
+.HOKKIEMOJIPICKER-emojiContainer .gap-1\.5 {
   gap: calc(var(--spacing) * 1.5);
 }
-.gap-2 {
+.HOKKIEMOJIPICKER-emojiContainer .gap-2 {
   gap: calc(var(--spacing) * 2);
 }
-.gap-4 {
+.HOKKIEMOJIPICKER-emojiContainer .gap-4 {
   gap: calc(var(--spacing) * 4);
 }
-.gap-y-0\.5 {
+.HOKKIEMOJIPICKER-emojiContainer .gap-y-0\.5 {
   row-gap: calc(var(--spacing) * 0.5);
 }
-.justify-self-start {
+.HOKKIEMOJIPICKER-emojiContainer .justify-self-start {
   justify-self: flex-start;
 }
-.overflow-hidden {
+.HOKKIEMOJIPICKER-emojiContainer .overflow-hidden {
   overflow: hidden;
 }
-.overflow-y-scroll {
+.HOKKIEMOJIPICKER-emojiContainer .overflow-y-scroll {
   overflow-y: scroll;
 }
-.rounded-md {
+.HOKKIEMOJIPICKER-emojiContainer .rounded-md {
   border-radius: var(--radius-md);
 }
-.rounded-sm {
+.HOKKIEMOJIPICKER-emojiContainer .rounded-sm {
   border-radius: var(--radius-sm);
 }
-.rounded-xl {
+.HOKKIEMOJIPICKER-emojiContainer .rounded-xl {
   border-radius: var(--radius-xl);
 }
-.border-1 {
+.HOKKIEMOJIPICKER-emojiContainer .border-1 {
   border-style: var(--tw-border-style);
   border-width: 1px;
 }
-.border-t-1 {
+.HOKKIEMOJIPICKER-emojiContainer .border-t-1 {
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
 }
-.border-b-1 {
+.HOKKIEMOJIPICKER-emojiContainer .border-b-1 {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 1px;
 }
-.border-\[\#323337\] {
+.HOKKIEMOJIPICKER-emojiContainer .border-\[\#323337\] {
   border-color: #323337;
 }
-.border-\[\#363639\] {
+.HOKKIEMOJIPICKER-emojiContainer .border-\[\#363639\] {
   border-color: #363639;
 }
-.border-\[\#363639\]\/10 {
+.HOKKIEMOJIPICKER-emojiContainer .border-\[\#363639\]\/10 {
   border-color: color-mix(in oklab, #363639 10%, transparent);
 }
-.bg-\[\#070709\] {
+.HOKKIEMOJIPICKER-emojiContainer .bg-\[\#070709\] {
   background-color: #070709;
 }
-.bg-\[\#121214\] {
+.HOKKIEMOJIPICKER-emojiContainer .bg-\[\#121214\] {
   background-color: #121214;
 }
-.bg-\[\#131416\] {
+.HOKKIEMOJIPICKER-emojiContainer .bg-\[\#131416\] {
   background-color: #131416;
 }
-.bg-neutral-900 {
+.HOKKIEMOJIPICKER-emojiContainer .bg-neutral-900 {
   background-color: var(--color-neutral-900);
 }
-.p-1 {
+.HOKKIEMOJIPICKER-emojiContainer .p-1 {
   padding: calc(var(--spacing) * 1);
 }
-.p-2 {
+.HOKKIEMOJIPICKER-emojiContainer .p-2 {
   padding: calc(var(--spacing) * 2);
 }
-.p-3 {
+.HOKKIEMOJIPICKER-emojiContainer .p-3 {
   padding: calc(var(--spacing) * 3);
 }
-.px-2 {
+.HOKKIEMOJIPICKER-emojiContainer .px-2 {
   padding-inline: calc(var(--spacing) * 2);
 }
-.px-3 {
+.HOKKIEMOJIPICKER-emojiContainer .px-3 {
   padding-inline: calc(var(--spacing) * 3);
 }
-.px-4 {
+.HOKKIEMOJIPICKER-emojiContainer .px-4 {
   padding-inline: calc(var(--spacing) * 4);
 }
-.py-3 {
+.HOKKIEMOJIPICKER-emojiContainer .py-3 {
   padding-block: calc(var(--spacing) * 3);
 }
-.pt-2 {
+.HOKKIEMOJIPICKER-emojiContainer .pt-2 {
   padding-top: calc(var(--spacing) * 2);
 }
-.pb-2 {
+.HOKKIEMOJIPICKER-emojiContainer .pb-2 {
   padding-bottom: calc(var(--spacing) * 2);
 }
-.text-4xl {
+.HOKKIEMOJIPICKER-emojiContainer .text-4xl {
   font-size: var(--text-4xl);
   line-height: var(--tw-leading, var(--text-4xl--line-height));
 }
-.text-lg {
+.HOKKIEMOJIPICKER-emojiContainer .text-lg {
   font-size: var(--text-lg);
   line-height: var(--tw-leading, var(--text-lg--line-height));
 }
-.font-semibold {
+.HOKKIEMOJIPICKER-emojiContainer .font-semibold {
   --tw-font-weight: var(--font-weight-semibold);
   font-weight: var(--font-weight-semibold);
 }
-.text-ellipsis {
+.HOKKIEMOJIPICKER-emojiContainer .text-ellipsis {
   text-overflow: ellipsis;
 }
-.whitespace-nowrap {
+.HOKKIEMOJIPICKER-emojiContainer .whitespace-nowrap {
   white-space: nowrap;
 }
-.text-white {
+.HOKKIEMOJIPICKER-emojiContainer .text-white {
   color: var(--color-white);
 }
-.opacity-50 {
+.HOKKIEMOJIPICKER-emojiContainer .opacity-50 {
   opacity: 50%;
 }
-.opacity-75 {
+.HOKKIEMOJIPICKER-emojiContainer .opacity-75 {
   opacity: 75%;
 }
-.\!outline-0 {
+.HOKKIEMOJIPICKER-emojiContainer .\!outline-0 {
   outline-style: var(--tw-outline-style) !important;
   outline-width: 0px !important;
 }
-.transition-all {
+.HOKKIEMOJIPICKER-emojiContainer .transition-all {
   transition-property: all;
   transition-timing-function: var( --tw-ease, var(--default-transition-timing-function) );
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
-.\*\:size-4\.5 {
+.HOKKIEMOJIPICKER-emojiContainer .\*\:size-4\.5 {
   :is(& > *) {
     width: calc(var(--spacing) * 4.5);
     height: calc(var(--spacing) * 4.5);
   }
 }
-.\*\:size-7 {
+.HOKKIEMOJIPICKER-emojiContainer .\*\:size-7 {
   :is(& > *) {
     width: calc(var(--spacing) * 7);
     height: calc(var(--spacing) * 7);
   }
 }
-.\*\:size-9 {
+.HOKKIEMOJIPICKER-emojiContainer .\*\:size-9 {
   :is(& > *) {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
 }
-.\*\:max-w-9 {
+.HOKKIEMOJIPICKER-emojiContainer .\*\:max-w-9 {
   :is(& > *) {
     max-width: calc(var(--spacing) * 9);
   }
 }
-.\*\:min-w-7 {
+.HOKKIEMOJIPICKER-emojiContainer .\*\:min-w-7 {
   :is(& > *) {
     min-width: calc(var(--spacing) * 7);
   }
 }
-.\*\:min-w-9 {
+.HOKKIEMOJIPICKER-emojiContainer .\*\:min-w-9 {
   :is(& > *) {
     min-width: calc(var(--spacing) * 9);
   }
 }
-.hover\:bg-white\/5 {
+.HOKKIEMOJIPICKER-emojiContainer .hover\:bg-white\/5 {
   &:hover {
     @media (hover: hover) {
       background-color: color-mix(in srgb, #fff 5%, transparent);
@@ -246,7 +249,7 @@
     }
   }
 }
-.hover\:bg-white\/15 {
+.HOKKIEMOJIPICKER-emojiContainer .hover\:bg-white\/15 {
   &:hover {
     @media (hover: hover) {
       background-color: color-mix(in srgb, #fff 15%, transparent);
@@ -256,20 +259,35 @@
     }
   }
 }
-.hover\:opacity-100 {
+.HOKKIEMOJIPICKER-emojiContainer .hover\:opacity-100 {
   &:hover {
     @media (hover: hover) {
       opacity: 100%;
     }
   }
 }
-.data-\[focused\=true\]\:border-\[\#3687E9\] {
+.HOKKIEMOJIPICKER-emojiContainer .data-\[focused\=true\]\:border-\[\#3687E9\] {
   &[data-focused=true] {
     border-color: #3687e9;
   }
 }
-.data-\[open\=false\]\:-rotate-90 {
+.HOKKIEMOJIPICKER-emojiContainer .data-\[open\=false\]\:-rotate-90 {
   &[data-open=false] {
     rotate: calc(90deg * -1);
   }
 }
+.HOKKIEMOJIPICKER-emojiContainer * {
+  --spacing: 0.25rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: calc(2.5 / 2.25);
+  --font-weight-semibold: 600;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-xl: 0.75rem;
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --default-font-family: var(--font-sans);
+  --default-mono-font-family: var(--font-mono);
+}

package/dist/index.js CHANGED Viewed

@@ -17182,7 +17182,7 @@ function SkinSelector({ id }) {
           opacity: open ? 1 : 0,
           pointerEvents: open ? "all" : "none"
         },
-        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",
+        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",
         children: skins.filter((a) => a !== skins[selectedTone]).map((skin, i) => {
           return /* @__PURE__ */ jsx6(
             "div",
@@ -17489,7 +17489,7 @@ function EmojiSelector({
   const id = Math.random().toString(36).substring(2, 15);
   const picker = useRef2(null);
   console.log(id);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx7("div", { className: "HOKKIEMOJIPICKER-emojiContainer", children: /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: picker,
@@ -17607,7 +17607,7 @@ function EmojiSelector({
         ] })
       ]
     }
-  );
+  ) });
 }
 export {
   EmojiSelector as default,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hokkiai/discord-emoji-selector",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "A lightweight & powerful discord-style emoji picker",
   "type": "module",
   "main": "dist/index.cjs",