@indielayer/ui 1.0.9 → 1.1.0

package/lib/components/textarea/Textarea.vue.d.ts

@@ -1,3 +1,45 @@
+import { type ExtractPublicPropTypes } from 'vue';
+declare const textareaProps: {
+    helper: StringConstructor;
+    label: StringConstructor;
+    dir: {
+        type: StringConstructor;
+        default: string;
+    };
+    rows: (StringConstructor | NumberConstructor)[];
+    max: (StringConstructor | NumberConstructor)[];
+    maxlength: (StringConstructor | NumberConstructor)[];
+    min: (StringConstructor | NumberConstructor)[];
+    minlength: (StringConstructor | NumberConstructor)[];
+    placeholder: StringConstructor;
+    adjustToText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    preventEnter: BooleanConstructor;
+    block: BooleanConstructor;
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    error: StringConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>;
 declare const _default: import("vue").DefineComponent<{
     helper: StringConstructor;
     label: StringConstructor;
@@ -5,11 +47,11 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    rows: (NumberConstructor | StringConstructor)[];
-    max: (NumberConstructor | StringConstructor)[];
-    maxlength: (NumberConstructor | StringConstructor)[];
-    min: (NumberConstructor | StringConstructor)[];
-    minlength: (NumberConstructor | StringConstructor)[];
+    rows: (StringConstructor | NumberConstructor)[];
+    max: (StringConstructor | NumberConstructor)[];
+    maxlength: (StringConstructor | NumberConstructor)[];
+    min: (StringConstructor | NumberConstructor)[];
+    minlength: (StringConstructor | NumberConstructor)[];
     placeholder: StringConstructor;
     adjustToText: {
         type: BooleanConstructor;
@@ -41,7 +83,7 @@ declare const _default: import("vue").DefineComponent<{
     focus: () => void | undefined;
     blur: () => void | undefined;
     reset: () => void;
-    validate: (val: any) => boolean;
+    validate: (val?: any) => boolean;
     setError: (val: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     helper: StringConstructor;
@@ -50,11 +92,11 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    rows: (NumberConstructor | StringConstructor)[];
-    max: (NumberConstructor | StringConstructor)[];
-    maxlength: (NumberConstructor | StringConstructor)[];
-    min: (NumberConstructor | StringConstructor)[];
-    minlength: (NumberConstructor | StringConstructor)[];
+    rows: (StringConstructor | NumberConstructor)[];
+    max: (StringConstructor | NumberConstructor)[];
+    maxlength: (StringConstructor | NumberConstructor)[];
+    min: (StringConstructor | NumberConstructor)[];
+    minlength: (StringConstructor | NumberConstructor)[];
     placeholder: StringConstructor;
     adjustToText: {
         type: BooleanConstructor;
@@ -83,18 +125,18 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    readonly: boolean;
-    size: import("../../composables/common").Size;
-    required: boolean;
+    disabled: boolean;
     dir: string;
+    size: import("../../composables/common").Size;
     block: boolean;
-    disabled: boolean;
+    required: boolean;
     loading: boolean;
+    readonly: boolean;
     validateOnInput: boolean;
     rules: unknown[];
     adjustToText: boolean;
     preventEnter: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/components/textarea/Textarea.vue.js

@@ -0,0 +1,110 @@
+import { defineComponent as V, ref as B, watch as P, openBlock as m, createElementBlock as u, normalizeStyle as K, unref as r, normalizeClass as p, toDisplayString as R, createCommentVNode as j, createElementVNode as D, mergeProps as H, toHandlers as L, withKeys as X, createVNode as F } from "vue";
+import { useResizeObserver as O, useEventListener as q } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
+import { useCSS as A } from "../../composables/css.js";
+import { useTheme as G } from "../../composables/theme.js";
+import { useCommon as d } from "../../composables/common.js";
+import { useColors as J } from "../../composables/colors.js";
+import { useInputtable as s } from "../../composables/inputtable.js";
+import { useInteractive as f } from "../../composables/interactive.js";
+import M from "../helpers/InputError.js";
+import Q from "./Textarea.theme.js";
+const U = ["textContent"], W = ["disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value", "onKeydown"], Y = {
+  ...d.props(),
+  ...f.props(),
+  ...s.props(),
+  helper: String,
+  label: String,
+  dir: {
+    type: String,
+    default: "ltr"
+  },
+  rows: [Number, String],
+  max: [Number, String],
+  maxlength: [Number, String],
+  min: [Number, String],
+  minlength: [Number, String],
+  placeholder: String,
+  adjustToText: {
+    type: Boolean,
+    default: !0
+  },
+  preventEnter: Boolean,
+  block: Boolean
+}, Z = {
+  name: "XTextarea",
+  validators: {
+    ...d.validators()
+  }
+}, ue = /* @__PURE__ */ V({
+  ...Z,
+  props: Y,
+  emits: s.emits(),
+  setup(c, { expose: h, emit: g }) {
+    const o = c, t = B(null);
+    O(t, n), typeof window < "u" && q(window, "resize", n), P([() => o.modelValue, () => o.size], () => {
+      setTimeout(n);
+    });
+    const b = A("textarea"), y = J().getPalette("primary"), v = b.get("border", y[400]);
+    function w() {
+      n();
+    }
+    function S(e) {
+      o.preventEnter && e.preventDefault(), e.stopPropagation();
+    }
+    function n() {
+      o.adjustToText && t.value && (t.value.style.height = "1px", t.value.style.height = 2 + t.value.scrollHeight + "px");
+    }
+    const { focus: i, blur: N } = f(t), {
+      errorInternal: l,
+      isInsideForm: x,
+      inputListeners: C,
+      reset: E,
+      validate: k,
+      setError: T
+    } = s(o, { focus: i, emit: g }), { styles: z, classes: a, className: I } = G("textarea", Q, o, { errorInternal: l });
+    return h({ focus: i, blur: N, reset: E, validate: k, setError: T }), (e, _) => (m(), u("label", {
+      style: K(r(z)),
+      class: p(["relative", [
+        r(I),
+        r(a).wrapper,
+        { "mb-3": r(x), "w-full": e.block }
+      ]])
+    }, [
+      e.label ? (m(), u("p", {
+        key: 0,
+        class: p(r(a).label),
+        textContent: R(e.label)
+      }, null, 10, U)) : j("", !0),
+      D("textarea", H({
+        ref_key: "elRef",
+        ref: t,
+        class: ["", [
+          r(a).input,
+          r(l) ? "border-red-500 dark:border-red-400 focus:outline-red-500" : "focus:outline-[color:var(--x-textarea-border)]"
+        ]],
+        style: r(v),
+        disabled: e.disabled,
+        max: e.max,
+        maxlength: e.maxlength,
+        min: e.min,
+        dir: e.dir,
+        rows: e.rows,
+        minlength: e.minlength,
+        name: e.name,
+        placeholder: e.placeholder,
+        readonly: e.readonly,
+        value: e.modelValue ? String(e.modelValue) : ""
+      }, L(r(C), !0), {
+        onKeydown: X(S, ["enter"]),
+        onInput: w
+      }), null, 16, W),
+      F(r(M), {
+        error: r(l),
+        helper: e.helper
+      }, null, 8, ["error", "helper"])
+    ], 6));
+  }
+});
+export {
+  ue as default
+};

package/lib/components/textarea/Textarea.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Textarea.vue.js";
+export {
+  f as default
+};

package/lib/components/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { default as XTextarea } from './Textarea.vue';
+export type { TextareaProps } from './Textarea.vue';

package/lib/components/toggle/Toggle.theme.d.ts

@@ -1,11 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: string;
-        label: ({ props }: ThemeParams) => string;
-        buttonWrapper: ({ props }: ThemeParams) => string;
-        button: ({ props }: ThemeParams) => string;
-    };
-    styles: ({ colors, props, css }: ThemeParams) => Record<string, string>;
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { ToggleProps } from './Toggle.vue';
+type InternalClasses = 'wrapper' | 'label' | 'buttonWrapper' | 'button';
+interface InternalTheme extends ThemeComponent<ToggleProps, InternalClasses> {
+}
+export interface ToggleTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<ToggleProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/toggle/Toggle.theme.js

@@ -0,0 +1,29 @@
+const i = {
+  classes: {
+    wrapper: "",
+    label: ({ props: t }) => {
+      const e = "font-medium text-gray-800 dark:text-gray-200";
+      return t.size === "xs" ? e + " text-xs" : t.size === "sm" ? e + " text-sm" : t.size === "lg" ? e + " text-lg" : t.size === "xl" ? e + " text-xl" : e + " text-sm";
+    },
+    buttonWrapper: ({ props: t }) => {
+      let e = "relative shrink-0";
+      return t.size === "sm" || t.size === "xs" ? e += " w-6" : t.size === "lg" ? e += " w-10" : t.size === "xl" ? e += " w-12" : e += " w-8", e;
+    },
+    button: ({ props: t }) => {
+      let e = "rounded-full shadow transform transition duration-150 shrink-0";
+      return t.size === "sm" || t.size === "xs" ? e += " h-3 w-3" : t.size === "lg" ? e += " h-5 w-5" : t.size === "xl" ? e += " h-6 w-6" : e += " h-4 w-4", e;
+    }
+  },
+  styles: ({ colors: t, props: e, css: l }) => {
+    const s = t.getPalette(e.color);
+    return l.variables({
+      bg: s[500],
+      dark: {
+        bg: s[600]
+      }
+    });
+  }
+}, r = i;
+export {
+  r as default
+};

package/lib/components/toggle/Toggle.vue.d.ts

@@ -1,3 +1,35 @@
+import { type ExtractPublicPropTypes } from 'vue';
+declare const toggleProps: {
+    id: StringConstructor;
+    label: StringConstructor;
+    helper: StringConstructor;
+    glow: BooleanConstructor;
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    error: StringConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type ToggleProps = ExtractPublicPropTypes<typeof toggleProps>;
 declare const _default: import("vue").DefineComponent<{
     id: StringConstructor;
     label: StringConstructor;
@@ -31,7 +63,7 @@ declare const _default: import("vue").DefineComponent<{
     focus: () => void | undefined;
     blur: () => void | undefined;
     reset: () => void;
-    validate: (val: any) => boolean;
+    validate: (val?: any) => boolean;
     setError: (val: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: StringConstructor;
@@ -63,16 +95,16 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    readonly: boolean;
+    disabled: boolean;
+    color: string;
     size: import("../../composables/common").Size;
     required: boolean;
-    glow: boolean;
-    color: string;
-    disabled: boolean;
     loading: boolean;
+    glow: boolean;
+    readonly: boolean;
     validateOnInput: boolean;
     rules: unknown[];
-}>;
+}, {}>;
 export default _default;

package/lib/components/toggle/Toggle.vue.js

@@ -0,0 +1,110 @@
+import { defineComponent as E, ref as I, computed as N, openBlock as d, createElementBlock as g, normalizeClass as o, unref as r, createElementVNode as a, normalizeStyle as q, withDirectives as D, vModelCheckbox as R, toDisplayString as T, createCommentVNode as b, createBlock as X, createVNode as $ } from "vue";
+import { useTheme as L } from "../../composables/theme.js";
+import { useCommon as c } from "../../composables/common.js";
+import { useColors as M } from "../../composables/colors.js";
+import { useInputtable as i } from "../../composables/inputtable.js";
+import { useInteractive as f } from "../../composables/interactive.js";
+import P from "../spinner/Spinner.vue.js";
+import U from "../helpers/InputError.js";
+import W from "./Toggle.theme.js";
+const j = { class: "flex items-center" }, A = ["id", "aria-checked", "aria-disabled", "disabled", "name", "required", "value"], F = ["textContent"], G = {
+  ...c.props(),
+  ...M.props("primary"),
+  ...f.props(),
+  ...i.props(),
+  id: String,
+  label: String,
+  helper: String,
+  glow: Boolean
+}, H = {
+  name: "XToggle",
+  validators: {
+    ...c.validators()
+  }
+}, re = /* @__PURE__ */ E({
+  ...H,
+  props: G,
+  emits: i.emits(!1),
+  setup(h, { expose: v, emit: n }) {
+    const t = h, u = I(null), l = N({
+      get() {
+        return !!t.modelValue;
+      },
+      set(e) {
+        n("update:modelValue", e);
+      }
+    }), { focus: m, blur: k } = f(u), {
+      errorInternal: y,
+      reset: w,
+      validate: C,
+      setError: V
+    } = i(t, { focus: m, emit: n, withListeners: !1 }), { styles: z, classes: s, className: S } = L("toggle", W, t);
+    return v({ focus: m, blur: k, reset: w, validate: C, setError: V }), (e, p) => (d(), g("label", {
+      class: o(["inline-block", [
+        r(S),
+        r(s).wrapper,
+        e.disabled ? "cursor-not-allowed" : "cursor-pointer"
+      ]])
+    }, [
+      a("div", j, [
+        a("div", {
+          class: o(["flex items-center rounded-full transition-colors duration-300 border-[3px] shrink-0 border-transparent", {
+            [`shadow-lg shadow-${e.color}-500/50`]: e.glow && e.modelValue,
+            "bg-gray-300 dark:bg-gray-500": !e.disabled && !l.value && !e.loading,
+            "bg-gray-100 dark:bg-gray-700": e.disabled || e.loading,
+            "bg-[color:var(--x-toggle-bg)] dark:bg-[color:var(--x-toggle-dark-bg)]": !e.disabled && l.value
+          }]),
+          style: q(r(z))
+        }, [
+          a("div", {
+            class: o(r(s).buttonWrapper)
+          }, [
+            D(a("input", {
+              id: e.id,
+              ref_key: "elRef",
+              ref: u,
+              "onUpdate:modelValue": p[0] || (p[0] = (B) => l.value = B),
+              "aria-checked": l.value ? "true" : "false",
+              "aria-disabled": e.disabled ? "true" : void 0,
+              type: "checkbox",
+              class: "hidden",
+              disabled: e.disabled || e.loading,
+              name: e.name,
+              required: e.required,
+              value: e.modelValue
+            }, null, 8, A), [
+              [R, l.value]
+            ]),
+            a("div", {
+              class: o([
+                r(s).button,
+                {
+                  "translate-x-full": l.value,
+                  shadow: !e.disabled
+                },
+                e.disabled ? "bg-gray-50 dark:bg-gray-800" : "bg-white dark:bg-gray-800"
+              ])
+            }, null, 2)
+          ], 2)
+        ], 6),
+        e.label ? (d(), g("span", {
+          key: 0,
+          class: o(["ml-2", r(s).label]),
+          textContent: T(e.label)
+        }, null, 10, F)) : b("", !0),
+        e.loading ? (d(), X(P, {
+          key: 1,
+          size: e.size,
+          class: "ml-1"
+        }, null, 8, ["size"])) : b("", !0)
+      ]),
+      $(r(U), {
+        error: r(y),
+        helper: e.helper
+      }, null, 8, ["error", "helper"])
+    ], 2));
+  }
+});
+export {
+  re as default
+};

package/lib/components/toggle/Toggle.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Toggle.vue.js";
+export {
+  f as default
+};

package/lib/components/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { default as XToggle } from './Toggle.vue';
+export type { ToggleProps } from './Toggle.vue';

package/lib/components/tooltip/Tooltip.vue.d.ts

@@ -1,2 +1,13 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+import type { ExtractPublicPropTypes } from 'vue';
+declare const tooltipProps: {};
+export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    default?(_: {}): any;
+    tooltip?(_: {}): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/tooltip/Tooltip.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent as r, openBlock as s, createBlock as a, withCtx as t, createElementVNode as n, createVNode as l, renderSlot as o } from "vue";
+import c from "../popover/Popover.vue.js";
+import m from "../popover/PopoverContainer.vue.js";
+const _ = { class: "dark" }, p = { name: "XTooltip" }, h = /* @__PURE__ */ r({
+  ...p,
+  setup(d) {
+    return (e, i) => (s(), a(c, { hover: "" }, {
+      content: t(() => [
+        n("div", _, [
+          l(m, { class: "p-2 text-white text-sm w-max max-w-xs" }, {
+            default: t(() => [
+              o(e.$slots, "tooltip")
+            ]),
+            _: 3
+          })
+        ])
+      ]),
+      default: t(() => [
+        o(e.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  h as default
+};

package/lib/components/tooltip/Tooltip.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Tooltip.vue.js";
+export {
+  f as default
+};

package/lib/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as XTooltip } from './Tooltip.vue';
+export type { TooltipProps } from './Tooltip.vue';

package/lib/composables/colors-utils.js

@@ -0,0 +1,19 @@
+const t = (f) => /^#(?:[A-Fa-f0-9]{3}){1,2}$/.test(f), y = (f) => /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.test(f), G = (f) => /^^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$/.test(f), n = (f) => {
+  var e;
+  return (e = f.match(/\((.*?)\)/)) == null ? void 0 : e[1].split(",");
+}, r = (f) => {
+  var e;
+  return (e = f.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (a, d, c, b) => "#" + d + d + c + c + b + b).substring(1).match(/.{2}/g)) == null ? void 0 : e.map((a) => parseInt(a, 16));
+}, p = (f, e) => {
+  const [a, d, c] = (t(f) ? r(f) : n(f)) ?? [0, 0, 0];
+  return "rgba(" + a + "," + d + "," + c + "," + e + ")";
+}, B = (f) => t(f) || y(f) || G(f), R = (f, e) => {
+  const a = e < 0, d = a ? 1 + e : 1 - e, c = a ? 0 : e * 255 ** 2, b = (m) => Math.round((d * Math.floor(Number(m)) ** 2 + c) ** 0.5), [o, i, l, s] = (t(f) ? r(f) : n(f)) ?? [0, 0, 0], u = b(o), g = b(i), h = b(l);
+  return "rgb" + (s ? "a(" : "(") + u + "," + g + "," + h + (s ? "," + s : ")");
+}, $ = Object.freeze({ slate: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a", 950: "#020617" }, gray: { 50: "#f9fafb", 100: "#f3f4f6", 200: "#e5e7eb", 300: "#d1d5db", 400: "#9ca3af", 500: "#6b7280", 600: "#4b5563", 700: "#374151", 800: "#1f2937", 900: "#111827", 950: "#030712" }, zinc: { 50: "#fafafa", 100: "#f4f4f5", 200: "#e4e4e7", 300: "#d4d4d8", 400: "#a1a1aa", 500: "#71717a", 600: "#52525b", 700: "#3f3f46", 800: "#27272a", 900: "#18181b", 950: "#09090b" }, neutral: { 50: "#fafafa", 100: "#f5f5f5", 200: "#e5e5e5", 300: "#d4d4d4", 400: "#a3a3a3", 500: "#737373", 600: "#525252", 700: "#404040", 800: "#262626", 900: "#171717", 950: "#0a0a0a" }, stone: { 50: "#fafaf9", 100: "#f5f5f4", 200: "#e7e5e4", 300: "#d6d3d1", 400: "#a8a29e", 500: "#78716c", 600: "#57534e", 700: "#44403c", 800: "#292524", 900: "#1c1917", 950: "#0c0a09" }, red: { 50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5", 400: "#f87171", 500: "#ef4444", 600: "#dc2626", 700: "#b91c1c", 800: "#991b1b", 900: "#7f1d1d", 950: "#450a0a" }, orange: { 50: "#fff7ed", 100: "#ffedd5", 200: "#fed7aa", 300: "#fdba74", 400: "#fb923c", 500: "#f97316", 600: "#ea580c", 700: "#c2410c", 800: "#9a3412", 900: "#7c2d12", 950: "#431407" }, amber: { 50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f", 950: "#451a03" }, yellow: { 50: "#fefce8", 100: "#fef9c3", 200: "#fef08a", 300: "#fde047", 400: "#facc15", 500: "#eab308", 600: "#ca8a04", 700: "#a16207", 800: "#854d0e", 900: "#713f12", 950: "#422006" }, lime: { 50: "#f7fee7", 100: "#ecfccb", 200: "#d9f99d", 300: "#bef264", 400: "#a3e635", 500: "#84cc16", 600: "#65a30d", 700: "#4d7c0f", 800: "#3f6212", 900: "#365314", 950: "#1a2e05" }, green: { 50: "#f0fdf4", 100: "#dcfce7", 200: "#bbf7d0", 300: "#86efac", 400: "#4ade80", 500: "#22c55e", 600: "#16a34a", 700: "#15803d", 800: "#166534", 900: "#14532d", 950: "#052e16" }, emerald: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b", 950: "#022c22" }, teal: { 50: "#f0fdfa", 100: "#ccfbf1", 200: "#99f6e4", 300: "#5eead4", 400: "#2dd4bf", 500: "#14b8a6", 600: "#0d9488", 700: "#0f766e", 800: "#115e59", 900: "#134e4a", 950: "#042f2e" }, cyan: { 50: "#ecfeff", 100: "#cffafe", 200: "#a5f3fc", 300: "#67e8f9", 400: "#22d3ee", 500: "#06b6d4", 600: "#0891b2", 700: "#0e7490", 800: "#155e75", 900: "#164e63", 950: "#083344" }, sky: { 50: "#f0f9ff", 100: "#e0f2fe", 200: "#bae6fd", 300: "#7dd3fc", 400: "#38bdf8", 500: "#0ea5e9", 600: "#0284c7", 700: "#0369a1", 800: "#075985", 900: "#0c4a6e", 950: "#082f49" }, blue: { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 800: "#1e40af", 900: "#1e3a8a", 950: "#172554" }, indigo: { 50: "#eef2ff", 100: "#e0e7ff", 200: "#c7d2fe", 300: "#a5b4fc", 400: "#818cf8", 500: "#6366f1", 600: "#4f46e5", 700: "#4338ca", 800: "#3730a3", 900: "#312e81", 950: "#1e1b4b" }, violet: { 50: "#f5f3ff", 100: "#ede9fe", 200: "#ddd6fe", 300: "#c4b5fd", 400: "#a78bfa", 500: "#8b5cf6", 600: "#7c3aed", 700: "#6d28d9", 800: "#5b21b6", 900: "#4c1d95", 950: "#2e1065" }, purple: { 50: "#faf5ff", 100: "#f3e8ff", 200: "#e9d5ff", 300: "#d8b4fe", 400: "#c084fc", 500: "#a855f7", 600: "#9333ea", 700: "#7e22ce", 800: "#6b21a8", 900: "#581c87", 950: "#3b0764" }, fuchsia: { 50: "#fdf4ff", 100: "#fae8ff", 200: "#f5d0fe", 300: "#f0abfc", 400: "#e879f9", 500: "#d946ef", 600: "#c026d3", 700: "#a21caf", 800: "#86198f", 900: "#701a75", 950: "#4a044e" }, pink: { 50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4", 400: "#f472b6", 500: "#ec4899", 600: "#db2777", 700: "#be185d", 800: "#9d174d", 900: "#831843", 950: "#500724" }, rose: { 50: "#fff1f2", 100: "#ffe4e6", 200: "#fecdd3", 300: "#fda4af", 400: "#fb7185", 500: "#f43f5e", 600: "#e11d48", 700: "#be123c", 800: "#9f1239", 900: "#881337", 950: "#4c0519" }, lightBlue: { 50: "#f0f9ff", 100: "#e0f2fe", 200: "#bae6fd", 300: "#7dd3fc", 400: "#38bdf8", 500: "#0ea5e9", 600: "#0284c7", 700: "#0369a1", 800: "#075985", 900: "#0c4a6e", 950: "#082f49" }, warmGray: { 50: "#fafaf9", 100: "#f5f5f4", 200: "#e7e5e4", 300: "#d6d3d1", 400: "#a8a29e", 500: "#78716c", 600: "#57534e", 700: "#44403c", 800: "#292524", 900: "#1c1917", 950: "#0c0a09" }, trueGray: { 50: "#fafafa", 100: "#f5f5f5", 200: "#e5e5e5", 300: "#d4d4d4", 400: "#a3a3a3", 500: "#737373", 600: "#525252", 700: "#404040", 800: "#262626", 900: "#171717", 950: "#0a0a0a" }, coolGray: { 50: "#f9fafb", 100: "#f3f4f6", 200: "#e5e7eb", 300: "#d1d5db", 400: "#9ca3af", 500: "#6b7280", 600: "#4b5563", 700: "#374151", 800: "#1f2937", 900: "#111827", 950: "#030712" }, blueGray: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a", 950: "#020617" } });
+export {
+  R as colorShade,
+  B as isValidColor,
+  p as setOpacity,
+  $ as tailwindColors
+};

package/lib/composables/colors.d.ts

@@ -1,4 +1,4 @@
-export declare type Tone = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+export type Tone = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950';
 export interface ColorPalette {
     50: string;
     100: string;
@@ -10,21 +10,23 @@ export interface ColorPalette {
     700: string;
     800: string;
     900: string;
+    950: string;
 }
-export declare type ColorLibrary = Record<string, ColorPalette>;
+export type ColorLibrary = Record<string, ColorPalette>;
 export interface ColorsProps {
     color?: string;
 }
 export interface ColorComposition {
-    getPalette: (color: string) => ColorPalette;
+    getPalette: (color?: string) => ColorPalette;
     getColorOpacity: (color: string, opacity: number) => string;
 }
 export declare const useColors: {
     (): ColorComposition;
-    props(defaultColor?: string | undefined): {
+    props(defaultColor?: string): {
         readonly color: {
             readonly type: StringConstructor;
             readonly default: string | undefined;
         };
     };
 };
+export type UseColorsProps = ReturnType<typeof useColors.props>;

package/lib/composables/colors.js

@@ -0,0 +1,52 @@
+import { inject as p, computed as m, unref as g } from "vue";
+import { injectThemeKey as f } from "./keys.js";
+import { tailwindColors as r, setOpacity as l, isValidColor as y, colorShade as t } from "./colors-utils.js";
+import { mergeRightDeep as d } from "../common/utils.js";
+const a = {}, C = {
+  primary: r.sky,
+  secondary: r.slate,
+  success: r.green,
+  warning: r.yellow,
+  error: r.red
+}, c = () => {
+  const s = p(f, {}), o = m(() => d(C, g(s).colors || {})), i = (e) => r[e];
+  return {
+    getPalette: (e) => {
+      if (!e)
+        return i("gray");
+      const n = i(e);
+      if (n)
+        return n;
+      if (a[e])
+        return a[e];
+      if (o.value[e])
+        return o.value[e];
+      if (!y(e))
+        return console.warn(`Invalid color: ${e}`), i("gray");
+      const u = {
+        50: t(e, 0.9),
+        100: t(e, 0.8),
+        200: t(e, 0.6),
+        300: t(e, 0.4),
+        400: t(e, 0.1),
+        500: e,
+        600: t(e, -0.1),
+        700: t(e, -0.25),
+        800: t(e, -0.58),
+        900: t(e, -0.7),
+        950: t(e, -0.8)
+      };
+      return a[e] = u, u;
+    },
+    getColorOpacity: (e, n) => l(e, n)
+  };
+};
+c.props = (s) => ({
+  color: {
+    type: String,
+    default: s
+  }
+});
+export {
+  c as useColors
+};

package/lib/composables/common.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const useCommon: {
     (): void;
     props(): {