@cbutep_n/pico-ui 0.0.7 → 0.0.9

package/dist/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/PBackground/PBackgroud.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/base/PButton/PButton.vue.d.ts

@@ -0,0 +1,23 @@
+export interface PButtonProps {
+    variant?: PButtonVariants;
+    size?: PButtonSizes;
+}
+export type PButtonVariants = "primary" | "secondary" | "outline" | "ghost" | "soft";
+export type PButtonSizes = "large" | "medium" | "small";
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<PButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/base/PCard/PCard.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/base/PCheckboxInput/PCheckboxInput.vue.d.ts

@@ -0,0 +1,13 @@
+export interface PCheckboxInputProps {
+    disabled?: boolean;
+}
+type __VLS_Props = PCheckboxInputProps;
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/base/PDivider/PDivider.vue.d.ts

@@ -0,0 +1,6 @@
+export interface PDividerProps {
+    orientation?: "vertical" | "horizontal";
+}
+export type PDividerOrientation = "vertical" | "horizontal";
+declare const _default: import('vue').DefineComponent<PDividerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PDividerProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/base/PFormItem/PFormItem.vue.d.ts

@@ -0,0 +1,10 @@
+import { Component } from 'vue';
+export interface PFormItemProps {
+    component: Component;
+    props: Record<string, unknown>;
+    name: string;
+    inputClass?: string;
+    errorClass?: string;
+}
+declare const _default: import('vue').DefineComponent<PFormItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PFormItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/base/PIcon/PIcon.vue.d.ts

@@ -0,0 +1,6 @@
+import { PicoIconsNames } from '../../../utils/IconsEnum';
+export interface PIconProps {
+    name: PicoIconsNames;
+}
+declare const _default: import('vue').DefineComponent<PIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/base/PPlane/PPlane.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/base/PRadioInput/PRadioInput.vue.d.ts

@@ -0,0 +1,19 @@
+export interface PRadioInputProps {
+    disabled?: boolean;
+    name: string;
+    options: PRadioOptionItem[];
+}
+export type PRadioOptionItem = {
+    value: string;
+    label: string;
+};
+type __VLS_Props = PRadioInputProps;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/base/PSkeleton/PSkeleton.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/components/base/PSlider/PSlider.vue.d.ts

