ngx-com 0.0.1 → 0.0.4

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 };