ngx-com 0.0.1 → 0.0.3

package/fesm2022/ngx-com-components-badge.mjs

@@ -0,0 +1,138 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, Directive } from '@angular/core';
+import { mergeClasses } from 'ngx-com/utils';
+import { cva } from 'class-variance-authority';
+
+/**
+ * CVA variants for the badge directive.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,
+ *         `--color-success`, `--color-success-foreground`, `--color-success-hover`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-border`, `--color-foreground`, `--radius-badge`, `--radius-badge-sm`, `--radius-pill`
+ */
+const badgeVariants = cva([
+    'com-badge',
+    'inline-flex w-fit shrink-0 items-center justify-center gap-1',
+    'overflow-hidden whitespace-nowrap',
+    'text-xs font-medium',
+    'border transition-colors',
+    '[&>svg]:pointer-events-none [&>svg]:size-3',
+], {
+    variants: {
+        variant: {
+            primary: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary-hover',
+            accent: 'border-transparent bg-accent text-accent-foreground [a&]:hover:bg-accent-hover',
+            warn: 'border-transparent bg-warn text-warn-foreground [a&]:hover:bg-warn-hover',
+            success: 'border-transparent bg-success text-success-foreground [a&]:hover:bg-success-hover',
+            muted: 'border-transparent bg-muted text-muted-foreground [a&]:hover:bg-muted-hover',
+            outline: 'border-border bg-transparent text-foreground [a&]:hover:bg-muted',
+        },
+        size: {
+            sm: 'px-1.5 py-px text-[10px] rounded-badge-sm gap-0.5 [&>svg]:size-2.5',
+            default: 'px-2 py-0.5 text-xs rounded-badge gap-1 [&>svg]:size-3',
+            lg: 'px-2.5 py-1 text-sm rounded-badge gap-1.5 [&>svg]:size-3.5',
+        },
+        pill: {
+            true: 'rounded-pill',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'default',
+        pill: false,
+    },
+});
+
+/**
+ * Badge directive — applies styled badge classes to any host element.
+ *
+ * Works on `<span>`, `<a>`, `<button>`, or any other element.
+ * Hover styles are automatically applied only on `<a>` elements via `[a&]:hover:`.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,
+ *         `--color-success`, `--color-success-foreground`, `--color-success-hover`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-border`, `--color-foreground`, `--radius-badge`, `--radius-badge-sm`, `--radius-pill`
+ *
+ * @example Basic usage
+ * ```html
+ * <span comBadge>Primary</span>
+ * <span comBadge variant="accent">Accent</span>
+ * <span comBadge variant="warn">Warning</span>
+ * ```
+ *
+ * @example Pill shape
+ * ```html
+ * <span comBadge pill>New</span>
+ * <span comBadge variant="success" pill>Online</span>
+ * ```
+ *
+ * @example Sizes
+ * ```html
+ * <span comBadge size="sm">SM</span>
+ * <span comBadge>Default</span>
+ * <span comBadge size="lg">Large</span>
+ * ```
+ *
+ * @example As a link (hover activates automatically)
+ * ```html
+ * <a href="/alerts" comBadge variant="warn">3 alerts</a>
+ * ```
+ *
+ * @example With an icon (SVG auto-sized)
+ * ```html
+ * <span comBadge variant="success">
+ *   <svg><!-- check icon --></svg>
+ *   Online
+ * </span>
+ * ```
+ *
+ * @example Dynamic variant
+ * ```html
+ * <span comBadge [variant]="statusVariant()">{{ statusLabel() }}</span>
+ * ```
+ */
+class ComBadge {
+    /** Visual variant — maps to semantic token pairings */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Badge size */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Fully rounded pill shape */
+    pill = input(false, { ...(ngDevMode ? { debugName: "pill" } : {}), transform: booleanAttribute });
+    /** Consumer CSS classes — merged with variant classes via mergeClasses() */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    /** @internal Computed host class from CVA + consumer overrides */
+    computedClass = computed(() => mergeClasses(badgeVariants({
+        variant: this.variant(),
+        size: this.size(),
+        pill: this.pill(),
+    }), this.userClass()), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComBadge, isStandalone: true, selector: "[comBadge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, exportAs: ["comBadge"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComBadge, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comBadge]',
+                    exportAs: 'comBadge',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+// Public API for the badge directive
+// Main directive
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComBadge, badgeVariants };
+//# sourceMappingURL=ngx-com-components-badge.mjs.map

package/fesm2022/ngx-com-components-badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-com-components-badge.mjs","sources":["../../../projects/com/components/badge/badge.variants.ts","../../../projects/com/components/badge/badge.directive.ts","../../../projects/com/components/badge/index.ts","../../../projects/com/components/badge/ngx-com-components-badge.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n/**\n * Variant type for badge appearance.\n */\nexport type BadgeVariant = 'primary' | 'accent' | 'warn' | 'success' | 'muted' | 'outline';\n\n/**\n * Size type for badge.\n */\nexport type BadgeSize = 'sm' | 'default' | 'lg';\n\n/**\n * CVA variants for the badge directive.\n *\n * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,\n *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,\n *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,\n *         `--color-success`, `--color-success-foreground`, `--color-success-hover`,\n *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,\n *         `--color-border`, `--color-foreground`, `--radius-badge`, `--radius-badge-sm`, `--radius-pill`\n */\nexport const badgeVariants: (props?: {\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  pill?: boolean;\n}) => string = cva(\n  [\n    'com-badge',\n    'inline-flex w-fit shrink-0 items-center justify-center gap-1',\n    'overflow-hidden whitespace-nowrap',\n    'text-xs font-medium',\n    'border transition-colors',\n    '[&>svg]:pointer-events-none [&>svg]:size-3',\n  ],\n  {\n    variants: {\n      variant: {\n        primary:\n          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary-hover',\n        accent:\n          'border-transparent bg-accent text-accent-foreground [a&]:hover:bg-accent-hover',\n        warn:\n          'border-transparent bg-warn text-warn-foreground [a&]:hover:bg-warn-hover',\n        success:\n          'border-transparent bg-success text-success-foreground [a&]:hover:bg-success-hover',\n        muted:\n          'border-transparent bg-muted text-muted-foreground [a&]:hover:bg-muted-hover',\n        outline:\n          'border-border bg-transparent text-foreground [a&]:hover:bg-muted',\n      },\n      size: {\n        sm: 'px-1.5 py-px text-[10px] rounded-badge-sm gap-0.5 [&>svg]:size-2.5',\n        default: 'px-2 py-0.5 text-xs rounded-badge gap-1 [&>svg]:size-3',\n        lg: 'px-2.5 py-1 text-sm rounded-badge gap-1.5 [&>svg]:size-3.5',\n      },\n      pill: {\n        true: 'rounded-pill',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'default',\n      pill: false,\n    },\n  }\n);\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>;\n","import {\n  booleanAttribute,\n  computed,\n  Directive,\n  input,\n} from '@angular/core';\nimport type { InputSignal, InputSignalWithTransform, Signal } from '@angular/core';\nimport { mergeClasses } from './badge.utils';\nimport { badgeVariants } from './badge.variants';\nimport type { BadgeVariant, BadgeSize } from './badge.variants';\n\n/**\n * Badge directive — applies styled badge classes to any host element.\n *\n * Works on `<span>`, `<a>`, `<button>`, or any other element.\n * Hover styles are automatically applied only on `<a>` elements via `[a&]:hover:`.\n *\n * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,\n *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,\n *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,\n *         `--color-success`, `--color-success-foreground`, `--color-success-hover`,\n *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,\n *         `--color-border`, `--color-foreground`, `--radius-badge`, `--radius-badge-sm`, `--radius-pill`\n *\n * @example Basic usage\n * ```html\n * <span comBadge>Primary</span>\n * <span comBadge variant=\"accent\">Accent</span>\n * <span comBadge variant=\"warn\">Warning</span>\n * ```\n *\n * @example Pill shape\n * ```html\n * <span comBadge pill>New</span>\n * <span comBadge variant=\"success\" pill>Online</span>\n * ```\n *\n * @example Sizes\n * ```html\n * <span comBadge size=\"sm\">SM</span>\n * <span comBadge>Default</span>\n * <span comBadge size=\"lg\">Large</span>\n * ```\n *\n * @example As a link (hover activates automatically)\n * ```html\n * <a href=\"/alerts\" comBadge variant=\"warn\">3 alerts</a>\n * ```\n *\n * @example With an icon (SVG auto-sized)\n * ```html\n * <span comBadge variant=\"success\">\n *   <svg><!-- check icon --></svg>\n *   Online\n * </span>\n * ```\n *\n * @example Dynamic variant\n * ```html\n * <span comBadge [variant]=\"statusVariant()\">{{ statusLabel() }}</span>\n * ```\n */\n@Directive({\n  selector: '[comBadge]',\n  exportAs: 'comBadge',\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class ComBadge {\n  /** Visual variant — maps to semantic token pairings */\n  readonly variant: InputSignal<BadgeVariant> = input<BadgeVariant>('primary');\n\n  /** Badge size */\n  readonly size: InputSignal<BadgeSize> = input<BadgeSize>('default');\n\n  /** Fully rounded pill shape */\n  readonly pill: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n\n  /** Consumer CSS classes — merged with variant classes via mergeClasses() */\n  readonly userClass: InputSignal<string> = input<string>('', { alias: 'class' });\n\n  /** @internal Computed host class from CVA + consumer overrides */\n  protected readonly computedClass: Signal<string> = computed(() =>\n    mergeClasses(\n      badgeVariants({\n        variant: this.variant(),\n        size: this.size(),\n        pill: this.pill(),\n      }),\n      this.userClass()\n    )\n  );\n}\n","// Public API for the badge directive\n\n// Main directive\nexport { ComBadge } from './badge.directive';\n\n// Variants (for advanced customization)\nexport { badgeVariants } from './badge.variants';\n\nexport type {\n  BadgeVariant,\n  BadgeSize,\n  BadgeVariants,\n} from './badge.variants';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-com-components-button.mjs

@@ -0,0 +1,146 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, Directive } from '@angular/core';
+import { mergeClasses } from 'ngx-com/utils';
+import { cva } from 'class-variance-authority';
+
+const buttonVariants = cva([
+    'inline-flex items-center justify-center',
+    'font-medium whitespace-nowrap select-none',
+    'transition-colors duration-150',
+    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+    'disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground',
+    'aria-disabled:pointer-events-none aria-disabled:bg-disabled aria-disabled:text-disabled-foreground',
+], {
+    variants: {
+        variant: {
+            solid: '',
+            outline: 'border bg-transparent',
+            ghost: 'bg-transparent',
+            link: 'bg-transparent underline-offset-4 hover:underline',
+        },
+        color: {
+            primary: '',
+            accent: '',
+            warn: '',
+            muted: '',
+        },
+        size: {
+            sm: 'h-8 px-3 text-sm rounded-control-sm gap-1.5',
+            md: 'h-10 px-4 text-sm rounded-control gap-2',
+            lg: 'h-12 px-6 text-base rounded-control gap-2.5',
+            icon: 'h-10 w-10 rounded-control',
+        },
+        fullWidth: {
+            true: 'w-full',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        // Solid variants
+        { variant: 'solid', color: 'primary', class: 'bg-primary text-primary-foreground hover:bg-primary-hover' },
+        { variant: 'solid', color: 'accent', class: 'bg-accent text-accent-foreground hover:bg-accent-hover' },
+        { variant: 'solid', color: 'warn', class: 'bg-warn text-warn-foreground hover:bg-warn-hover' },
+        { variant: 'solid', color: 'muted', class: 'bg-muted text-muted-foreground hover:bg-muted-hover' },
+        // Outline variants
+        { variant: 'outline', color: 'primary', class: 'border-primary text-primary hover:bg-primary-subtle' },
+        { variant: 'outline', color: 'accent', class: 'border-accent text-accent hover:bg-accent-subtle' },
+        { variant: 'outline', color: 'warn', class: 'border-warn text-warn hover:bg-warn-subtle' },
+        { variant: 'outline', color: 'muted', class: 'border-border text-muted-foreground hover:bg-muted' },
+        // Ghost variants
+        { variant: 'ghost', color: 'primary', class: 'text-primary hover:bg-primary-subtle' },
+        { variant: 'ghost', color: 'accent', class: 'text-accent hover:bg-accent-subtle' },
+        { variant: 'ghost', color: 'warn', class: 'text-warn hover:bg-warn-subtle' },
+        { variant: 'ghost', color: 'muted', class: 'text-muted-foreground hover:bg-muted' },
+        // Link variants
+        { variant: 'link', color: 'primary', class: 'text-primary' },
+        { variant: 'link', color: 'accent', class: 'text-accent' },
+        { variant: 'link', color: 'warn', class: 'text-warn' },
+        { variant: 'link', color: 'muted', class: 'text-muted-foreground' },
+        // Link size override — remove height/padding constraints
+        { variant: 'link', size: 'sm', class: 'h-auto px-0' },
+        { variant: 'link', size: 'md', class: 'h-auto px-0' },
+        { variant: 'link', size: 'lg', class: 'h-auto px-0' },
+        { variant: 'link', size: 'icon', class: 'h-auto w-auto px-0' },
+    ],
+    defaultVariants: {
+        variant: 'solid',
+        color: 'primary',
+        size: 'md',
+        fullWidth: false,
+    },
+});
+
+/**
+ * Button directive — applies styled button classes to native `<button>` and `<a>` elements.
+ *
+ * Using a directive on native elements preserves:
+ * - Full control over native attributes (`type="submit"`, `routerLink`, `download`, etc.)
+ * - Native accessibility (keyboard handling, focus, ARIA)
+ * - No wrapper elements in the DOM
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`, `--color-primary-subtle`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`, `--color-accent-subtle`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`, `--color-warn-subtle`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-border`, `--color-ring`
+ *
+ * @example Basic usage
+ * ```html
+ * <button comButton>Save</button>
+ * <button comButton variant="outline" color="accent">Cancel</button>
+ * ```
+ *
+ * @example Link button
+ * ```html
+ * <a comButton variant="link" href="/docs">Documentation</a>
+ * <a comButton variant="outline" routerLink="/dashboard">Dashboard</a>
+ * ```
+ *
+ * @example Icon button
+ * ```html
+ * <button comButton variant="ghost" size="icon" aria-label="Settings">
+ *   <svg>...</svg>
+ * </button>
+ * ```
+ *
+ * @example Full width
+ * ```html
+ * <button comButton fullWidth>Submit Application</button>
+ * ```
+ */
+class ComButton {
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    ariaDisabled = computed(() => this.disabled() ? 'true' : null, ...(ngDevMode ? [{ debugName: "ariaDisabled" }] : []));
+    computedClass = computed(() => mergeClasses(buttonVariants({
+        variant: this.variant(),
+        color: this.color(),
+        size: this.size(),
+        fullWidth: this.fullWidth(),
+    }), this.disabled() && 'pointer-events-none', this.userClass()), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComButton, isStandalone: true, selector: "button[comButton], a[comButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "attr.aria-disabled": "ariaDisabled()" } }, exportAs: ["comButton"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[comButton], a[comButton]',
+                    exportAs: 'comButton',
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.aria-disabled]': 'ariaDisabled()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComButton, buttonVariants };
+//# sourceMappingURL=ngx-com-components-button.mjs.map

package/fesm2022/ngx-com-components-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-com-components-button.mjs","sources":["../../../projects/com/components/button/button.variants.ts","../../../projects/com/components/button/button.directive.ts","../../../projects/com/components/button/ngx-com-components-button.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';\nexport type ButtonColor = 'primary' | 'accent' | 'warn' | 'muted';\nexport type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';\n\nexport const buttonVariants: (props?: {\n  variant?: ButtonVariant;\n  color?: ButtonColor;\n  size?: ButtonSize;\n  fullWidth?: boolean;\n}) => string = cva(\n  [\n    'inline-flex items-center justify-center',\n    'font-medium whitespace-nowrap select-none',\n    'transition-colors duration-150',\n    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n    'disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground',\n    'aria-disabled:pointer-events-none aria-disabled:bg-disabled aria-disabled:text-disabled-foreground',\n  ],\n  {\n    variants: {\n      variant: {\n        solid: '',\n        outline: 'border bg-transparent',\n        ghost: 'bg-transparent',\n        link: 'bg-transparent underline-offset-4 hover:underline',\n      },\n      color: {\n        primary: '',\n        accent: '',\n        warn: '',\n        muted: '',\n      },\n      size: {\n        sm: 'h-8 px-3 text-sm rounded-control-sm gap-1.5',\n        md: 'h-10 px-4 text-sm rounded-control gap-2',\n        lg: 'h-12 px-6 text-base rounded-control gap-2.5',\n        icon: 'h-10 w-10 rounded-control',\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      // Solid variants\n      { variant: 'solid', color: 'primary', class: 'bg-primary text-primary-foreground hover:bg-primary-hover' },\n      { variant: 'solid', color: 'accent', class: 'bg-accent text-accent-foreground hover:bg-accent-hover' },\n      { variant: 'solid', color: 'warn', class: 'bg-warn text-warn-foreground hover:bg-warn-hover' },\n      { variant: 'solid', color: 'muted', class: 'bg-muted text-muted-foreground hover:bg-muted-hover' },\n\n      // Outline variants\n      { variant: 'outline', color: 'primary', class: 'border-primary text-primary hover:bg-primary-subtle' },\n      { variant: 'outline', color: 'accent', class: 'border-accent text-accent hover:bg-accent-subtle' },\n      { variant: 'outline', color: 'warn', class: 'border-warn text-warn hover:bg-warn-subtle' },\n      { variant: 'outline', color: 'muted', class: 'border-border text-muted-foreground hover:bg-muted' },\n\n      // Ghost variants\n      { variant: 'ghost', color: 'primary', class: 'text-primary hover:bg-primary-subtle' },\n      { variant: 'ghost', color: 'accent', class: 'text-accent hover:bg-accent-subtle' },\n      { variant: 'ghost', color: 'warn', class: 'text-warn hover:bg-warn-subtle' },\n      { variant: 'ghost', color: 'muted', class: 'text-muted-foreground hover:bg-muted' },\n\n      // Link variants\n      { variant: 'link', color: 'primary', class: 'text-primary' },\n      { variant: 'link', color: 'accent', class: 'text-accent' },\n      { variant: 'link', color: 'warn', class: 'text-warn' },\n      { variant: 'link', color: 'muted', class: 'text-muted-foreground' },\n\n      // Link size override — remove height/padding constraints\n      { variant: 'link', size: 'sm', class: 'h-auto px-0' },\n      { variant: 'link', size: 'md', class: 'h-auto px-0' },\n      { variant: 'link', size: 'lg', class: 'h-auto px-0' },\n      { variant: 'link', size: 'icon', class: 'h-auto w-auto px-0' },\n    ],\n    defaultVariants: {\n      variant: 'solid',\n      color: 'primary',\n      size: 'md',\n      fullWidth: false,\n    },\n  }\n);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n","import { booleanAttribute, computed, Directive, input } from '@angular/core';\nimport type { InputSignal, InputSignalWithTransform, Signal } from '@angular/core';\nimport { mergeClasses } from './button.utils';\nimport { buttonVariants, type ButtonVariant, type ButtonColor, type ButtonSize } from './button.variants';\n\n/**\n * Button directive — applies styled button classes to native `<button>` and `<a>` elements.\n *\n * Using a directive on native elements preserves:\n * - Full control over native attributes (`type=\"submit\"`, `routerLink`, `download`, etc.)\n * - Native accessibility (keyboard handling, focus, ARIA)\n * - No wrapper elements in the DOM\n *\n * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`, `--color-primary-subtle`,\n *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`, `--color-accent-subtle`,\n *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`, `--color-warn-subtle`,\n *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,\n *         `--color-disabled`, `--color-disabled-foreground`,\n *         `--color-border`, `--color-ring`\n *\n * @example Basic usage\n * ```html\n * <button comButton>Save</button>\n * <button comButton variant=\"outline\" color=\"accent\">Cancel</button>\n * ```\n *\n * @example Link button\n * ```html\n * <a comButton variant=\"link\" href=\"/docs\">Documentation</a>\n * <a comButton variant=\"outline\" routerLink=\"/dashboard\">Dashboard</a>\n * ```\n *\n * @example Icon button\n * ```html\n * <button comButton variant=\"ghost\" size=\"icon\" aria-label=\"Settings\">\n *   <svg>...</svg>\n * </button>\n * ```\n *\n * @example Full width\n * ```html\n * <button comButton fullWidth>Submit Application</button>\n * ```\n */\n@Directive({\n  selector: 'button[comButton], a[comButton]',\n  exportAs: 'comButton',\n  host: {\n    '[class]': 'computedClass()',\n    '[attr.aria-disabled]': 'ariaDisabled()',\n  },\n})\nexport class ComButton {\n  readonly variant: InputSignal<ButtonVariant> = input<ButtonVariant>('solid');\n  readonly color: InputSignal<ButtonColor> = input<ButtonColor>('primary');\n  readonly size: InputSignal<ButtonSize> = input<ButtonSize>('md');\n  readonly fullWidth: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n  readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n  readonly userClass: InputSignal<string> = input('', { alias: 'class' });\n\n  protected readonly ariaDisabled: Signal<'true' | null> = computed(() =>\n    this.disabled() ? 'true' : null\n  );\n\n  protected readonly computedClass: Signal<string> = computed(() =>\n    mergeClasses(\n      buttonVariants({\n        variant: this.variant(),\n        color: this.color(),\n        size: this.size(),\n        fullWidth: this.fullWidth(),\n      }),\n      this.disabled() && 'pointer-events-none',\n      this.userClass()\n    )\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}