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

package/dist/tooltip/Tooltip.vue.d.ts

@@ -0,0 +1,23 @@
+import { TooltipRootProps } from 'reka-ui';
+type __VLS_Props = Omit<TooltipRootProps, 'disableHoverableContent'> & {
+    openOnClick?: boolean;
+};
+declare var __VLS_8: {
+    open: boolean;
+};
+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:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "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/tooltip/Tooltip.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/Tooltip-4rCebVao.js";

package/dist/tooltip/TooltipContent.vue.d.ts

@@ -0,0 +1,24 @@
+import { TooltipContentProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = TooltipContentProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((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/tooltip/TooltipContent.vue.js

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

package/dist/tooltip/TooltipProvider.vue.d.ts

@@ -0,0 +1,15 @@
+import { TooltipProviderProps } from 'reka-ui';
+type __VLS_Props = Omit<TooltipProviderProps, 'disableHoverableContent'>;
+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/tooltip/TooltipProvider.vue.js

@@ -0,0 +1,37 @@
+import { appTooltipProviderDefaults } from "./tooltipConfig.js";
+import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { TooltipProvider, useForwardProps } from "reka-ui";
+// src/components/tooltip/TooltipProvider.vue
+var TooltipProvider_default = /* @__PURE__ */ defineComponent({
+	__name: "TooltipProvider",
+	props: {
+		delayDuration: { default: () => appTooltipProviderDefaults.delayDuration },
+		skipDelayDuration: {},
+		disableClosingTrigger: { type: Boolean },
+		disabled: { type: Boolean },
+		ignoreNonKeyboardFocus: {
+			type: Boolean,
+			default: () => appTooltipProviderDefaults.ignoreNonKeyboardFocus
+		},
+		content: {}
+	},
+	setup(__props) {
+		const restProps = createPropsRestProxy(__props, ["delayDuration", "ignoreNonKeyboardFocus"]);
+		const forwarded = useForwardProps(restProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TooltipProvider), mergeProps(unref(forwarded), {
+				"delay-duration": __props.delayDuration,
+				"ignore-non-keyboard-focus": __props.ignoreNonKeyboardFocus,
+				"disable-hoverable-content": unref(appTooltipProviderDefaults).disableHoverableContent
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"delay-duration",
+				"ignore-non-keyboard-focus",
+				"disable-hoverable-content"
+			]);
+		};
+	}
+});
+export { TooltipProvider_default as default };

package/dist/tooltip/TooltipTrigger.vue.d.ts

@@ -0,0 +1,14 @@
+import { TooltipTriggerProps } from 'reka-ui';
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<TooltipTriggerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipTriggerProps> & 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/tooltip/TooltipTrigger.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/TooltipTrigger-64EIE5f2.js";

package/dist/tooltip/tooltipConfig.d.ts

@@ -0,0 +1,5 @@
+export declare const appTooltipProviderDefaults: {
+    readonly delayDuration: 300;
+    readonly disableHoverableContent: true;
+    readonly ignoreNonKeyboardFocus: true;
+};

package/dist/tooltip/tooltipConfig.js

@@ -0,0 +1,7 @@
+// src/components/tooltip/tooltipConfig.ts
+var appTooltipProviderDefaults = {
+	delayDuration: 300,
+	disableHoverableContent: true,
+	ignoreNonKeyboardFocus: true
+};
+export { appTooltipProviderDefaults };

package/dist/tooltip/tooltipContext.d.ts

@@ -0,0 +1,2 @@
+import { InjectionKey } from 'vue';
+export declare const tooltipOpenOnClickKey: InjectionKey<() => boolean>;

package/dist/transition/TransitionCollapse.vue.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    duration?: number;
+    easingEnter?: string;
+    easingLeave?: string;
+    opacityClosed?: number;
+    opacityOpened?: number;
+    disable?: boolean;
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<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/transition/TransitionCollapse.vue.js

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

package/dist/tree/Tree.vue.d.ts

@@ -0,0 +1,32 @@
+import { TreeRootProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<(Omit<TreeRootProps<T, Record<string, any>, false>, "expanded" | "bubbleSelect" | "defaultExpanded" | "defaultValue" | "disabled" | "modelValue" | "multiple" | "propagateSelect"> & {
+        class?: HTMLAttributes["class"];
+    } & {
+        expanded: string[];
+        selected?: T;
+    }) & {
+        "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
+        "onUpdate:selected"?: ((value: T | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            flattenItems: import('reka-ui').FlattenedItem<T>[];
+        }) => any;
+    };
+    emit: ((event: "update:expanded", value: string[]) => void) & ((event: "update:selected", value: T | undefined) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/tree/Tree.vue.js

@@ -0,0 +1,53 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { createBlock, createPropsRestProxy, defineComponent, mergeModels, mergeProps, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
+import { TreeRoot, useForwardProps } from "reka-ui";
+// src/components/tree/Tree.vue
+var Tree_default = /* @__PURE__ */ defineComponent({
+	__name: "Tree",
+	props: /*@__PURE__*/ mergeModels({
+		items: {},
+		getKey: { type: Function },
+		getChildren: { type: Function },
+		selectionBehavior: {},
+		dir: {},
+		loop: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	}, {
+		"expanded": { required: true },
+		"expandedModifiers": {},
+		"selected": {},
+		"selectedModifiers": {}
+	}),
+	emits: ["update:expanded", "update:selected"],
+	setup(__props) {
+		const restProps = createPropsRestProxy(__props, ["class"]);
+		const forwarded = useForwardProps(restProps);
+		const expanded = useModel(__props, "expanded");
+		const selected = useModel(__props, "selected");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TreeRoot), mergeProps(unref(forwarded), {
+				modelValue: selected.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selected.value = $event),
+				expanded: expanded.value,
+				"onUpdate:expanded": _cache[1] || (_cache[1] = ($event) => expanded.value = $event),
+				class: unref(cn)("m-0 min-h-px min-w-0 list-none p-0", __props.class)
+			}), {
+				default: withCtx(({ flattenItems }) => [renderSlot(_ctx.$slots, "default", { flattenItems })]),
+				_: 3
+			}, 16, [
+				"modelValue",
+				"expanded",
+				"class"
+			]);
+		};
+	}
+});
+export { Tree_default as default };

package/dist/tree/TreeItem.vue.d.ts

@@ -0,0 +1,29 @@
+import { TreeItemProps, TreeItemToggleEvent } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<(Omit<TreeItemProps<T>, "asChild" | "as"> & {
+        class?: HTMLAttributes["class"];
+    }) & {
+        onSelect?: ((event: import('reka-ui').TreeItemSelectEvent<T>) => any) | undefined;
+        onToggle?: ((event: TreeItemToggleEvent<T>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            isHovered: boolean;
+        }) => any;
+    };
+    emit: ((evt: "select", event: import('reka-ui').TreeItemSelectEvent<T>) => void) & ((evt: "toggle", event: TreeItemToggleEvent<T>) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/tree/TreeItem.vue.js

@@ -0,0 +1,80 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { t as Button_default } from "../shared/Button-Dj_H5v3V.js";
+import { treeItemClass, treeItemIndent } from "./treeStyles.js";
+import { computed, createBlock, createElementBlock, createElementVNode, createPropsRestProxy, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, useTemplateRef, withCtx, withModifiers } from "vue";
+import { TreeItem, injectTreeRootContext } from "reka-ui";
+import { useElementHover } from "@vueuse/core";
+// src/components/tree/TreeItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "size-5 shrink-0"
+};
+// src/components/tree/TreeItem.vue
+var TreeItem_default = /* @__PURE__ */ defineComponent({
+	__name: "TreeItem",
+	props: {
+		value: {},
+		level: {},
+		disabled: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["select", "toggle"],
+	setup(__props, { emit: __emit }) {
+		const restProps = createPropsRestProxy(__props, ["class"]);
+		const emits = __emit;
+		const isHovered = useElementHover(useTemplateRef("item"));
+		const rootContext = injectTreeRootContext();
+		const hasChildren = computed(() => !!rootContext.getChildren(restProps.value));
+		const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"End",
+			"Home"
+		]);
+		function isShortcut(event) {
+			return (event.ctrlKey || event.metaKey) && !NAVIGATION_KEYS.has(event.key);
+		}
+		function keepKeysInEditableContent(event) {
+			if (event.target instanceof HTMLElement && event.target.matches("input, textarea") && !isShortcut(event)) event.stopPropagation();
+		}
+		function preventClickToggle(event) {
+			if (!(event.detail.originalEvent instanceof KeyboardEvent)) event.preventDefault();
+			emits("toggle", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TreeItem), mergeProps({ ref: "item" }, restProps, {
+				class: unref(cn)(unref(treeItemClass), __props.class),
+				style: unref(treeItemIndent)(restProps.level),
+				onSelect: _cache[0] || (_cache[0] = ($event) => emits("select", $event)),
+				onToggle: preventClickToggle
+			}), {
+				default: withCtx(({ isExpanded, handleToggle }) => [hasChildren.value ? (openBlock(), createBlock(unref(Button_default), {
+					key: 0,
+					type: "button",
+					variant: "muted-textonly",
+					size: "icon-sm",
+					tabindex: "-1",
+					"aria-hidden": "true",
+					class: "shrink-0",
+					onClick: withModifiers(handleToggle, ["stop"])
+				}, {
+					default: withCtx(() => [createElementVNode("i", { class: normalizeClass(unref(cn)("icon-[lucide--chevron-right] transition-transform", isExpanded && "rotate-90")) }, null, 2)]),
+					_: 2
+				}, 1032, ["onClick"])) : (openBlock(), createElementBlock("span", _hoisted_1)), createElementVNode("div", {
+					class: "contents",
+					onKeydown: keepKeysInEditableContent
+				}, [renderSlot(_ctx.$slots, "default", { isHovered: unref(isHovered) })], 32)]),
+				_: 3
+			}, 16, ["class", "style"]);
+		};
+	}
+});
+export { TreeItem_default as default };

