@bagelink/vue 0.0.384 → 0.0.390

package/dist/components/Badge.vue.d.ts

@@ -1,9 +1,9 @@
 import type { MaterialIcons } from '..';
 type Props = {
-    color?: 'green' | 'red' | 'blue' | 'light' | 'gray';
-    size?: string;
-    text: string;
-    icon?: MaterialIcons;
+    'color'?: 'green' | 'red' | 'blue' | 'light' | 'gray';
+    'size'?: string;
+    'text': string;
+    'icon'?: MaterialIcons;
     'icon.end'?: MaterialIcons;
 };
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;

package/dist/components/Badge.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.vue.d.ts","sourceRoot":"","sources":["../../src/components/Badge.vue"],"names":[],"mappings":"AAOA;AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAInD,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,UAAU,CAAC,EAAE,aAAa,CAAA;CAC3B,CAAA;;AAmFD,wBAMG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
+{"version":3,"file":"Badge.vue.d.ts","sourceRoot":"","sources":["../../src/components/Badge.vue"],"names":[],"mappings":"AAOA;AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAInD,KAAK,KAAK,GAAG;IACZ,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC3B,CAAC;;AAmFF,wBAMG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/components/form/inputs/RadioPillsInput.vue.d.ts

@@ -1,19 +1,16 @@
-interface RadioOption {
-    optioId: string;
+type Option = string | number | Record<string, any> | {
     label: string;
-    value: any;
-}
+    value: string | number;
+};
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    options?: RadioOption[] | undefined;
-    stringOptions: string[];
+    options?: Option[] | undefined;
     modelValue: any;
     id?: string | undefined;
     label?: string | undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    options?: RadioOption[] | undefined;
-    stringOptions: string[];
+    options?: Option[] | undefined;
     modelValue: any;
     id?: string | undefined;
     label?: string | undefined;

package/dist/components/form/inputs/RadioPillsInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioPillsInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RadioPillsInput.vue"],"names":[],"mappings":"AAoBA;AAMA,UAAU,WAAW;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;CACX;;;mBA+Je,MAAM,EAAE;gBACX,GAAG;;;;;;;mBADA,MAAM,EAAE;gBACX,GAAG;;;;;;AARhB,wBAaG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
+{"version":3,"file":"RadioPillsInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RadioPillsInput.vue"],"names":[],"mappings":"AAmBA;AAMA,KAAK,MAAM,GACR,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;;;gBAqKhC,GAAG;;;;;;;gBAAH,GAAG;;;;;;AAPhB,wBAYG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/index.cjs

@@ -5963,7 +5963,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-10743b06"]]);
+const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-561f7a72"]]);
 const _hoisted_1$r = ["src"];
 const _hoisted_2$n = ["src", "autoplay", "muted", "loop", "controls"];
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
@@ -18360,7 +18360,6 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
-    stringOptions: {},
     modelValue: {},
     id: {},
     label: {}
@@ -18368,12 +18367,21 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const emits = __emit;
+    const getLabel = (option2) => {
+      if (typeof option2 === "string")
+        return option2;
+      if (typeof option2 === "number")
+        return `${option2}`;
+      return option2.label;
+    };
+    const getValue = (option2) => {
+      if (typeof option2 === "string")
+        return option2;
+      if (typeof option2 === "number")
+        return option2;
+      return option2.value;
+    };
     const props2 = __props;
-    const cumputedOptions = vue.computed(() => props2.options || props2.stringOptions.map((v2) => ({
-      optioId: v2,
-      label: v2,
-      value: v2
-    })));
     let selectedValue = vue.ref("");
     function handleSelect(e) {
       var _a2;
@@ -18398,20 +18406,22 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
         vue.createElementVNode("label", _hoisted_2$d, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", _hoisted_3$a, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(cumputedOptions.value, ({ optioId, label, value }, index2) => {
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option2, index2) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "radio-pill",
               key: index2
             }, [
               vue.createElementVNode("input", {
                 type: "radio",
-                id: optioId,
+                id: getValue(option2),
                 name: _ctx.id,
-                value,
-                checked: vue.unref(selectedValue) === value,
+                value: getValue(option2),
+                checked: vue.unref(selectedValue) === getValue(option2),
                 onChange: handleSelect
               }, null, 40, _hoisted_4$6),
-              vue.createElementVNode("label", { for: optioId }, vue.toDisplayString(label), 9, _hoisted_5$5)
+              vue.createElementVNode("label", {
+                for: getValue(option2)
+              }, vue.toDisplayString(getLabel(option2)), 9, _hoisted_5$5)
             ]);
           }), 128))
         ])
