@unergy-dev/gandalf 0.3.0 → 0.6.0

package/dist/components/gandalf/base/table/GTableHead.vue.d.ts

@@ -1,10 +1,18 @@
 import { HTMLAttributes } from 'vue';
 type __VLS_Props = {
+    /** Second line (Figma: Text Configuration=Double). */
+    description?: string;
     class?: HTMLAttributes['class'];
 };
-declare var __VLS_7: {};
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
+} & {
+    description?: (props: typeof __VLS_9) => any;
+} & {
+    action?: (props: typeof __VLS_11) => any;
+} & {
+    default?: (props: typeof __VLS_13) => 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>;

package/dist/components/gandalf/base/table/GTableHead.vue_vue_type_script_setup_true_lang.js

@@ -1,22 +1,38 @@
 import { cn } from "../../../../lib/utils.js";
 import TableHead_default from "../../../ui/table/TableHead.js";
-import { gandalfTableHeadVariants } from "./index.js";
-import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { gandalfTableDescriptionVariants, gandalfTableHeadVariants } from "./index.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 // src/components/gandalf/base/table/GTableHead.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "flex items-center gap-2"
+};
+var _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col gap-0.5" };
+var _hoisted_3 = { class: "block truncate" };
+var _hoisted_4 = {
+	key: 0,
+	class: "flex shrink-0 opacity-0 transition-opacity group-hover/table-head:opacity-100 focus-within:opacity-100"
+};
 var GTableHead_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "GTableHead",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
+	props: {
+		description: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
 	setup(__props) {
 		const props = __props;
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(TableHead_default), { class: normalizeClass(unref(cn)(unref(gandalfTableHeadVariants)(), props.class)) }, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				default: withCtx(() => [__props.description || _ctx.$slots.description || _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("span", _hoisted_2, [createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default")]), __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(gandalfTableDescriptionVariants)({ type: "header" }))
+				}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 2)) : createCommentVNode("", true)]), _ctx.$slots.action ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)])) : renderSlot(_ctx.$slots, "default", { key: 1 })]),
 				_: 3
 			}, 8, ["class"]);
 		};

package/dist/components/gandalf/base/table/index.d.ts

