@stachelock/ui 0.6.14 → 0.6.16

package/dist/src/components/palettes/UiCommandPalette.d.ts

@@ -0,0 +1,166 @@
+import { PropType, Component } from 'vue';
+
+export interface CommandPaletteCommand {
+    id: string;
+    label: string;
+    icon?: Component;
+    shortcut?: string;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface CommandPaletteCategory {
+    id: string;
+    label?: string;
+    icon?: Component;
+}
+export interface CommandPaletteItem {
+    id?: string | number;
+    name?: string;
+    label?: string;
+    description?: string;
+    avatar?: string;
+    initials?: string;
+    icon?: Component;
+    [key: string]: unknown;
+}
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: {
+        type: PropType<CommandPaletteItem[]>;
+        default: () => never[];
+    };
+    commands: {
+        type: PropType<CommandPaletteCommand[]>;
+        default: () => never[];
+    };
+    categories: {
+        type: PropType<CommandPaletteCategory[]>;
+        default: () => never[];
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showSearch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeCategory: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemsLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemKey: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    searchInputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    contentRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => void;
+    select: (item: CommandPaletteItem) => void;
+    command: (command: CommandPaletteCommand) => void;
+    "category-change": (categoryId: string) => void;
+    search: (query: string) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: {
+        type: PropType<CommandPaletteItem[]>;
+        default: () => never[];
+    };
+    commands: {
+        type: PropType<CommandPaletteCommand[]>;
+        default: () => never[];
+    };
+    categories: {
+        type: PropType<CommandPaletteCategory[]>;
+        default: () => never[];
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showSearch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeCategory: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemsLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemKey: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onSelect?: ((item: CommandPaletteItem) => any) | undefined;
+    onSearch?: ((query: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onCommand?: ((command: CommandPaletteCommand) => any) | undefined;
+    "onCategory-change"?: ((categoryId: string) => any) | undefined;
+}>, {
+    placeholder: string;
+    loading: boolean;
+    modelValue: string;
+    items: CommandPaletteItem[];
+    itemKey: string;
+    commands: CommandPaletteCommand[];
+    categories: CommandPaletteCategory[];
+    showSearch: boolean;
+    emptyText: string;
+    activeCategory: string;
+    itemsLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    header?(_: {}): any;
+    "search-right"?(_: {}): any;
+    loading?(_: {}): any;
+    command?(_: {
+        command: CommandPaletteCommand;
+        active: boolean;
+    }): any;
+    item?(_: {
+        item: CommandPaletteItem;
+        active: boolean;
+        index: number;
+    }): any;
+    empty?(_: {}): any;
+    footer?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1 @@
+export { default as CommandPalette } from './UiCommandPalette';

package/dist/src/components/wrappers/BreakpointWrapper.d.ts

@@ -0,0 +1,36 @@
+import { PropType } from 'vue';
+import { ScreenSize } from '../../composables/useScreenSize';
+
+/**
+ * BreakpointWrapper provides screen size context to child components via Vue's provide/inject.
+ *
+ * Child components can use `useScreenSizeContext()` to access the current breakpoint
+ * and render responsive content accordingly.
+ *
+ * @example
+ * ```vue
+ * <BreakpointWrapper size="md">
+ *   <ResponsiveComponent />
+ * </BreakpointWrapper>
+ * ```
+ */
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * The screen size to provide to child components
+     */
+    size: {
+        type: PropType<ScreenSize>;
+        required: true;
+        validator: (value: string) => boolean;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * The screen size to provide to child components
+     */
+    size: {
+        type: PropType<ScreenSize>;
+        required: true;
+        validator: (value: string) => boolean;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/src/components/wrappers/ResponsivePreviewWrapper.d.ts

@@ -0,0 +1,85 @@
+import { ScreenSize } from '../../composables/useScreenSize';
+
+/**
+ * ResponsivePreviewWrapper wraps content and applies width constraints
+ * based on the selected screen size. It also provides the BreakpointWrapper
+ * context so child components can respond to the simulated breakpoint.
+ *
+ * Use this component together with ScreenSizeSelector in your layout.
+ *
+ * Usage:
+ *   ScreenSizeSelector v-model="currentSize" :sizes="['sm', 'md', 'lg']"
+ *   ResponsivePreviewWrapper :size="currentSize" -> YourComponent
+ *
+ *   const currentSize = ref('lg');
+ */
+interface Props {
+    /**
+     * The screen size to simulate
+     */
+    size: ScreenSize;
+    /**
+     * Whether to show a border around the preview container
+     */
+    showBorder?: boolean;
+    /**
+     * Whether to center the preview container
+     */
+    centered?: boolean;
+    /**
+     * Custom background color for the preview container
+     */
+    backgroundColor?: string;
+    /**
+     * Enable transition animation when size changes
+     */
+    animate?: boolean;
+    /**
+     * Minimum height for the preview container
+     */
+    minHeight?: string;
+}
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    showBorder: boolean;
+    centered: boolean;
+    backgroundColor: string;
+    animate: boolean;
+    minHeight: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    showBorder: boolean;
+    centered: boolean;
+    backgroundColor: string;
+    animate: boolean;
+    minHeight: string;
+}>>> & Readonly<{}>, {
+    animate: boolean;
+    backgroundColor: string;
+    centered: boolean;
+    minHeight: string;
+    showBorder: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): 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/wrappers/ScreenSizeSelector.d.ts

@@ -0,0 +1,74 @@
+import { ScreenSize } from '../../composables/useScreenSize';
+
+/**
+ * ScreenSizeSelector provides a button group for selecting screen size breakpoints.
+ * Automatically hides sizes that can't be meaningfully previewed at the current window size.
+ */
+interface Props {
+    /**
+     * Currently selected screen size
+     */
+    modelValue: ScreenSize;
+    /**
+     * Which sizes to display (defaults to all available based on window size)
+     */
+    sizes?: ScreenSize[];
+    /**
+     * Visual theme
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * Whether to show text labels alongside icons
+     */
+    showLabels?: boolean;
+    /**
+     * Active button color (Tailwind text color class without prefix)
+     */
+    activeColor?: string;
+    /**
+     * Whether to automatically filter sizes based on window width
+     * When true, only shows sizes that can be previewed at the current window size
+     */
+    autoFilter?: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    sizes: () => string[];
+    theme: string;
+    showLabels: boolean;
+    activeColor: string;
+    autoFilter: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: ScreenSize) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    sizes: () => string[];
+    theme: string;
+    showLabels: boolean;
+    activeColor: string;
+    autoFilter: boolean;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ScreenSize) => any) | undefined;
+}>, {
+    theme: "dark" | "light";
+    showLabels: boolean;
+    sizes: ScreenSize[];
+    activeColor: string;
+    autoFilter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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];
+} & {};

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

@@ -1,4 +1,7 @@
 export { default as BackgroundGradientWrapper } from './BackgroundGradientWrapper';
+export { default as BreakpointWrapper } from './BreakpointWrapper';
 export { default as CardWrapper } from './CardWrapper';
 export { default as DisclosureWrapper } from './DisclosureWrapper';
 export { default as FormErrorWrapper } from './FormErrorWrapper';
+export { default as ResponsivePreviewWrapper } from './ResponsivePreviewWrapper';
+export { default as ScreenSizeSelector } from './ScreenSizeSelector';

package/dist/src/composables/index.d.ts

@@ -5,6 +5,7 @@ export * from './useFormValidation';
 export * from './useMap';
 export * from './useModal';
 export * from './useNotifications';
+export * from './useScreenSize';
 export * from './useSimpleTabs';
 export * from './useStringTransform';
 export * from './useTabs';

package/dist/src/composables/useScreenSize.d.ts

@@ -0,0 +1,131 @@
+import { Ref, InjectionKey } from 'vue';
+
+/**
+ * Screen size breakpoint identifiers
+ */
+export type ScreenSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Screen size breakpoint labels for display
+ */
+export type ScreenSizeLabel = 'Mobile' | 'Tablet' | 'Desktop' | 'Widescreen';
+/**
+ * Screen size configuration with dimensions and labels
+ */
+export interface ScreenSizeConfig {
+    id: ScreenSize;
+    label: ScreenSizeLabel;
+    /** The minimum window width required to preview this size */
+    minWindowWidth: number;
+    /** The preview container width */
+    width: string;
+}
+/**
+ * Screen size configurations with breakpoints matching Tailwind defaults
+ * minWindowWidth indicates the minimum viewport needed to meaningfully preview this size
+ */
+export declare const screenSizeConfigs: ScreenSizeConfig[];
+/**
+ * Injection key for screen size context
+ */
+export declare const ScreenSizeKey: InjectionKey<Ref<ScreenSize>>;
+/**
+ * Detect current screen size based on window width
+ */
+export declare function detectScreenSize(): ScreenSize;
+/**
+ * Get screen size config by id
+ */
+export declare function getScreenSizeConfig(size: ScreenSize): ScreenSizeConfig;
+/**
+ * Get which preview sizes are available based on current window width
+ * Only shows sizes that are smaller than the current viewport
+ */
+export declare function getAvailablePreviewSizes(windowWidth: number): ScreenSize[];
+/**
+ * Composable for detecting and tracking actual window/viewport size
+ *
+ * This is a tree-shakable utility that tracks the real browser window dimensions.
+ * Use this to make responsive decisions in your components.
+ *
+ * @example
+ * const { windowWidth, windowHeight, currentBreakpoint, isMobile, isTablet, isDesktop } = useWindowSize();
+ */
+export declare function useWindowSize(): {
+    windowWidth: Ref<number, number>;
+    windowHeight: Ref<number, number>;
+    currentBreakpoint: import('vue').ComputedRef<ScreenSize>;
+    isMobile: import('vue').ComputedRef<boolean>;
+    isTablet: import('vue').ComputedRef<boolean>;
+    isDesktop: import('vue').ComputedRef<boolean>;
+    isWidescreen: import('vue').ComputedRef<boolean>;
+    availablePreviewSizes: import('vue').ComputedRef<ScreenSize[]>;
+    canPreviewSize: (size: ScreenSize) => boolean;
+    updateDimensions: () => void;
+};
+/**
+ * Main composable for screen size management
+ *
+ * @param options Configuration options
+ * @returns Screen size state and utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useScreenSize } from '@stachelock/ui';
+ *
+ * const {
+ *   currentSize,
+ *   setSize,
+ *   previewStyle,
+ *   isPreviewMode
+ * } = useScreenSize();
+ * </script>
+ * ```
+ */
+export declare function useScreenSize(options?: {
+    /**
+     * Initial size (defaults to detecting from window)
+     */
+    initialSize?: ScreenSize;
+    /**
+     * Whether to track window resize (defaults to true)
+     */
+    trackResize?: boolean;
+    /**
+     * Whether this is for preview mode (manual size selection)
+     */
+    previewMode?: boolean;
+}): {
+    currentSize: import('vue').ComputedRef<ScreenSize>;
+    currentConfig: import('vue').ComputedRef<ScreenSizeConfig>;
+    isPreviewMode: import('vue').ComputedRef<boolean>;
+    detectedSize: Ref<ScreenSize, ScreenSize>;
+    setSize: (size: ScreenSize) => void;
+    resetToAuto: () => void;
+    updateDetectedSize: () => void;
+    provideScreenSize: () => void;
+    previewStyle: import('vue').ComputedRef<{
+        maxWidth: string;
+        width: string;
+        margin: string;
+        transition: string;
+    }>;
+    screenSizeConfigs: ScreenSizeConfig[];
+};
+/**
+ * Inject screen size from parent BreakpointWrapper
+ *
+ * @param fallback Fallback size if not provided by parent
+ * @returns Reactive screen size ref
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useScreenSizeContext } from '@stachelock/ui';
+ *
+ * const screenSize = useScreenSizeContext();
+ * // screenSize.value will be 'sm' | 'md' | 'lg' | 'xl'
+ * </script>
+ * ```
+ */
+export declare function useScreenSizeContext(fallback?: ScreenSize): Ref<ScreenSize>;

package/dist/src/types/form.d.ts

@@ -20,7 +20,7 @@ export interface FormValidationState {
 }
 export interface DynamicFormField {
     name: string;
-    type: 'text' | 'email' | 'phone' | 'password' | 'number' | 'tel' | 'url' | 'textarea' | 'select' | 'combobox' | 'checkbox' | 'switch' | 'file' | 'date' | 'datetime-local' | 'time';
+    type: 'text' | 'email' | 'phone' | 'password' | 'number' | 'tel' | 'url' | 'textarea' | 'select' | 'combobox' | 'checkbox' | 'switch' | 'file' | 'date' | 'datetime-local' | 'time' | 'names' | 'baseInfo' | 'address' | 'selectText';
     label?: string;
     placeholder?: string;
     description?: string;
@@ -58,6 +58,29 @@ export interface DynamicFormField {
     autoDetectCountry?: boolean;
     tertiaryLabel?: string;
     successMessage?: string;
+    schema?: unknown;
+    requiredFields?: string[];
+    use?: string;
+    enableVerification?: boolean;
+    showSuggestionCount?: boolean;
+    allowManualEntry?: boolean;
+    select?: {
+        label?: string;
+        options: Array<{
+            label: string;
+            value: string;
+        }>;
+        placeholder?: string;
+    };
+    text?: {
+        label?: string;
+        placeholder?: string;
+        inputMode?: string;
+        maxLength?: number;
+    };
+    delimiter?: string;
+    formatter?: (value: FormValue) => string | undefined;
+    showValidCheck?: boolean;
     condition?: (formData: FormData, field?: DynamicFormField) => boolean;
     onChange?: (value: FormValue, field: DynamicFormField, formData: FormData) => void;
     onBlur?: (event: FocusEvent) => void;

package/dist/src/types/index.d.ts

@@ -11,6 +11,7 @@ export * from './layouts';
 export * from './loading';
 export * from './maps';
 export * from './navigation';
+export * from './palettes';
 export * from './profiles';
 export * from './tables';
 export * from './tabs';

package/dist/src/types/layouts.d.ts

@@ -63,3 +63,45 @@ export type StepsItemType = {
     props?: Record<string, unknown>;
     valid: boolean | undefined;
 };
+export type RightPanelSize = 'sm' | 'md' | 'lg' | 'xl';
+export type MobileBreakpoint = 'sm' | 'md' | 'lg';
+export interface SplitPanelLayoutProps {
+    /** Controls visibility of the right panel */
+    showRightPanel?: boolean;
+    /** Width of the right panel */
+    rightPanelSize?: RightPanelSize;
+    /** Minimum height of the layout container */
+    minHeight?: string;
+    /** Maximum height of the layout container */
+    maxHeight?: string;
+    /** Breakpoint for mobile slide-over behavior */
+    mobileBreakpoint?: MobileBreakpoint;
+    /** Title for mobile slide-over */
+    slideOverTitle?: string;
+    /** Show back button in right panel footer */
+    showBackButton?: boolean;
+    /** Apply rounded corners */
+    rounded?: boolean;
+    /** Apply shadow */
+    shadow?: boolean;
+    /** Apply ring border */
+    ring?: boolean;
+}
+export interface SplitPanelLayoutEmits {
+    (e: 'back'): void;
+    (e: 'close-right'): void;
+}
+export interface DetailPanelProps {
+    /** Minimum height of the panel */
+    minHeight?: string;
+    /** Maximum height of the panel */
+    maxHeight?: string;
+    /** Show loading state */
+    loading?: boolean;
+    /** Show empty state */
+    empty?: boolean;
+    /** Title for empty state */
+    emptyTitle?: string;
+    /** Description for empty state */
+    emptyDescription?: string;
+}