@@ -0,0 +1,18 @@
+export interface PSliderProps {
+    min: number;
+    max: number;
+    step: number;
+}
+type __VLS_Props = PSliderProps;
+declare const __VLS_defaults: {
+    modelValue: number;
+};
+type __VLS_PublicProps = {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/base/PSpinner/PSpinner.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/components/base/PSwitchInput/PSwitchInput.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/base/PTabs/PTabs.vue.d.ts

@@ -0,0 +1,20 @@
+import { PicoIconsNames } from '../../../utils/IconsEnum';
+export interface TabOption {
+    value: number | string;
+    label: string;
+    icon?: PicoIconsNames;
+}
+export interface PTabsProps {
+    options: TabOption[];
+    defaultOption?: string | number;
+}
+type __VLS_Props = PTabsProps;
+type __VLS_PublicProps = {
+    modelValue?: number | string;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/base/PTabs/components/PTab.vue.d.ts

@@ -0,0 +1,8 @@
+import { PicoIconsNames } from '../../../../utils/IconsEnum';
+export interface PTabProps {
+    isActive: boolean;
+    label: string;
+    icon?: PicoIconsNames;
+}
+declare const _default: import('vue').DefineComponent<PTabProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PTabProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/base/PTextInput/PTextInput.vue.d.ts

@@ -0,0 +1,15 @@
+export interface PTextInputProps {
+    placeholder?: string;
+    isInvalid?: boolean;
+    disabled?: boolean;
+}
+type __VLS_Props = PTextInputProps;
+type __VLS_PublicProps = {
+    modelValue?: any;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/base/PToastRenderer.vue/PToast.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    toast: {
+        id: number;
+        message: string;
+        zIndex: number;
+        duration: number;
+    };
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/base/PToastRenderer.vue/PToastRenderer.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import { default as PButton } from './components/base/PButton/PButton.vue';
+import { default as PCheckboxInput } from './components/base/PCheckboxInput/PCheckboxInput.vue';
+import { default as PDivider } from './components/base/PDivider/PDivider.vue';
+import { default as PFormItem } from './components/base/PFormItem/PFormItem.vue';
+import { default as PIcon } from './components/base/PIcon/PIcon.vue';
+import { default as PPlane } from './components/base/PPlane/PPlane.vue';
+import { default as PRadioInput } from './components/base/PRadioInput/PRadioInput.vue';
+import { default as PSkeleton } from './components/base/PSkeleton/PSkeleton.vue';
+import { default as PSwitchInput } from './components/base/PSwitchInput/PSwitchInput.vue';
+import { default as PTextInput } from './components/base/PTextInput/PTextInput.vue';
+import { default as PBackgroud } from './components/PBackground/PBackgroud.vue';
+import { default as PCard } from './components/base/PCard/PCard.vue';
+import { default as PSpinner } from './components/base/PSpinner/PSpinner.vue';
+import { default as PSlider } from './components/base/PSlider/PSlider.vue';
+import { useToast } from './composables/useToast';
+import { default as PTabs } from './components/base/PTabs/PTabs.vue';
+import { default as PTab } from './components/base/PTabs/components/PTab.vue';
+export { PCard, PButton, PCheckboxInput, PDivider, PFormItem, PIcon, PPlane, PRadioInput, PSkeleton, PSwitchInput, PTextInput, PBackgroud, useToast, PSlider, PSpinner, PTabs, PTab };
+export { PicoIcons, type PicoIconsNames } from './utils/IconsEnum';
+export type { PButtonVariants, PButtonSizes, PButtonProps } from './components/base/PButton/PButton.vue';
+export type { PCheckboxInputProps } from './components/base/PCheckboxInput/PCheckboxInput.vue';
+export type { PDividerProps } from './components/base/PDivider/PDivider.vue';
+export type { PFormItemProps } from './components/base/PFormItem/PFormItem.vue';
+export type { PIconProps } from './components/base/PIcon/PIcon.vue';
+export type { PRadioInputProps } from './components/base/PRadioInput/PRadioInput.vue';
+export type { PTextInputProps } from './components/base/PTextInput/PTextInput.vue';
+export type { PTabsProps } from './components/base/PTabs/PTabs.vue';
+export type { PTabProps } from './components/base/PTabs/components/PTab.vue';
+export type { PSliderProps } from './components/base/PSlider/PSlider.vue';

package/dist/pico-ui.es.js

@@ -0,0 +1,381 @@
+import { defineComponent as d, openBlock as n, createElementBlock as l, normalizeClass as u, renderSlot as x, createElementVNode as i, createBlock as _, resolveDynamicComponent as k, unref as m, useModel as p, withDirectives as b, vModelCheckbox as T, createVNode as M, mergeModels as f, toDisplayString as y, createCommentVNode as $, mergeProps as B, isRef as S, Fragment as V, renderList as P, vModelRadio as N, vModelText as C, createStaticVNode as z, computed as j, normalizeStyle as D, reactive as O, readonly as A, onMounted as U } from "vue";
+import { useField as F } from "vee-validate";
+const Ve = /* @__PURE__ */ d({
+  __name: "PButton",
+  props: {
+    variant: { default: "primary" },
+    size: { default: "medium" }
+  },
+  setup(e) {
+    const t = {
+      primary: ["bg-pico-primary", "text-white", "shadow-primary"],
+      secondary: ["bg-pico-secondary", "text-white", "shadow-secondary"],
+      outline: ["outline-2", "outline-pico-primary", "text-pico-primary"],
+      ghost: ["text-pico-gray", "border-dashed border-2 border-pico-gray/50"],
+      soft: ["bg-pico-primary/20", "text-pico-primary"]
+    }, a = {
+      large: ["text-lg", "py-3.5", "px-8.5"],
+      medium: ["text-md", "py-2.5", "px-6"],
+      small: ["text-sm", "py-1.5", "px-4"]
+    };
+    return (s, o) => (n(), l("button", {
+      class: u(["w-max h-max rounded-lg font-semibold hover:brightness-80 duration-300", [t[e.variant], a[e.size]]])
+    }, [
+      x(s.$slots, "default")
+    ], 2));
+  }
+}), R = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "9",
+  fill: "none"
+};
+function E(e, t) {
+  return n(), l("svg", R, [...t[0] || (t[0] = [
+    i("path", {
+      fill: "currentColor",
+      d: "M10.868.366a1.25 1.25 0 0 1 0 1.767l-6.25 6.25a1.25 1.25 0 0 1-1.767 0l-2.5-2.5a1.25 1.25 0 0 1 1.767-1.767l1.617 1.616L9.1.366a1.25 1.25 0 0 1 1.767 0"
+    }, null, -1)
+  ])]);
+}
+const L = { render: E }, q = {
+  checkmark: L
+}, I = /* @__PURE__ */ d({
+  __name: "PIcon",
+  props: {
+    name: {}
+  },
+  setup(e) {
+    return (t, a) => (n(), _(k(m(q)[e.name])));
+  }
+}), G = ["disabled"], Pe = /* @__PURE__ */ d({
+  __name: "PCheckboxInput",
+  props: /* @__PURE__ */ f({
+    disabled: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = /* @__PURE__ */ new Map([
+      [!1, ["outline-2"]],
+      [!0, ["bg-pico-primary"]]
+    ]), a = p(e, "modelValue");
+    return (s, o) => (n(), l("div", {
+      class: u([m(t).get(!!a.value), "outline-pico-stroke-neutral min-w-5.5 duration-300 h-5.5 flex relative justify-center items-center rounded-sm"])
+    }, [
+      b(i("input", {
+        class: "opacity-0 inset-0 absolute",
+        disabled: e.disabled,
+        type: "checkbox",
+        "onUpdate:modelValue": o[0] || (o[0] = (r) => a.value = r)
+      }, null, 8, G), [
+        [T, a.value]
+      ]),
+      M(I, {
+        name: "checkmark",
+        class: "text-white"
+      })
+    ], 2));
+  }
+}), Ce = /* @__PURE__ */ d({
+  __name: "PDivider",
+  props: {
+    orientation: { default: "horizontal" }
+  },
+  setup(e) {
+    const t = {
+      vertical: ["w-2px", "h-full"],
+      horizontal: ["h-2px", "w-full"]
+    };
+    return (a, s) => (n(), l("div", {
+      class: u(["bg-pico-stroke-neutral", t[e.orientation]])
+    }, null, 2));
+  }
+}), H = { class: "flex flex-col items-start" }, Ie = /* @__PURE__ */ d({
+  __name: "PFormItem",
+  props: {
+    component: {},
+    props: {},
+    name: {},
+    inputClass: {},
+    errorClass: {}
+  },
+  setup(e) {
+    const { value: t, errorMessage: a } = F(e.name, {});
+    return (s, o) => (n(), l("div", H, [
+      m(a) ? (n(), l("span", {
+        key: 0,
+        class: u([e.errorClass, "text-pico-red text-xs max-w-full mb-1"])
+      }, y(m(a)), 3)) : $("", !0),
+      (n(), _(k(e.component), B({
+        class: [e.inputClass, "max-w-max"],
+        "is-invalid": !!m(a),
+        modelValue: m(t),
+        "onUpdate:modelValue": o[0] || (o[0] = (r) => S(t) ? t.value = r : null),
+        name: e.name
+      }, e.props), null, 16, ["class", "is-invalid", "modelValue", "name"]))
+    ]));
+  }
+}), v = (e, t) => {
+  const a = e.__vccOpts || e;
+  for (const [s, o] of t)
+    a[s] = o;
+  return a;
+}, J = {}, K = { class: "rounded-lg p-8 bg-white outline-pico-stroke-neutral outline-2" };
+function Q(e, t) {
+  return n(), l("div", K, [
+    x(e.$slots, "default")
+  ]);
+}
+const Te = /* @__PURE__ */ v(J, [["render", Q]]), W = { class: "flex gap-2" }, X = ["value", "disabled"], Me = /* @__PURE__ */ d({
+  __name: "PRadioInput",
+  props: /* @__PURE__ */ f({
+    disabled: { type: Boolean, default: !1 },
+    name: {},
+    options: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = /* @__PURE__ */ new Map([
+      [!1, ["outline-2 -outline-offset-2"]],
+      [!0, ["bg-pico-primary"]]
+    ]), a = p(e, "modelValue");
+    return (s, o) => (n(!0), l(V, null, P(e.options, (r) => (n(), l("div", W, [
+      i("div", {
+        class: u([m(t).get(a.value === r.value), "outline-pico-stroke-neutral min-w-5.5 duration-300 h-5.5 flex relative justify-center items-center rounded-full"])
+      }, [
+        b(i("input", {
+          type: "radio",
+          value: r.value,
+          class: "opacity-0 inset-0 absolute",
+          disabled: e.disabled,
+          "onUpdate:modelValue": o[0] || (o[0] = (c) => a.value = c)
+        }, null, 8, X), [
+          [N, a.value]
+        ]),
+        o[1] || (o[1] = i("div", { class: "w-2 h-2 bg-white rounded-full" }, null, -1))
+      ], 2),
+      i("p", null, y(r.label), 1)
+    ]))), 256));
+  }
+}), Y = {}, Z = { class: "w-full h-full rounded-sm pico-skeleton" };
+function ee(e, t) {
+  return n(), l("div", Z);
+}
+const Be = /* @__PURE__ */ v(Y, [["render", ee], ["__scopeId", "data-v-7ff1dee9"]]), Se = /* @__PURE__ */ d({
+  __name: "PSwitchInput",
+  props: {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = /* @__PURE__ */ new Map([
+      [!1, [""]],
+      [!0, ["translate-x-[calc(100%-2px)]"]]
+    ]), a = /* @__PURE__ */ new Map([
+      [!1, ["bg-pico-stroke-neutral "]],
+      [!0, ["bg-pico-primary"]]
+    ]), s = p(e, "modelValue"), o = () => {
+      s.value = !s.value;
+    };
+    return (r, c) => (n(), l("div", {
+      onClick: o,
+      class: u([m(a).get(!!s.value), "p-0.5 duration-300 min-w-10.5 rounded-full"])
+    }, [
+      i("div", {
+        class: u([m(t).get(!!s.value), "w-5 duration-300 will-change-transform aspect-square rounded-full bg-white"])
+      }, null, 2)
+    ], 2));
+  }
+}), te = ["disabled", "placeholder"], Ne = /* @__PURE__ */ d({
+  __name: "PTextInput",
+  props: /* @__PURE__ */ f({
+    placeholder: {},
+    isInvalid: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = /* @__PURE__ */ new Map([
+      [!0, ["outline-pico-red! text-pico-red! bg-pico-light-red!"]],
+      [!1, []]
+    ]), a = p(e, "modelValue");
+    return (s, o) => b((n(), l("input", {
+      disabled: e.disabled,
+      type: "text",
+      "onUpdate:modelValue": o[0] || (o[0] = (r) => a.value = r),
+      placeholder: e.placeholder,
+      class: u([m(t).get(e.isInvalid), "outline-pico-stroke-neutral outline-1 disabled:text-pico-caption/70 disabled:cursor-not-allowed text-pico-caption focus:text-pico-text bg-pico-light focus:bg-pico-white duration-300 focus:outline-pico-primary px-3 py-2 rounded-lg"])
+    }, null, 10, te)), [
+      [C, a.value]
+    ]);
+  }
+}), ae = {}, oe = { class: "bg-pico-light w-full h-full" };
+function ne(e, t) {
+  return n(), l("div", oe, [
+    x(e.$slots, "default")
+  ]);
+}
+const ze = /* @__PURE__ */ v(ae, [["render", ne]]), se = {}, le = { class: "shadow-dark rounded-lg p-4 bg-white" };
+function ie(e, t) {
+  return n(), l("div", le, [
+    x(e.$slots, "default")
+  ]);
+}
+const je = /* @__PURE__ */ v(se, [["render", ie]]), re = {}, ce = {
+  class: "h-25 w-25",
+  viewBox: "0 0 50 50",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function ue(e, t) {
+  return n(), l("svg", ce, [...t[0] || (t[0] = [
+    z('<circle cx="25" cy="25" r="20" fill="none" stroke="#3b82f6" stroke-width="4" stroke-linecap="round" stroke-dasharray="90 150" stroke-dashoffset="0"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1.5s" repeatCount="indefinite"></animateTransform><animate attributeName="stroke-dasharray" values="1, 200; 90, 150; 90, 150" keyTimes="0; 0.5; 1" dur="2s" repeatCount="indefinite"></animate><animate attributeName="stroke-dashoffset" values="0; -100; -124" keyTimes="0; 0.5; 1" dur="2s" repeatCount="indefinite"></animate></circle><circle cx="25" cy="25" r="20" fill="none" stroke="#13c8ec" stroke-width="4" stroke-linecap="round" stroke-dasharray="90 150" stroke-dashoffset="0"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1.5s" repeatCount="indefinite"></animateTransform><animate attributeName="stroke-dasharray" values="1, 200; 90, 150; 90, 150" keyTimes="0; 0.5; 1" dur="2s" repeatCount="indefinite"></animate><animate attributeName="stroke-dashoffset" values="0; -35; -124" keyTimes="0; 0.5; 1" dur="2s" repeatCount="indefinite"></animate></circle>', 2)
+  ])]);
+}
+const De = /* @__PURE__ */ v(re, [["render", ue]]), de = { class: "w-40 flex group" }, me = { class: "h-2 rounded-xl w-full bg-pico-stroke-neutral relative" }, pe = ["min", "max", "step"], fe = { class: "relative w-full h-full flex justify-end items-center pointer-events-none" }, ve = { class: "absolute h-5 w-5 border-2 border-white translate-x-1/2 transition-colors duration-200 bg-pico-primary rounded-full" }, he = { class: "relative w-full h-full flex justify-center" }, xe = { class: "absolute bottom-[calc(100%+5px)] group-hover:opacity-100 opacity-0 duration-200 transition-opacity bg-pico-caption text-white px-2 rounded-lg text-xs py-0.5" }, Oe = /* @__PURE__ */ d({
+  __name: "PSlider",
+  props: /* @__PURE__ */ f({
+    min: {},
+    max: {},
+    step: {}
+  }, {
+    modelValue: { default: 0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = e, a = p(e, "modelValue"), s = j(() => (a.value - t.min) / (t.max - t.min) * 100);
+    return (o, r) => (n(), l("div", de, [
+      i("div", me, [
+        b(i("input", {
+          min: e.min,
+          max: e.max,
+          step: e.step,
+          "onUpdate:modelValue": r[0] || (r[0] = (c) => a.value = c),
+          type: "range",
+          class: "h-full opacity-0 absolute inset-y-0 -inset-x-2"
+        }, null, 8, pe), [
+          [C, a.value]
+        ]),
+        i("div", {
+          class: "h-2 rounded-xl bg-pico-primary group-hover:bg-pico-primary/70 transition-colors duration-200 absolute left-0 pointer-events-none",
+          style: D({
+            width: s.value + "%"
+          })
+        }, [
+          i("div", fe, [
+            i("div", ve, [
+              i("div", he, [
+                i("div", xe, y(a.value), 1)
+              ])
+            ])
+          ])
+        ], 4)
+      ])
+    ]));
+  }
+}), h = O([]);
+let w = 1e3;
+const Ae = () => {
+  const e = (t, a = 3e3) => {
+    const s = Date.now() + Math.random();
+    w++;
+    const o = w;
+    h.push({ id: s, message: t, zIndex: o, duration: a });
+    const r = setTimeout(() => {
+      const c = h.findIndex((g) => g.id === s);
+      c !== -1 && h.splice(c, 1), clearTimeout(r);
+    }, a);
+  };
+  return {
+    stack: A(h),
+    addToast: e
+  };
+}, _e = { class: "duration-200 flex flex-col items-center justify-center cursor-pointer select-none gap-3" }, be = { class: "flex w-full gap-2 justify-center items-center" }, ye = /* @__PURE__ */ d({
+  __name: "PTab",
+  props: {
+    isActive: { type: Boolean },
+    label: {},
+    icon: {}
+  },
+  setup(e) {
+    return (t, a) => (n(), l("div", _e, [
+      i("div", be, [
+        e.icon ? (n(), _(I, {
+          key: 0,
+          name: e.icon,
+          class: u(["duration-200", {
+            "text-pico-primary!": e.isActive,
+            "text-pico-stroke-neutral": !e.isActive
+          }])
+        }, null, 8, ["name", "class"])) : $("", !0),
+        i("p", {
+          class: u(["text-sm/none duration-200", {
+            "text-pico-caption!": !e.isActive
+          }])
+        }, y(e.label), 3)
+      ]),
+      i("div", {
+        class: u(["bg-pico-primary duration-200 h-0.5 rounded-full w-0", {
+          "w-full!": e.isActive
+        }])
+      }, null, 2)
+    ]));
+  }
+}), ge = { class: "flex bg-white gap-6" }, Ue = /* @__PURE__ */ d({
+  __name: "PTabs",
+  props: /* @__PURE__ */ f({
+    options: {},
+    defaultOption: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = e, a = p(e, "modelValue"), s = (o) => {
+      a.value = o;
+    };
+    return U(() => {
+      t.defaultOption ? a.value = t.defaultOption : a.value = t?.options[0]?.value;
+    }), (o, r) => (n(), l("div", ge, [
+      (n(!0), l(V, null, P(e.options, (c, g) => (n(), _(ye, {
+        key: g,
+        "is-active": c.value === a.value,
+        label: c.label,
+        onClick: (we) => s(c.value),
+        icon: c.icon
+      }, null, 8, ["is-active", "label", "onClick", "icon"]))), 128))
+    ]));
+  }
+});
+export {
+  ze as PBackgroud,
+  Ve as PButton,
+  je as PCard,
+  Pe as PCheckboxInput,
+  Ce as PDivider,
+  Ie as PFormItem,
+  I as PIcon,
+  Te as PPlane,
+  Me as PRadioInput,
+  Be as PSkeleton,
+  Oe as PSlider,
+  De as PSpinner,
+  Se as PSwitchInput,
+  ye as PTab,
+  Ue as PTabs,
+  Ne as PTextInput,
+  q as PicoIcons,
+  Ae as useToast
+};
+//# sourceMappingURL=pico-ui.es.js.map

package/dist/pico-ui.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pico-ui.es.js","sources":["../src/components/base/PButton/PButton.vue","../src/assets/checkmark.svg","../src/utils/IconsEnum.ts","../src/components/base/PIcon/PIcon.vue","../src/components/base/PCheckboxInput/PCheckboxInput.vue","../src/components/base/PDivider/PDivider.vue","../src/components/base/PFormItem/PFormItem.vue","../src/components/base/PPlane/PPlane.vue","../src/components/base/PRadioInput/PRadioInput.vue","../src/components/base/PSkeleton/PSkeleton.vue","../src/components/base/PSwitchInput/PSwitchInput.vue","../src/components/base/PTextInput/PTextInput.vue","../src/components/PBackground/PBackgroud.vue","../src/components/base/PCard/PCard.vue","../src/components/base/PSpinner/PSpinner.vue","../src/components/base/PSlider/PSlider.vue","../src/composables/useToast.ts","../src/components/base/PTabs/components/PTab.vue","../src/components/base/PTabs/PTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { variant = \"primary\", size = \"medium\" } = defineProps<PButtonProps>();\n\nexport interface PButtonProps {\n  variant?: PButtonVariants;\n  size?: PButtonSizes;\n}\nexport type PButtonVariants = \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"soft\";\nexport type PButtonSizes = \"large\" | \"medium\" | \"small\";\n\nconst computedVariant: Record<PButtonVariants, string[]> = {\n  primary: [\"bg-pico-primary\", \"text-white\", \"shadow-primary\"],\n  secondary: [\"bg-pico-secondary\", \"text-white\", \"shadow-secondary\"],\n  outline: [\"outline-2\", \"outline-pico-primary\", \"text-pico-primary\"],\n  ghost: [\"text-pico-gray\", \"border-dashed border-2 border-pico-gray/50\"],\n  soft: [\"bg-pico-primary/20\", \"text-pico-primary\"],\n};\n\nconst computedSize: Record<PButtonSizes, string[]> = {\n  large: [\"text-lg\", \"py-3.5\", \"px-8.5\"],\n  medium: [\"text-md\", \"py-2.5\", \"px-6\"],\n  small: [\"text-sm\", \"py-1.5\", \"px-4\"],\n};\n</script>\n\n<template>\n  <button\n    class=\"w-max h-max rounded-lg font-semibold hover:brightness-80 duration-300\"\n    :class=\"[computedVariant[variant], computedSize[size]]\"\n  >\n    <slot />\n  </button>\n</template>\n\n<style lang=\"css\" scoped></style>\n","import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: \"12\",\n  height: \"9\",\n  fill: \"none\"\n}\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, [...(_cache[0] || (_cache[0] = [\n    _createElementVNode(\"path\", {\n      fill: \"currentColor\",\n      d: \"M10.868.366a1.25 1.25 0 0 1 0 1.767l-6.25 6.25a1.25 1.25 0 0 1-1.767 0l-2.5-2.5a1.25 1.25 0 0 1 1.767-1.767l1.617 1.616L9.1.366a1.25 1.25 0 0 1 1.767 0\"\n    }, null, -1)\n  ]))]))\n}\nexport default { render: render }","import type { Component } from 'vue'\nimport CheckmarkIcon from '@/assets/checkmark.svg'\nexport type PicoIconsNames = 'checkmark'\n\nexport const PicoIcons: Record<PicoIconsNames, Component | string> = {\n  checkmark: CheckmarkIcon\n}\n","<script setup lang=\"ts\">\nimport { PicoIcons, type PicoIconsNames } from \"../../../utils/IconsEnum\";\nexport interface PIconProps {\n  name: PicoIconsNames;\n}\n\ndefineProps<PIconProps>();\n</script>\n\n<template>\n  <component :is=\"PicoIcons[name]\" />\n</template>\n\n<style lang=\"css\" scoped></style>\n","<script setup lang=\"ts\">\r\nimport PIcon from \"../PIcon/PIcon.vue\";\r\n\r\nexport interface PCheckboxInputProps {\r\n  disabled?: boolean;\r\n}\r\n\r\nconst { disabled = false } = defineProps<PCheckboxInputProps>();\r\nconst computedClasses = new Map([\r\n  [false, [\"outline-2\"]],\r\n  [true, [\"bg-pico-primary\"]],\r\n]);\r\nconst model = defineModel<boolean>();\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    :class=\"computedClasses.get(!!model)\"\r\n    class=\"outline-pico-stroke-neutral min-w-5.5 duration-300 h-5.5 flex relative justify-center items-center rounded-sm\"\r\n  >\r\n    <input\r\n      class=\"opacity-0 inset-0 absolute\"\r\n      :disabled=\"disabled\"\r\n      type=\"checkbox\"\r\n      v-model=\"model\"\r\n    />\r\n    <PIcon name=\"checkmark\" class=\"text-white\" />\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"css\" scoped></style>\r\n","<script setup lang=\"ts\">\nconst { orientation = \"horizontal\" } = defineProps<PDividerProps>();\n\nexport interface PDividerProps {\n  orientation?: \"vertical\" | \"horizontal\";\n}\n\nexport type PDividerOrientation = \"vertical\" | \"horizontal\";\n\nconst computedClasses: Record<PDividerOrientation, string[]> = {\n  vertical: [\"w-2px\", \"h-full\"],\n  horizontal: [\"h-2px\", \"w-full\"],\n};\n</script>\n\n<template>\n  <div\n    class=\"bg-pico-stroke-neutral\"\n    :class=\"computedClasses[orientation]\"\n  ></div>\n</template>\n\n<style lang=\"css\" scoped></style>\n","<script setup lang=\"ts\">\nimport { useField } from \"vee-validate\";\nimport type { Component } from \"vue\";\n\nexport interface PFormItemProps {\n  component: Component;\n  props: Record<string, unknown>;\n  name: string;\n  inputClass?: string;\n  errorClass?: string;\n}\nconst { name } = defineProps<PFormItemProps>();\n\nconst { value, errorMessage } = useField(name, {});\n</script>\n\n<template>\n  <div class=\"flex flex-col items-start\">\n    <span\n      v-if=\"errorMessage\"\n      :class=\"errorClass\"\n      class=\"text-pico-red text-xs max-w-full mb-1\"\n      >{{ errorMessage }}</span\n    >\n    <component\n      :class=\"inputClass\"\n      class=\"max-w-max\"\n      :is-invalid=\"!!errorMessage\"\n      v-model=\"value\"\n      :is=\"component\"\n      :name=\"name\"\n      v-bind=\"props\"\n    ></component>\n  </div>\n</template>\n\n<style lang=\"css\" scoped></style>\n","<script setup lang=\"ts\"></script>\n\n<template>\n  <div class=\"rounded-lg p-8 bg-white outline-pico-stroke-neutral outline-2\">\n    <slot />\n  </div>\n</template>\n\n<style lang=\"css\" scoped></style>\n","<script setup lang=\"ts\">\nexport interface PRadioInputProps {\n  disabled?: boolean;\n  name: string;\n  options: PRadioOptionItem[];\n}\n\nexport type PRadioOptionItem = { value: string; label: string };\n\nconst { disabled = false } = defineProps<PRadioInputProps>();\nconst computedClasses = new Map([\n  [false, [\"outline-2 -outline-offset-2\"]],\n  [true, [\"bg-pico-primary\"]],\n]);\nconst model = defineModel<string>();\n</script>\n\n<template>\n  <div v-for=\"option in options\" class=\"flex gap-2\">\n    <div\n      :class=\"computedClasses.get(model === option.value)\"\n      class=\"outline-pico-stroke-neutral min-w-5.5 duration-300 h-5.5 flex relative justify-center items-center rounded-full\"\n    >\n      <input\n        type=\"radio\"\n        :value=\"option.value\"\n        class=\"opacity-0 inset-0 absolute\"\n        :disabled=\"disabled\"\n        v-model=\"model\"\n      />\n      <div class=\"w-2 h-2 bg-white rounded-full\"></div>\n    </div>\n    <p>\n      {{ option.label }}\n    </p>\n  </div>\n</template>\n\n<style lang=\"css\" scoped></style>\n","<template>\n  <div class=\"w-full h-full rounded-sm pico-skeleton\" />\n</template>\n\n<style lang=\"css\" scoped>\n.pico-skeleton {\n  background: linear-gradient(\n    70deg,\n    var(--color-pico-stroke-neutral) 30%,\n    var(--color-pico-light),\n    var(--color-pico-stroke-neutral) 70%\n  );\n  background-size: 200% 100%;\n  animation: skeleton 1.5s infinite linear;\n}\n\n@keyframes skeleton {\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -100% 0;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nconst computedThumbClasses = new Map([\n  [false, [\"\"]],\n  [true, [\"translate-x-[calc(100%-2px)]\"]],\n]);\n\nconst computedTrackClasses = new Map([\n  [false, [\"bg-pico-stroke-neutral \"]],\n  [true, [\"bg-pico-primary\"]],\n]);\n\nconst modelValue = defineModel<boolean>();\n\nconst toggleSwitch = () => {\n  modelValue.value = !modelValue.value;\n};\n</script>\n\n<template>\n  <div\n    @click=\"toggleSwitch\"\n    :class=\"computedTrackClasses.get(!!modelValue)\"\n    class=\"p-0.5 duration-300 min-w-10.5 rounded-full\"\n  >\n    <div\n      :class=\"computedThumbClasses.get(!!modelValue)\"\n      class=\"w-5 duration-300 will-change-transform aspect-square rounded-full bg-white\"\n    ></div>\n  </div>\n</template>\n\n<style lang=\"css\" scoped></style>\n","<script setup lang=\"ts\">\nexport interface PTextInputProps {\n  placeholder?: string;\n  isInvalid?: boolean;\n  disabled?: boolean;\n}\n\nconst { isInvalid = false, disabled = false } = defineProps<PTextInputProps>();\nconst computedClasses = new Map([\n  [true, [\"outline-pico-red! text-pico-red! bg-pico-light-red!\"]],\n  [false, []],\n]);\nconst model = defineModel();\n</script>\n\n<template>\n  <input\n    :disabled=\"disabled\"\n    type=\"text\"\n    v-model=\"model\"\n    :placeholder=\"placeholder\"\n    :class=\"computedClasses.get(isInvalid)\"\n    class=\"outline-pico-stroke-neutral outline-1 disabled:text-pico-caption/70 disabled:cursor-not-allowed text-pico-caption focus:text-pico-text bg-pico-light focus:bg-pico-white duration-300 focus:outline-pico-primary px-3 py-2 rounded-lg\"\n  />\n</template>\n\n<style lang=\"css\" scoped></style>\n","<template>\n  <div class=\"bg-pico-light w-full h-full\">\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\"></script>\r\n\r\n<template>\r\n  <div class=\"shadow-dark rounded-lg p-4 bg-white\">\r\n    <slot />\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"css\" scoped>\r\n\r\n</style>\r\n","\r\n<template>\r\n    <svg class=\"h-25 w-25 \"  viewBox=\"0 0 50 50\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-dasharray=\"90 150\" stroke-dashoffset=\"0\">\r\n    <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"1.5s\" repeatCount=\"indefinite\" />\r\n    <animate attributeName=\"stroke-dasharray\" values=\"1, 200; 90, 150; 90, 150\" keyTimes=\"0; 0.5; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\r\n    <animate attributeName=\"stroke-dashoffset\" values=\"0; -100; -124\" keyTimes=\"0; 0.5; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\r\n  </circle>\r\n  <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke=\"#13c8ec\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-dasharray=\"90 150\" stroke-dashoffset=\"0\">\r\n    <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"1.5s\" repeatCount=\"indefinite\" />\r\n    <animate attributeName=\"stroke-dasharray\" values=\"1, 200; 90, 150; 90, 150\" keyTimes=\"0; 0.5; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\r\n    <animate attributeName=\"stroke-dashoffset\" values=\"0; -35; -124\" keyTimes=\"0; 0.5; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\r\n  </circle>\r\n</svg>\r\n</template>\r\n","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nexport interface PSliderProps{\r\n    min: number,\r\n    max: number,\r\n    step: number\r\n}\r\nconst props = defineProps<PSliderProps>()\r\n\r\nconst value = defineModel({default: 0})\r\nconst percentage = computed(() => {\r\n  return ((value.value - props.min) / (props.max - props.min)) * 100;\r\n});\r\n</script>\r\n\r\n<template>\r\n        <div class=\"w-40 flex group  \">\r\n            <div class=\"h-2 rounded-xl w-full bg-pico-stroke-neutral relative\">\r\n                <input :min :max :step v-model=\"value\" type=\"range\" class=\" h-full opacity-0 absolute inset-y-0 -inset-x-2\"/>\r\n\r\n                <div class=\"h-2 rounded-xl bg-pico-primary  group-hover:bg-pico-primary/70 transition-colors duration-200 absolute left-0 pointer-events-none \" :style=\"{\r\n                width: percentage + '%'\r\n            }\" >\r\n            <div class=\"relative w-full h-full flex justify-end items-center pointer-events-none\">\r\n                <div class=\" absolute  h-5 w-5 border-2 border-white translate-x-1/2 transition-colors duration-200 bg-pico-primary rounded-full\">\r\n                    <div class=\"relative w-full h-full flex justify-center\">\r\n                        <div class=\"absolute bottom-[calc(100%+5px)] group-hover:opacity-100 opacity-0 duration-200 transition-opacity bg-pico-caption text-white px-2 rounded-lg text-xs py-0.5\">\r\n                            {{ value }}\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </div>    \r\n        </div>\r\n            </div>\r\n            \r\n        </div>\r\n</template>\r\n\r\n<style lang=\"css\" scoped>\r\n\r\n</style>","import { reactive, readonly } from \"vue\"\r\n\r\n\r\nconst stack = reactive<{id: number, message: string, zIndex: number, duration: number}[]>([])\r\nlet zIndex = 1000\r\nexport const useToast = () => {\r\n\r\n    const addToast = (message: string, duration=3000) => {\r\n        const id = Date.now() + Math.random()\r\n        zIndex++\r\n        const savedIndex = zIndex\r\n        stack.push({id, message, zIndex:savedIndex, duration}) \r\n        const timeout = setTimeout(() => {\r\n            const index = stack.findIndex(t => t.id === id);\r\n            if (index !== -1) stack.splice(index, 1);\r\n            clearTimeout(timeout)\r\n        }, duration);\r\n    }\r\n    return {\r\n    stack: readonly(stack),\r\n    addToast,\r\n}\r\n\r\n}\r\n","<script setup lang=\"ts\">\r\nimport PIcon from '@/components/base/PIcon/PIcon.vue';\r\nimport type { PicoIconsNames } from '@/utils/IconsEnum';\r\n\r\nexport interface PTabProps {\r\n    isActive: boolean\r\n    label: string\r\n    icon?: PicoIconsNames\r\n    \r\n    \r\n}\r\nconst props = defineProps<PTabProps>()\r\n</script>\r\n\r\n<template>\r\n    \r\n    <div class=\"duration-200 flex flex-col   items-center justify-center cursor-pointer  select-none gap-3   \"\r\n    >\r\n       <div class=\"flex w-full gap-2 justify-center items-center\">\r\n        <PIcon v-if=\"icon\" :name=\"icon\" class=\"duration-200\" :class=\"{\r\n            'text-pico-primary!': isActive,\r\n            'text-pico-stroke-neutral': !isActive\r\n        }\" />\r\n        <p class=\"text-sm/none duration-200\" :class=\"{\r\n            'text-pico-caption!': !isActive,\r\n        }\"> {{ label }}</p>\r\n        \r\n       </div>\r\n       <div class=\" bg-pico-primary duration-200  h-0.5 rounded-full w-0\" \r\n         :class=\"{\r\n            'w-full!': isActive,\r\n\r\n         }\"></div>\r\n        \r\n</div>\r\n</template>\r\n\r\n<style lang=\"css\" scoped>\r\n\r\n</style>","<script setup lang=\"ts\">\r\nimport PTab from '@/components/base/PTabs/components/PTab.vue';\r\nimport type { PicoIconsNames } from '@/utils/IconsEnum';\r\nimport { onMounted } from 'vue';\r\n\r\nexport interface TabOption {\r\n    value: number | string,\r\n    label: string\r\n    icon?: PicoIconsNames\r\n}\r\nexport interface PTabsProps {\r\n    options: TabOption[],\r\n    defaultOption?: string | number\r\n}\r\nconst props = defineProps<PTabsProps>()\r\n\r\nconst activeOption = defineModel<number | string>()\r\nconst changeOption = (value: number | string ) => {\r\n    activeOption.value = value\r\n}\r\nonMounted(() => {\r\n    if (props.defaultOption){\r\n        activeOption.value = props.defaultOption\r\n    }\r\n    else{\r\n        activeOption.value = props?.options[0]?.value\r\n    }\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n    <div class=\"flex   bg-white  gap-6  \">\r\n        <template v-for=\"option, _index in options\" :key=\"_index\">\r\n            <PTab  :is-active=\"option.value === activeOption\"  :label=\"option.label\" @click=\"changeOption(option.value)\" :icon=\"option.icon\" />\r\n        </template>\r\n    </div>\r\n</template>\r\n\r\n<style lang=\"css\" scoped>\r\n\r\n</style>"],"names":["computedVariant","computedSize","_createElementBlock","_normalizeClass","__props","_renderSlot","_ctx","_hoisted_1","render","_cache","_openBlock","_createElementVNode","CheckmarkIcon","PicoIcons","_createBlock","_resolveDynamicComponent","_unref","computedClasses","model","_useModel","$event","_createVNode","PIcon","value","errorMessage","useField","_mergeProps","_Fragment","_renderList","option","_toDisplayString","computedThumbClasses","computedTrackClasses","modelValue","toggleSwitch","props","percentage","computed","_hoisted_2","_normalizeStyle","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","stack","reactive","zIndex","useToast","addToast","message","duration","id","savedIndex","timeout","index","t","readonly","activeOption","changeOption","onMounted","_index","PTab"],"mappings":"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"}

package/dist/pico-ui.umd.js

@@ -0,0 +1,2 @@
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vee-validate")):typeof define=="function"&&define.amd?define(["exports","vue","vee-validate"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l["pico-ui"]={},l.Vue,l.veeValidate))})(this,(function(l,e,k){"use strict";const y=e.defineComponent({__name:"PButton",props:{variant:{default:"primary"},size:{default:"medium"}},setup(t){const o={primary:["bg-pico-primary","text-white","shadow-primary"],secondary:["bg-pico-secondary","text-white","shadow-secondary"],outline:["outline-2","outline-pico-primary","text-pico-primary"],ghost:["text-pico-gray","border-dashed border-2 border-pico-gray/50"],soft:["bg-pico-primary/20","text-pico-primary"]},n={large:["text-lg","py-3.5","px-8.5"],medium:["text-md","py-2.5","px-6"],small:["text-sm","py-1.5","px-4"]};return(s,a)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["w-max h-max rounded-lg font-semibold hover:brightness-80 duration-300",[o[t.variant],n[t.size]]])},[e.renderSlot(s.$slots,"default")],2))}}),b={xmlns:"http://www.w3.org/2000/svg",width:"12",height:"9",fill:"none"};function g(t,o){return e.openBlock(),e.createElementBlock("svg",b,[...o[0]||(o[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M10.868.366a1.25 1.25 0 0 1 0 1.767l-6.25 6.25a1.25 1.25 0 0 1-1.767 0l-2.5-2.5a1.25 1.25 0 0 1 1.767-1.767l1.617 1.616L9.1.366a1.25 1.25 0 0 1 1.767 0"},null,-1)])])}const u={checkmark:{render:g}},m=e.defineComponent({__name:"PIcon",props:{name:{}},setup(t){return(o,n)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(u)[t.name])))}}),x=["disabled"],_=e.defineComponent({__name:"PCheckboxInput",props:e.mergeModels({disabled:{type:Boolean,default:!1}},{modelValue:{type:Boolean},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=new Map([[!1,["outline-2"]],[!0,["bg-pico-primary"]]]),n=e.useModel(t,"modelValue");return(s,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(o).get(!!n.value),"outline-pico-stroke-neutral min-w-5.5 duration-300 h-5.5 flex relative justify-center items-center rounded-sm"])},[e.withDirectives(e.createElementVNode("input",{class:"opacity-0 inset-0 absolute",disabled:t.disabled,type:"checkbox","onUpdate:modelValue":a[0]||(a[0]=i=>n.value=i)},null,8,x),[[e.vModelCheckbox,n.value]]),e.createVNode(m,{name:"checkmark",class:"text-white"})],2))}}),w=e.defineComponent({__name:"PDivider",props:{orientation:{default:"horizontal"}},setup(t){const o={vertical:["w-2px","h-full"],horizontal:["h-2px","w-full"]};return(n,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["bg-pico-stroke-neutral",o[t.orientation]])},null,2))}}),B={class:"flex flex-col items-start"},C=e.defineComponent({__name:"PFormItem",props:{component:{},props:{},name:{},inputClass:{},errorClass:{}},setup(t){const{value:o,errorMessage:n}=k.useField(t.name,{});return(s,a)=>(e.openBlock(),e.createElementBlock("div",B,[e.unref(n)?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([t.errorClass,"text-pico-red text-xs max-w-full mb-1"])},e.toDisplayString(e.unref(n)),3)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.component),e.mergeProps({class:[t.inputClass,"max-w-max"],"is-invalid":!!e.unref(n),modelValue:e.unref(o),"onUpdate:modelValue":a[0]||(a[0]=i=>e.isRef(o)?o.value=i:null),name:t.name},t.props),null,16,["class","is-invalid","modelValue","name"]))]))}}),c=(t,o)=>{const n=t.__vccOpts||t;for(const[s,a]of o)n[s]=a;return n},V={},P={class:"rounded-lg p-8 bg-white outline-pico-stroke-neutral outline-2"};function $(t,o){return e.openBlock(),e.createElementBlock("div",P,[e.renderSlot(t.$slots,"default")])}const E=c(V,[["render",$]]),M={class:"flex gap-2"},N=["value","disabled"],T=e.defineComponent({__name:"PRadioInput",props:e.mergeModels({disabled:{type:Boolean,default:!1},name:{},options:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=new Map([[!1,["outline-2 -outline-offset-2"]],[!0,["bg-pico-primary"]]]),n=e.useModel(t,"modelValue");return(s,a)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,i=>(e.openBlock(),e.createElementBlock("div",M,[e.createElementVNode("div",{class:e.normalizeClass([e.unref(o).get(n.value===i.value),"outline-pico-stroke-neutral min-w-5.5 duration-300 h-5.5 flex relative justify-center items-center rounded-full"])},[e.withDirectives(e.createElementVNode("input",{type:"radio",value:i.value,class:"opacity-0 inset-0 absolute",disabled:t.disabled,"onUpdate:modelValue":a[0]||(a[0]=r=>n.value=r)},null,8,N),[[e.vModelRadio,n.value]]),a[1]||(a[1]=e.createElementVNode("div",{class:"w-2 h-2 bg-white rounded-full"},null,-1))],2),e.createElementVNode("p",null,e.toDisplayString(i.label),1)]))),256))}}),I={},S={class:"w-full h-full rounded-sm pico-skeleton"};function z(t,o){return e.openBlock(),e.createElementBlock("div",S)}const D=c(I,[["render",z],["__scopeId","data-v-7ff1dee9"]]),j=e.defineComponent({__name:"PSwitchInput",props:{modelValue:{type:Boolean},modelModifiers:{}},emits:["update:modelValue"],setup(t){const o=new Map([[!1,[""]],[!0,["translate-x-[calc(100%-2px)]"]]]),n=new Map([[!1,["bg-pico-stroke-neutral "]],[!0,["bg-pico-primary"]]]),s=e.useModel(t,"modelValue"),a=()=>{s.value=!s.value};return(i,r)=>(e.openBlock(),e.createElementBlock("div",{onClick:a,class:e.normalizeClass([e.unref(n).get(!!s.value),"p-0.5 duration-300 min-w-10.5 rounded-full"])},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(o).get(!!s.value),"w-5 duration-300 will-change-transform aspect-square rounded-full bg-white"])},null,2)],2))}}),O=["disabled","placeholder"],A=e.defineComponent({__name:"PTextInput",props:e.mergeModels({placeholder:{},isInvalid:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=new Map([[!0,["outline-pico-red! text-pico-red! bg-pico-light-red!"]],[!1,[]]]),n=e.useModel(t,"modelValue");return(s,a)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",{disabled:t.disabled,type:"text","onUpdate:modelValue":a[0]||(a[0]=i=>n.value=i),placeholder:t.placeholder,class:e.normalizeClass([e.unref(o).get(t.isInvalid),"outline-pico-stroke-neutral outline-1 disabled:text-pico-caption/70 disabled:cursor-not-allowed text-pico-caption focus:text-pico-text bg-pico-light focus:bg-pico-white duration-300 focus:outline-pico-primary px-3 py-2 rounded-lg"])},null,10,O)),[[e.vModelText,n.value]])}}),F={},U={class:"bg-pico-light w-full h-full"};function R(t,o){return e.openBlock(),e.createElementBlock("div",U,[e.renderSlot(t.$slots,"default")])}const q=c(F,[["render",R]]),L={},G={class:"shadow-dark rounded-lg p-4 bg-white"};function H(t,o){return e.openBlock(),e.createElementBlock("div",G,[e.renderSlot(t.$slots,"default")])}const J=c(L,[["render",H]]),K={},Q={class:"h-25 w-25",viewBox:"0 0 50 50",xmlns:"http://www.w3.org/2000/svg"};function W(t,o){return e.openBlock(),e.createElementBlock("svg",Q,[...o[0]||(o[0]=[e.createStaticVNode('<circle cx="25" cy="25" r="20" fill="none" stroke="#3b82f6" stroke-width="4" stroke-linecap="round" stroke-dasharray="90 150" stroke-dashoffset="0"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1.5s" repeatCount="indefinite"></animateTransform><animate attributeName="stroke-dasharray" values="1, 200; 90, 150; 90, 150" keyTimes="0; 0.5; 1" dur="2s" repeatCount="indefinite"></animate><animate attributeName="stroke-dashoffset" values="0; -100; -124" keyTimes="0; 0.5; 1" dur="2s" repeatCount="indefinite"></animate></circle><circle cx="25" cy="25" r="20" fill="none" stroke="#13c8ec" stroke-width="4" stroke-linecap="round" stroke-dasharray="90 150" stroke-dashoffset="0"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1.5s" repeatCount="indefinite"></animateTransform><animate attributeName="stroke-dasharray" values="1, 200; 90, 150; 90, 150" keyTimes="0; 0.5; 1" dur="2s" repeatCount="indefinite"></animate><animate attributeName="stroke-dashoffset" values="0; -35; -124" keyTimes="0; 0.5; 1" dur="2s" repeatCount="indefinite"></animate></circle>',2)])])}const X=c(K,[["render",W]]),Y={class:"w-40 flex group"},Z={class:"h-2 rounded-xl w-full bg-pico-stroke-neutral relative"},v=["min","max","step"],ee={class:"relative w-full h-full flex justify-end items-center pointer-events-none"},te={class:"absolute h-5 w-5 border-2 border-white translate-x-1/2 transition-colors duration-200 bg-pico-primary rounded-full"},oe={class:"relative w-full h-full flex justify-center"},ne={class:"absolute bottom-[calc(100%+5px)] group-hover:opacity-100 opacity-0 duration-200 transition-opacity bg-pico-caption text-white px-2 rounded-lg text-xs py-0.5"},le=e.defineComponent({__name:"PSlider",props:e.mergeModels({min:{},max:{},step:{}},{modelValue:{default:0},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=t,n=e.useModel(t,"modelValue"),s=e.computed(()=>(n.value-o.min)/(o.max-o.min)*100);return(a,i)=>(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("div",Z,[e.withDirectives(e.createElementVNode("input",{min:t.min,max:t.max,step:t.step,"onUpdate:modelValue":i[0]||(i[0]=r=>n.value=r),type:"range",class:"h-full opacity-0 absolute inset-y-0 -inset-x-2"},null,8,v),[[e.vModelText,n.value]]),e.createElementVNode("div",{class:"h-2 rounded-xl bg-pico-primary group-hover:bg-pico-primary/70 transition-colors duration-200 absolute left-0 pointer-events-none",style:e.normalizeStyle({width:s.value+"%"})},[e.createElementVNode("div",ee,[e.createElementVNode("div",te,[e.createElementVNode("div",oe,[e.createElementVNode("div",ne,e.toDisplayString(n.value),1)])])])],4)])]))}}),d=e.reactive([]);let f=1e3;const ae=()=>{const t=(o,n=3e3)=>{const s=Date.now()+Math.random();f++;const a=f;d.push({id:s,message:o,zIndex:a,duration:n});const i=setTimeout(()=>{const r=d.findIndex(p=>p.id===s);r!==-1&&d.splice(r,1),clearTimeout(i)},n)};return{stack:e.readonly(d),addToast:t}},se={class:"duration-200 flex flex-col items-center justify-center cursor-pointer select-none gap-3"},ie={class:"flex w-full gap-2 justify-center items-center"},h=e.defineComponent({__name:"PTab",props:{isActive:{type:Boolean},label:{},icon:{}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("div",se,[e.createElementVNode("div",ie,[t.icon?(e.openBlock(),e.createBlock(m,{key:0,name:t.icon,class:e.normalizeClass(["duration-200",{"text-pico-primary!":t.isActive,"text-pico-stroke-neutral":!t.isActive}])},null,8,["name","class"])):e.createCommentVNode("",!0),e.createElementVNode("p",{class:e.normalizeClass(["text-sm/none duration-200",{"text-pico-caption!":!t.isActive}])},e.toDisplayString(t.label),3)]),e.createElementVNode("div",{class:e.normalizeClass(["bg-pico-primary duration-200 h-0.5 rounded-full w-0",{"w-full!":t.isActive}])},null,2)]))}}),re={class:"flex bg-white gap-6"},ce=e.defineComponent({__name:"PTabs",props:e.mergeModels({options:{},defaultOption:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=t,n=e.useModel(t,"modelValue"),s=a=>{n.value=a};return e.onMounted(()=>{o.defaultOption?n.value=o.defaultOption:n.value=o?.options[0]?.value}),(a,i)=>(e.openBlock(),e.createElementBlock("div",re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(r,p)=>(e.openBlock(),e.createBlock(h,{key:p,"is-active":r.value===n.value,label:r.label,onClick:me=>s(r.value),icon:r.icon},null,8,["is-active","label","onClick","icon"]))),128))]))}});l.PBackgroud=q,l.PButton=y,l.PCard=J,l.PCheckboxInput=_,l.PDivider=w,l.PFormItem=C,l.PIcon=m,l.PPlane=E,l.PRadioInput=T,l.PSkeleton=D,l.PSlider=le,l.PSpinner=X,l.PSwitchInput=j,l.PTab=h,l.PTabs=ce,l.PTextInput=A,l.PicoIcons=u,l.useToast=ae,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+//# sourceMappingURL=pico-ui.umd.js.map

package/dist/pico-ui.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pico-ui.umd.js","sources":["../src/components/base/PButton/PButton.vue","../src/assets/checkmark.svg","../src/utils/IconsEnum.ts","../src/components/base/PIcon/PIcon.vue","../src/components/base/PCheckboxInput/PCheckboxInput.vue","../src/components/base/PDivider/PDivider.vue","../src/components/base/PFormItem/PFormItem.vue","../src/components/base/PPlane/PPlane.vue","../src/components/base/PRadioInput/PRadioInput.vue","../src/components/base/PSkeleton/PSkeleton.vue","../src/components/base/PSwitchInput/PSwitchInput.vue","../src/components/base/PTextInput/PTextInput.vue","../src/components/PBackground/PBackgroud.vue","../src/components/base/PCard/PCard.vue","../src/components/base/PSpinner/PSpinner.vue","../src/components/base/PSlider/PSlider.vue","../src/composables/useToast.ts","../src/components/base/PTabs/components/PTab.vue","../src/components/base/PTabs/PTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { variant = \"primary\", size = \"medium\" } = defineProps<PButtonProps>();\n\nexport interface PButtonProps {\n  variant?: PButtonVariants;\n  size?: PButtonSizes;\n}\nexport type PButtonVariants = \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"soft\";\nexport type PButtonSizes = \"large\" | \"medium\" | \"small\";\n\nconst computedVariant: Record<PButtonVariants, string[]> = {\n  primary: [\"bg-pico-primary\", \"text-white\", \"shadow-primary\"],\n  secondary: [\"bg-pico-secondary\", \"text-white\", \"shadow-secondary\"],\n  outline: [\"outline-2\", \"outline-pico-primary\", \"text-pico-primary\"],\n  ghost: [\"text-pico-gray\", \"border-dashed border-2 border-pico-gray/50\"],\n  soft: [\"bg-pico-primary/20\", \"text-pico-primary\"],\n};\n\nconst computedSize: Record<PButtonSizes, string[]> = {\n  large: [\"text-lg\", \"py-3.5\", \"px-8.5\"],\n  medium: [\"text-md\", \"py-2.5\", \"px-6\"],\n  small: [\"text-sm\", \"py-1.5\", \"px-4\"],\n};\n</script>\n\n<template>\n  <button\n    class=\"w-max h-max rounded-lg font-semibold hover:brightness-80 duration-300\"\n    :class=\"[computedVariant[variant], computedSize[size]]\"\n  >\n    <slot />\n  </button>\n</template>\n\n<style lang=\"css\" scoped></style>\n","import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: \"12\",\n  height: \"9\",\n  fill: \"none\"\n}\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, [...(_cache[0] || (_cache[0] = [\n    _createElementVNode(\"path\", {\n      fill: \"currentColor\",\n      d: \"M10.868.366a1.25 1.25 0 0 1 0 1.767l-6.25 6.25a1.25 1.25 0 0 1-1.767 0l-2.5-2.5a1.25 1.25 0 0 1 1.767-1.767l1.617 1.616L9.1.366a1.25 1.25 0 0 1 1.767 0\"\n    }, null, -1)\n  ]))]))\n}\nexport default { render: render }","import type { Component } from 'vue'\nimport CheckmarkIcon from '@/assets/checkmark.svg'\nexport type PicoIconsNames = 'checkmark'\n\nexport const PicoIcons: Record<PicoIconsNames, Component | string> = {\n  checkmark: CheckmarkIcon\n}\n","<script setup lang=\"ts\">\nimport { PicoIcons, type PicoIconsNames } from \"../../../utils/IconsEnum\";\nexport interface PIconProps {\n  name: PicoIconsNames;\n}\n\ndefineProps<PIconProps>();\n</script>\n\n<template>\n  <component :is=\"PicoIcons[name]\" />\n</template>\n\n<style lang=\"css\" scoped></style>\n","<script setup lang=\"ts\">\r\nimport PIcon from \"../PIcon/PIcon.vue\";\r\n\r\nexport interface PCheckboxInputProps {\r\n  disabled?: boolean;\r\n}\r\n\r\nconst { disabled = false } = defineProps<PCheckboxInputProps>();\r\nconst computedClasses = new Map([\r\n  [false, [\"outline-2\"]],\r\n  [true, [\"bg-pico-primary\"]],\r\n]);\r\nconst model = defineModel<boolean>();\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    :class=\"computedClasses.get(!!model)\"\r\n    class=\"outline-pico-stroke-neutral min-w-5.5 duration-300 h-5.5 flex relative justify-center items-center rounded-sm\"\r\n  >\r\n    <input\r\n      class=\"opacity-0 inset-0 absolute\"\r\n      :disabled=\"disabled\"\r\n      type=\"checkbox\"\r\n      v-model=\"model\"\r\n    />\r\n    <PIcon name=\"checkmark\" class=\"text-white\" />\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"css\" scoped></style>\r\n","<script setup lang=\"ts\">\nconst { orientation = \"horizontal\" } = defineProps<PDividerProps>();\n\nexport interface PDividerProps {\n  orientation?: \"vertical\" | \"horizontal\";\n}\n\nexport type PDividerOrientation = \"vertical\" | \"horizontal\";\n\nconst computedClasses: Record<PDividerOrientation, string[]> = {\n  vertical: [\"w-2px\", \"h-full\"],\n  horizontal: [\"h-2px\", \"w-full\"],\n};\n</script>\n\n<template>\n  <div\n    class=\"bg-pico-stroke-neutral\"\n    :class=\"computedClasses[orientation]\"\n  ></div>\n</template>\n\n<style lang=\"css\" scoped></style>\n","<script setup lang=\"ts\">\nimport { useField } from \"vee-validate\";\nimport type { Component } from \"vue\";\n\nexport interface PFormItemProps {\n  component: Component;\n  props: Record<string, unknown>;\n  name: string;\n  inputClass?: string;\n  errorClass?: string;\n}\nconst { name } = defineProps<PFormItemProps>();\n\nconst { value, errorMessage } = useField(name, {});\n</script>\n\n<template>\n  <div class=\"flex flex-col items-start\">\n    <span\n      v-if=\"errorMessage\"\n      :class=\"errorClass\"\n      class=\"text-pico-red text-xs max-w-full mb-1\"\n      >{{ errorMessage }}</span\n    >\n    <component\n      :class=\"inputClass\"\n      class=\"max-w-max\"\n      :is-invalid=\"!!errorMessage\"\n      v-model=\"value\"\n      :is=\"component\"\n      :name=\"name\"\n      v-bind=\"props\"\n    ></component>\n  </div>\n</template>\n\n<style lang=\"css\" scoped></style>\n","<script setup lang=\"ts\"></script>\n\n<template>\n  <div class=\"rounded-lg p-8 bg-white outline-pico-stroke-neutral outline-2\">\n    <slot />\n  </div>\n</template>\n\n<style lang=\"css\" scoped></style>\n","<script setup lang=\"ts\">\nexport interface PRadioInputProps {\n  disabled?: boolean;\n  name: string;\n  options: PRadioOptionItem[];\n}\n\nexport type PRadioOptionItem = { value: string; label: string };\n\nconst { disabled = false } = defineProps<PRadioInputProps>();\nconst computedClasses = new Map([\n  [false, [\"outline-2 -outline-offset-2\"]],\n  [true, [\"bg-pico-primary\"]],\n]);\nconst model = defineModel<string>();\n</script>\n\n<template>\n  <div v-for=\"option in options\" class=\"flex gap-2\">\n    <div\n      :class=\"computedClasses.get(model === option.value)\"\n      class=\"outline-pico-stroke-neutral min-w-5.5 duration-300 h-5.5 flex relative justify-center items-center rounded-full\"\n    >\n      <input\n        type=\"radio\"\n        :value=\"option.value\"\n        class=\"opacity-0 inset-0 absolute\"\n        :disabled=\"disabled\"\n        v-model=\"model\"\n      />\n      <div class=\"w-2 h-2 bg-white rounded-full\"></div>\n    </div>\n    <p>\n      {{ option.label }}\n    </p>\n  </div>\n</template>\n\n<style lang=\"css\" scoped></style>\n","<template>\n  <div class=\"w-full h-full rounded-sm pico-skeleton\" />\n</template>\n\n<style lang=\"css\" scoped>\n.pico-skeleton {\n  background: linear-gradient(\n    70deg,\n    var(--color-pico-stroke-neutral) 30%,\n    var(--color-pico-light),\n    var(--color-pico-stroke-neutral) 70%\n  );\n  background-size: 200% 100%;\n  animation: skeleton 1.5s infinite linear;\n}\n\n@keyframes skeleton {\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -100% 0;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nconst computedThumbClasses = new Map([\n  [false, [\"\"]],\n  [true, [\"translate-x-[calc(100%-2px)]\"]],\n]);\n\nconst computedTrackClasses = new Map([\n  [false, [\"bg-pico-stroke-neutral \"]],\n  [true, [\"bg-pico-primary\"]],\n]);\n\nconst modelValue = defineModel<boolean>();\n\nconst toggleSwitch = () => {\n  modelValue.value = !modelValue.value;\n};\n</script>\n\n<template>\n  <div\n    @click=\"toggleSwitch\"\n    :class=\"computedTrackClasses.get(!!modelValue)\"\n    class=\"p-0.5 duration-300 min-w-10.5 rounded-full\"\n  >\n    <div\n      :class=\"computedThumbClasses.get(!!modelValue)\"\n      class=\"w-5 duration-300 will-change-transform aspect-square rounded-full bg-white\"\n    ></div>\n  </div>\n</template>\n\n<style lang=\"css\" scoped></style>\n","<script setup lang=\"ts\">\nexport interface PTextInputProps {\n  placeholder?: string;\n  isInvalid?: boolean;\n  disabled?: boolean;\n}\n\nconst { isInvalid = false, disabled = false } = defineProps<PTextInputProps>();\nconst computedClasses = new Map([\n  [true, [\"outline-pico-red! text-pico-red! bg-pico-light-red!\"]],\n  [false, []],\n]);\nconst model = defineModel();\n</script>\n\n<template>\n  <input\n    :disabled=\"disabled\"\n    type=\"text\"\n    v-model=\"model\"\n    :placeholder=\"placeholder\"\n    :class=\"computedClasses.get(isInvalid)\"\n    class=\"outline-pico-stroke-neutral outline-1 disabled:text-pico-caption/70 disabled:cursor-not-allowed text-pico-caption focus:text-pico-text bg-pico-light focus:bg-pico-white duration-300 focus:outline-pico-primary px-3 py-2 rounded-lg\"\n  />\n</template>\n\n<style lang=\"css\" scoped></style>\n","<template>\n  <div class=\"bg-pico-light w-full h-full\">\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\"></script>\r\n\r\n<template>\r\n  <div class=\"shadow-dark rounded-lg p-4 bg-white\">\r\n    <slot />\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"css\" scoped>\r\n\r\n</style>\r\n","\r\n<template>\r\n    <svg class=\"h-25 w-25 \"  viewBox=\"0 0 50 50\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-dasharray=\"90 150\" stroke-dashoffset=\"0\">\r\n    <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"1.5s\" repeatCount=\"indefinite\" />\r\n    <animate attributeName=\"stroke-dasharray\" values=\"1, 200; 90, 150; 90, 150\" keyTimes=\"0; 0.5; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\r\n    <animate attributeName=\"stroke-dashoffset\" values=\"0; -100; -124\" keyTimes=\"0; 0.5; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\r\n  </circle>\r\n  <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke=\"#13c8ec\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-dasharray=\"90 150\" stroke-dashoffset=\"0\">\r\n    <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"1.5s\" repeatCount=\"indefinite\" />\r\n    <animate attributeName=\"stroke-dasharray\" values=\"1, 200; 90, 150; 90, 150\" keyTimes=\"0; 0.5; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\r\n    <animate attributeName=\"stroke-dashoffset\" values=\"0; -35; -124\" keyTimes=\"0; 0.5; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\r\n  </circle>\r\n</svg>\r\n</template>\r\n","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nexport interface PSliderProps{\r\n    min: number,\r\n    max: number,\r\n    step: number\r\n}\r\nconst props = defineProps<PSliderProps>()\r\n\r\nconst value = defineModel({default: 0})\r\nconst percentage = computed(() => {\r\n  return ((value.value - props.min) / (props.max - props.min)) * 100;\r\n});\r\n</script>\r\n\r\n<template>\r\n        <div class=\"w-40 flex group  \">\r\n            <div class=\"h-2 rounded-xl w-full bg-pico-stroke-neutral relative\">\r\n                <input :min :max :step v-model=\"value\" type=\"range\" class=\" h-full opacity-0 absolute inset-y-0 -inset-x-2\"/>\r\n\r\n                <div class=\"h-2 rounded-xl bg-pico-primary  group-hover:bg-pico-primary/70 transition-colors duration-200 absolute left-0 pointer-events-none \" :style=\"{\r\n                width: percentage + '%'\r\n            }\" >\r\n            <div class=\"relative w-full h-full flex justify-end items-center pointer-events-none\">\r\n                <div class=\" absolute  h-5 w-5 border-2 border-white translate-x-1/2 transition-colors duration-200 bg-pico-primary rounded-full\">\r\n                    <div class=\"relative w-full h-full flex justify-center\">\r\n                        <div class=\"absolute bottom-[calc(100%+5px)] group-hover:opacity-100 opacity-0 duration-200 transition-opacity bg-pico-caption text-white px-2 rounded-lg text-xs py-0.5\">\r\n                            {{ value }}\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </div>    \r\n        </div>\r\n            </div>\r\n            \r\n        </div>\r\n</template>\r\n\r\n<style lang=\"css\" scoped>\r\n\r\n</style>","import { reactive, readonly } from \"vue\"\r\n\r\n\r\nconst stack = reactive<{id: number, message: string, zIndex: number, duration: number}[]>([])\r\nlet zIndex = 1000\r\nexport const useToast = () => {\r\n\r\n    const addToast = (message: string, duration=3000) => {\r\n        const id = Date.now() + Math.random()\r\n        zIndex++\r\n        const savedIndex = zIndex\r\n        stack.push({id, message, zIndex:savedIndex, duration}) \r\n        const timeout = setTimeout(() => {\r\n            const index = stack.findIndex(t => t.id === id);\r\n            if (index !== -1) stack.splice(index, 1);\r\n            clearTimeout(timeout)\r\n        }, duration);\r\n    }\r\n    return {\r\n    stack: readonly(stack),\r\n    addToast,\r\n}\r\n\r\n}\r\n","<script setup lang=\"ts\">\r\nimport PIcon from '@/components/base/PIcon/PIcon.vue';\r\nimport type { PicoIconsNames } from '@/utils/IconsEnum';\r\n\r\nexport interface PTabProps {\r\n    isActive: boolean\r\n    label: string\r\n    icon?: PicoIconsNames\r\n    \r\n    \r\n}\r\nconst props = defineProps<PTabProps>()\r\n</script>\r\n\r\n<template>\r\n    \r\n    <div class=\"duration-200 flex flex-col   items-center justify-center cursor-pointer  select-none gap-3   \"\r\n    >\r\n       <div class=\"flex w-full gap-2 justify-center items-center\">\r\n        <PIcon v-if=\"icon\" :name=\"icon\" class=\"duration-200\" :class=\"{\r\n            'text-pico-primary!': isActive,\r\n            'text-pico-stroke-neutral': !isActive\r\n        }\" />\r\n        <p class=\"text-sm/none duration-200\" :class=\"{\r\n            'text-pico-caption!': !isActive,\r\n        }\"> {{ label }}</p>\r\n        \r\n       </div>\r\n       <div class=\" bg-pico-primary duration-200  h-0.5 rounded-full w-0\" \r\n         :class=\"{\r\n            'w-full!': isActive,\r\n\r\n         }\"></div>\r\n        \r\n</div>\r\n</template>\r\n\r\n<style lang=\"css\" scoped>\r\n\r\n</style>","<script setup lang=\"ts\">\r\nimport PTab from '@/components/base/PTabs/components/PTab.vue';\r\nimport type { PicoIconsNames } from '@/utils/IconsEnum';\r\nimport { onMounted } from 'vue';\r\n\r\nexport interface TabOption {\r\n    value: number | string,\r\n    label: string\r\n    icon?: PicoIconsNames\r\n}\r\nexport interface PTabsProps {\r\n    options: TabOption[],\r\n    defaultOption?: string | number\r\n}\r\nconst props = defineProps<PTabsProps>()\r\n\r\nconst activeOption = defineModel<number | string>()\r\nconst changeOption = (value: number | string ) => {\r\n    activeOption.value = value\r\n}\r\nonMounted(() => {\r\n    if (props.defaultOption){\r\n        activeOption.value = props.defaultOption\r\n    }\r\n    else{\r\n        activeOption.value = props?.options[0]?.value\r\n    }\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n    <div class=\"flex   bg-white  gap-6  \">\r\n        <template v-for=\"option, _index in options\" :key=\"_index\">\r\n            <PTab  :is-active=\"option.value === activeOption\"  :label=\"option.label\" @click=\"changeOption(option.value)\" :icon=\"option.icon\" />\r\n        </template>\r\n    </div>\r\n</template>\r\n\r\n<style lang=\"css\" scoped>\r\n\r\n</style>"],"names":["computedVariant","computedSize","_createElementBlock","_normalizeClass","__props","_renderSlot","_ctx","_hoisted_1","render","_cache","_openBlock","_createElementVNode","PicoIcons","_createBlock","_resolveDynamicComponent","_unref","computedClasses","model","_useModel","$event","_createVNode","PIcon","value","errorMessage","useField","_mergeProps","_Fragment","_renderList","option","_toDisplayString","computedThumbClasses","computedTrackClasses","modelValue","toggleSwitch","props","percentage","computed","_hoisted_2","_normalizeStyle","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","stack","reactive","zIndex","useToast","addToast","message","duration","id","savedIndex","timeout","index","t","readonly","activeOption","changeOption","onMounted","_index","PTab"],"mappings":"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"}

package/dist/style.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@layer components;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-semibold:600;--radius-sm:.25rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-pico-primary:#13c8ec;--color-pico-secondary:#3b82f6;--color-pico-light:#f6f8f8;--color-pico-neutral:#f1f5f9;--color-pico-dark:#101f22;--color-pico-gray:#64748b;--color-pico-stroke-neutral:#e2e8f0;--color-pico-text:#1e293b;--color-pico-caption:#64748b;--color-pico-red:#ef4444;--color-pico-light-red:#fef2f2;--text-md:1rem;--spacing-2px:2px}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;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");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.-inset-x-2{inset-inline:calc(var(--spacing)*-2)}.inset-y-0{inset-block:calc(var(--spacing)*0)}.right-5{right:calc(var(--spacing)*5)}.bottom-5{bottom:calc(var(--spacing)*5)}.bottom-\[calc\(100\%\+5px\)\]{bottom:calc(100% + 5px)}.left-0{left:calc(var(--spacing)*0)}.z-9999{z-index:9999}.mb-1{margin-bottom:calc(var(--spacing)*1)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.aspect-square{aspect-ratio:1}.h-0\.5{height:calc(var(--spacing)*.5)}.h-1{height:calc(var(--spacing)*1)}.h-2{height:calc(var(--spacing)*2)}.h-2px{height:var(--spacing-2px)}.h-5{height:calc(var(--spacing)*5)}.h-5\!{height:calc(var(--spacing)*5)!important}.h-5\.5{height:calc(var(--spacing)*5.5)}.h-12\!{height:calc(var(--spacing)*12)!important}.h-12\.5\!{height:calc(var(--spacing)*12.5)!important}.h-25{height:calc(var(--spacing)*25)}.h-\[1em\]\!{height:1em!important}.h-full{height:100%}.h-max{height:max-content}.min-h-screen{min-height:100vh}.w-0{width:calc(var(--spacing)*0)}.w-2{width:calc(var(--spacing)*2)}.w-2px{width:var(--spacing-2px)}.w-4\/5{width:80%}.w-5{width:calc(var(--spacing)*5)}.w-5\!{width:calc(var(--spacing)*5)!important}.w-12\!{width:calc(var(--spacing)*12)!important}.w-12\.5\!{width:calc(var(--spacing)*12.5)!important}.w-25{width:calc(var(--spacing)*25)}.w-40{width:calc(var(--spacing)*40)}.w-\[120px\]\!{width:120px!important}.w-\[256px\]\!{width:256px!important}.w-full{width:100%}.w-full\!{width:100%!important}.w-max{width:max-content}.max-w-200{max-width:calc(var(--spacing)*200)}.max-w-\[300px\]{max-width:300px}.max-w-full{max-width:100%}.max-w-max{max-width:max-content}.min-w-5\.5{min-width:calc(var(--spacing)*5.5)}.min-w-10\.5{min-width:calc(var(--spacing)*10.5)}.translate-x-1\/2{--tw-translate-x: 50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-\[calc\(100\%-2px\)\]{--tw-translate-x: calc(100% - 2px) ;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-evenly{justify-content:space-evenly}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-6{gap:calc(var(--spacing)*6)}.self-start{align-self:flex-start}.rounded-full{border-radius:3.40282e38px}.rounded-full\!{border-radius:3.40282e38px!important}.rounded-lg{border-radius:var(--radius-lg)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-l-5{border-left-style:var(--tw-border-style);border-left-width:5px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[\#13DAEC\]{border-color:#13daec}.border-pico-gray\/50{border-color:#64748b80}@supports (color:color-mix(in lab,red,red)){.border-pico-gray\/50{border-color:color-mix(in oklab,var(--color-pico-gray)50%,transparent)}}.border-white{border-color:var(--color-white)}.bg-pico-caption{background-color:var(--color-pico-caption)}.bg-pico-light{background-color:var(--color-pico-light)}.bg-pico-light-red\!{background-color:var(--color-pico-light-red)!important}.bg-pico-primary{background-color:var(--color-pico-primary)}.bg-pico-primary\/20{background-color:#13c8ec33}@supports (color:color-mix(in lab,red,red)){.bg-pico-primary\/20{background-color:color-mix(in oklab,var(--color-pico-primary)20%,transparent)}}.bg-pico-secondary{background-color:var(--color-pico-secondary)}.bg-pico-stroke-neutral{background-color:var(--color-pico-stroke-neutral)}.bg-white{background-color:var(--color-white)}.p-0\.5{padding:calc(var(--spacing)*.5)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-8{padding:calc(var(--spacing)*8)}.p-10{padding:calc(var(--spacing)*10)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8\.5{padding-inline:calc(var(--spacing)*8.5)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3\.5{padding-block:calc(var(--spacing)*3.5)}.text-center{text-align:center}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\/none{font-size:var(--text-sm);line-height:1}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-md{font-size:var(--text-md)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-pico-caption{color:var(--color-pico-caption)}.text-pico-caption\!{color:var(--color-pico-caption)!important}.text-pico-dark\/90{color:#101f22e6}@supports (color:color-mix(in lab,red,red)){.text-pico-dark\/90{color:color-mix(in oklab,var(--color-pico-dark)90%,transparent)}}.text-pico-gray{color:var(--color-pico-gray)}.text-pico-primary{color:var(--color-pico-primary)}.text-pico-primary\!{color:var(--color-pico-primary)!important}.text-pico-red{color:var(--color-pico-red)}.text-pico-red\!{color:var(--color-pico-red)!important}.text-pico-stroke-neutral{color:var(--color-pico-stroke-neutral)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.shadow-dark{--tw-shadow:0px 2px 8px var(--tw-shadow-color,-3px)#101f2233}@supports (color:color-mix(in lab,red,red)){.shadow-dark{--tw-shadow:0px 2px 8px var(--tw-shadow-color,-3px)color-mix(in srgb,var(--color-pico-dark)20%,transparent)}}.shadow-dark{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-primary{--tw-shadow:0px 10px 15px var(--tw-shadow-color,-3px)#13c8ec33}@supports (color:color-mix(in lab,red,red)){.shadow-primary{--tw-shadow:0px 10px 15px var(--tw-shadow-color,-3px)color-mix(in srgb,var(--color-pico-primary)20%,transparent)}}.shadow-primary{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-secondary{--tw-shadow:0px 10px 15px var(--tw-shadow-color,-3px)#3b82f633}@supports (color:color-mix(in lab,red,red)){.shadow-secondary{--tw-shadow:0px 10px 15px var(--tw-shadow-color,-3px)color-mix(in srgb,var(--color-pico-secondary)20%,transparent)}}.shadow-secondary{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline,.outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.outline-2{outline-style:var(--tw-outline-style);outline-width:2px}.-outline-offset-2{outline-offset:-2px}.outline-pico-primary{outline-color:var(--color-pico-primary)}.outline-pico-red\!{outline-color:var(--color-pico-red)!important}.outline-pico-stroke-neutral{outline-color:var(--color-pico-stroke-neutral)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.will-change-transform{will-change:transform}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.group-hover\:bg-pico-primary\/70:is(:where(.group):hover *){background-color:#13c8ecb3}@supports (color:color-mix(in lab,red,red)){.group-hover\:bg-pico-primary\/70:is(:where(.group):hover *){background-color:color-mix(in oklab,var(--color-pico-primary)70%,transparent)}}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\:bg-pico-light:hover{background-color:var(--color-pico-light)}.hover\:brightness-80:hover{--tw-brightness:brightness(80%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.focus\:text-pico-text:focus{color:var(--color-pico-text)}.focus\:outline-pico-primary:focus{outline-color:var(--color-pico-primary)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:text-pico-caption\/70:disabled{color:#64748bb3}@supports (color:color-mix(in lab,red,red)){.disabled\:text-pico-caption\/70:disabled{color:color-mix(in oklab,var(--color-pico-caption)70%,transparent)}}.pico-header-1{color:var(--color-pico-text);font-size:3rem;font-weight:700;line-height:1.2}.pico-header-2{color:var(--color-pico-text);font-size:2.25rem;font-weight:600;line-height:1.2}.pico-header-3{color:var(--color-pico-text);font-size:1.875rem;font-weight:400;line-height:1.2}.pico-text-large{color:var(--color-pico-text);font-size:1.125rem;font-weight:400;line-height:1.25}.pico-text-medium{color:var(--color-pico-text);font-size:1rem;font-weight:400;line-height:1.25}.pico-text-small{color:var(--color-pico-text);font-size:.875rem;font-weight:400;line-height:1.25}.pico-text-caption{color:var(--color-pico-caption);font-size:.75rem;font-weight:400;line-height:1.25}}body{font-family:Inter,sans-serif}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}.pico-skeleton[data-v-7ff1dee9]{background:linear-gradient(70deg,var(--color-pico-stroke-neutral) 30%,var(--color-pico-light),var(--color-pico-stroke-neutral) 70%);background-size:200% 100%;animation:skeleton-7ff1dee9 1.5s infinite linear}@keyframes skeleton-7ff1dee9{0%{background-position:100% 0}to{background-position:-100% 0}}

package/dist/utils/IconsEnum.d.ts

@@ -0,0 +1,3 @@
+import { Component } from 'vue';
+export type PicoIconsNames = 'checkmark';
+export declare const PicoIcons: Record<PicoIconsNames, Component | string>;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,68 +1,68 @@
-{
-  "name": "@cbutep_n/pico-ui",
-  "private": false,
-  "version": "0.0.7",
-  "publishConfig": {
-    "access": "public"
-  },
-  "type": "module",
-  "description": "Ui library for Pico",
-  "author": "Sacrifice",
-  "license": "MIT",
-  "keywords": [
-    "vue",
-    "ui",
-    "components",
-    "tailwind"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Sacrifise/pico-ui.git"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/pico-ui.es.js",
-      "require": "./dist/pico-ui.umd.js"
-    },
-    "./style.css": "./dist/style.css"
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "build:lib": "vite build",
-    "preview": "vite preview",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "lint:check": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
-    "format": "prettier --write \"src/**/*.{vue,js,ts,jsx,tsx,scss,css,json,md}\"",
-    "format:check": "prettier --check \"src/**/*.{vue,js,ts,jsx,tsx,scss,css,json,md}\""
-  },
-  "peerDependencies": {
-    "@tailwindcss/vite": "^4.1.18",
-    "@vee-validate/valibot": "^4.15.1",
-    "tailwindcss": "^4.1.18",
-    "valibot": "^1.2.0",
-    "vee-validate": "^4.15.1",
-    "vue": "^3.5.25"
-  },
-  "devDependencies": {
-    "@types/node": "^24.10.1",
-    "@vitejs/plugin-vue": "^6.0.2",
-    "@vue/tsconfig": "^0.8.1",
-    "eslint": "^10.0.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier-vue": "^5.0.0",
-    "eslint-plugin-vue": "^10.8.0",
-    "prettier": "^3.8.1",
-    "typescript": "~5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-svg-loader": "^5.1.0",
-    "vue-tsc": "^3.1.5"
-  }
-}
+{
+  "name": "@cbutep_n/pico-ui",
+  "private": false,
+  "version": "0.0.9",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "description": "Ui library for Pico",
+  "author": "Sacrifice",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "ui",
+    "components",
+    "tailwind"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Sacrifise/pico-ui.git"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/pico-ui.es.js",
+      "require": "./dist/pico-ui.umd.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "build:lib": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "lint:check": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
+    "format": "prettier --write \"src/**/*.{vue,js,ts,jsx,tsx,scss,css,json,md}\"",
+    "format:check": "prettier --check \"src/**/*.{vue,js,ts,jsx,tsx,scss,css,json,md}\""
+  },
+  "peerDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@vee-validate/valibot": "^4.15.1",
+    "tailwindcss": "^4.1.18",
+    "valibot": "^1.2.0",
+    "vee-validate": "^4.15.1",
+    "vue": "^3.5.25"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^10.0.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier-vue": "^5.0.0",
+    "eslint-plugin-vue": "^10.8.0",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-svg-loader": "^5.1.0",
+    "vue-tsc": "^3.1.5"
+  }
+}