@@ -7,7 +7,12 @@ export { default as GTableHead } from './GTableHead.vue';
 export { default as GTableCell } from './GTableCell.vue';
 export { default as GTableCaption } from './GTableCaption.vue';
 export declare const gandalfTableVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const gandalfTableFooterBarVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const gandalfTableHeaderVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const gandalfTableFooterVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const gandalfTableRowVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const gandalfTableHeadVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const gandalfTableCellVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const gandalfTableDescriptionVariants: (props?: ({
+    type?: "header" | "cell" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/gandalf/base/table/index.js

@@ -8,9 +8,15 @@ import GTableCell_default from "./GTableCell.js";
 import GTableCaption_default from "./GTableCaption.js";
 import { cva } from "class-variance-authority";
 // src/components/gandalf/base/table/index.ts
-var gandalfTableVariants = cva("rounded-lg border border-slate-200 overflow-hidden");
-var gandalfTableHeaderVariants = cva("bg-base-base");
-var gandalfTableRowVariants = cva("border-slate-200");
-var gandalfTableHeadVariants = cva("h-11 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-base-foreground-extra-quiet");
-var gandalfTableCellVariants = cva("h-10 px-3 py-1.5 text-sm text-base-foreground-loud");
-export { GTable_default as GTable, GTableBody_default as GTableBody, GTableCaption_default as GTableCaption, GTableCell_default as GTableCell, GTableFooter_default as GTableFooter, GTableHead_default as GTableHead, GTableHeader_default as GTableHeader, GTableRow_default as GTableRow, gandalfTableCellVariants, gandalfTableHeadVariants, gandalfTableHeaderVariants, gandalfTableRowVariants, gandalfTableVariants };
+var gandalfTableVariants = cva("overflow-hidden rounded-xl border border-bni-border bg-card");
+var gandalfTableFooterBarVariants = cva("flex h-14 items-center justify-end gap-2 border-t border-bni-border bg-base-base px-3 text-sm leading-[normal] text-base-foreground-quiet");
+var gandalfTableHeaderVariants = cva("bg-base-base [&_tr]:hover:bg-base-base");
+var gandalfTableFooterVariants = cva("border-bni-border bg-base-base font-normal text-base-foreground-quiet");
+var gandalfTableRowVariants = cva("border-bni-border hover:bg-accent data-[state=selected]:bg-muted");
+var gandalfTableHeadVariants = cva("group/table-head h-11 px-3 py-1.5 text-xs leading-[normal] font-semibold text-base-foreground-extra-quiet [&:has([role=checkbox])]:pr-3 [&>[role=checkbox]]:translate-y-0");
+var gandalfTableCellVariants = cva("h-10 px-3 py-1.5 text-sm leading-[normal] text-base-inverse [&:has([role=checkbox])]:pr-3 [&>[role=checkbox]]:translate-y-0");
+var gandalfTableDescriptionVariants = cva("block truncate", { variants: { type: {
+	header: "text-sm font-normal text-base-foreground-extra-quiet",
+	cell: "text-xs text-base-foreground-extra-quiet"
+} } });
+export { GTable_default as GTable, GTableBody_default as GTableBody, GTableCaption_default as GTableCaption, GTableCell_default as GTableCell, GTableFooter_default as GTableFooter, GTableHead_default as GTableHead, GTableHeader_default as GTableHeader, GTableRow_default as GTableRow, gandalfTableCellVariants, gandalfTableDescriptionVariants, gandalfTableFooterBarVariants, gandalfTableFooterVariants, gandalfTableHeadVariants, gandalfTableHeaderVariants, gandalfTableRowVariants, gandalfTableVariants };

package/dist/components/gandalf/base/tabs/GTabsList.vue_vue_type_script_setup_true_lang.js

@@ -24,7 +24,7 @@ var GTabsList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	setup(__props) {
 		const props = __props;
 		const delegatedProps = reactiveOmit(props, "class", "variant", "align", "fullWidth");
-		provide(tabsVariantKey, toRef(() => props.variant ?? "base"));
+		provide(tabsVariantKey, toRef(() => props.variant ?? "toggle-primary"));
 		provide(tabsAlignKey, toRef(() => props.align ?? "start"));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(TabsList_default), mergeProps(unref(delegatedProps), { class: unref(cn)(unref(gandalfTabsListVariants)({

package/dist/components/gandalf/base/tabs/index.d.ts

@@ -7,13 +7,13 @@ export { default as GTabsContent } from './GTabsContent.vue';
 export declare const tabsVariantKey: InjectionKey<Ref<GandalfTabsVariant>>;
 export declare const tabsAlignKey: InjectionKey<Ref<GandalfTabsAlign>>;
 export declare const gandalfTabsListVariants: (props?: ({
-    variant?: "base" | "outline" | null | undefined;
-    align?: "end" | "start" | "stretch" | "center" | null | undefined;
+    variant?: "tab" | "toggle-primary" | "toggle-secondary" | null | undefined;
+    align?: "end" | "stretch" | "center" | "start" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const gandalfTabsTriggerVariants: (props?: ({
-    variant?: "base" | "outline" | null | undefined;
-    align?: "end" | "start" | "stretch" | "center" | null | undefined;
+    variant?: "tab" | "toggle-primary" | "toggle-secondary" | null | undefined;
+    align?: "end" | "stretch" | "center" | "start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type GandalfTabsListVariants = VariantProps<typeof gandalfTabsListVariants>;
 export type GandalfTabsVariant = NonNullable<GandalfTabsListVariants['variant']>;

package/dist/components/gandalf/base/tabs/index.js

@@ -9,8 +9,9 @@ var tabsAlignKey = Symbol("tabs-align");
 var gandalfTabsListVariants = cva("inline-flex items-center", {
 	variants: {
 		variant: {
-			base: "bg-card rounded-2xl p-2 gap-1 h-14",
-			outline: "w-full bg-transparent rounded-none p-0 gap-0 border-b border-border"
+			"toggle-primary": "bg-card h-14 gap-1 rounded-2xl p-2",
+			"toggle-secondary": "bg-base-loud h-8 gap-0 overflow-hidden rounded-xl p-0",
+			tab: "h-10 w-full gap-4 rounded-none bg-transparent p-0 shadow-[inset_0_-1px_0_var(--color-bni-border)]"
 		},
 		align: {
 			start: "justify-start",
@@ -28,16 +29,31 @@ var gandalfTabsListVariants = cva("inline-flex items-center", {
 		class: "w-full"
 	}],
 	defaultVariants: {
-		variant: "base",
+		variant: "toggle-primary",
 		align: "start",
 		fullWidth: false
 	}
 });
-var gandalfTabsTriggerVariants = cva("focus-visible:outline-none", {
+var gandalfTabsTriggerVariants = cva("cursor-pointer text-base leading-normal font-semibold focus-visible:outline-none", {
 	variants: {
 		variant: {
-			base: "gap-2 px-3 py-2 text-base font-semibold text-muted-foreground-quiet data-[state=active]:bg-base-base data-[state=active]:border-brand data-[state=active]:text-brand",
-			outline: "self-end rounded-none border-b-2 border-b-transparent px-3 pb-2 pt-1 text-muted-foreground -mb-px data-[state=active]:bg-transparent data-[state=active]:border-b-primary data-[state=active]:text-primary data-[state=active]:shadow-none"
+			"toggle-primary": [
+				"text-muted-foreground-quiet h-10 rounded-xl px-3 py-2",
+				"hover:overlay-dark-5 active:overlay-dark-8",
+				"data-[state=active]:bg-base-base data-[state=active]:border-primary data-[state=active]:text-primary",
+				"data-[state=active]:hover:bg-none"
+			].join(" "),
+			"toggle-secondary": [
+				"text-base-foreground-extra-quiet h-8 rounded-xl border-0 px-2 py-1",
+				"hover:overlay-dark-5 active:overlay-dark-8",
+				"data-[state=active]:bg-base-inverse data-[state=active]:text-base-on-inverse data-[state=active]:shadow-none",
+				"data-[state=active]:hover:bg-none"
+			].join(" "),
+			tab: [
+				"text-muted-foreground-quiet hover:text-primary-quiet h-10 gap-2 rounded-none border-0 p-2",
+				"data-[state=active]:text-primary data-[state=active]:hover:text-primary data-[state=active]:bg-transparent",
+				"data-[state=active]:shadow-[inset_0_-3px_0_var(--color-primary)]"
+			].join(" ")
 		},
 		align: {
 			start: "",
@@ -46,25 +62,17 @@ var gandalfTabsTriggerVariants = cva("focus-visible:outline-none", {
 			stretch: "flex-1"
 		}
 	},
-	compoundVariants: [
-		{
-			variant: "outline",
-			align: "start",
-			class: "flex-none"
-		},
-		{
-			variant: "outline",
-			align: "center",
-			class: "flex-none"
-		},
-		{
-			variant: "outline",
-			align: "end",
-			class: "flex-none"
-		}
-	],
+	compoundVariants: [{
+		variant: "tab",
+		align: [
+			"start",
+			"center",
+			"end"
+		],
+		class: "flex-none"
+	}],
 	defaultVariants: {
-		variant: "base",
+		variant: "toggle-primary",
 		align: "start"
 	}
 });

package/dist/components/gandalf/base/tooltip/GTooltip.vue.d.ts

@@ -1,15 +1,22 @@
 import { TooltipRootProps } from 'reka-ui';
-declare var __VLS_7: {
+declare var __VLS_9: {
     open: boolean;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<TooltipRootProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<TooltipRootProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: boolean;
+    disableHoverableContent: boolean;
+    disableClosingTrigger: boolean;
+    ignoreNonKeyboardFocus: boolean;
+}, {}, {}, {}, 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;

package/dist/components/gandalf/base/tooltip/GTooltip.vue_vue_type_script_setup_true_lang.js

@@ -1,24 +1,44 @@
-import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
-import { TooltipRoot } from "reka-ui";
+import Tooltip_default from "../../../ui/tooltip/Tooltip.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
 // src/components/gandalf/base/tooltip/GTooltip.vue?vue&type=script&setup=true&lang.ts
 var GTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "GTooltip",
 	props: {
-		defaultOpen: { type: Boolean },
-		open: { type: Boolean },
+		defaultOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
 		delayDuration: {},
-		disableHoverableContent: { type: Boolean },
-		disableClosingTrigger: { type: Boolean },
-		disabled: { type: Boolean },
-		ignoreNonKeyboardFocus: { type: Boolean }
+		disableHoverableContent: {
+			type: Boolean,
+			default: void 0
+		},
+		disableClosingTrigger: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		ignoreNonKeyboardFocus: {
+			type: Boolean,
+			default: void 0
+		}
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(TooltipRoot), null, {
+			return openBlock(), createBlock(unref(Tooltip_default), mergeProps(props, { "onUpdate:open": _cache[0] || (_cache[0] = ($event) => emit("update:open", $event)) }), {
 				default: withCtx((slotProps) => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))]),
 				_: 3
-			});
+			}, 16);
 		};
 	}
 });

package/dist/components/gandalf/base/tooltip/index.js

@@ -4,5 +4,5 @@ import GTooltipTrigger_default from "./GTooltipTrigger.js";
 import GTooltipContent_default from "./GTooltipContent.js";
 import { cva } from "class-variance-authority";
 // src/components/gandalf/base/tooltip/index.ts
-var gandalfTooltipContentVariants = cva("flex min-h-[38px] w-fit max-w-80 items-center justify-center rounded-xl bg-base-inverse p-2 text-center text-xs text-base-on-inverse shadow-neutral-md");
+var gandalfTooltipContentVariants = cva(["flex min-h-[38px] w-fit max-w-80 items-center justify-center rounded-xl bg-base-inverse p-2 text-center text-xs text-base-on-inverse shadow-neutral-md", "[&>span[style]>svg]:h-2 [&>span[style]>svg]:w-3 [&>span[style]>svg]:translate-y-0 [&>span[style]>svg]:rotate-0 [&>span[style]>svg]:rounded-none [&>span[style]>svg]:bg-transparent [&>span[style]>svg]:fill-base-inverse"]);
 export { GTooltip_default as GTooltip, GTooltipContent_default as GTooltipContent, GTooltipProvider_default as GTooltipProvider, GTooltipTrigger_default as GTooltipTrigger, gandalfTooltipContentVariants };

package/dist/components/gandalf/kit/avatar/Avatar.vue.d.ts

@@ -1,12 +1,17 @@
 import { HTMLAttributes } from 'vue';
-import { GandalfAvatarVariant } from '../../base/avatar';
+import { GandalfAvatarSemantic, GandalfAvatarSize, GandalfAvatarType } from '../../base/avatar';
 type __VLS_Props = {
     src?: string;
     alt?: string;
+    /** Text shown when there is no image (e.g. initials). */
     fallback?: string;
-    variant?: GandalfAvatarVariant;
+    type?: GandalfAvatarType;
+    size?: GandalfAvatarSize;
+    semantic?: GandalfAvatarSemantic;
     delayMs?: number;
+    /** Custom hex background for the fallback, outside the Figma semantics. */
     bg?: `#${string}`;
+    /** Custom hex text color for the fallback, outside the Figma semantics. */
     color?: `#${string}`;
     class?: HTMLAttributes['class'];
 };

package/dist/components/gandalf/kit/avatar/Avatar.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,9 @@ var Avatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		src: {},
 		alt: {},
 		fallback: {},
-		variant: {},
+		type: {},
+		size: {},
+		semantic: {},
 		delayMs: {},
 		bg: {},
 		color: {},
@@ -25,7 +27,9 @@ var Avatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		const props = __props;
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(GAvatar_default), {
-				variant: __props.variant,
+				type: __props.type,
+				size: __props.size,
+				semantic: __props.semantic,
 				class: normalizeClass(props.class)
 			}, {
 				default: withCtx(() => [__props.src ? (openBlock(), createBlock(unref(GAvatarImage_default), {
@@ -43,7 +47,12 @@ var Avatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 					_: 1
 				}, 8, ["delay-ms", "style"])]),
 				_: 1
-			}, 8, ["variant", "class"]);
+			}, 8, [
+				"type",
+				"size",
+				"semantic",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/gandalf/kit/avatar/AvatarGroup.vue.d.ts

@@ -1,12 +1,24 @@
 import { HTMLAttributes } from 'vue';
+import { GandalfAvatarSize, GandalfAvatarType } from '../../base/avatar';
 type __VLS_Props = {
+    /** Shape of every avatar in the group, unless an avatar sets its own. */
+    type?: GandalfAvatarType;
+    /** Size of every avatar in the group, unless an avatar sets its own. */
+    size?: GandalfAvatarSize;
+    /** Hidden avatars: adds a last "+N" avatar (Type=+3 in Figma). */
+    more?: number;
     class?: HTMLAttributes['class'];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => 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_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: GandalfAvatarType;
+    size: GandalfAvatarSize;
+    class: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+    more: number;
+}, {}, {}, {}, 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;

package/dist/components/gandalf/kit/avatar/AvatarGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,47 @@
 import { cn } from "../../../../lib/utils.js";
-import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+import GAvatar_default from "../../base/avatar/GAvatar.js";
+import GAvatarFallback_default from "../../base/avatar/GAvatarFallback.js";
+import { avatarGroupKey } from "../../base/avatar/index.js";
+import { gandalfAvatarGroupVariants } from "./index.js";
+import { createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, provide, renderSlot, toDisplayString, toRef, unref, withCtx } from "vue";
 // src/components/gandalf/kit/avatar/AvatarGroup.vue?vue&type=script&setup=true&lang.ts
 var AvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "AvatarGroup",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
+	props: {
+		type: { default: "circle" },
+		size: { default: "sm" },
+		more: { default: void 0 },
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
+	},
 	setup(__props) {
 		const props = __props;
+		provide(avatarGroupKey, {
+			type: toRef(() => props.type),
+			size: toRef(() => props.size)
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("flex -space-x-2", props.class)) }, [renderSlot(_ctx.$slots, "default")], 2);
+			return openBlock(), createElementBlock("div", {
+				"data-slot": "avatar-group",
+				class: normalizeClass(unref(cn)(unref(gandalfAvatarGroupVariants)({ size: __props.size }), props.class))
+			}, [renderSlot(_ctx.$slots, "default"), __props.more ? (openBlock(), createBlock(unref(GAvatar_default), {
+				key: 0,
+				semantic: "default"
+			}, {
+				default: withCtx(() => [createVNode(unref(GAvatarFallback_default), null, {
+					default: withCtx(() => [createTextVNode("+" + toDisplayString(__props.more), 1)]),
+					_: 1
+				})]),
+				_: 1
+			})) : createCommentVNode("", true)], 2);
 		};
 	}
 });

package/dist/components/gandalf/kit/avatar/AvatarRol.js

@@ -0,0 +1,4 @@
+import AvatarRol_vue_vue_type_script_setup_true_lang_default from "./AvatarRol.vue_vue_type_script_setup_true_lang.js";
+// src/components/gandalf/kit/avatar/AvatarRol.vue
+var AvatarRol_default = AvatarRol_vue_vue_type_script_setup_true_lang_default;
+export { AvatarRol_default as default };

package/dist/components/gandalf/kit/avatar/AvatarRol.vue.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'vue';
+import { GandalfAvatarRolType } from './index';
+type __VLS_Props = {
+    /** Role ("Type" in Figma). "Eléctrico" is `electrico`. */
+    type?: GandalfAvatarRolType;
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: GandalfAvatarRolType;
+    class: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+}, {}, {}, {}, 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/avatar/AvatarRol.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,75 @@
+import { cn } from "../../../../lib/utils.js";
+import GAvatar_default from "../../base/avatar/GAvatar.js";
+import GAvatarFallback_default from "../../base/avatar/GAvatarFallback.js";
+import { gandalfAvatarRolBadgeVariants, gandalfAvatarRolVariants } from "./index.js";
+import { createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { HardHat, Leaf, Scale, TreePine, Zap } from "lucide-vue-next";
+// src/components/gandalf/kit/avatar/AvatarRol.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var AvatarRol_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "AvatarRol",
+	props: {
+		type: { default: "legal" },
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const roles = {
+			legal: {
+				label: "Legal",
+				initials: "LE",
+				icon: Scale
+			},
+			ambiental: {
+				label: "Ambiental",
+				initials: "AM",
+				icon: Leaf
+			},
+			forestal: {
+				label: "Forestal",
+				initials: "FO",
+				icon: TreePine
+			},
+			civil: {
+				label: "Civil",
+				initials: "CI",
+				icon: HardHat
+			},
+			electrico: {
+				label: "Eléctrico",
+				initials: "EL",
+				icon: Zap
+			}
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				role: "img",
+				"aria-label": roles[__props.type].label,
+				"data-slot": "avatar-rol",
+				class: normalizeClass(unref(cn)("relative inline-flex size-8 shrink-0", props.class))
+			}, [createVNode(unref(GAvatar_default), {
+				size: "sm",
+				"aria-hidden": "true"
+			}, {
+				default: withCtx(() => [createVNode(unref(GAvatarFallback_default), { class: normalizeClass(unref(cn)("pb-[3px]", unref(gandalfAvatarRolVariants)({ type: __props.type }))) }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(roles[__props.type].initials), 1)])]),
+					_: 3
+				}, 8, ["class"])]),
+				_: 3
+			}), createElementVNode("span", {
+				"aria-hidden": "true",
+				class: normalizeClass(unref(gandalfAvatarRolBadgeVariants)({ type: __props.type }))
+			}, [(openBlock(), createBlock(resolveDynamicComponent(roles[__props.type].icon)))], 2)], 10, _hoisted_1);
+		};
+	}
+});
+export { AvatarRol_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -1,2 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
 export { default as GKitAvatar } from './Avatar.vue';
 export { default as GKitAvatarGroup } from './AvatarGroup.vue';
+export { default as GAvatarRol } from './AvatarRol.vue';
+export declare const gandalfAvatarGroupVariants: (props?: ({
+    size?: "md" | "sm" | "xs" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const gandalfAvatarRolVariants: (props?: ({
+    type?: "legal" | "ambiental" | "forestal" | "civil" | "electrico" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const gandalfAvatarRolBadgeVariants: (props?: ({
+    type?: "legal" | "ambiental" | "forestal" | "civil" | "electrico" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type GandalfAvatarRolType = NonNullable<VariantProps<typeof gandalfAvatarRolVariants>['type']>;

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

@@ -0,0 +1,35 @@
+import Avatar_default from "./Avatar.js";
+import AvatarGroup_default from "./AvatarGroup.js";
+import AvatarRol_default from "./AvatarRol.js";
+import { cva } from "class-variance-authority";
+// src/components/gandalf/kit/avatar/index.ts
+var gandalfAvatarGroupVariants = cva("flex items-center", {
+	variants: { size: {
+		xs: "-space-x-3",
+		sm: "-space-x-4",
+		md: "-space-x-5",
+		lg: "-space-x-6"
+	} },
+	defaultVariants: { size: "sm" }
+});
+var gandalfAvatarRolVariants = cva("", {
+	variants: { type: {
+		legal: "bg-information-muted text-information-bold",
+		ambiental: "bg-lime-100 text-lime-700",
+		forestal: "bg-success-muted text-success-bold",
+		civil: "bg-action-muted text-action-bold",
+		electrico: "bg-warning-muted text-warning-bold"
+	} },
+	defaultVariants: { type: "legal" }
+});
+var gandalfAvatarRolBadgeVariants = cva("text-card absolute top-[23px] left-[7px] flex size-[18px] items-center justify-center rounded-full drop-shadow-[0px_-0.5px_0.5px_rgba(0,0,0,0.25)] [&_svg]:size-2.5", {
+	variants: { type: {
+		legal: "bg-information-bold",
+		ambiental: "bg-lime-700",
+		forestal: "bg-success",
+		civil: "bg-action-bold",
+		electrico: "bg-warning-bold"
+	} },
+	defaultVariants: { type: "legal" }
+});
+export { AvatarRol_default as GAvatarRol, Avatar_default as GKitAvatar, AvatarGroup_default as GKitAvatarGroup, gandalfAvatarGroupVariants, gandalfAvatarRolBadgeVariants, gandalfAvatarRolVariants };

package/dist/components/gandalf/kit/card-toggle/index.d.ts

@@ -5,7 +5,7 @@ export declare const gandalfCardToggleVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const gandalfCardToggleAvatarVariants: (props?: ({
     type?: "report" | "doble" | null | undefined;
-    color?: "default" | "action" | "destructive" | "information" | "success" | "warning" | null | undefined;
+    color?: "default" | "destructive" | "action" | "information" | "success" | "warning" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type GandalfCardToggleVariants = VariantProps<typeof gandalfCardToggleVariants>;
 export type GandalfCardToggleType = NonNullable<GandalfCardToggleVariants['type']>;

package/dist/components/gandalf/kit/date-picker/DatePicker.vue.d.ts

@@ -95,7 +95,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     format: Intl.DateTimeFormatOptions;
     locale: string;
     isDateDisabled: DatePickerMatcher;
-    align: "end" | "start" | "center";
+    align: "end" | "center" | "start";
     contentClass: string | false | Record<string, any> | import('vue').ClassValue[] | null;
     clearable: boolean;
     clearLabel: string;