sm-click-library-ui 0.0.2 → 0.0.4

package/dist/sm-click-library-ui.es.js

@@ -1,19 +1,181 @@
-import { openBlock as r, createElementBlock as s } from "vue";
-const a = (e, t) => {
-  const c = e.__vccOpts || e;
-  for (const [n, o] of t)
-    c[n] = o;
-  return c;
-}, _ = {}, l = { class: "primary_select" };
-function i(e, t) {
-  return r(), s("div", l, "Select Vue");
+import { getCurrentScope as P, onScopeDispose as V, unref as j, watch as I, ref as S, computed as b, openBlock as v, createElementBlock as g, createElementVNode as f, toDisplayString as x, normalizeClass as C, renderSlot as L, createCommentVNode as y } from "vue";
+function F(t) {
+  return P() ? (V(t), !0) : !1;
 }
-const p = /* @__PURE__ */ a(_, [["render", i], ["__scopeId", "data-v-d769b643"]]);
-function d(e) {
-  e.component("primarySelect", p);
+function E(t) {
+  return typeof t == "function" ? t() : j(t);
 }
-const m = { install: d };
+const O = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const W = Object.prototype.toString, B = (t) => W.call(t) === "[object Object]", _ = () => {
+}, H = /* @__PURE__ */ M();
+function M() {
+  var t, i;
+  return O && ((t = window == null ? void 0 : window.navigator) == null ? void 0 : t.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((i = window == null ? void 0 : window.navigator) == null ? void 0 : i.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window == null ? void 0 : window.navigator.userAgent));
+}
+function w(t) {
+  var i;
+  const s = E(t);
+  return (i = s == null ? void 0 : s.$el) != null ? i : s;
+}
+const z = O ? window : void 0;
+function k(...t) {
+  let i, s, n, r;
+  if (typeof t[0] == "string" || Array.isArray(t[0]) ? ([s, n, r] = t, i = z) : [i, s, n, r] = t, !i)
+    return _;
+  Array.isArray(s) || (s = [s]), Array.isArray(n) || (n = [n]);
+  const a = [], p = () => {
+    a.forEach((c) => c()), a.length = 0;
+  }, d = (c, u, o, e) => (c.addEventListener(u, o, e), () => c.removeEventListener(u, o, e)), m = I(
+    () => [w(i), E(r)],
+    ([c, u]) => {
+      if (p(), !c)
+        return;
+      const o = B(u) ? { ...u } : u;
+      a.push(
+        ...s.flatMap((e) => n.map((l) => d(c, e, l, o)))
+      );
+    },
+    { immediate: !0, flush: "post" }
+  ), h = () => {
+    m(), p();
+  };
+  return F(h), h;
+}
+let A = !1;
+function D(t, i, s = {}) {
+  const { window: n = z, ignore: r = [], capture: a = !0, detectIframe: p = !1 } = s;
+  if (!n)
+    return _;
+  H && !A && (A = !0, Array.from(n.document.body.children).forEach((o) => o.addEventListener("click", _)), n.document.documentElement.addEventListener("click", _));
+  let d = !0;
+  const m = (o) => r.some((e) => {
+    if (typeof e == "string")
+      return Array.from(n.document.querySelectorAll(e)).some((l) => l === o.target || o.composedPath().includes(l));
+    {
+      const l = w(e);
+      return l && (o.target === l || o.composedPath().includes(l));
+    }
+  }), c = [
+    k(n, "click", (o) => {
+      const e = w(t);
+      if (!(!e || e === o.target || o.composedPath().includes(e))) {
+        if (o.detail === 0 && (d = !m(o)), !d) {
+          d = !0;
+          return;
+        }
+        i(o);
+      }
+    }, { passive: !0, capture: a }),
+    k(n, "pointerdown", (o) => {
+      const e = w(t);
+      d = !m(o) && !!(e && !o.composedPath().includes(e));
+    }, { passive: !0 }),
+    p && k(n, "blur", (o) => {
+      setTimeout(() => {
+        var e;
+        const l = w(t);
+        ((e = n.document.activeElement) == null ? void 0 : e.tagName) === "IFRAME" && !(l != null && l.contains(n.document.activeElement)) && i(o);
+      }, 0);
+    })
+  ].filter(Boolean);
+  return () => c.forEach((o) => o());
+}
+const N = {
+  key: 0,
+  class: "line-clamp-2 uppercase text-xs truncate text-white"
+}, T = {
+  key: 1,
+  class: "line-clamp-2 uppercase text-xs truncate text-white"
+}, G = /* @__PURE__ */ f("path", {
+  "fill-rule": "evenodd",
+  d: "M18.4 10.3A2 2 0 0 0 17 7H7a2 2 0 0 0-1.5 3.3l4.9 5.9a2 2 0 0 0 3 0l5-6Z",
+  "clip-rule": "evenodd"
+}, null, -1), $ = [
+  G
+], q = {
+  key: 0,
+  class: "select_widget"
+}, R = { key: 0 }, Z = {
+  key: 1,
+  class: "space-y-2"
+}, J = /* @__PURE__ */ f("p", { class: "line-clamp-2 uppercase text-xs truncate" }, "Vertical", -1), K = [
+  J
+], Q = /* @__PURE__ */ f("p", { class: "line-clamp-2 uppercase text-xs truncate" }, "Horizontal", -1), U = [
+  Q
+], X = {
+  __name: "primary_select",
+  props: {
+    titleFreeSlot: {
+      type: String,
+      default: "Free Slot"
+    },
+    selectConfig: {
+      type: Object,
+      default: () => ({
+        chartsConfig: !1,
+        freeSlot: !1
+      })
+    }
+  },
+  emits: ["closeSelect"],
+  setup(t, { emit: i }) {
+    const s = t, n = i, r = S(!1), a = S("Horizontal"), p = S(null), d = b(() => s.selectConfig.length > 0), m = b(
+      () => s.selectConfig.some((e) => e.chartsConfig)
+    ), h = b(
+      () => s.selectConfig.some((e) => e.freeSlot)
+    ), c = () => {
+      r.value = !r.value;
+    }, u = (e) => {
+      r.value = !1, a.value = e === "horizontal" ? "Vertical" : "Horizontal", n("closeSelect", e);
+    };
+    return D(p, () => {
+      r.value && (r.value = !1);
+    }), (e, l) => d.value ? (v(), g("div", {
+      key: 0,
+      ref_key: "target",
+      ref: p,
+      class: "relative w-full"
+    }, [
+      f("button", {
+        onClick: c,
+        class: "bg-base-100 z-10 truncate flex items-center justify-between gap-6 p-2 rounded-md lg:mt-0 w-full shadow-md shadow-base-300"
+      }, [
+        f("div", null, [
+          m.value ? (v(), g("p", N, x(a.value), 1)) : (v(), g("p", T, x(t.titleFreeSlot), 1))
+        ]),
+        f("div", null, [
+          (v(), g("svg", {
+            class: C([r.value ? "rotate-180 transition-transform ease-in-out" : "", "w-3 h-3 text-white"]),
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "currentColor",
+            viewBox: "0 0 24 24"
+          }, $, 2))
+        ])
+      ]),
+      r.value ? (v(), g("section", q, [
+        h.value ? (v(), g("div", R, [
+          L(e.$slots, "free-slot")
+        ])) : y("", !0),
+        m.value ? (v(), g("div", Z, [
+          f("button", {
+            class: C([a.value === "Vertical" ? "bg-green-500" : "", "btn_select_widget"]),
+            onClick: l[0] || (l[0] = () => u("horizontal"))
+          }, K, 2),
+          f("button", {
+            class: C([a.value !== "Vertical" ? "bg-green-500" : "", "btn_select_widget"]),
+            onClick: l[1] || (l[1] = () => u("vertical"))
+          }, U, 2)
+        ])) : y("", !0)
+      ])) : y("", !0)
+    ], 512)) : y("", !0);
+  }
+};
+function Y(t) {
+  t.component("primarySelect", X);
+}
+const te = { install: Y };
 export {
-  m as default,
-  p as primarySelect
+  te as default,
+  X as primarySelect
 };

package/dist/sm-click-library-ui.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e["sm-click-library-ui"]={},e.Vue))})(this,function(e,t){"use strict";const r=(n,i)=>{const o=n.__vccOpts||n;for(const[a,_]of i)o[a]=_;return o},s={},l={class:"primary_select"};function u(n,i){return t.openBlock(),t.createElementBlock("div",l,"Select Vue")}const c=r(s,[["render",u],["__scopeId","data-v-d769b643"]]);function d(n){n.component("primarySelect",c)}const f={install:d};e.default=f,e.primarySelect=c,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f["sm-click-library-ui"]={},f.Vue))})(this,function(f,e){"use strict";function V(o){return e.getCurrentScope()?(e.onScopeDispose(o),!0):!1}function k(o){return typeof o=="function"?o():e.unref(o)}const S=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const x=Object.prototype.toString,B=o=>x.call(o)==="[object Object]",w=()=>{},A=N();function N(){var o,r;return S&&((o=window==null?void 0:window.navigator)==null?void 0:o.userAgent)&&(/iP(?:ad|hone|od)/.test(window.navigator.userAgent)||((r=window==null?void 0:window.navigator)==null?void 0:r.maxTouchPoints)>2&&/iPad|Macintosh/.test(window==null?void 0:window.navigator.userAgent))}function g(o){var r;const s=k(o);return(r=s==null?void 0:s.$el)!=null?r:s}const E=S?window:void 0;function y(...o){let r,s,l,c;if(typeof o[0]=="string"||Array.isArray(o[0])?([s,l,c]=o,r=E):[r,s,l,c]=o,!r)return w;Array.isArray(s)||(s=[s]),Array.isArray(l)||(l=[l]);const d=[],m=()=>{d.forEach(a=>a()),d.length=0},p=(a,u,n,t)=>(a.addEventListener(u,n,t),()=>a.removeEventListener(u,n,t)),h=e.watch(()=>[g(r),k(c)],([a,u])=>{if(m(),!a)return;const n=B(u)?{...u}:u;d.push(...s.flatMap(t=>l.map(i=>p(a,t,i,n))))},{immediate:!0,flush:"post"}),_=()=>{h(),m()};return V(_),_}let b=!1;function O(o,r,s={}){const{window:l=E,ignore:c=[],capture:d=!0,detectIframe:m=!1}=s;if(!l)return w;A&&!b&&(b=!0,Array.from(l.document.body.children).forEach(n=>n.addEventListener("click",w)),l.document.documentElement.addEventListener("click",w));let p=!0;const h=n=>c.some(t=>{if(typeof t=="string")return Array.from(l.document.querySelectorAll(t)).some(i=>i===n.target||n.composedPath().includes(i));{const i=g(t);return i&&(n.target===i||n.composedPath().includes(i))}}),a=[y(l,"click",n=>{const t=g(o);if(!(!t||t===n.target||n.composedPath().includes(t))){if(n.detail===0&&(p=!h(n)),!p){p=!0;return}r(n)}},{passive:!0,capture:d}),y(l,"pointerdown",n=>{const t=g(o);p=!h(n)&&!!(t&&!n.composedPath().includes(t))},{passive:!0}),m&&y(l,"blur",n=>{setTimeout(()=>{var t;const i=g(o);((t=l.document.activeElement)==null?void 0:t.tagName)==="IFRAME"&&!(i!=null&&i.contains(l.document.activeElement))&&r(n)},0)})].filter(Boolean);return()=>a.forEach(n=>n())}const v={key:0,class:"line-clamp-2 uppercase text-xs truncate text-white"},z={key:1,class:"line-clamp-2 uppercase text-xs truncate text-white"},j=[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M18.4 10.3A2 2 0 0 0 17 7H7a2 2 0 0 0-1.5 3.3l4.9 5.9a2 2 0 0 0 3 0l5-6Z","clip-rule":"evenodd"},null,-1)],P={key:0,class:"select_widget"},I={key:0},L={key:1,class:"space-y-2"},M=[e.createElementVNode("p",{class:"line-clamp-2 uppercase text-xs truncate"},"Vertical",-1)],T=[e.createElementVNode("p",{class:"line-clamp-2 uppercase text-xs truncate"},"Horizontal",-1)],C={__name:"primary_select",props:{titleFreeSlot:{type:String,default:"Free Slot"},selectConfig:{type:Object,default:()=>({chartsConfig:!1,freeSlot:!1})}},emits:["closeSelect"],setup(o,{emit:r}){const s=o,l=r,c=e.ref(!1),d=e.ref("Horizontal"),m=e.ref(null),p=e.computed(()=>s.selectConfig.length>0),h=e.computed(()=>s.selectConfig.some(t=>t.chartsConfig)),_=e.computed(()=>s.selectConfig.some(t=>t.freeSlot)),a=()=>{c.value=!c.value},u=t=>{c.value=!1,d.value=t==="horizontal"?"Vertical":"Horizontal",l("closeSelect",t)};return O(m,()=>{c.value&&(c.value=!1)}),(t,i)=>p.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"target",ref:m,class:"relative w-full"},[e.createElementVNode("button",{onClick:a,class:"bg-base-100 z-10 truncate flex items-center justify-between gap-6 p-2 rounded-md lg:mt-0 w-full shadow-md shadow-base-300"},[e.createElementVNode("div",null,[h.value?(e.openBlock(),e.createElementBlock("p",v,e.toDisplayString(d.value),1)):(e.openBlock(),e.createElementBlock("p",z,e.toDisplayString(o.titleFreeSlot),1))]),e.createElementVNode("div",null,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass([c.value?"rotate-180 transition-transform ease-in-out":"","w-3 h-3 text-white"]),xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 24 24"},j,2))])]),c.value?(e.openBlock(),e.createElementBlock("section",P,[_.value?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(t.$slots,"free-slot")])):e.createCommentVNode("",!0),h.value?(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("button",{class:e.normalizeClass([d.value==="Vertical"?"bg-green-500":"","btn_select_widget"]),onClick:i[0]||(i[0]=()=>u("horizontal"))},M,2),e.createElementVNode("button",{class:e.normalizeClass([d.value!=="Vertical"?"bg-green-500":"","btn_select_widget"]),onClick:i[1]||(i[1]=()=>u("vertical"))},T,2)])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],512)):e.createCommentVNode("",!0)}};function F(o){o.component("primarySelect",C)}const W={install:F};f.default=W,f.primarySelect=C,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/tailwind.css

