@loomui-ng/ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,162 @@
+import * as i0 from "@angular/core";
+import { Directive, booleanAttribute, computed, input } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+import { cva } from "class-variance-authority";
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80",
+			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var UiButton = class UiButton {
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("default", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(buttonVariants({
+		variant: this.variant(),
+		size: this.size()
+	}), this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiButton,
+		isStandalone: true,
+		selector: "button[uiButton], a[uiButton], ui-button",
+		inputs: {
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "button" },
+			properties: {
+				"attr.disabled": "disabled() ? \"\" : null",
+				"attr.data-variant": "variant()",
+				"attr.data-size": "size()",
+				"attr.class": "classes()"
+			}
+		},
+		exportAs: ["uiButton"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiButton,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[uiButton], a[uiButton], ui-button",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiButton",
+			host: {
+				"[attr.disabled]": "disabled() ? \"\" : null",
+				"data-slot": "button",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-size]": "size()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiButton, buttonVariants };
+
+//# sourceMappingURL=loomui-ng-ui-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-button.mjs","names":[],"sources":["../../../libs/ui/button/button-variants.ts","../../../libs/ui/button/button.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n/**\n * Class strings copied from the live shadcn Button (radix docs page, base-nova style),\n * see docs/behavior-specs/button.md. Physical pl-/pr- from the source are converted to\n * logical ps-/pe- for RTL (known deviation).\n */\nexport const buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/80',\n        outline:\n          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',\n        ghost:\n          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',\n        destructive:\n          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default:\n          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        // h-7 is INFERRED: the observed sm buttons always carried an h-* override (see spec).\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',\n        icon: 'size-8',\n        'icon-xs':\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm':\n          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',\n        'icon-lg': 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n","import { computed, Directive, input, booleanAttribute } from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { buttonVariants, type ButtonVariants } from './button-variants';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\n/**\n * <button uiButton variant=\"outline\" size=\"sm\">…</button>\n * <a uiButton href=\"/\">…</a>\n *\n * Directive (not a component) so the native element, its semantics and keyboard behaviour are kept.\n * Consumer classes passed via `class` are merged with tailwind-merge; because the whole class\n * attribute is owned by this directive, avoid `[class.foo]` bindings on the same element.\n */\n@Directive({\n  selector: 'button[uiButton], a[uiButton], ui-button', hostDirectives: [UiElementHost],\n  exportAs: 'uiButton',\n  host: { '[attr.disabled]': 'disabled() ? \"\" : null',\n    'data-slot': 'button',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-size]': 'size()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiButton {\n  /** Reflected as the `disabled` attribute so it also works on the custom element. */\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly variant = input<NonNullable<ButtonVariants['variant']>>('default');\n  readonly size = input<NonNullable<ButtonVariants['size']>>('default');\n  readonly userClass = input<string>('', { alias: 'class' });\n\n  protected readonly classes = computed(() =>\n    cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.userClass()),\n  );\n}\n"],"mappings":";;;;;AAOA,MAAa,iBAAiB,IAC5B,8lBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SACE;GACF,WACE;GACF,OACE;GACF,aACE;GACF,MAAM;EACP;EACD,MAAM;GACJ,SACE;GACF,IAAI;GAEJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WACE;GACF,WACE;GACF,WAAW;EACZ;CACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;CACP;AACF,CAAA;ACnBH,IAAa,WAAb,MAAa,SAAQ;CAEV,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,UAAU,MAA8C,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAClE,OAAO,MAA2C,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC5D,YAAY,MAAc,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAO,CAAA;CAEpC,UAAU,eAC3B,GAAG,eAAe;EAAE,SAAS,KAAK,QAAO;EAAI,MAAM,KAAK,KAAI;CAAE,CAAE,GAAG,KAAK,UAAS,CAAE,GACpF,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CATU,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAQ,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAR,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAQ,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,aAAA,SAAA;GAAA,YAAA;IAAA,iBAAA;IAAA,qBAAA;IAAA,kBAAA;IAAA,cAAA;GAAA;EAAA;EAAA,UAAA,CAAA,UAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAAR,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EAVpB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAA4C,gBAAgB,CAAC,aAAa;GACpF,UAAU;GACV,MAAM;IAAE,mBAAmB;IACzB,aAAa;IACb,uBAAuB;IACvB,oBAAoB;IACpB,gBAAgB;GACjB;EACF,CAAA"}