@bluerobotics/bluevue 0.1.0

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

@@ -0,0 +1,101 @@
+/**
+ * One button in the group
+ */
+interface ButtonItem {
+    /** Name of the button, displayed as text */
+    name: string;
+    /** Optional tooltip text displayed on hover */
+    tooltip?: string;
+    /** Whether this button is pre-selected (only for 'switch' type) */
+    preSelected?: boolean;
+    /** Optional color for the button when active */
+    activeColor?: string;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Callback when the button is selected */
+    onSelected?: () => void;
+    /** Custom options to handle button item press */
+    options?: Record<string, any>;
+}
+/**
+ * One item in the menu
+ */
+interface MenuItem {
+    /** Name of the menu item, displayed as text */
+    name: string;
+    /** Callback when the menu item is clicked */
+    action: () => void;
+    /** Disable the menu item */
+    menuItemDisabled?: boolean;
+}
+type __VLS_Props = {
+    /** List of buttons in the group */
+    buttonItems: ButtonItem[];
+    /** Optional menu items to display in a dropdown */
+    buttonsMenu?: MenuItem[];
+    /** Whether the entire button group is disabled */
+    disabled?: boolean;
+    /** Theme of the button group */
+    theme?: 'light' | 'dark';
+    /** Type of button group, 'switch' for single selection or 'toggle' for multiple selections */
+    type: 'switch' | 'toggle';
+    /** Height of the button group container */
+    height?: string;
+    /** Label text on the left side of the button group */
+    label?: string;
+    /** Optional info tooltip shown via an info icon next to the control. */
+    infoTooltip?: string;
+    /**
+     * How much room each button gives its name (default 'comfortable'). 'compact' also makes the
+     * group shorter and its labels smaller, for rows where the group is a secondary control.
+     */
+    density?: 'compact' | 'regular' | 'comfortable';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        insetElement?(_: {}): any;
+    };
+    refs: {
+        rowRef: HTMLDivElement;
+        labelRef: HTMLLabelElement;
+        trackRef: HTMLDivElement;
+        menuAnchorRef: HTMLButtonElement;
+        menuPopoverRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:selected": (value: boolean[]) => void;
+    "context-menu": (value: {
+        item: ButtonItem;
+        index: number;
+        x: number;
+        y: number;
+    }) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & {
+    "onUpdate:selected"?: ((value: boolean[]) => any) | undefined;
+    "onContext-menu"?: ((value: {
+        item: ButtonItem;
+        index: number;
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,38 @@
+type __VLS_Props = {
+    /** Panel title */
+    title: string;
+    /** Initial open state */
+    expanded?: boolean;
+    /** 'light' or 'dark' theme */
+    theme?: 'light' | 'dark';
+};
+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<__VLS_TypePropsToOption<__VLS_Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & {
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,70 @@
+type __VLS_Props = {
+    /**
+     * Model value for v-model. A 'number' field emits numbers and never emits an empty value:
+     * clearing it leaves the last number in place until a new one is typed.
+     */
+    modelValue: string | number | null;
+    /** Label on the left */
+    label?: string;
+    /** Name and id for the input, tying the label to it */
+    name?: string;
+    /** 'text' (default) or 'number' */
+    type?: 'text' | 'number';
+    /** Unit or short hint shown inside the field, after the value */
+    suffix?: string;
+    /** Placeholder shown while the field is empty */
+    placeholder?: string;
+    /**
+     * Take focus when the field appears. The attribute is what a dialog opening around the field
+     * honours, and the call below covers a field mounted into something already on screen.
+     */
+    autofocus?: boolean;
+    /** Disable the field */
+    disabled?: boolean;
+    /** light or dark theme */
+    theme?: 'light' | 'dark';
+    /** Control height (default '30px') */
+    height?: string;
+    /** Control width (default fits the content) */
+    width?: string;
+    /** Optional info tooltip shown via an info icon next to the control. */
+    infoTooltip?: string;
+    /** Bounds and increment, forwarded to a number input */
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Error messages, used to give feedback from validators */
+    errorMessages?: string[];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        insetElement?(_: {}): any;
+    };
+    refs: {
+        inputRef: HTMLInputElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | null) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & {
+    "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,27 @@
+/**
+ * A blocking overlay for an operation that is under way, such as a vehicle restarting. It is up
+ * for exactly as long as `modelValue` says it is, and unless it is dismissible there is no way
+ * out of it.
+ */
+type __VLS_Props = {
+    modelValue: boolean;
+    /** What the operation is, shown under the propeller. */
+    message?: string;
+    /** Offers a close button and lets Escape through, for a wait the user may walk away from. */
+    dismissible?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
+    };
+};

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

@@ -0,0 +1,57 @@
+/**
+ * A dropdown of actions, opened either from the activator slot or, with `target`, at a pointer
+ * position, which is what a right-click or a long press wants. Pass `target` to place it at a
+ * point; leave it out and the activator slot decides where it hangs.
+ */
+export interface BlueMenuItem {
+    title: string;
+    icon: string;
+    /** Renders in the warning colour, for the items that remove something. */
+    danger?: boolean;
+    disabled?: boolean;
+    /** Shown on hover, to say why an item is disabled. */
+    hint?: string;
+    action: () => void;
+}
+type __VLS_Props = {
+    modelValue: boolean;
+    items: BlueMenuItem[];
+    target?: [number, number];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        activator?(_: {
+            props: {
+                popovertarget: string;
+            };
+        }): any;
+    };
+    refs: {
+        anchorRef: HTMLSpanElement;
+        popoverRef: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,37 @@
+/**
+ * Asks for a name, and optionally a note to go with it: icon and title over a subtitle, the
+ * fields in their own section, then a footer whose middle explains what the buttons will do.
+ */
+type __VLS_Props = {
+    modelValue: boolean;
+    title: string;
+    /** Field label for the name. */
+    label: string;
+    icon?: string;
+    /** Explains what the name will be attached to. */
+    subtitle?: string;
+    initial?: string;
+    /** When given, a second optional field is shown and its value comes back with the name. */
+    notesLabel?: string;
+    notesInitial?: string;
+    confirmLabel?: string;
+    /** Footer text, for anything worth saying about the outcome rather than the input. */
+    hint?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => void;
+    confirm: (name: string, notes: string) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onConfirm?: ((name: string, notes: string) => any) | undefined;
+}, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
+    };
+};

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

@@ -0,0 +1,76 @@
+/**
+ * Option in the select
+ */
+interface OptionItem {
+    /**
+     * Name of the option to display
+     */
+    name: string;
+    /**
+     * Value of the option, if not provided, name will be used
+     */
+    value?: any;
+    /**
+     * Whether the option is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback when the option is selected
+     */
+    onSelected?: () => void;
+}
+type __VLS_Props = {
+    /** Options to select from */
+    items: OptionItem[];
+    /** Disable entire select */
+    disabled?: boolean;
+    /** light or dark theme */
+    theme?: 'light' | 'dark';
+    /** Label on the left */
+    label?: string;
+    /** Optional info tooltip shown via an info icon next to the control. */
+    infoTooltip?: string;
+    /** Control height */
+    height?: string;
+    /** Control width */
+    width?: string;
+    /** Multiple values selection */
+    multiSelect?: boolean;
+    /** Model value for v-model */
+    modelValue?: any;
+    /** Error messages, used to give feedback from validators */
+    errorMessages?: string[];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        insetElement?(_: {}): any;
+    };
+    refs: {
+        anchorRef: HTMLButtonElement;
+        popoverRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | (string | number)[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & {
+    "onUpdate:modelValue"?: ((value: string | number | (string | number)[]) => any) | undefined;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,51 @@
+type __VLS_Props = {
+    /** Pill color override. */
+    color?: string;
+    /** Disable user interaction. Add disabled visual feedback */
+    disabled?: boolean;
+    /** Slider height (default. '30px'). */
+    height?: string;
+    /** Main Label text on the left. */
+    label?: string;
+    /** Custom text for the max label. */
+    labelMax?: string;
+    /** Custom text for the min label. */
+    labelMin?: string;
+    /** Maximum allowed value. */
+    max: number;
+    /** Minimum allowed value. */
+    min: number;
+    /** Name attribute for the range input. */
+    name: string;
+    /** Step increment (default 1). */
+    step?: number;
+    /** Keyboard arrow step multiplier (default 3). */
+    keyboardStepMultiplierLimit?: number;
+    /** 'light' or 'dark' theme. (default 'light')*/
+    theme?: 'light' | 'dark' | 'transparent';
+    /** Container width (default '100%'). */
+    width?: string;
+    /** Model value for v-model */
+    modelValue: number | null;
+    /** Function to scale the internal percentage value to a display value */
+    scaleFn?: (raw: number) => number;
+    /** Function to unscale the displayed value to the internal percentage value */
+    unscaleFn?: (scaled: number) => number;
+    /** Function format scaled values, converting them to strings */
+    formatDisplay?: (scaled: number) => string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & {
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+}, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
+    };
+};

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

@@ -0,0 +1,39 @@
+type __VLS_Props = {
+    /** Color of the switch's knob when it is on. */
+    color?: string;
+    /** The current value of the switch. */
+    modelValue: boolean | null;
+    /** Whether the switch is disabled. */
+    disabled?: boolean;
+    /** Height of the switch container. */
+    height?: string;
+    /** Label on the left side of the component. */
+    label?: string;
+    /** Optional info tooltip shown via an info icon next to the control. */
+    infoTooltip?: string;
+    /** Custom text for the switch when it is on. */
+    labelOn?: string;
+    /** Custom text for the switch when it is off. */
+    labelOff?: string;
+    /** Name of the component's container. */
+    name: string;
+    /** Theme of the component. */
+    theme?: 'light' | 'dark';
+    /** Minimum width of the container. */
+    width?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
+    };
+};

package/dist/composables/useBluePopover.d.ts

@@ -0,0 +1,38 @@
+import { Placement } from '@floating-ui/vue';
+import { CSSProperties, Ref } from 'vue';
+interface BluePopoverOptions {
+    /** Where the menu hangs off its anchor (default 'bottom-end'). */
+    placement?: Placement;
+    /** Give the menu at least its anchor's width, for a select whose list should line up with it. */
+    matchAnchorWidth?: boolean;
+}
+interface BluePopover {
+    /** Goes on the element the menu hangs off, when it opens from a control rather than a pointer. */
+    anchorRef: Ref<HTMLElement | null>;
+    /** Goes on the element carrying the `popover` attribute. */
+    popoverRef: Ref<HTMLElement | null>;
+    /** The popover's id, for the `popovertarget` the activator is bound to. */
+    popoverId: string;
+    /** Bind onto an activator `<button>` to let the browser own the open and close. */
+    activatorProps: {
+        popovertarget: string;
+    };
+    isOpen: Ref<boolean>;
+    /** False until the menu has been placed, so it can be held invisible for that first frame. */
+    isPositioned: Readonly<Ref<boolean>>;
+    floatingStyles: Readonly<Ref<CSSProperties>>;
+    /** Opens the menu, at a viewport position when one is given instead of an anchor element. */
+    show: (pointerTarget?: [number, number]) => Promise<void>;
+    hide: () => void;
+    /** Bind to the popover's `toggle` event, so a dismissal by the browser is reflected back. */
+    onToggle: (event: Event) => void;
+}
+/**
+ * A menu that opens in the top layer, so it is never clipped by the panel it belongs to and
+ * needs no z-index of its own. The native popover dismisses it on outside click and on Escape;
+ * floating-ui keeps it beside its anchor and inside the viewport.
+ * @param {BluePopoverOptions} options Placement, and whether to match the anchor's width.
+ * @returns {BluePopover} Refs to bind, open state, and imperative open and close.
+ */
+export declare function useBluePopover(options?: BluePopoverOptions): BluePopover;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { default as BlueButtonGroup } from './components/BlueButtonGroup.vue';
+export { default as BlueExpansiblePanel } from './components/BlueExpansiblePanel.vue';
+export { default as BlueInput } from './components/BlueInput.vue';
+export { default as BlueLoadingDialog } from './components/BlueLoadingDialog.vue';
+export { default as BlueMenu, type BlueMenuItem } from './components/BlueMenu.vue';
+export { default as BluePromptDialog } from './components/BluePromptDialog.vue';
+export { default as BlueSelect } from './components/BlueSelect.vue';
+export { default as BlueSlider } from './components/BlueSlider.vue';
+export { default as BlueSwitch } from './components/BlueSwitch.vue';
+export { useBluePopover } from './composables/useBluePopover';

package/dist/style.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@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-leading:initial;--tw-font-weight:initial;--tw-tracking: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-duration:initial;--tw-ease: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{--color-gray-100:oklch(96.7% .003 264.542);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-black:#000;--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-base:1rem;--text-base--line-height:calc(1.5/1);--font-weight-medium:500;--font-weight-bold:700;--tracking-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-lg:.5rem;--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1)}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.inset-x-\[18\%\]{inset-inline:18%}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing)*3)}.top-\[4px\]{top:4px}.right-0{right:calc(var(--spacing)*0)}.right-3{right:calc(var(--spacing)*3)}.right-\[5px\]{right:5px}.bottom-1\/2{bottom:50%}.bottom-\[4px\]{bottom:4px}.bottom-full{bottom:100%}.left-1\/2{left:50%}.left-\[-20px\]{left:-20px}.left-\[5px\]{left:5px}.z-10{z-index:10}.z-50{z-index:50}.z-\[20\]{z-index:20}.z-\[666\]{z-index:666}.z-\[1000\]{z-index:1000}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-3{margin-inline:calc(var(--spacing)*3)}.mx-auto{margin-inline:auto}.my-2{margin-block:calc(var(--spacing)*2)}.my-6{margin-block:calc(var(--spacing)*6)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-\[2px\]{margin-top:2px}.mt-\[15px\]{margin-top:15px}.mr-1{margin-right:calc(var(--spacing)*1)}.mr-2{margin-right:calc(var(--spacing)*2)}.mr-6{margin-right:calc(var(--spacing)*6)}.mr-\[2px\]{margin-right:2px}.mr-\[3px\]{margin-right:3px}.-mb-\[1px\]{margin-bottom:-1px}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.ml-3{margin-left:calc(var(--spacing)*3)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-2{height:calc(var(--spacing)*2)}.h-3\/4{height:75%}.h-7{height:calc(var(--spacing)*7)}.h-\[100px\]{height:100px}.h-full{height:100%}.h-px{height:1px}.max-h-\[60vh\]{max-height:60vh}.min-h-screen{min-height:100vh}.w-2{width:calc(var(--spacing)*2)}.w-\[1px\]{width:1px}.w-\[6px\]{width:6px}.w-\[100px\]{width:100px}.w-\[320px\]{width:320px}.w-\[624px\]{width:624px}.w-\[760px\]{width:760px}.w-\[calc\(50\%-4px\)\]{width:calc(50% - 4px)}.w-full{width:100%}.w-max{width:max-content}.max-w-\[45\%\]{max-width:45%}.max-w-\[150px\]{max-width:150px}.max-w-\[280px\]{max-width:280px}.max-w-full{max-width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\[30px\]{min-width:30px}.min-w-\[60px\]{min-width:60px}.min-w-\[90px\]{min-width:90px}.min-w-\[140px\]{min-width:140px}.min-w-\[220px\]{min-width:220px}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.shrink-\[1000\]{flex-shrink:1000}.grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-1\/2{--tw-translate-y:calc(1/2*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[0\.22em\]{--tw-translate-y:.22em;translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.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}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-5{gap:calc(var(--spacing)*5)}.self-center{align-self:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[4px\]{border-radius:4px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-\[1px\]{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-solid{--tw-border-style:solid;border-style:solid}.border-\[\#555555\]{border-color:#555}.border-\[\#FFFFFF22\]{border-color:#fff2}.border-\[\#dddddd\]{border-color:#ddd}.border-\[\#ffffff0d\]{border-color:#ffffff0d}.border-\[\#ffffff1a\]{border-color:#ffffff1a}.border-\[var\(--bluevue-error\)\]{border-color:var(--bluevue-error)}.border-gray-300{border-color:var(--color-gray-300)}.border-white{border-color:var(--color-white)}.bg-\[\#2d2d2d\]{background-color:#2d2d2d}.bg-\[\#00000011\]{background-color:#0001}.bg-\[\#00000033\]{background-color:#0003}.bg-\[\#6699cc\]{background-color:#69c}.bg-\[\#132029\]{background-color:#132029}.bg-\[\#464646AA\]{background-color:#464646aa}.bg-\[\#FFFFFF22\]{background-color:#fff2}.bg-\[\#ffffff0d\]{background-color:#ffffff0d}.bg-\[\#ffffff11\]{background-color:#fff1}.bg-\[\#ffffff22\]{background-color:#fff2}.bg-\[var\(--bluevue-primary\)\]{background-color:var(--bluevue-primary)}.bg-\[var\(--bluevue-surface\)\]{background-color:var(--bluevue-surface)}.bg-gray-700{background-color:var(--color-gray-700)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.p-6{padding:calc(var(--spacing)*6)}.px-0{padding-inline:calc(var(--spacing)*0)}.px-1{padding-inline:calc(var(--spacing)*1)}.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-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-13{padding-inline:calc(var(--spacing)*13)}.px-\[6px\]{padding-inline:6px}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-7{padding-top:calc(var(--spacing)*7)}.pr-1{padding-right:calc(var(--spacing)*1)}.pr-4{padding-right:calc(var(--spacing)*4)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pb-5{padding-bottom:calc(var(--spacing)*5)}.pl-1{padding-left:calc(var(--spacing)*1)}.pl-4{padding-left:calc(var(--spacing)*4)}.text-center{text-align:center}.text-left{text-align:left}.text-start{text-align:start}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[22px\]{font-size:22px}.text-\[24px\]{font-size:24px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.whitespace-nowrap{white-space:nowrap}.text-\[\#42A5F5\]{color:#42a5f5}.text-\[\#00000066\]{color:#0006}.text-\[\#FFFFFF99\]{color:#fff9}.text-\[\#ff6b6b\]{color:#ff6b6b}.text-\[\#ffffff44\]{color:#fff4}.text-\[\#ffffff66\]{color:#fff6}.text-\[\#ffffff88\]{color:#fff8}.text-\[\#ffffff99\]{color:#fff9}.text-\[\#ffffffaa\]{color:#fffa}.text-\[var\(--bluevue-error\)\]{color:var(--bluevue-error)}.text-black{color:var(--color-black)}.text-gray-500{color:var(--color-gray-500)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.opacity-0{opacity:0}.opacity-20{opacity:.2}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;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))}.transition-transform{transition-property:transform,translate,scale,rotate;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}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:block:is(:where(.group):hover *){display:block}}.placeholder\:text-\[\#00000055\]::placeholder{color:#0005}.placeholder\:text-\[\#ffffff44\]::placeholder{color:#fff4}@media (hover:hover){.hover\:bg-\[\#333333\]:hover{background-color:#333}.hover\:bg-\[\#ffffff11\]:hover{background-color:#fff1}.hover\:bg-\[\#ffffff22\]:hover{background-color:#fff2}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:text-white:hover{color:var(--color-white)}.hover\:brightness-125:hover{--tw-brightness:brightness(125%);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,)}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-\[\#9e9e9e80\]:disabled{background-color:#9e9e9e80}.disabled\:text-\[\#afafaf\]:disabled{color:#afafaf}.disabled\:opacity-30:disabled{opacity:.3}@media (hover:hover){.disabled\:hover\:brightness-100:disabled:hover{--tw-brightness:brightness(100%);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,)}}}:root{--bluevue-primary:#0b5087;--bluevue-error:#cf6679;--bluevue-surface:#363636;--bluevue-accent:#69c;--bluevue-panel-bg:#1e1e1ef5;--bluevue-hairline:#ffffff14;--bluevue-elevation-1:0 2px 1px -1px #0003,0 1px 1px 0 #00000024,0 1px 3px 0 #0000001f;--bluevue-elevation-5:0 3px 5px -1px #0003,0 5px 8px 0 #00000024,0 1px 14px 0 #0000001f;--bluevue-inset-1:inset 0 1px 2px #00000056,inset 0 .5px .5px #0000003a,inset 0 -.5px 0 #ffffff0b}.bluevue-elevation-1{box-shadow:var(--bluevue-elevation-1)}.bluevue-elevation-5{box-shadow:var(--bluevue-elevation-5)}.bluevue-inset-1{box-shadow:var(--bluevue-inset-1)}.bluevue-panel{background-color:var(--bluevue-panel-bg);-webkit-backdrop-filter:blur(8px);border:1px solid var(--bluevue-hairline);box-shadow:0 4px 4px #0003,0 8px 12px 6px #00000026}.bluevue-dialog{background:0 0;border:none;max-width:min(92vw,624px);max-height:92vh;margin:auto;padding:0;overflow:visible}.bluevue-dialog:focus,.bluevue-dialog:focus-visible,.bluevue-popover:focus,.bluevue-popover:focus-visible{outline:none}.bluevue-dialog::backdrop{-webkit-backdrop-filter:blur(8px);background:#000000e0}.bluevue-popover{background:0 0;border:none;margin:0;padding:0;position:fixed;overflow:visible}.bluevue-expand-enter-active,.bluevue-expand-leave-active{transition:max-height .3s;overflow:hidden}.bluevue-expand-enter-from,.bluevue-expand-leave-to{max-height:0}.bluevue-expand-enter-to,.bluevue-expand-leave-from{max-height:500px}.bluevue-loading__icon{animation:4s infinite bluevue-prop}@keyframes bluevue-prop{0%{animation-timing-function:cubic-bezier(.45,0,.55,1);transform:rotate(0)}50%{animation-timing-function:cubic-bezier(.35,0,.45,1);transform:rotate(80deg)}to{transform:rotate(1440deg)}}@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-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{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-duration{syntax:"*";inherits:false}@property --tw-ease{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}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@bluerobotics/bluevue",
+  "version": "0.1.0",
+  "description": "Blue Robotics Vue components for common UI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bluerobotics/BlueVue.git"
+  },
+  "homepage": "https://github.com/bluerobotics/BlueVue#readme",
+  "keywords": [
+    "vue",
+    "components",
+    "blueos",
+    "blue-robotics",
+    "tailwind"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/bluevue.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./bluevue.css": "./src/styles/bluevue.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run typecheck && vite build && npm run build:css",
+    "build:css": "tailwindcss --input src/styles/bundled.css --output dist/style.css --minify",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "2.0.1"
+  },
+  "peerDependencies": {
+    "@mdi/font": ">=7",
+    "vue": "^3.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "4.1.11",
+    "@tailwindcss/vite": "4.1.11",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
+    "@vitejs/plugin-vue": "5.1.3",
+    "eslint": "8.57.0",
+    "eslint-plugin-vue": "9.27.0",
+    "tailwindcss": "4.1.11",
+    "typescript": "5.5.4",
+    "vite": "5.4.2",
+    "vite-plugin-dts": "4.5.4",
+    "vue": "3.4.38",
+    "vue-tsc": "2.0.29"
+  }
+}