@@ -394,113 +394,6 @@ video {
   display: none;
 }
 
-:root,
-[data-theme] {
-  background-color: var(--fallback-b1,oklch(var(--b1)/1));
-  color: var(--fallback-bc,oklch(var(--bc)/1));
-}
-
-@supports not (color: oklch(0% 0 0)) {
-
-  :root {
-    color-scheme: light;
-    --fallback-p: #491eff;
-    --fallback-pc: #d4dbff;
-    --fallback-s: #ff41c7;
-    --fallback-sc: #fff9fc;
-    --fallback-a: #00cfbd;
-    --fallback-ac: #00100d;
-    --fallback-n: #2b3440;
-    --fallback-nc: #d7dde4;
-    --fallback-b1: #ffffff;
-    --fallback-b2: #e5e6e6;
-    --fallback-b3: #e5e6e6;
-    --fallback-bc: #1f2937;
-    --fallback-in: #00b3f0;
-    --fallback-inc: #000000;
-    --fallback-su: #00ca92;
-    --fallback-suc: #000000;
-    --fallback-wa: #ffc22d;
-    --fallback-wac: #000000;
-    --fallback-er: #ff6f70;
-    --fallback-erc: #000000;
-  }
-
-  @media (prefers-color-scheme: dark) {
-
-    :root {
-      color-scheme: dark;
-      --fallback-p: #7582ff;
-      --fallback-pc: #050617;
-      --fallback-s: #ff71cf;
-      --fallback-sc: #190211;
-      --fallback-a: #00c7b5;
-      --fallback-ac: #000e0c;
-      --fallback-n: #2a323c;
-      --fallback-nc: #a6adbb;
-      --fallback-b1: #1d232a;
-      --fallback-b2: #191e24;
-      --fallback-b3: #15191e;
-      --fallback-bc: #a6adbb;
-      --fallback-in: #00b3f0;
-      --fallback-inc: #000000;
-      --fallback-su: #00ca92;
-      --fallback-suc: #000000;
-      --fallback-wa: #ffc22d;
-      --fallback-wac: #000000;
-      --fallback-er: #ff6f70;
-      --fallback-erc: #000000;
-    }
-  }
-}
-
-html {
-  -webkit-tap-highlight-color: transparent;
-}
-
-* {
-  scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent;
-}
-
-*:hover {
-  scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent;
-}
-
-:root {
-  color: #fff;
-  --bc: 89.74% 0.007939 239.46702;
-  --pc: 14.4549% 0.038401 149.57933;
-  --sc: 91.2253% 0.042841 265.315522;
-  --ac: 14.4721% 0.035244 350.048739;
-  --nc: 88.9107% 0.007489 257.280836;
-  --inc: 13.6911% 0.029612 237.25135;
-  --suc: 15.6904% 0.026506 181.911977;
-  --wac: 16.6486% 0.027912 82.95003;
-  --erc: 14.3572% 0.034051 13.11834;
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-focus-scale: 0.95;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-  --p: 72.2746% 0.192007 149.57933;
-  primary_alt: #00799e;
-  --s: 56.1263% 0.214204 265.315522;
-  text_current: #fff;
-  --a: 72.3603% 0.176218 350.048739;
-  --n: 44.5533% 0.037447 257.280836;
-  --b1: 48.7002% 0.039694 239.46702;
-  --b2: 31.6361% 0.024663 236.769088;
-  --b3: 21.5339% 0.018707 235.125143;
-  --in: 68.4553% 0.148062 237.25135;
-  --su: 78.452% 0.132529 181.911977;
-  --wa: 83.2428% 0.139558 82.95003;
-  --er: 71.7858% 0.170255 13.11834;
-}
-
 * {
   scrollbar-color: initial;
   scrollbar-width: initial;
@@ -613,124 +506,385 @@ html {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
-.link {
-  cursor: pointer;
-  text-decoration-line: underline;
+.absolute {
+  position: absolute;
+}
+.relative {
+  position: relative;
+}
+.z-10 {
+  z-index: 10;
+}
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.block {
+  display: block;
+}
+.flex {
+  display: flex;
+}
+.h-3 {
+  height: 0.75rem;
+}
+.h-5 {
+  height: 1.25rem;
+}
+.h-full {
+  height: 100%;
+}
+.h-screen {
+  height: 100vh;
+}
+.min-h-full {
+  min-height: 100%;
+}
+.w-3 {
+  width: 0.75rem;
+}
+.w-5 {
+  width: 1.25rem;
+}
+.w-full {
+  width: 100%;
+}
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-6 {
+  gap: 1.5rem;
+}
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rounded-md {
+  border-radius: 0.375rem;
+}
+.bg-base-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 99 116 / var(--tw-bg-opacity));
+}
+.bg-base-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 27 33 / var(--tw-bg-opacity));
+}
+.bg-blue-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+}
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+.p-2 {
+  padding: 0.5rem;
+}
+.p-3 {
+  padding: 0.75rem;
+}
+.p-4 {
+  padding: 1rem;
+}
+.text-center {
+  text-align: center;
+}
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.uppercase {
+  text-transform: uppercase;
+}
+.text-current {
+  color: currentColor;
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.opacity-70 {
+  opacity: 0.7;
+}
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.shadow-base-300 {
+  --tw-shadow-color: #111B21;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-@keyframes button-pop {
 
-  0% {
-    transform: scale(var(--btn-focus-scale, 0.98));
-  }
+/* primary_select CSS  */
+.btn_select_widget {
+  width: 100%;
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow-color: #111B21;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.btn_select_widget:hover {
+  background-color: rgb(38 52 61 / 0.6);
+}
 
-  40% {
-    transform: scale(1.02);
-  }
+.select_widget {
+  position: absolute;
+  z-index: 30;
+  margin-top: 0.5rem;
+  width: 100%;
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 99 116 / var(--tw-bg-opacity));
+  padding: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow-color: #111B21;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+/* simple_modal CSS  */
+.modal_head {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 50;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  --tw-backdrop-blur: blur(2px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+    animation: 0.1s ease-out 0s 1 modalani;
+    transition: opacity 0.2s ease-in-out;
+}
 
-  100% {
-    transform: scale(1);
-  }
+.my_modal {
+    animation: 0.1s ease-out 0s 1 modalani;
+    transition: opacity 0.2s ease-in-out;
 }
-@keyframes checkmark {
 
-  0% {
-    background-position-y: 5px;
-  }
+.modal-overlay {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  opacity: 0.2;
+}
 
-  50% {
-    background-position-y: -2px;
-  }
+.modal_responsive {
+  position: fixed;
+  inset: 0px;
+  z-index: 10;
+  overflow-y: auto;
+}
 
-  100% {
-    background-position-y: 0;
-  }
+.modal_responsive::-webkit-scrollbar-track {
+  background-color: var(--scrollbar-track);
+  border-radius: var(--scrollbar-track-radius);
 }
-.link:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+
+.modal_responsive::-webkit-scrollbar-track:hover {
+  background-color: var(--scrollbar-track-hover, var(--scrollbar-track));
 }
-.link:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
+
+.modal_responsive::-webkit-scrollbar-track:active {
+  background-color: var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)));
 }
-@keyframes modal-pop {
 
-  0% {
-    opacity: 0;
-  }
+.modal_responsive::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: var(--scrollbar-thumb-radius);
 }
-@keyframes progress-loading {
 
-  50% {
-    background-position-x: -115%;
-  }
+.modal_responsive::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover, var(--scrollbar-thumb));
 }
