@comfyorg/design-system 1.1.0 → 1.3.0-alpha.0

package/dist/search-input/SearchInput.vue.js

@@ -0,0 +1,125 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { t as Button_default } from "../shared/Button-Dj_H5v3V.js";
+import { n as searchInputVariants, t as searchInputSizeConfig } from "../shared/searchInput.variants-BdYHNjce.js";
+import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, ref, renderSlot, unref, useModel, withCtx, withModifiers } from "vue";
+import { ComboboxAnchor, ComboboxInput, ComboboxRoot } from "reka-ui";
+import { watchDebounced } from "@vueuse/core";
+// src/components/search-input/SearchInput.vue
+var SearchInput_default = /* @__PURE__ */ defineComponent({
+	__name: "SearchInput",
+	props: /*@__PURE__*/ mergeModels({
+		placeholder: {},
+		accessibleLabel: {},
+		clearLabel: {},
+		icon: { default: "icon-[lucide--search]" },
+		debounceTime: { default: 300 },
+		autofocus: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: "md" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["search", "blur"], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const sizeConfig = computed(() => searchInputSizeConfig[__props.size]);
+		const modelValue = useModel(__props, "modelValue");
+		const inputRef = ref(null);
+		function focus() {
+			inputRef.value?.$el?.focus();
+		}
+		__expose({ focus });
+		function clearSearch() {
+			modelValue.value = "";
+			focus();
+		}
+		watchDebounced(modelValue, (value) => {
+			emit("search", value);
+		}, { debounce: __props.debounceTime });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ComboboxRoot), {
+				open: false,
+				"ignore-filter": "",
+				disabled: __props.disabled,
+				class: normalizeClass(__props.class)
+			}, {
+				default: withCtx(() => [createVNode(unref(ComboboxAnchor), {
+					class: normalizeClass(unref(cn)(unref(searchInputVariants)({
+						size: __props.size,
+						invalid: __props.invalid
+					}), __props.disabled && "pointer-events-none opacity-50")),
+					onClick: focus
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trailing", {
+						iconClass: sizeConfig.value.icon,
+						positionClass: sizeConfig.value.iconPos
+					}, () => [modelValue.value ? (openBlock(), createBlock(unref(Button_default), {
+						key: 0,
+						class: normalizeClass(unref(cn)("absolute", sizeConfig.value.clearPos)),
+						variant: "textonly",
+						size: "icon-sm",
+						disabled: __props.disabled,
+						"aria-label": __props.clearLabel,
+						onClick: withModifiers(clearSearch, ["stop"])
+					}, {
+						default: withCtx(() => [createElementVNode("i", { class: normalizeClass(unref(cn)("icon-[lucide--x]", sizeConfig.value.icon)) }, null, 2)]),
+						_: 1
+					}, 8, [
+						"class",
+						"disabled",
+						"aria-label"
+					])) : __props.loading ? (openBlock(), createElementBlock("i", {
+						key: 1,
+						class: normalizeClass(unref(cn)("pointer-events-none absolute icon-[lucide--loader-circle] animate-spin", sizeConfig.value.iconPos, sizeConfig.value.icon))
+					}, null, 2)) : (openBlock(), createElementBlock("i", {
+						key: 2,
+						class: normalizeClass(unref(cn)("pointer-events-none absolute", sizeConfig.value.iconPos, sizeConfig.value.icon, __props.icon))
+					}, null, 2))]), createVNode(unref(ComboboxInput), {
+						ref_key: "inputRef",
+						ref: inputRef,
+						modelValue: modelValue.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+						class: normalizeClass(unref(cn)("size-full border-none bg-transparent outline-none", sizeConfig.value.inputPl, sizeConfig.value.inputText)),
+						placeholder: __props.placeholder,
+						"aria-label": __props.accessibleLabel,
+						"aria-invalid": __props.invalid,
+						"auto-focus": __props.autofocus,
+						onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur"))
+					}, null, 8, [
+						"modelValue",
+						"class",
+						"placeholder",
+						"aria-label",
+						"aria-invalid",
+						"auto-focus"
+					])]),
+					_: 3
+				}, 8, ["class"])]),
+				_: 3
+			}, 8, ["disabled", "class"]);
+		};
+	}
+});
+export { SearchInput_default as default };

package/dist/search-input/searchInput.variants.d.ts