@@ -18419,7 +18429,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-e47ae8b5"]]);
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-ee7dd382"]]);
 const _hoisted_1$f = { class: "bagel-input" };
 const _hoisted_2$c = {
   key: 0,

package/dist/index.mjs

@@ -5961,7 +5961,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-10743b06"]]);
+const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-561f7a72"]]);
 const _hoisted_1$r = ["src"];
 const _hoisted_2$n = ["src", "autoplay", "muted", "loop", "controls"];
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
@@ -18358,7 +18358,6 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
-    stringOptions: {},
     modelValue: {},
     id: {},
     label: {}
@@ -18366,12 +18365,21 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const emits = __emit;
+    const getLabel = (option2) => {
+      if (typeof option2 === "string")
+        return option2;
+      if (typeof option2 === "number")
+        return `${option2}`;
+      return option2.label;
+    };
+    const getValue = (option2) => {
+      if (typeof option2 === "string")
+        return option2;
+      if (typeof option2 === "number")
+        return option2;
+      return option2.value;
+    };
     const props2 = __props;
-    const cumputedOptions = computed(() => props2.options || props2.stringOptions.map((v2) => ({
-      optioId: v2,
-      label: v2,
-      value: v2
-    })));
     let selectedValue = ref("");
     function handleSelect(e) {
       var _a2;
@@ -18396,20 +18404,22 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("label", _hoisted_2$d, toDisplayString(_ctx.label), 1),
         createElementVNode("div", _hoisted_3$a, [
-          (openBlock(true), createElementBlock(Fragment$1, null, renderList(cumputedOptions.value, ({ optioId, label, value }, index2) => {
+          (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.options, (option2, index2) => {
             return openBlock(), createElementBlock("div", {
               class: "radio-pill",
               key: index2
             }, [
               createElementVNode("input", {
                 type: "radio",
-                id: optioId,
+                id: getValue(option2),
                 name: _ctx.id,
-                value,
-                checked: unref(selectedValue) === value,
+                value: getValue(option2),
+                checked: unref(selectedValue) === getValue(option2),
                 onChange: handleSelect
               }, null, 40, _hoisted_4$6),
-              createElementVNode("label", { for: optioId }, toDisplayString(label), 9, _hoisted_5$5)
+              createElementVNode("label", {
+                for: getValue(option2)
+              }, toDisplayString(getLabel(option2)), 9, _hoisted_5$5)
             ]);
           }), 128))
         ])
@@ -18417,7 +18427,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-e47ae8b5"]]);
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-ee7dd382"]]);
 const _hoisted_1$f = { class: "bagel-input" };
 const _hoisted_2$c = {
   key: 0,

package/dist/style.css

@@ -402,9 +402,9 @@ a[data-v-d09a83c5] {
 .modal {
 	width: 96%;
 	max-width: 720px;
-	transform: scale(0.5);
-	opacity: 0;
-	transition: all ease-in-out 0.15s;
+	/* transform: scale(0.5); */
+	/* opacity: 0; */
+	transition: all ease-in-out 0.18s;
 	margin-left: auto;
 	margin-right: auto;
 	height: fit-content;
@@ -432,7 +432,7 @@ a[data-v-d09a83c5] {
 }
 
 .is-side .modal {
-	inset-inline-end: -600px;
+	inset-inline-end: -1720px;
 	transform: scale(1);
 	opacity: 1;
 	/* position: fixed; */
@@ -464,7 +464,7 @@ a[data-v-d09a83c5] {
 }
 
 .is-active.is-side .modal {
-	inset-inline-end: 20px;
+	inset-inline-end: 0px;
 	transform: translateX(0%);
 }
 
@@ -838,45 +838,49 @@ display: block;
   width: calc(100% - 5rem);
 }
 
-.inline[data-v-10743b06] {
-  display: inline;
+.inline[data-v-561f7a72] {
+	display: inline;
 }
 
 .pill {
-    border-radius: 10px;
-    padding: 4px 8px;
-    font-size: 10px;
-    background: var(--bgl-gray-light);
-    white-space: nowrap;
-    display: inline;
+	border-radius: 10px;
+	padding: 4px 8px;
+	font-size: 10px;
+	background: var(--bgl-gray-light);
+	white-space: nowrap;
+	display: inline;
+}
+.pill.light {
+	background: var(--bgl-blue-light);
+	color: var(--bgl-black);
 }
 .pill.blue {
-    background: var(--bgl-blue-light);
-    color: var(--bgl-primary);
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 .pill.red {
-    background-color: var(--bgl-red-tint);
-    color: var(--bgl-red);
+	background-color: var(--bgl-red-tint);
+	color: var(--bgl-red);
 }
 .pill.green {
-    background-color: var(--bgl-green);
-    color: var(--bgl-white);
+	background-color: var(--bgl-green);
+	color: var(--bgl-white);
 }
 .pill.orange {
-    background-color: var(--bgl-yellow);
-    color: var(--bgl-black);
+	background-color: var(--bgl-yellow);
+	color: var(--bgl-black);
 }
 .pill.yellow {
-    background-color: var(--bgl-yellow);
+	background-color: var(--bgl-yellow);
 }
 .pill.Paid,
 .pill.Active {
-    background-color: var(--bgl-green);
-    color: white;
+	background-color: var(--bgl-green);
+	color: white;
 }
 .pill.Error {
-    background-color: var(--bgl-red-tint);
-    color: var(--bgl-red);
+	background-color: var(--bgl-red-tint);
+	color: var(--bgl-red);
 }
 
 .bgl_vid iframe[data-v-bbfc4353],
@@ -1456,29 +1460,29 @@ display: block;
 }
 }
 
-.radio-pill label[data-v-e47ae8b5] {
-  color: var(--bgl-primary);
-  white-space: nowrap;
-  border-radius: calc(var(--btn-border-radius) * 2);
-  outline: 1px solid var(--bgl-primary);
-  padding-left: calc(var(--btn-padding) / 2);
-  padding-right: calc(var(--btn-padding) / 2);
-  padding-top: calc(var(--btn-padding) / 6);
-  padding-bottom: calc(var(--btn-padding) / 6);
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  background: var(--bgl-white);
-  user-select: none;
+.radio-pill label[data-v-ee7dd382] {
+	color: var(--bgl-primary);
+	white-space: nowrap;
+	border-radius: calc(var(--btn-border-radius) * 2);
+	outline: 1px solid var(--bgl-primary);
+	padding-left: calc(var(--btn-padding) / 2);
+	padding-right: calc(var(--btn-padding) / 2);
+	padding-top: calc(var(--btn-padding) / 6);
+	padding-bottom: calc(var(--btn-padding) / 6);
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	background: var(--bgl-white);
+	user-select: none;
 }
-.radio-pill label[data-v-e47ae8b5]:hover {
-  filter: var(--bgl-hover-filter);
+.radio-pill label[data-v-ee7dd382]:hover {
+	filter: var(--bgl-hover-filter);
 }
-.radio-pill input[data-v-e47ae8b5] {
-  display: none;
+.radio-pill input[data-v-ee7dd382] {
+	display: none;
 }
-.radio-pill input:checked~label[data-v-e47ae8b5] {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+.radio-pill input:checked ~ label[data-v-ee7dd382] {
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 .bagel-input .fileUploadWrap[data-v-0dbacaa0] {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.384",
+  "version": "0.0.390",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Badge.vue

@@ -11,63 +11,68 @@ import { Icon } from '@bagelink/vue';
 import type { MaterialIcons } from '@bagelink/vue';
 
 type Props = {
-  color?: 'green' | 'red' | 'blue' | 'light' | 'gray',
-  size?: string,
-  text: string,
-  icon?: MaterialIcons
-  'icon.end'?: MaterialIcons
-}
+	'color'?: 'green' | 'red' | 'blue' | 'light' | 'gray';
+	'size'?: string;
+	'text': string;
+	'icon'?: MaterialIcons;
+	'icon.end'?: MaterialIcons;
+};
 
 const props = defineProps<Props>();
 </script>
 
 <style scoped>
 .inline {
-  display: inline;
+	display: inline;
 }
 </style>
 <style>
 .pill {
-    border-radius: 10px;
-    padding: 4px 8px;
-    font-size: 10px;
-    background: var(--bgl-gray-light);
-    white-space: nowrap;
-    display: inline;
+	border-radius: 10px;
+	padding: 4px 8px;
+	font-size: 10px;
+	background: var(--bgl-gray-light);
+	white-space: nowrap;
+	display: inline;
+}
+
+.pill.light {
+	background: var(--bgl-blue-light);
+	color: var(--bgl-black);
 }
 
 .pill.blue {
-    background: var(--bgl-blue-light);
-    color: var(--bgl-primary);
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 .pill.red {
-    background-color: var(--bgl-red-tint);
-    color: var(--bgl-red);
+	background-color: var(--bgl-red-tint);
+	color: var(--bgl-red);
 }
 
 .pill.green {
-    background-color: var(--bgl-green);
-    color: var(--bgl-white);
+	background-color: var(--bgl-green);
+	color: var(--bgl-white);
 }
 
 .pill.orange {
-    background-color: var(--bgl-yellow);
-    color: var(--bgl-black);
+	background-color: var(--bgl-yellow);
+	color: var(--bgl-black);
 }
 
 .pill.yellow {
-    background-color: var(--bgl-yellow);
+	background-color: var(--bgl-yellow);
 }
 
 .pill.Paid,
 .pill.Active {
-    background-color: var(--bgl-green);
-    color: white;
+	background-color: var(--bgl-green);
+	color: white;
 }
 
 .pill.Error {
-    background-color: var(--bgl-red-tint);
-    color: var(--bgl-red);
+	background-color: var(--bgl-red-tint);
+	color: var(--bgl-red);
 }
 </style>

package/src/components/form/inputs/RadioPillsInput.vue

@@ -1,19 +1,18 @@
 <template>
 	<div class="bagel-input">
-		<label class="pb-025" >
-			{{ label  }}
+		<label class="pb-025">
+			{{ label }}
 		</label>
 		<div class="flex gap-05 flex-wrap">
-			<div class="radio-pill" v-for="({optioId,label,value}, index) in cumputedOptions" :key="index">
+			<div class="radio-pill" v-for="(option, index) in options" :key="index">
 				<input
 					type="radio"
-					:id="optioId"
+					:id="getValue(option)"
 					:name="id"
-					:value="value"
-					:checked="selectedValue === value"
-					@change="handleSelect"
-				>
-				<label :for="optioId">{{ label }}</label>
+					:value="getValue(option)"
+					:checked="selectedValue === getValue(option)"
+					@change="handleSelect" />
+				<label :for="getValue(option)">{{ getLabel(option) }}</label>
 			</div>
 		</div>
 	</div>
@@ -22,27 +21,33 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue';
 
-interface RadioOption {
-	optioId: string;
-	label: string;
-	value: any;
-}
+type Option =
+	| string
+	| number
+	| Record<string, any>
+	| { label: string; value: string | number };
+
 const emits = defineEmits(['update:modelValue']);
 
+const getLabel = (option: Option) => {
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return `${option}`;
+	return option.label;
+};
+
+const getValue = (option: Option) => {
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return option;
+	return option.value;
+};
+
 const props = defineProps<{
-	options?: RadioOption[],
-	stringOptions: string[],
-	modelValue: any,
-	id?: string,
-	label?: string,
+	options?: Option[];
+	modelValue: any;
+	id?: string;
+	label?: string;
 }>();
 
-const cumputedOptions = $computed(() => props.options || props.stringOptions.map((v) => ({
-	optioId: v,
-	label: v,
-	value: v,
-})));
-
 let selectedValue = $ref('');
 
 function handleSelect(e: Event) {
@@ -56,7 +61,7 @@ watch(
 		if (newVal === oldVal || oldVal === undefined) return;
 		if (selectedValue !== newVal) selectedValue = newVal;
 	},
-	{ immediate: true },
+	{ immediate: true }
 );
 
 onMounted(() => {
@@ -66,30 +71,30 @@ onMounted(() => {
 
 <style scoped>
 .radio-pill label {
-  color: var(--bgl-primary);
-  white-space: nowrap;
-  border-radius: calc(var(--btn-border-radius) * 2);
-  outline: 1px solid var(--bgl-primary);
-  padding-left: calc(var(--btn-padding) / 2);
-  padding-right: calc(var(--btn-padding) / 2);
-  padding-top: calc(var(--btn-padding) / 6);
-  padding-bottom: calc(var(--btn-padding) / 6);
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  background: var(--bgl-white);
-  user-select: none;
+	color: var(--bgl-primary);
+	white-space: nowrap;
+	border-radius: calc(var(--btn-border-radius) * 2);
+	outline: 1px solid var(--bgl-primary);
+	padding-left: calc(var(--btn-padding) / 2);
+	padding-right: calc(var(--btn-padding) / 2);
+	padding-top: calc(var(--btn-padding) / 6);
+	padding-bottom: calc(var(--btn-padding) / 6);
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	background: var(--bgl-white);
+	user-select: none;
 }
 
 .radio-pill label:hover {
-  filter: var(--bgl-hover-filter);
+	filter: var(--bgl-hover-filter);
 }
 
 .radio-pill input {
-  display: none;
+	display: none;
 }
 
-.radio-pill input:checked~label {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+.radio-pill input:checked ~ label {
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 </style>

package/src/styles/modal.css

@@ -25,9 +25,9 @@
 .modal {
 	width: 96%;
 	max-width: 720px;
-	transform: scale(0.5);
-	opacity: 0;
-	transition: all ease-in-out 0.15s;
+	/* transform: scale(0.5); */
+	/* opacity: 0; */
+	transition: all ease-in-out 0.18s;
 	margin-left: auto;
 	margin-right: auto;
 	height: fit-content;
@@ -55,7 +55,7 @@
 }
 
 .is-side .modal {
-	inset-inline-end: -600px;
+	inset-inline-end: -1720px;
 	transform: scale(1);
 	opacity: 1;
 	/* position: fixed; */
@@ -87,7 +87,7 @@
 }
 
 .is-active.is-side .modal {
-	inset-inline-end: 20px;
+	inset-inline-end: 0px;
 	transform: translateX(0%);
 }