@stachelock/ui 0.8.3 → 0.8.5

package/dist/layouts/ProfileHeaderAvatar.js

@@ -1,4 +1,128 @@
-import { _ as f } from "../ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-CKCoHD1o.js";
+import { defineComponent as B, ref as m, computed as r, onMounted as I, onBeforeUnmount as S, createElementBlock as o, openBlock as a, createElementVNode as n, createVNode as U, createCommentVNode as u, normalizeStyle as h, normalizeClass as p, renderSlot as f, createBlock as _, toDisplayString as c, Transition as $, withCtx as j } from "vue";
+import P from "../components/CloudinaryImage.js";
+import { _ as M } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const R = { class: "sl-relative sl-flex sl-items-center sl-gap-3" }, T = ["aria-expanded"], V = {
+  key: 1,
+  class: "sl-w-full sl-h-full sl-inline-flex sl-items-center sl-justify-center sl-bg-stachelock-200 dark:sl-bg-stachelock-700"
+}, A = { class: "sl-p-4 sl-border-b sl-border-gray-200 dark:sl-border-slate-700" }, H = { class: "sl-text-sm sl-font-medium sl-text-gray-900 dark:sl-text-white" }, O = { class: "sl-text-xs sl-text-gray-500 dark:sl-text-slate-400" }, D = {
+  key: 0,
+  class: "sl-py-1"
+}, K = /* @__PURE__ */ B({
+  __name: "ProfileHeaderAvatar",
+  props: {
+    userName: {},
+    userEmail: { default: "" },
+    imagePublicId: {},
+    imageUrl: {},
+    showLogout: { type: Boolean, default: !0 },
+    logoutLabel: { default: "Log Out" },
+    size: { default: 40 },
+    ringColor: { default: "#717ecd" },
+    ringColorClass: {},
+    menuTop: { default: "3rem" },
+    menuRight: { default: "0" }
+  },
+  emits: ["logout", "menu-toggle"],
+  setup(s, { expose: y, emit: k }) {
+    const e = s, d = k, t = m(!1), b = m(null), x = m(null), w = r(() => !!e.imagePublicId || !!e.imageUrl), C = r(() => e.userName ? e.userName.split(" ").map((l) => l[0]).join("").toUpperCase().slice(0, 2) : "U"), z = r(() => ({
+      width: `${e.size}px`,
+      height: `${e.size}px`,
+      "--avatar-ring-color": e.ringColor
+    })), E = r(() => e.size < 32 ? "sl-text-xs" : e.size < 48 ? "sl-text-sm" : "sl-text-base"), L = r(() => ({
+      top: e.menuTop,
+      right: e.menuRight
+    })), g = () => {
+      t.value = !t.value, d("menu-toggle", t.value);
+    }, i = () => {
+      t.value && (t.value = !1, d("menu-toggle", !1));
+    }, N = () => {
+      i(), d("logout");
+    }, v = (l) => {
+      l.key === "Escape" && i();
+    };
+    return I(() => {
+      document.addEventListener("keydown", v);
+    }), S(() => {
+      document.removeEventListener("keydown", v);
+    }), y({
+      toggleMenu: g,
+      closeMenu: i,
+      isMenuOpen: t
+    }), (l, q) => (a(), o("div", R, [
+      n("button", {
+        ref_key: "avatarButton",
+        ref: b,
+        type: "button",
+        onClick: g,
+        class: p(["profile-avatar-button sl-relative sl-inline-flex sl-items-center sl-justify-center sl-rounded-full sl-overflow-hidden sl-transition-all sl-flex-shrink-0 focus:sl-outline-none", { "is-active": t.value }]),
+        style: h(z.value),
+        "aria-expanded": t.value,
+        "aria-haspopup": "true"
+      }, [
+        f(l.$slots, "avatar", {}, () => [
+          w.value ? (a(), _(P, {
+            key: 0,
+            src: s.imageUrl,
+            "public-id": s.imagePublicId,
+            alt: s.userName,
+            width: s.size,
+            height: s.size,
+            "custom-classes": { image: { "sl-w-full sl-h-full sl-object-cover sl-object-center": !0 } },
+            skeleton: "user"
+          }, null, 8, ["src", "public-id", "alt", "width", "height"])) : (a(), o("div", V, [
+            n("span", {
+              class: p(["sl-font-semibold sl-text-stachelock-700 dark:sl-text-stachelock-200", E.value])
+            }, c(C.value), 3)
+          ]))
+        ], !0)
+      ], 14, T),
+      U($, {
+        "enter-active-class": "sl-transition sl-ease-out sl-duration-100",
+        "enter-from-class": "sl-transform sl-opacity-0 sl-scale-95",
+        "enter-to-class": "sl-transform sl-opacity-100 sl-scale-100",
+        "leave-active-class": "sl-transition sl-ease-in sl-duration-75",
+        "leave-from-class": "sl-transform sl-opacity-100 sl-scale-100",
+        "leave-to-class": "sl-transform sl-opacity-0 sl-scale-95"
+      }, {
+        default: j(() => [
+          t.value ? (a(), o("div", {
+            key: 0,
+            ref_key: "menuRef",
+            ref: x,
+            class: "sl-absolute sl-bg-white dark:sl-bg-slate-800 sl-rounded-lg sl-shadow-lg sl-border sl-border-gray-200 dark:sl-border-slate-700 sl-z-50 sl-min-w-max sl-overflow-hidden",
+            style: h(L.value),
+            role: "menu",
+            "aria-orientation": "vertical"
+          }, [
+            n("div", A, [
+              f(l.$slots, "menu-header", {}, () => [
+                n("p", H, c(s.userName), 1),
+                n("p", O, c(s.userEmail), 1)
+              ], !0)
+            ]),
+            l.$slots["menu-items"] ? (a(), o("div", D, [
+              f(l.$slots, "menu-items", {}, void 0, !0)
+            ])) : u("", !0),
+            s.showLogout ? (a(), o("button", {
+              key: 1,
+              type: "button",
+              onClick: N,
+              class: "sl-w-full sl-text-left sl-px-4 sl-py-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400 hover:sl-bg-red-50 dark:hover:sl-bg-red-900/20 sl-transition-colors",
+              role: "menuitem"
+            }, c(s.logoutLabel), 1)) : u("", !0)
+          ], 4)) : u("", !0)
+        ]),
+        _: 3
+      }),
+      t.value ? (a(), o("div", {
+        key: 0,
+        class: "sl-fixed sl-inset-0 sl-z-40",
+        onClick: i,
+        "aria-hidden": "true"
+      })) : u("", !0)
+    ]));
+  }
+}), Q = /* @__PURE__ */ M(K, [["__scopeId", "data-v-52da8fd4"]]);
 export {
-  f as default
+  Q as default
 };