@@ -0,0 +1,45 @@
+import { VariantProps } from 'cva';
+export declare const searchInputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | undefined;
+    invalid?: boolean | undefined;
+} & ({
+    class?: import('cva').ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import('cva').ClassValue;
+})) | undefined) => string;
+export type SearchInputVariants = VariantProps<typeof searchInputVariants>;
+export declare const searchInputSizeConfig: {
+    readonly sm: {
+        readonly icon: "size-3";
+        readonly iconPos: "left-2";
+        readonly inputPl: "pl-6";
+        readonly inputText: "text-xs";
+        readonly clearPos: "left-1";
+    };
+    readonly md: {
+        readonly icon: "size-4";
+        readonly iconPos: "left-3";
+        readonly inputPl: "pl-7";
+        readonly inputText: "text-xs";
+        readonly clearPos: "left-2.5";
+    };
+    readonly lg: {
+        readonly icon: "size-4";
+        readonly iconPos: "left-2.5";
+        readonly inputPl: "pl-8";
+        readonly inputText: "text-xs";
+        readonly clearPos: "left-2.5";
+    };
+    readonly xl: {
+        readonly icon: "size-4";
+        readonly iconPos: "left-2.5";
+        readonly inputPl: "pl-8";
+        readonly inputText: "text-xs";
+        readonly clearPos: "left-2";
+    };
+};
+export declare const searchInputStoryConfig: {
+    readonly sizes: ["sm", "md", "lg", "xl"];
+};

package/dist/select/DropdownControl.vue.d.ts

@@ -0,0 +1,16 @@
+interface DropdownOption {
+    label: string;
+    value: string | number;
+}
+interface Props {
+    label: string;
+    options: string[] | DropdownOption[];
+    modelValue: string | number;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/select/DropdownControl.vue.js

@@ -0,0 +1,46 @@
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, openBlock, renderList, toDisplayString } from "vue";
+// src/components/select/DropdownControl.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "relative flex min-h-6 items-center gap-2.5" };
+var _hoisted_2 = { class: "text-left font-sans text-xs text-muted-foreground" };
+var _hoisted_3 = ["value"];
+var _hoisted_4 = ["value"];
+// src/components/select/DropdownControl.vue
+var DropdownControl_default = /* @__PURE__ */ defineComponent({
+	__name: "DropdownControl",
+	props: {
+		label: {},
+		options: {},
+		modelValue: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const normalizedOptions = computed(() => {
+			return props.options.map((option) => {
+				if (typeof option === "string") return {
+					label: option,
+					value: option
+				};
+				return option;
+			});
+		});
+		const onChange = (event) => {
+			const value = event.target.value;
+			emit("update:modelValue", value);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("span", _hoisted_2, toDisplayString(__props.label), 1), createElementVNode("select", {
+				class: "absolute right-0 h-6 rounded-md border bg-secondary px-1.5 transition-colors duration-100 focus:outline focus:outline-ring",
+				value: __props.modelValue,
+				onChange
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
+				return openBlock(), createElementBlock("option", {
+					key: option.value,
+					value: option.value
+				}, toDisplayString(option.label), 9, _hoisted_4);
+			}), 128))], 40, _hoisted_3)]);
+		};
+	}
+});
+export { DropdownControl_default as default };

package/dist/select/Select.vue.d.ts

@@ -0,0 +1,21 @@
+import { SelectRootProps } from 'reka-ui';
+type __VLS_Props = SelectRootProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: import('reka-ui').AcceptableValue) => any;
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import('reka-ui').AcceptableValue) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/Select.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/Select-DtVgv7Po.js";

package/dist/select/SelectContent.vue.d.ts

@@ -0,0 +1,29 @@
+import { SelectContentProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = SelectContentProps & {
+    class?: HTMLAttributes['class'];
+    disablePortal?: boolean;
+};
+declare var __VLS_14: {}, __VLS_27: {};
+type __VLS_Slots = {} & {
+    prepend?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: import('reka-ui').PointerDownOutsideEvent) => any;
+    closeAutoFocus: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: import('reka-ui').PointerDownOutsideEvent) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/SelectContent.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/SelectContent-Ba1mCDWM.js";

package/dist/select/SelectItem.vue.d.ts