package/dist/tree/treeStyles.d.ts

@@ -0,0 +1,4 @@
+export declare const treeItemClass = "group/tree-node flex w-full min-w-0 cursor-pointer items-center gap-3 rounded-sm py-(--tree-item-padding,--spacing(2)) pr-2 text-sm text-foreground outline-none select-none hover:bg-accent focus-visible:bg-accent data-selected:bg-muted";
+export declare function treeItemIndent(level: number): {
+    paddingLeft: string;
+};

package/dist/tree/treeStyles.js

@@ -0,0 +1,6 @@
+// src/components/tree/treeStyles.ts
+var treeItemClass = "group/tree-node flex w-full min-w-0 cursor-pointer items-center gap-3 rounded-sm py-(--tree-item-padding,--spacing(2)) pr-2 text-sm text-foreground outline-none select-none hover:bg-accent focus-visible:bg-accent data-selected:bg-muted";
+function treeItemIndent(level) {
+	return { paddingLeft: `${8 + (level - 1) * 24}px` };
+}
+export { treeItemClass, treeItemIndent };

package/dist-types/button.variants.d.ts

@@ -0,0 +1,16 @@
+import type { VariantProps } from 'cva';
+export declare const buttonVariants: (props?: ({
+    variant?: "secondary" | "primary" | "inverted" | "destructive" | "textonly" | "muted-textonly" | "destructive-textonly" | "outline" | "link" | "overlay-white" | "base" | "tertiary" | "subscribe" | "brand-ghost" | "brand-solid" | "brand-ghost-accent" | undefined;
+    size?: "link" | "sm" | "md" | "lg" | "icon-sm" | "icon" | "icon-lg" | "brand" | "brand-icon" | "unset" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+export declare const FOR_STORIES: {
+    readonly variants: ["secondary", "primary", "inverted", "destructive", "textonly", "muted-textonly", "destructive-textonly", "outline", "link", "base", "tertiary", "overlay-white", "subscribe", "brand-ghost", "brand-solid", "brand-ghost-accent"];
+    readonly sizes: ["sm", "md", "lg", "icon-sm", "icon", "icon-lg", "link", "brand", "brand-icon"];
+};

package/dist-types/select.variants.d.ts

@@ -0,0 +1,24 @@
+export declare const selectTriggerVariants: (props?: ({
+    size?: "md" | "lg" | undefined;
+    border?: "none" | "active" | "invalid" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+export declare const selectItemVariants: (props?: ({
+    layout?: "multi" | "single" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+export declare const selectContentClass = "z-overlay overflow-hidden rounded-lg p-2 bg-background text-foreground border border-solid shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2";
+export declare const selectDropdownClass = "flex shrink-0 cursor-pointer items-center justify-center pl-3 [&_i]:size-5";
+export declare const selectEmptyMessageClass = "px-3 pb-4 text-sm text-muted-foreground";
+export declare const selectCountBadgeClass = "flex size-3.5 items-center justify-center rounded-full bg-foreground text-[9px] font-semibold text-background";
+export declare function stopEscapeToDocument(event: KeyboardEvent): void;

package/dist-types/tag.variants.d.ts

@@ -0,0 +1,21 @@
+import type { VariantProps } from 'cva';
+export declare const tagVariants: (props?: ({
+    shape?: "square" | "rounded" | "overlay" | undefined;
+    state?: "default" | "unselected" | "selected" | undefined;
+    removable?: boolean | undefined;
+    interactive?: boolean | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+export declare const tagRemoveButtonVariants: (props?: ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+}) | undefined) => string;
+export type TagVariants = VariantProps<typeof tagVariants>;

package/dist-types/workspaceAvatar.d.ts

@@ -0,0 +1,5 @@
+/** Solid Polar plan color for a workspace avatar; neutral when the tier is unavailable. */
+export declare function workspaceAvatarStyle(workspaceName: string, subscriptionTier: string | null | undefined): {
+    backgroundColor?: string;
+    color?: string;
+};