package/dist/modals/UiSlideOver.d.ts

@@ -0,0 +1,3 @@
+export * from '../src/components/modals/UiSlideOver'
+import StachelockUI from '../src/components/modals/UiSlideOver'
+export default StachelockUI

package/dist/modals/UiSlideOver.js

@@ -0,0 +1,4 @@
+import { _ as f } from "../UiSlideOver.vue_vue_type_script_setup_true_lang-CjSduy9N.js";
+export {
+  f as default
+};

package/dist/src/components/inputs/FileDropzoneInput.d.ts

@@ -75,10 +75,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
 }>, {
     disabled: boolean;
     height: "sm" | "md" | "lg" | "auto";
-    ringClasses: string;
     enableMultiple: boolean;
     acceptedFormats: AcceptedFileType[];
     maximumFileSize: number;
+    ringClasses: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/dist/src/components/layouts/AuthFlowLayout.d.ts

@@ -0,0 +1,54 @@
+interface Props {
+    /** Page title displayed in the card */
+    title?: string;
+    /** Subtitle/description */
+    subtitle?: string;
+    /** Whether to show the logo slot */
+    showLogo?: boolean;
+    /** Max width of the card */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Whether to show the progress slot */
+    showProgress?: boolean;
+}
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    showLogo: boolean;
+    maxWidth: string;
+    showProgress: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    showLogo: boolean;
+    maxWidth: string;
+    showProgress: boolean;
+}>>> & Readonly<{}>, {
+    maxWidth: "sm" | "md" | "lg" | "xl";
+    showLogo: boolean;
+    showProgress: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    logo?(_: {}): any;
+    header?(_: {}): any;
+    progress?(_: {}): any;
+    default?(_: {}): any;
+    footer?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/layouts/OnboardingLayout.d.ts

@@ -0,0 +1,100 @@
+import { StepsItemType } from '../../types/layouts';
+
+interface Props {
+    /** Flow title */
+    title?: string;
+    /** Flow description */
+    subtitle?: string;
+    /** Step definitions for built-in stepper */
+    steps?: StepsItemType[];
+    /** Currently active step */
+    currentStep?: StepsItemType;
+    /** Show stepper navigation */
+    showStepper?: boolean;
+    /** Enable next button */
+    canGoNext?: boolean;
+    /** Enable previous button */
+    canGoPrevious?: boolean;
+    /** Hide back button on first step */
+    isFirstStep?: boolean;
+    /** Show "Complete" instead of "Next" */
+    isLastStep?: boolean;
+    /** Next button label */
+    nextLabel?: string;
+    /** Previous button label */
+    previousLabel?: string;
+    /** Final step button label */
+    completeLabel?: string;
+    /** Show loading state on next button */
+    isLoading?: boolean;
+    /** Progress percentage (0-100) */
+    progress?: number;
+}
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    showStepper: boolean;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    nextLabel: string;
+    previousLabel: string;
+    completeLabel: string;
+    isLoading: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    next: () => void;
+    previous: () => void;
+    "step-change": (step: StepsItemType) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    showStepper: boolean;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    nextLabel: string;
+    previousLabel: string;
+    completeLabel: string;
+    isLoading: boolean;
+}>>> & Readonly<{
+    onNext?: (() => any) | undefined;
+    onPrevious?: (() => any) | undefined;
+    "onStep-change"?: ((step: StepsItemType) => any) | undefined;
+}>, {
+    isLoading: boolean;
+    showStepper: boolean;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    nextLabel: string;
+    previousLabel: string;
+    completeLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    logo?(_: {}): any;
+    stepper?(_: {}): any;
+    default?(_: {}): any;
+    actions?(_: {}): any;
+    footer?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/layouts/ProfileHeaderAvatar.d.ts

@@ -13,7 +13,13 @@ interface Props {
     logoutLabel?: string;
     /** Avatar size in pixels */
     size?: number;
-    /** Custom ring color class for hover/active state */
+    /**
+     * Ring color for hover/active state.
+     * Can be a hex color (#3e4b9a), RGB (62 75 154), or CSS variable (var(--my-color))
+     * @default Uses stachelock-400 brand color
+     */
+    ringColor?: string;
+    /** @deprecated Use ringColor instead. Kept for backwards compatibility. */
     ringColorClass?: string;
     /** Menu position from top */
     menuTop?: string;
@@ -25,7 +31,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     showLogout: boolean;
     logoutLabel: string;
     size: number;
-    ringColorClass: string;
+    ringColor: string;
     menuTop: string;
     menuRight: string;
 }>>, {
@@ -40,7 +46,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     showLogout: boolean;
     logoutLabel: string;
     size: number;
-    ringColorClass: string;
+    ringColor: string;
     menuTop: string;
     menuRight: string;
 }>>> & Readonly<{
@@ -51,7 +57,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     userEmail: string;
     showLogout: boolean;
     logoutLabel: string;
-    ringColorClass: string;
+    ringColor: string;
     menuTop: string;
     menuRight: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {

package/dist/src/components/layouts/index.d.ts

@@ -1,3 +1,4 @@
+export { default as AuthFlowLayout } from './AuthFlowLayout';
 export { default as CardLayout } from './CardLayout';
 export { default as DashboardLayout } from './DashboardLayout';
 export { default as DefaultLayout } from './DefaultLayout';
@@ -7,6 +8,7 @@ export { default as NavigationGroup } from './NavigationGroup';
 export { default as NavigationItem } from './NavigationItem';
 export { default as NestedNavigationItem } from './NestedNavigationItem';
 export { default as NestedSidebar } from './NestedSidebar';
+export { default as OnboardingLayout } from './OnboardingLayout';
 export { default as ProfileHeaderAvatar } from './ProfileHeaderAvatar';
 export { default as ProjectInfoHeader } from './ProjectInfoHeader';
 export { default as ProjectLogo } from './ProjectLogo';

package/dist/src/components/modals/index.d.ts

@@ -1,4 +1,4 @@
 export { default as AlertModal } from './AlertModal';
 export { default as BaseModal } from './BaseModal';
 export { default as ImageCropperModal } from './ImageCropperModal';
-export { default as IdeOver } from './UiSlideOver';
+export { default as UiSlideOver } from './UiSlideOver';