@loomui-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/loomui-ng-ui-bubble.mjs

@@ -0,0 +1,386 @@
+import * as i0 from "@angular/core";
+import { Directive, computed, input } from "@angular/core";
+import { cva } from "class-variance-authority";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+const bubbleVariants = cva("group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full", {
+	variants: {
+		variant: {
+			default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+			muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+			secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+			tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+			outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+			destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+			ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50"
+		},
+		align: {
+			end: "",
+			start: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		align: "start"
+	}
+});
+var UiBubble = class UiBubble {
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(bubbleVariants({
+		variant: this.variant(),
+		align: this.align()
+	}), this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiBubble,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiBubble,
+		isStandalone: true,
+		selector: "[uiBubble], ui-bubble",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "bubble" },
+			properties: {
+				"attr.data-variant": "variant()",
+				"attr.data-align": "align()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiBubble,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiBubble], ui-bubble",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "bubble",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-align]": "align()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiBubbleContent = class UiBubbleContent {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("w-fit max-w-full min-w-0 overflow-hidden rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-start [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/30 whitespace-pre-line", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiBubbleContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiBubbleContent,
+		isStandalone: true,
+		selector: "[uiBubbleContent], ui-bubble-content",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "bubble-content" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiBubbleContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiBubbleContent], ui-bubble-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "bubble-content",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiBubbleGroup = class UiBubbleGroup {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("flex min-w-0 flex-col gap-2", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiBubbleGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiBubbleGroup,
+		isStandalone: true,
+		selector: "[uiBubbleGroup], ui-bubble-group",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "bubble-group" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiBubbleGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiBubbleGroup], ui-bubble-group",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "bubble-group",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+const bubbleReactionsVariants = cva("absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0", {
+	variants: {
+		align: {
+			end: "bottom-0 translate-y-3/4 end-3 p-0",
+			start: "start-3"
+		},
+		side: {
+			bottom: "bottom-0 translate-y-3/4",
+			top: "top-0 -translate-y-3/4 start-3"
+		}
+	},
+	defaultVariants: {
+		align: "start",
+		side: "bottom"
+	}
+});
+var UiBubbleReactions = class UiBubbleReactions {
+	align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	side = input("bottom", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(bubbleReactionsVariants({
+		align: this.align(),
+		side: this.side()
+	}), this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiBubbleReactions,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiBubbleReactions,
+		isStandalone: true,
+		selector: "[uiBubbleReactions], ui-bubble-reactions",
+		inputs: {
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-slot": "bubble-reactions",
+				"role": "img"
+			},
+			properties: {
+				"attr.data-align": "align()",
+				"attr.data-side": "side()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiBubbleReactions,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiBubbleReactions], ui-bubble-reactions",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "bubble-reactions",
+				"role": "img",
+				"[attr.data-align]": "align()",
+				"[attr.data-side]": "side()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_BUBBLE_GENERATED = [
+	UiBubble,
+	UiBubbleContent,
+	UiBubbleGroup,
+	UiBubbleReactions
+];
+const UI_BUBBLE = UI_BUBBLE_GENERATED;
+export { UI_BUBBLE, UI_BUBBLE_GENERATED, UiBubble, UiBubbleContent, UiBubbleGroup, UiBubbleReactions, bubbleReactionsVariants, bubbleVariants };
+
+//# sourceMappingURL=loomui-ng-ui-bubble.mjs.map

package/fesm2022/loomui-ng-ui-bubble.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-bubble.mjs","names":[],"sources":["../../../libs/ui/bubble/bubble.ts"],"sourcesContent":["// GENERATED by tools/gen-ui.mjs from docs/evidence/slots/bubble.json.\n// Change tools/ui-specs.mjs and regenerate; hand-written parts live in ./bubble.manual.ts.\nimport { Directive, computed, input } from '@angular/core';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\nexport const bubbleVariants = cva('group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full', {\n  variants: {\n    variant: {\n      default: '*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80',\n      muted: '*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]',\n      secondary: '*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]',\n      tinted: '*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]',\n      outline: '*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30',\n      destructive: '*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30',\n      ghost: 'border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50',\n    },\n    align: {\n      end: '',\n      start: '',\n    },\n  },\n  defaultVariants: { variant: 'default', align: 'start' },\n});\n\n@Directive({\n  selector: '[uiBubble], ui-bubble', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'bubble',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-align]': 'align()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiBubble {\n  readonly variant = input<'default' | 'muted' | 'secondary' | 'tinted' | 'outline' | 'destructive' | 'ghost'>('default');\n  readonly align = input<'end' | 'start'>('start');\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn(bubbleVariants({ variant: this.variant(), align: this.align() }), this.userClass()));\n}\n\n@Directive({\n  selector: '[uiBubbleContent], ui-bubble-content', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'bubble-content',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiBubbleContent {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('w-fit max-w-full min-w-0 overflow-hidden rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-start [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/30 whitespace-pre-line', this.userClass()));\n}\n\n@Directive({\n  selector: '[uiBubbleGroup], ui-bubble-group', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'bubble-group',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiBubbleGroup {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('flex min-w-0 flex-col gap-2', this.userClass()));\n}\n\nexport const bubbleReactionsVariants = cva('absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0', {\n  variants: {\n    align: {\n      end: 'bottom-0 translate-y-3/4 end-3 p-0',\n      start: 'start-3',\n    },\n    side: {\n      bottom: 'bottom-0 translate-y-3/4',\n      top: 'top-0 -translate-y-3/4 start-3',\n    },\n  },\n  defaultVariants: { align: 'start', side: 'bottom' },\n});\n\n@Directive({\n  selector: '[uiBubbleReactions], ui-bubble-reactions', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'bubble-reactions',\n    'role': 'img',\n    '[attr.data-align]': 'align()',\n    '[attr.data-side]': 'side()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiBubbleReactions {\n  readonly align = input<'end' | 'start'>('start');\n  readonly side = input<'bottom' | 'top'>('bottom');\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn(bubbleReactionsVariants({ align: this.align(), side: this.side() }), this.userClass()));\n}\n\nexport const UI_BUBBLE_GENERATED = [UiBubble, UiBubbleContent, UiBubbleGroup, UiBubbleReactions] as const;\nexport const UI_BUBBLE = UI_BUBBLE_GENERATED;\n"],"mappings":"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"}

package/fesm2022/loomui-ng-ui-button-group.mjs

@@ -0,0 +1,193 @@
+import * as i0 from "@angular/core";
+import { Directive, computed, input } from "@angular/core";
+import { cva } from "class-variance-authority";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+const buttonGroupVariants = cva("group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+	variants: { orientation: {
+		horizontal: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg!",
+		vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! h-fit"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+var UiButtonGroup = class UiButtonGroup {
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(buttonGroupVariants({ orientation: this.orientation() }), this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiButtonGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiButtonGroup,
+		isStandalone: true,
+		selector: "[uiButtonGroup], ui-button-group",
+		inputs: {
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-slot": "button-group",
+				"role": "group"
+			},
+			properties: {
+				"attr.data-orientation": "orientation()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiButtonGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiButtonGroup], ui-button-group",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "button-group",
+				"role": "group",
+				"[attr.data-orientation]": "orientation()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiButtonGroupSeparator = class UiButtonGroupSeparator {
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("shrink-0 data-horizontal:h-px data-vertical:w-px data-vertical:self-stretch relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiButtonGroupSeparator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiButtonGroupSeparator,
+		isStandalone: true,
+		selector: "[uiButtonGroupSeparator], ui-button-group-separator",
+		inputs: {
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-slot": "button-group-separator",
+				"role": "none"
+			},
+			properties: {
+				"attr.data-orientation": "orientation()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiButtonGroupSeparator,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiButtonGroupSeparator], ui-button-group-separator",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "button-group-separator",
+				"role": "none",
+				"[attr.data-orientation]": "orientation()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_BUTTON_GROUP_GENERATED = [UiButtonGroup, UiButtonGroupSeparator];
+const UI_BUTTON_GROUP = UI_BUTTON_GROUP_GENERATED;
+export { UI_BUTTON_GROUP, UI_BUTTON_GROUP_GENERATED, UiButtonGroup, UiButtonGroupSeparator, buttonGroupVariants };
+
+//# sourceMappingURL=loomui-ng-ui-button-group.mjs.map

package/fesm2022/loomui-ng-ui-button-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-button-group.mjs","names":[],"sources":["../../../libs/ui/button-group/button-group.ts"],"sourcesContent":["// GENERATED by tools/gen-ui.mjs from docs/evidence/slots/button-group.json.\n// Change tools/ui-specs.mjs and regenerate; hand-written parts live in ./button-group.manual.ts.\nimport { Directive, computed, input } from '@angular/core';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\nexport const buttonGroupVariants = cva('group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*=\\'w-\\'])]:w-fit [&>input]:flex-1', {\n  variants: {\n    orientation: {\n      horizontal: '[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg!',\n      vertical: 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! h-fit',\n    },\n  },\n  defaultVariants: { orientation: 'horizontal' },\n});\n\n@Directive({\n  selector: '[uiButtonGroup], ui-button-group', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'button-group',\n    'role': 'group',\n    '[attr.data-orientation]': 'orientation()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiButtonGroup {\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn(buttonGroupVariants({ orientation: this.orientation() }), this.userClass()));\n}\n\n@Directive({\n  selector: '[uiButtonGroupSeparator], ui-button-group-separator', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'button-group-separator',\n    'role': 'none',\n    '[attr.data-orientation]': 'orientation()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiButtonGroupSeparator {\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('shrink-0 data-horizontal:h-px data-vertical:w-px data-vertical:self-stretch relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto', this.userClass()));\n}\n\nexport const UI_BUTTON_GROUP_GENERATED = [UiButtonGroup, UiButtonGroupSeparator] as const;\nexport const UI_BUTTON_GROUP = UI_BUTTON_GROUP_GENERATED;\n"],"mappings":"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"}