@@ -0,0 +1,22 @@
+import { SelectItemProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = SelectItemProps & {
+    class?: HTMLAttributes['class'];
+    /** Classes for the item's text, which holds the slot. */
+    textClass?: HTMLAttributes['class'];
+    /** Keeps the check's column on unchecked items too, so text that ends at the right lines up. */
+    reserveIndicator?: boolean;
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/SelectItem.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/SelectItem-DaOr3TFS.js";

package/dist/select/SelectScrollDownButton.vue.d.ts

@@ -0,0 +1,18 @@
+import { SelectScrollDownButtonProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = SelectScrollDownButtonProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/SelectScrollDownButton.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/SelectScrollDownButton-DYmxtida.js";

package/dist/select/SelectScrollUpButton.vue.d.ts

@@ -0,0 +1,18 @@
+import { SelectScrollUpButtonProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = SelectScrollUpButtonProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/SelectScrollUpButton.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/SelectScrollUpButton-DiyvSb9O.js";

package/dist/select/SelectTrigger.vue.d.ts

@@ -0,0 +1,22 @@
+import { SelectTriggerProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = SelectTriggerProps & {
+    class?: HTMLAttributes['class'];
+    /** Trigger size: 'lg' (40px) or 'md' (32px) */
+    size?: 'lg' | 'md';
+    /** Show invalid (destructive) border */
+    invalid?: boolean;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/SelectTrigger.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/SelectTrigger-BBicbVsI.js";

package/dist/select/SelectValue.vue.d.ts

@@ -0,0 +1,14 @@
+import { SelectValueProps } from 'reka-ui';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<SelectValueProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SelectValueProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/SelectValue.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/SelectValue-BjaQc-WU.js";

package/dist/select/types.d.ts

@@ -0,0 +1,4 @@
+export type SelectOption<Value extends string | number = string> = {
+    name: string;
+    value: Value;
+};

package/dist/select/useSelectSearch.d.ts

@@ -0,0 +1,3 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { SelectOption } from './types';
+export declare function useSelectSearch<Value extends string | number>(query: Ref<string>, options: MaybeRefOrGetter<SelectOption<Value>[]>): import('vue').ComputedRef<SelectOption<Value>[]>;

package/dist/select/useSelectSearch.js

@@ -0,0 +1,14 @@
+import { computed, toValue } from "vue";
+import { useFuse } from "@vueuse/integrations/useFuse";
+// src/components/select/useSelectSearch.ts
+function useSelectSearch(query, options) {
+	const { results } = useFuse(query, options, {
+		fuseOptions: {
+			keys: ["name", "value"],
+			threshold: .3
+		},
+		matchAllWhenSearchEmpty: true
+	});
+	return computed(() => query.value.trim() ? results.value.map(({ item }) => item) : toValue(options));
+}
+export { useSelectSearch };

package/dist/shared/Badge-DFHO3AFi.js

@@ -0,0 +1,90 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { t as Button_default } from "./Button-Dj_H5v3V.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { cva } from "cva";
+// src/components/badge/badge.variants.ts
+var badgeVariants = cva({
+	base: "inline-flex shrink-0 items-center justify-center gap-1 font-medium whitespace-nowrap",
+	variants: {
+		variant: {
+			tag: "rounded-md px-2 py-1 text-sm font-bold",
+			chip: "min-h-7 rounded-full px-2 py-1 text-sm",
+			badge: "min-h-5 min-w-5 rounded-full px-1.5 text-xs",
+			compact: "h-5 rounded-full px-2 py-0.5 text-xs normal-case",
+			label: "h-3.5 rounded-full px-1 text-3xs font-semibold uppercase",
+			circle: "size-3.5 rounded-full text-3xs font-semibold",
+			outline: "rounded-sm border px-1.5 py-0.5 text-2xs",
+			square: "rounded-sm px-1.5 py-0.5 text-xs",
+			pill: "rounded-full px-2 py-0.5 text-2xs",
+			dot: "size-2 rounded-full p-0"
+		},
+		severity: {
+			default: "bg-primary text-foreground",
+			contrast: "bg-foreground text-background",
+			primary: "bg-primary/10 text-foreground",
+			secondary: "bg-secondary text-foreground",
+			muted: "bg-muted text-muted-foreground",
+			danger: "bg-destructive text-foreground",
+			info: "bg-primary/20 text-foreground",
+			success: "bg-success/15 text-foreground",
+			warning: "bg-warning text-warning-foreground"
+		}
+	},
+	compoundVariants: [{
+		variant: "outline",
+		class: "bg-transparent text-foreground"
+	}],
+	defaultVariants: {
+		variant: "tag",
+		severity: "secondary"
+	}
+});
+// src/components/badge/Badge.vue
+var Badge_default = /* @__PURE__ */ defineComponent({
+	__name: "Badge",
+	props: {
+		variant: {},
+		severity: {},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		},
+		removable: { type: Boolean },
+		removeLabel: {}
+	},
+	emits: ["remove"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(cn)(unref(badgeVariants)({
+				variant: __props.variant,
+				severity: __props.severity
+			}), __props.class)) }, [
+				renderSlot(_ctx.$slots, "icon"),
+				renderSlot(_ctx.$slots, "default"),
+				__props.removable ? (openBlock(), createBlock(unref(Button_default), {
+					key: 0,
+					type: "button",
+					variant: "textonly",
+					size: "icon-sm",
+					class: "-mr-1 rounded-full text-current",
+					"aria-label": __props.removeLabel,
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("remove", $event))
+				}, {
+					default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("i", {
+						class: "icon-[lucide--x] size-3",
+						"aria-hidden": "true"
+					}, null, -1)])]),
+					_: 1
+				}, 8, ["aria-label"])) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+export { Badge_default as t };