@unergy-dev/gandalf 0.0.0-stage → 0.6.0

package/dist/components/gandalf/kit/select/types.d.ts

@@ -0,0 +1,26 @@
+import { Option } from '../../base/types';
+/**
+ * An option, plus a second line.
+ *
+ * No `keywords` here, unlike the combobox: a select has no search box, so a term that matches
+ * without being shown could never be typed. If the list is long enough to want searching, that
+ * is the signal to reach for `GKitCombobox` instead.
+ */
+export type SelectOption = Option & {
+    /** Second line under the label, in the list only. The trigger shows the label alone. */
+    description?: string;
+};
+/** A labelled run of options, rendered under a heading. */
+export type SelectOptionGroup = {
+    label?: string;
+    options: SelectOption[];
+};
+/**
+ * Either a flat list or a grouped one. Do not mix the two in a single array — the first entry
+ * decides how the whole array is read.
+ */
+export type SelectOptions = SelectOption[] | SelectOptionGroup[];
+/** The value of a single option. */
+export type SelectValue = Option['value'];
+/** What `v-model` carries: one value, or an array of them when `multiple` is set. */
+export type SelectModelValue = SelectValue | SelectValue[] | undefined;

package/dist/components/gandalf/kit/sidebar/Sidebar.js

@@ -0,0 +1,4 @@
+import Sidebar_vue_vue_type_script_setup_true_lang_default from "./Sidebar.vue_vue_type_script_setup_true_lang.js";
+// src/components/gandalf/kit/sidebar/Sidebar.vue
+var Sidebar_default = Sidebar_vue_vue_type_script_setup_true_lang_default;
+export { Sidebar_default as default };

package/dist/components/gandalf/kit/sidebar/Sidebar.vue.d.ts