-@keyframes radiomark {
 
-  0% {
-    box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset,
-      0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset;
-  }
+.modal_responsive::-webkit-scrollbar-thumb:active {
+  background-color: var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)));
+}
 
-  50% {
-    box-shadow: 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset,
-      0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset;
-  }
+.modal_responsive::-webkit-scrollbar-corner {
+  background-color: var(--scrollbar-corner);
+  border-radius: var(--scrollbar-corner-radius);
+}
 
-  100% {
-    box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
-      0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset;
-  }
+.modal_responsive::-webkit-scrollbar-corner:hover {
+  background-color: var(--scrollbar-corner-hover, var(--scrollbar-corner));
 }
-@keyframes rating-pop {
 
-  0% {
-    transform: translateY(-0.125em);
-  }
+.modal_responsive::-webkit-scrollbar-corner:active {
+  background-color: var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)));
+}
 
-  40% {
-    transform: translateY(-0.125em);
-  }
+.modal_responsive {
+  scrollbar-width: auto;
+  scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
+}
 
-  100% {
-    transform: translateY(0);
-  }
+.modal_responsive::-webkit-scrollbar {
+  display: block;
+  width: var(--scrollbar-width, 16px);
+  height: var(--scrollbar-height, 16px);
 }
-@keyframes skeleton {
 
-  from {
-    background-position: 150%;
-  }
+.modal_responsive {
+  --scrollbar-track: #d1d5db;
+  --scrollbar-thumb: #111827;
+}
 
-  to {
-    background-position: -50%;
-  }
+.modal_size {
+  z-index: 50;
+  width: 100%;
+  border-radius: 1rem;
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow-color: #000;
+  --tw-shadow: var(--tw-shadow-colored);
 }
-@keyframes toast-pop {
 
-  0% {
-    transform: scale(0.9);
-    opacity: 0;
+@media (min-width: 864px) {
+
+  .modal_size {
+    width: 50%;
   }
+}
 
-  100% {
-    transform: scale(1);
-    opacity: 1;
+@media (min-width: 1512px) {
+
+  .modal_size {
+    width: 33.333333%;
   }
 }
-.flex {
+
+.modal_background {
+  position: relative;
+  border-radius: 1rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 52 61 / var(--tw-bg-opacity));
+  --tw-backdrop-blur: blur(16px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.modal_tittle {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  --tw-border-opacity: 1;
+  border-color: rgb(17 27 33 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 27 33 / var(--tw-bg-opacity));
+  padding: 0.75rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-transform: uppercase;
+  color: currentColor;
 }
-.h-screen {
-  height: 100vh;
+
+.modal_end_button {
+  display: flex;
+  justify-content: flex-end;
 }
-.items-center {
-  align-items: center;
+
+.modal_end_button > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.justify-center {
-  justify-content: center;
+
+.modal_end_button {
+  border-bottom-right-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+  --tw-border-opacity: 1;
+  border-color: rgb(17 27 33 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 27 33 / var(--tw-bg-opacity));
+  padding: 0.5rem;
 }
-.bg-base-300 {
+
+.modal_close_button {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.5rem;
+  background-color: rgb(38 52 61 / 0.4);
+  padding: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  transition-duration: 300ms;
+}
+
+.modal_close_button:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   --tw-bg-opacity: 1;
-  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+  background-color: rgb(75 99 116 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+@media (min-width: 640px) {
+
+  .sm\:p-0 {
+    padding: 0px;
+  }
+}
+
+@media (min-width: 1280px) {
+
+  .lg\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .lg\:w-2\/6 {
+    width: 33.333333%;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sm-click-library-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "dist/sm-click-library-ui.es.js",
   "module": "dist/sm-click-library-ui.umd.js",
   "private": false,

package/dist/style.css

@@ -1 +0,0 @@
-.primary_select[data-v-d769b643]{--tw-bg-opacity: 1;background-color:var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));padding:.5rem}