ngx-com 0.0.1 → 0.0.3

package/fesm2022/ngx-com.mjs

@@ -1,30 +1,16 @@
-import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
-
-class Com {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Com, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Com, isStandalone: true, selector: "com-com", ngImport: i0, template: `
-    <p>
-      com works!
-    </p>
-  `, isInline: true, styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Com, decorators: [{
-            type: Component,
-            args: [{ selector: 'com-com', imports: [], template: `
-    <p>
-      com works!
-    </p>
-  ` }]
-        }] });
-
-/*
- * Public API Surface of com
+/**
+ * Public API Surface of ngx-com
+ *
+ * For specific imports, use subpaths:
+ * - ngx-com/components
+ * - ngx-com/utils
+ * - ngx-com/tokens
  */
+const VERSION = '0.0.1';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Com };
+export { VERSION };
 //# sourceMappingURL=ngx-com.mjs.map

package/fesm2022/ngx-com.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-com.mjs","sources":["../../../projects/com/src/lib/com.ts","../../../projects/com/src/public-api.ts","../../../projects/com/src/ngx-com.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'com-com',\n  imports: [],\n  template: `\n    <p>\n      com works!\n    </p>\n  `,\n  styles: ``,\n})\nexport class Com {\n\n}\n","/*\n * Public API Surface of com\n */\n\nexport * from './lib/com';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAYa,GAAG,CAAA;uGAAH,GAAG,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAH,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,GAAG,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAPJ;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAGU,GAAG,EAAA,UAAA,EAAA,CAAA;kBAVf,SAAS;+BACE,SAAS,EAAA,OAAA,EACV,EAAE,EAAA,QAAA,EACD;;;;AAIT,EAAA,CAAA,EAAA;;;ACTH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"ngx-com.mjs","sources":["../../../projects/com/src/public-api.ts","../../../projects/com/src/ngx-com.ts"],"sourcesContent":["/**\n * Public API Surface of ngx-com\n *\n * For specific imports, use subpaths:\n * - ngx-com/components\n * - ngx-com/utils\n * - ngx-com/tokens\n */\n\nexport const VERSION = '0.0.1';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;;;;;;AAOG;AAEI,MAAM,OAAO,GAAG;;ACTvB;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-com",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/avs2001/ngx-com"
@@ -22,6 +22,78 @@
     ".": {
       "types": "./types/ngx-com.d.ts",
       "default": "./fesm2022/ngx-com.mjs"
+    },
+    "./components": {
+      "types": "./types/ngx-com-components.d.ts",
+      "default": "./fesm2022/ngx-com-components.mjs"
+    },
+    "./components/badge": {
+      "types": "./types/ngx-com-components-badge.d.ts",
+      "default": "./fesm2022/ngx-com-components-badge.mjs"
+    },
+    "./components/button": {
+      "types": "./types/ngx-com-components-button.d.ts",
+      "default": "./fesm2022/ngx-com-components-button.mjs"
+    },
+    "./components/calendar": {
+      "types": "./types/ngx-com-components-calendar.d.ts",
+      "default": "./fesm2022/ngx-com-components-calendar.mjs"
+    },
+    "./components/card": {
+      "types": "./types/ngx-com-components-card.d.ts",
+      "default": "./fesm2022/ngx-com-components-card.mjs"
+    },
+    "./components/checkbox": {
+      "types": "./types/ngx-com-components-checkbox.d.ts",
+      "default": "./fesm2022/ngx-com-components-checkbox.mjs"
+    },
+    "./components/collapsible": {
+      "types": "./types/ngx-com-components-collapsible.d.ts",
+      "default": "./fesm2022/ngx-com-components-collapsible.mjs"
+    },
+    "./components/dropdown": {
+      "types": "./types/ngx-com-components-dropdown.d.ts",
+      "default": "./fesm2022/ngx-com-components-dropdown.mjs"
+    },
+    "./components/dropdown/testing": {
+      "types": "./types/ngx-com-components-dropdown-testing.d.ts",
+      "default": "./fesm2022/ngx-com-components-dropdown-testing.mjs"
+    },
+    "./components/form-field": {
+      "types": "./types/ngx-com-components-form-field.d.ts",
+      "default": "./fesm2022/ngx-com-components-form-field.mjs"
+    },
+    "./components/icon": {
+      "types": "./types/ngx-com-components-icon.d.ts",
+      "default": "./fesm2022/ngx-com-components-icon.mjs"
+    },
+    "./components/menu": {
+      "types": "./types/ngx-com-components-menu.d.ts",
+      "default": "./fesm2022/ngx-com-components-menu.mjs"
+    },
+    "./components/popover": {
+      "types": "./types/ngx-com-components-popover.d.ts",
+      "default": "./fesm2022/ngx-com-components-popover.mjs"
+    },
+    "./components/radio": {
+      "types": "./types/ngx-com-components-radio.d.ts",
+      "default": "./fesm2022/ngx-com-components-radio.mjs"
+    },
+    "./components/sort": {
+      "types": "./types/ngx-com-components-sort.d.ts",
+      "default": "./fesm2022/ngx-com-components-sort.mjs"
+    },
+    "./components/tabs": {
+      "types": "./types/ngx-com-components-tabs.d.ts",
+      "default": "./fesm2022/ngx-com-components-tabs.mjs"
+    },
+    "./tokens": {
+      "types": "./types/ngx-com-tokens.d.ts",
+      "default": "./fesm2022/ngx-com-tokens.mjs"
+    },
+    "./utils": {
+      "types": "./types/ngx-com-utils.d.ts",
+      "default": "./fesm2022/ngx-com-utils.mjs"
     }
   }
 }