@@ -0,0 +1,53 @@
+import { Component, HTMLAttributes } from 'vue';
+import { SidebarNavGroup, SidebarNavItem } from './types';
+type __VLS_Props = {
+    /** Groups of items, drawn in order. Empty groups are skipped. */
+    groups: SidebarNavGroup[];
+    /** `value` of the active item (Figma: Status=Actived). */
+    modelValue?: string;
+    /**
+     * Component used for items with `to` — e.g. `NuxtLink` or `RouterLink`. Without it, items
+     * render as `<a href>` (when they have `href`) or as buttons.
+     */
+    linkAs?: Component | string;
+    /** Accessible name of the `<nav>` landmark. */
+    ariaLabel?: string;
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_13: {}, __VLS_72: {
+    item: SidebarNavItem;
+    active: boolean;
+}, __VLS_85: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_13) => any;
+} & {
+    item?: (props: typeof __VLS_72) => any;
+} & {
+    footer?: (props: typeof __VLS_85) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+    select: (item: SidebarNavItem) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onSelect?: ((item: SidebarNavItem) => any) | undefined;
+}>, {
+    collapsible: "none" | "icon" | "offcanvas";
+    modelValue: string;
+    class: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+    variant: "inset" | "sidebar" | "floating";
+    side: "left" | "right";
+    ariaLabel: string;
+    linkAs: string | Component;
+}, {}, {}, {}, 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/components/gandalf/kit/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,140 @@
+import { useSidebar } from "../../../ui/sidebar/utils.js";
+import GSidebar_default from "../../base/sidebar/GSidebar.js";
+import GSidebarContent_default from "../../base/sidebar/GSidebarContent.js";
+import GSidebarFooter_default from "../../base/sidebar/GSidebarFooter.js";
+import GSidebarGroup_default from "../../base/sidebar/GSidebarGroup.js";
+import GSidebarGroupContent_default from "../../base/sidebar/GSidebarGroupContent.js";
+import GSidebarGroupLabel_default from "../../base/sidebar/GSidebarGroupLabel.js";
+import GSidebarHeader_default from "../../base/sidebar/GSidebarHeader.js";
+import GSidebarMenu_default from "../../base/sidebar/GSidebarMenu.js";
+import GSidebarMenuButton_default from "../../base/sidebar/GSidebarMenuButton.js";
+import GSidebarMenuItem_default from "../../base/sidebar/GSidebarMenuItem.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+// src/components/gandalf/kit/sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Sidebar",
+	props: {
+		groups: {},
+		modelValue: { default: void 0 },
+		linkAs: { default: void 0 },
+		ariaLabel: { default: "Navigation" },
+		side: { default: "left" },
+		variant: { default: "sidebar" },
+		collapsible: { default: "icon" },
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue", "select"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { state } = useSidebar();
+		const visibleGroups = computed(() => props.groups.filter((group) => group.items.length > 0));
+		function isActive(item) {
+			return item.value === props.modelValue;
+		}
+		function tagFor(item) {
+			if (item.to !== void 0 && props.linkAs) return props.linkAs;
+			return item.href ? "a" : "button";
+		}
+		function attrsFor(item) {
+			const tag = tagFor(item);
+			if (tag === "button") return {
+				type: "button",
+				disabled: item.disabled
+			};
+			return {
+				to: tag === "a" ? void 0 : item.to,
+				href: tag === "a" ? item.href : void 0,
+				"aria-current": isActive(item) ? "page" : void 0,
+				"aria-disabled": item.disabled || void 0,
+				tabindex: item.disabled ? -1 : void 0
+			};
+		}
+		function select(event, item) {
+			if (item.disabled) {
+				event.preventDefault();
+				return;
+			}
+			emit("update:modelValue", item.value);
+			emit("select", item);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(GSidebar_default), {
+				side: __props.side,
+				variant: __props.variant,
+				collapsible: __props.collapsible,
+				class: normalizeClass(props.class)
+			}, {
+				default: withCtx(() => [
+					_ctx.$slots.header ? (openBlock(), createBlock(unref(GSidebarHeader_default), { key: 0 }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "header")]),
+						_: 3
+					})) : createCommentVNode("", true),
+					createVNode(unref(GSidebarContent_default), null, {
+						default: withCtx(() => [createElementVNode("nav", {
+							"aria-label": __props.ariaLabel,
+							class: "contents"
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleGroups.value, (group) => {
+							return openBlock(), createBlock(unref(GSidebarGroup_default), { key: group.id ?? group.label ?? group.items[0].value }, {
+								default: withCtx(() => [group.label && (group.icon || unref(state) === "expanded") ? (openBlock(), createBlock(unref(GSidebarGroupLabel_default), { key: 0 }, {
+									default: withCtx(() => [group.icon ? (openBlock(), createBlock(resolveDynamicComponent(group.icon), { key: 0 })) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(group.label), 1)]),
+									_: 2
+								}, 1024)) : createCommentVNode("", true), createVNode(unref(GSidebarGroupContent_default), null, {
+									default: withCtx(() => [createVNode(unref(GSidebarMenu_default), null, {
+										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
+											return openBlock(), createBlock(unref(GSidebarMenuItem_default), { key: item.value }, {
+												default: withCtx(() => [createVNode(unref(GSidebarMenuButton_default), {
+													"as-child": "",
+													"is-active": isActive(item),
+													tooltip: item.title
+												}, {
+													default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagFor(item)), mergeProps({ ref_for: true }, attrsFor(item), {
+														class: item.disabled && "pointer-events-none opacity-50",
+														onClick: ($event) => select($event, item)
+													}), {
+														default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+															item,
+															active: isActive(item)
+														}, () => [item.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.icon), { key: 0 })) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(item.title), 1)])]),
+														_: 2
+													}, 1040, ["class", "onClick"]))]),
+													_: 2
+												}, 1032, ["is-active", "tooltip"])]),
+												_: 2
+											}, 1024);
+										}), 128))]),
+										_: 2
+									}, 1024)]),
+									_: 2
+								}, 1024)]),
+								_: 2
+							}, 1024);
+						}), 128))], 8, _hoisted_1)]),
+						_: 3
+					}),
+					_ctx.$slots.footer ? (openBlock(), createBlock(unref(GSidebarFooter_default), { key: 1 }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
+						_: 3
+					})) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 8, [
+				"side",
+				"variant",
+				"collapsible",
+				"class"
+			]);
+		};
+	}
+});
+export { Sidebar_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/gandalf/kit/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as GKitSidebar } from './Sidebar.vue';
+export type { SidebarNavGroup, SidebarNavItem } from './types';

