@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
148 lines (147 loc) • 6.03 kB
TypeScript
import * as i0 from "@angular/core";
/**
* @internal
* Generates base button classes with style variants
*/
export declare const buttonComponent: (props?: ({
variant?: "primary" | "secondary" | "tertiary" | "accent" | "info" | "success" | "warning" | "error" | null | undefined;
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
iconPosition?: "left" | "right" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/** Possible button style variants */
export type ButtonVariantProps = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | null | undefined;
/** Possible button size variants */
export type ButtonSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;
/** Possible icon positions relative to button text */
export type ButtonIconPositionProps = 'left' | 'right' | null | undefined;
/** Configuration object for button styling variants */
export type ButtonProps = {
variant?: ButtonVariantProps;
size?: ButtonSizeProps;
iconPosition?: ButtonIconPositionProps;
};
/** Valid HTML button types */
export type HTMLButtonType = 'button' | 'submit' | 'reset';
/**
* A customizable button component with multiple variants and icon support
*
* @remarks
* Built with Tailwind CSS and class-variance-authority for style management.
* Supports various styling variants, sizes, icon positions, and state modifiers.
*
* @example
* ```html
* <st-button
* variant="primary"
* size="md"
* icon="check"
* iconPosition="left"
* >
* Submit
* </st-button>
* ```
*/
export declare class ButtonComponent {
/**
* Button style variant
* @defaultValue 'primary'
*/
variant: import("@angular/core").InputSignal<ButtonVariantProps>;
/**
* Ghost button style (transparent background)
* @defaultValue false
*/
ghost: import("@angular/core").InputSignal<boolean>;
/**
* Outline button style (border with transparent fill)
* @defaultValue false
*/
outline: import("@angular/core").InputSignal<boolean>;
/**
* Link button style (appears as a hyperlink)
* @defaultValue false
*/
link: import("@angular/core").InputSignal<boolean>;
/**
* Soft button style (muted/subdued color variant)
* @defaultValue false
*/
soft: import("@angular/core").InputSignal<boolean>;
/**
* Dash button style (dashed border)
* @defaultValue false
*/
dash: import("@angular/core").InputSignal<boolean>;
/**
* Wide button style (increased horizontal padding)
* @defaultValue false
*/
wide: import("@angular/core").InputSignal<boolean>;
/**
* Circular button shape
* @defaultValue false
*/
circle: import("@angular/core").InputSignal<boolean>;
/**
* Square button shape
* @defaultValue false
*/
square: import("@angular/core").InputSignal<boolean>;
/**
* Glass effect styling
* @defaultValue false
*/
glass: import("@angular/core").InputSignal<boolean>;
/**
* Full-width button
* @defaultValue false
*/
block: import("@angular/core").InputSignal<boolean>;
/**
* Show loading spinner
* @defaultValue false
*/
loader: import("@angular/core").InputSignal<boolean>;
/**
* Button size variant
* @defaultValue 'md'
*/
size: import("@angular/core").InputSignal<ButtonSizeProps>;
/**
* Add drop shadow
* @defaultValue false
*/
shadow: import("@angular/core").InputSignal<boolean>;
/**
* Button is focusable
* @defaultValue true
*/
focusable: import("@angular/core").InputSignal<boolean>;
/**
* Icon name (from icon library)
*/
icon: import("@angular/core").InputSignal<string | undefined>;
/**
* Position of icon relative to text
* @defaultValue 'left'
*/
iconPosition: import("@angular/core").InputSignal<ButtonIconPositionProps>;
/**
* HTML button type attribute
* @defaultValue 'button'
*/
type: import("@angular/core").InputSignal<HTMLButtonType>;
/**
* Disabled state
* @defaultValue false
*/
disabled: import("@angular/core").InputSignal<boolean>;
/**
* @internal
* Computed class string for the button container
*/
containerClass: import("@angular/core").Signal<string>;
linkClass: import("@angular/core").Signal<string>;
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "st-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "ghost": { "alias": "ghost"; "required": false; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "soft": { "alias": "soft"; "required": false; "isSignal": true; }; "dash": { "alias": "dash"; "required": false; "isSignal": true; }; "wide": { "alias": "wide"; "required": false; "isSignal": true; }; "circle": { "alias": "circle"; "required": false; "isSignal": true; }; "square": { "alias": "square"; "required": false; "isSignal": true; }; "glass": { "alias": "glass"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "focusable": { "alias": "focusable"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}