package/types/ngx-com-components-badge.d.ts

@@ -0,0 +1,97 @@
+import * as i0 from '@angular/core';
+import { InputSignal, InputSignalWithTransform, Signal } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Variant type for badge appearance.
+ */
+type BadgeVariant = 'primary' | 'accent' | 'warn' | 'success' | 'muted' | 'outline';
+/**
+ * Size type for badge.
+ */
+type BadgeSize = 'sm' | 'default' | 'lg';
+/**
+ * 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`
+ */
+declare const badgeVariants: (props?: {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    pill?: boolean;
+}) => string;
+type BadgeVariants = VariantProps<typeof badgeVariants>;
+
+/**
+ * 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>
+ * ```
+ */
+declare class ComBadge {
+    /** Visual variant — maps to semantic token pairings */
+    readonly variant: InputSignal<BadgeVariant>;
+    /** Badge size */
+    readonly size: InputSignal<BadgeSize>;
+    /** Fully rounded pill shape */
+    readonly pill: InputSignalWithTransform<boolean, unknown>;
+    /** Consumer CSS classes — merged with variant classes via mergeClasses() */
+    readonly userClass: InputSignal<string>;
+    /** @internal Computed host class from CVA + consumer overrides */
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComBadge, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComBadge, "[comBadge]", ["comBadge"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ComBadge, badgeVariants };
+export type { BadgeSize, BadgeVariant, BadgeVariants };

package/types/ngx-com-components-button.d.ts

@@ -0,0 +1,69 @@
+import * as i0 from '@angular/core';
+import { InputSignal, InputSignalWithTransform, Signal } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
+type ButtonColor = 'primary' | 'accent' | 'warn' | 'muted';
+type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
+declare const buttonVariants: (props?: {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+}) => string;
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+/**
+ * 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>
+ * ```
+ */
+declare class ComButton {
+    readonly variant: InputSignal<ButtonVariant>;
+    readonly color: InputSignal<ButtonColor>;
+    readonly size: InputSignal<ButtonSize>;
+    readonly fullWidth: InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: InputSignalWithTransform<boolean, unknown>;
+    readonly userClass: InputSignal<string>;
+    protected readonly ariaDisabled: Signal<'true' | null>;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComButton, "button[comButton], a[comButton]", ["comButton"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ComButton, buttonVariants };
+export type { ButtonColor, ButtonSize, ButtonVariant, ButtonVariants };