package/dist/components/gandalf/kit/sidebar/types.d.ts

@@ -0,0 +1,25 @@
+import { Component } from 'vue';
+/** One entry of the navigation rail. */
+export interface SidebarNavItem {
+    /** Unique key. The item whose `value` equals the sidebar's `modelValue` is the active one. */
+    value: string;
+    /** Label shown when expanded, and as the tooltip when the rail is collapsed. */
+    title: string;
+    /** Icon component (Lucide or any SVG component). The collapsed rail shows only this. */
+    icon?: Component;
+    /** Destination passed as `to` to the sidebar's `linkAs` component (NuxtLink, RouterLink…). */
+    to?: unknown;
+    /** Plain URL, rendered as an `<a href>` when there is no `to`. */
+    href?: string;
+    disabled?: boolean;
+}
+/** A titled group of items. */
+export interface SidebarNavGroup {
+    /** Unique key of the group. Falls back to `label`. */
+    id?: string;
+    /** Sidebar Title. Hidden in the collapsed rail unless the group has an `icon`. */
+    label?: string;
+    /** Icon of the Sidebar Title; with one, the title stays visible as an icon when collapsed. */
+    icon?: Component;
+    items: SidebarNavItem[];
+}

package/dist/components/gandalf/kit/star/Star.js

@@ -0,0 +1,4 @@
+import Star_vue_vue_type_script_setup_true_lang_default from "./Star.vue_vue_type_script_setup_true_lang.js";
+// src/components/gandalf/kit/star/Star.vue
+var Star_default = Star_vue_vue_type_script_setup_true_lang_default;
+export { Star_default as default };

package/dist/components/gandalf/kit/star/Star.vue.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    /** Activated state ("State=Activated" in Figma). */
+    modelValue?: boolean;
+    size?: 'md' | 'sm';
+    /** Accessible name; the button only shows an icon. */
+    label?: string;
+    disabled?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: boolean;
+    label: string;
+    size: "md" | "sm";
+    class: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/gandalf/kit/star/Star.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,54 @@
+import { cn } from "../../../../lib/utils.js";
+import { gandalfStarVariants } from "./index.js";
+import { createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, unref } from "vue";
+import { Star } from "lucide-vue-next";
+// src/components/gandalf/kit/star/Star.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-state",
+	"aria-pressed",
+	"aria-label",
+	"disabled"
+];
+var Star_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Star",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: "md" },
+		label: { default: "Favorite" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				type: "button",
+				"data-slot": "star",
+				"data-state": __props.modelValue ? "on" : "off",
+				"aria-pressed": __props.modelValue,
+				"aria-label": __props.label,
+				disabled: __props.disabled,
+				class: normalizeClass(unref(cn)(unref(gandalfStarVariants)({ size: __props.size }), props.class)),
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", !__props.modelValue))
+			}, [createVNode(unref(Star), { "stroke-width": 2 })], 10, _hoisted_1);
+		};
+	}
+});
+export { Star_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/gandalf/kit/star/index.d.ts

@@ -0,0 +1,4 @@
+export { default as GStar } from './Star.vue';
+export declare const gandalfStarVariants: (props?: ({
+    size?: "md" | "sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/gandalf/kit/star/index.js

@@ -0,0 +1,11 @@
+import Star_default from "./Star.js";
+import { cva } from "class-variance-authority";
+// src/components/gandalf/kit/star/index.ts
+var gandalfStarVariants = cva("inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm text-base-foreground-extra-quiet outline-none hover:text-base-foreground-quiet focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:text-yellow-400 [&_svg]:size-full data-[state=on]:[&_svg]:fill-current", {
+	variants: { size: {
+		md: "size-4",
+		sm: "size-3.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+export { Star_default as GStar, gandalfStarVariants };

package/dist/components/gandalf/kit/upload-box/UploadBox.js

@@ -0,0 +1,4 @@
+import UploadBox_vue_vue_type_script_setup_true_lang_default from "./UploadBox.vue_vue_type_script_setup_true_lang.js";
+// src/components/gandalf/kit/upload-box/UploadBox.vue
+var UploadBox_default = UploadBox_vue_vue_type_script_setup_true_lang_default;
+export { UploadBox_default as default };

package/dist/components/gandalf/kit/upload-box/UploadBox.vue.d.ts

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'vue';
+import { GandalfUploadBoxSize } from './index';
+type __VLS_Props = {
+    size?: GandalfUploadBoxSize;
+    /** Figma's Label above the box. Omit it to hide the label. */
+    label?: string;
+    /** Red asterisk after the label. */
+    required?: boolean;
+    /** "Title" in Figma. */
+    title?: string;
+    /** "Description" in Figma, only shown in `md`. */
+    description?: string;
+    /** Title of State=Hovered, shown on hover and while dragging a file over the box. */
+    dropTitle?: string;
+    /** Name of the chosen file. Set it to show State=Activated. */
+    fileName?: string;
+    /** `accept` of the underlying file input. */
+    accept?: string;
+    /** `multiple` of the underlying file input. */
+    multiple?: boolean;
+    disabled?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_7: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    'file-icon'?: (props: typeof __VLS_7) => any;
+} & {
+    icon?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    remove: () => any;
+    files: (files: File[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: (() => any) | undefined;
+    onFiles?: ((files: File[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    label: string;
+    size: GandalfUploadBoxSize;
+    multiple: boolean;
+    class: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+    title: string;
+    required: boolean;
+    description: string;
+    fileName: string;
+    dropTitle: string;
+    accept: string;
+}, {}, {}, {}, 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/components/gandalf/kit/upload-box/UploadBox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,156 @@
+import { cn } from "../../../../lib/utils.js";
+import GLabel_default from "../../base/label/GLabel.js";
+import { gandalfUploadBoxFileVariants, gandalfUploadBoxVariants } from "./index.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useId, withCtx, withModifiers } from "vue";
+import { ArrowDown, File, Upload, X } from "lucide-vue-next";
+// src/components/gandalf/kit/upload-box/UploadBox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"accept",
+	"multiple",
+	"disabled"
+];
+var _hoisted_2 = { class: "flex min-w-0 flex-1 items-center gap-2" };
+var _hoisted_3 = { class: "shrink-0 [&_svg]:size-4" };
+var _hoisted_4 = { class: "truncate" };
+var _hoisted_5 = ["aria-label"];
+var _hoisted_6 = ["disabled", "data-dragging"];
+var _hoisted_7 = { class: "shrink-0 [&_svg]:size-[18px]" };
+var _hoisted_8 = {
+	key: 0,
+	class: "flex w-full flex-col"
+};
+var _hoisted_9 = { class: "text-base leading-normal font-semibold" };
+var _hoisted_10 = {
+	key: 0,
+	class: "text-base-foreground-quiet text-sm leading-[normal]"
+};
+var _hoisted_11 = {
+	key: 1,
+	class: "text-base leading-normal font-semibold"
+};
+var _hoisted_12 = {
+	key: 0,
+	class: "hidden group-hover:contents group-data-[dragging=true]:contents"
+};
+var _hoisted_13 = { class: "shrink-0 [&_svg]:size-[18px]" };
+var _hoisted_14 = { class: "text-base leading-normal font-semibold" };
+var UploadBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "UploadBox",
+	props: {
+		size: { default: "md" },
+		label: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: false
+		},
+		title: { default: "Title" },
+		description: { default: void 0 },
+		dropTitle: { default: "Drop your file here" },
+		fileName: { default: void 0 },
+		accept: { default: void 0 },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
+	},
+	emits: ["files", "remove"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const inputId = useId();
+		const inputRef = ref(null);
+		const dragDepth = ref(0);
+		function openPicker() {
+			if (!props.disabled) inputRef.value?.click();
+		}
+		function emitFiles(files) {
+			if (!files || files.length === 0) return;
+			emit("files", Array.from(files));
+		}
+		function onChange(event) {
+			const input = event.target;
+			emitFiles(input.files);
+			input.value = "";
+		}
+		function onDragEnter() {
+			if (!props.disabled) dragDepth.value += 1;
+		}
+		function onDragLeave() {
+			dragDepth.value = Math.max(0, dragDepth.value - 1);
+		}
+		function onDrop(event) {
+			dragDepth.value = 0;
+			if (props.disabled) return;
+			emitFiles(event.dataTransfer?.files ?? null);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-slot": "upload-box",
+				class: normalizeClass(unref(cn)("flex w-full flex-col gap-1", props.class))
+			}, [
+				__props.label ? (openBlock(), createBlock(unref(GLabel_default), {
+					key: 0,
+					for: unref(inputId),
+					required: __props.required,
+					disabled: __props.disabled
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1)]),
+					_: 1
+				}, 8, [
+					"for",
+					"required",
+					"disabled"
+				])) : createCommentVNode("", true),
+				createElementVNode("input", {
+					id: unref(inputId),
+					ref_key: "inputRef",
+					ref: inputRef,
+					type: "file",
+					class: "hidden",
+					accept: __props.accept,
+					multiple: __props.multiple,
+					disabled: __props.disabled,
+					onChange
+				}, null, 40, _hoisted_1),
+				__props.fileName ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					"data-slot": "upload-box-file",
+					class: normalizeClass(unref(gandalfUploadBoxFileVariants)())
+				}, [createElementVNode("span", _hoisted_2, [createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "file-icon", {}, () => [createVNode(unref(File))])]), createElementVNode("span", _hoisted_4, toDisplayString(__props.fileName), 1)]), createElementVNode("button", {
+					type: "button",
+					class: "focus-visible:ring-ring hover:overlay-dark-8 -mr-1 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-2 [&_svg]:size-4",
+					"aria-label": `Remove ${__props.fileName}`,
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("remove"))
+				}, [createVNode(unref(X))], 8, _hoisted_5)], 2)) : (openBlock(), createElementBlock("button", {
+					key: 2,
+					type: "button",
+					"data-slot": "upload-box-dropzone",
+					disabled: __props.disabled,
+					"data-dragging": dragDepth.value > 0,
+					class: normalizeClass(unref(gandalfUploadBoxVariants)({ size: __props.size })),
+					onClick: openPicker,
+					onDragenter: withModifiers(onDragEnter, ["prevent"]),
+					onDragover: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+					onDragleave: withModifiers(onDragLeave, ["prevent"]),
+					onDrop: withModifiers(onDrop, ["prevent"])
+				}, [createElementVNode("span", { class: normalizeClass(__props.disabled ? "contents" : "contents group-hover:hidden group-data-[dragging=true]:hidden") }, [createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(unref(Upload))])]), __props.size === "md" ? (openBlock(), createElementBlock("span", _hoisted_8, [createElementVNode("span", _hoisted_9, toDisplayString(__props.title), 1), __props.description ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(__props.description), 1)) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(__props.title), 1))], 2), !__props.disabled ? (openBlock(), createElementBlock("span", _hoisted_12, [createElementVNode("span", _hoisted_13, [createVNode(unref(ArrowDown))]), createElementVNode("span", _hoisted_14, toDisplayString(__props.dropTitle), 1)])) : createCommentVNode("", true)], 42, _hoisted_6))
+			], 2);
+		};
+	}
+});
+export { UploadBox_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/gandalf/kit/upload-box/index.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+export { default as GUploadBox } from './UploadBox.vue';
+export declare const gandalfUploadBoxVariants: (props?: ({
+    size?: "md" | "sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type GandalfUploadBoxVariants = VariantProps<typeof gandalfUploadBoxVariants>;
+export type GandalfUploadBoxSize = NonNullable<GandalfUploadBoxVariants['size']>;
+export declare const gandalfUploadBoxFileVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/gandalf/kit/upload-box/index.js

@@ -0,0 +1,12 @@
+import UploadBox_default from "./UploadBox.js";
+import { cva } from "class-variance-authority";
+// src/components/gandalf/kit/upload-box/index.ts
+var gandalfUploadBoxVariants = cva("group relative flex w-full cursor-pointer items-center justify-center rounded-lg border border-dashed border-bni-border-loud bg-base-base p-6 text-center text-base-foreground-loud outline-none focus-visible:ring-ring focus-visible:ring-2 hover:bg-blue-50 hover:text-action data-[dragging=true]:bg-blue-50 data-[dragging=true]:text-action disabled:cursor-not-allowed disabled:border-muted-foreground-quiet disabled:bg-muted disabled:text-muted-foreground-quiet", {
+	variants: { size: {
+		md: "h-28 flex-col gap-1",
+		sm: "h-14 gap-2"
+	} },
+	defaultVariants: { size: "md" }
+});
+var gandalfUploadBoxFileVariants = cva("flex h-14 w-full items-center justify-between gap-2 rounded-lg border border-action-bold bg-action-muted px-4 text-base leading-[normal] font-semibold text-action-bold");
+export { UploadBox_default as GUploadBox, gandalfUploadBoxFileVariants, gandalfUploadBoxVariants };

package/dist/components/gandalf/kit/upload-card/UploadCard.js

@@ -0,0 +1,4 @@
+import UploadCard_vue_vue_type_script_setup_true_lang_default from "./UploadCard.vue_vue_type_script_setup_true_lang.js";
+// src/components/gandalf/kit/upload-card/UploadCard.vue
+var UploadCard_default = UploadCard_vue_vue_type_script_setup_true_lang_default;
+export { UploadCard_default as default };

package/dist/components/gandalf/kit/upload-card/UploadCard.vue.d.ts

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'vue';
+import { GandalfUploadCardType } from './index';
+type __VLS_Props = {
+    /** "File name" in Figma, truncated to one line. */
+    fileName: string;
+    type?: GandalfUploadCardType;
+    /** "# MB" in Figma, shown as given. */
+    fileSize?: string;
+    /** Percentage of `in-progress`, rendered as "25%". */
+    progress?: number;
+    /** Badge label, e.g. "KML" ("TYPE" in Figma). */
+    fileType?: string;
+    /** Replaces the status word at the end of the meta line. */
+    statusLabel?: string;
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {}, __VLS_13: {}, __VLS_15: {}, __VLS_23: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    status?: (props: typeof __VLS_13) => any;
+} & {
+    badge?: (props: typeof __VLS_15) => any;
+} & {
+    actions?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    remove: () => any;
+    retry: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: (() => any) | undefined;
+    onRetry?: (() => any) | undefined;
+}>, {
+    type: GandalfUploadCardType;
+    class: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+    progress: number;
+    fileType: string;
+    fileSize: string;
+    statusLabel: string;
+}, {}, {}, {}, 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;
+    };
+};