@getpara/core-components 0.1.0

package/dist/types/assets/icons/index.d.ts

@@ -0,0 +1,403 @@
+export declare const Icons: {
+    alertCircle: string;
+    alertTriangle: string;
+    alignVerticalCenter: string;
+    angelListBrand: string;
+    angelList: string;
+    appleBrand: string;
+    apple: string;
+    arbitrumBrand: string;
+    arrowCircleBrokenDownLeft: string;
+    arrowCircleDownFilled: string;
+    arrowNarrow: string;
+    arrow: string;
+    asterisk: string;
+    backupKit: string;
+    bank: string;
+    baseBrand: string;
+    brush: string;
+    celoBrand: string;
+    checkCircleFilled: string;
+    checkCircle: string;
+    checkSquare: string;
+    check: string;
+    chevronDown: string;
+    chevronRight: string;
+    chevronSelectorVertical: string;
+    chevronUp: string;
+    clock: string;
+    close: string;
+    clubhouseBrand: string;
+    clubhouse: string;
+    code: string;
+    copy07: string;
+    copy: string;
+    cosmos: string;
+    creditCard02: string;
+    creditCard: string;
+    cube03: string;
+    cubeOutline: string;
+    cube: string;
+    currencyDollar: string;
+    decentBrand: string;
+    decent: string;
+    dell: string;
+    discordBrand: string;
+    discord: string;
+    dot: string;
+    dots: string;
+    downloadCloud: string;
+    download: string;
+    dribbbleBrand: string;
+    dribbble: string;
+    earth: string;
+    edit02: string;
+    emptyCircle: string;
+    ethereum: string;
+    eyeOff: string;
+    eye: string;
+    facebookBrand: string;
+    facebook: string;
+    farcasterBrand: string;
+    farcaster: string;
+    figmaBrand: string;
+    figma: string;
+    file: string;
+    folder: string;
+    githubBrand: string;
+    github: string;
+    globe: string;
+    googleBrand: string;
+    google: string;
+    gridDots: string;
+    helpCircle: string;
+    heroAlertCircle: string;
+    heroCheckmarkCapsule: string;
+    heroCheckmark: string;
+    heroEmail: string;
+    heroExternalConnection: string;
+    heroLock: string;
+    heroPasskey: string;
+    heroPhone: string;
+    heroPlusCircleCapsule: string;
+    heroPlusCircle: string;
+    heroWallet: string;
+    home: string;
+    hp: string;
+    image: string;
+    infoCircle: string;
+    instagramBrand: string;
+    instagram: string;
+    key: string;
+    laptop: string;
+    lenovo: string;
+    lg: string;
+    lightning01: string;
+    lightning: string;
+    linkExternal: string;
+    linkedinBrand: string;
+    linkedin: string;
+    lockKeyholeCircle: string;
+    logOut: string;
+    mail: string;
+    menu: string;
+    monitor: string;
+    moonpayBrand: string;
+    moreLoginOptions: string;
+    motorola: string;
+    nobleBrand: string;
+    optimismBrand: string;
+    paraBlackBg: string;
+    paraBrand: string;
+    paraIconBrand: string;
+    paraIconQr: string;
+    paraIcon: string;
+    paraLogo: string;
+    paraRingsDark: string;
+    paraRings: string;
+    para: string;
+    passcode: string;
+    phone: string;
+    pintrestBrand: string;
+    pintrest: string;
+    plusCircle: string;
+    plus: string;
+    polygonBrand: string;
+    polygon: string;
+    puzzlePiece: string;
+    qrCode02: string;
+    qrCode: string;
+    rampNetworkBrand: string;
+    rampNetwork: string;
+    redditBrand: string;
+    reddit: string;
+    refresh: string;
+    samsung: string;
+    search: string;
+    send: string;
+    settings: string;
+    share: string;
+    shield: string;
+    signalBrand: string;
+    signal: string;
+    sliders: string;
+    snapchatBrand: string;
+    snapchat: string;
+    solana: string;
+    spacingHeight: string;
+    star04Filled: string;
+    stars01Filled: string;
+    stars: string;
+    stopSquare: string;
+    stripeBrand: string;
+    telegramBrand: string;
+    telegram: string;
+    tetherBrand: string;
+    tikTokBrand: string;
+    tikTok: string;
+    trash: string;
+    tumblrBrand: string;
+    tumblr: string;
+    twitterBrand: string;
+    twitter: string;
+    usdcBrand: string;
+    userCircle: string;
+    user: string;
+    wallet: string;
+    x: string;
+    youtubeBrand: string;
+    youtube: string;
+    AD: string;
+    AE: string;
+    AF: string;
+    AG: string;
+    AI: string;
+    AL: string;
+    AM: string;
+    AO: string;
+    AR: string;
+    AS: string;
+    AT: string;
+    AU: string;
+    AW: string;
+    AX: string;
+    AZ: string;
+    BA: string;
+    BB: string;
+    BD: string;
+    BE: string;
+    BF: string;
+    BG: string;
+    BH: string;
+    BI: string;
+    BJ: string;
+    BL: string;
+    BM: string;
+    BN: string;
+    BO: string;
+    BQ: string;
+    BQ2: string;
+    BQ3: string;
+    BR: string;
+    BS: string;
+    BT: string;
+    BW: string;
+    BY: string;
+    BZ: string;
+    CA: string;
+    CC: string;
+    CD: string;
+    CD2: string;
+    CF: string;
+    CH: string;
+    CK: string;
+    CL: string;
+    CM: string;
+    CN: string;
+    CO: string;
+    CR: string;
+    CU: string;
+    CW: string;
+    CX: string;
+    CY: string;
+    CZ: string;
+    DE: string;
+    DJ: string;
+    DK: string;
+    DM: string;
+    DO: string;
+    DS: string;
+    DZ: string;
+    EC: string;
+    EE: string;
+    EG: string;
+    EH: string;
+    ER: string;
+    ES: string;
+    ET: string;
+    FI: string;
+    FJ: string;
+    FK: string;
+    FM: string;
+    FO: string;
+    FR: string;
+    GA: string;
+    GB2: string;
+    GB: string;
+    GD: string;
+    GE: string;
+    GG: string;
+    GH: string;
+    GI: string;
+    GL: string;
+    GM: string;
+    GN: string;
+    GQ: string;
+    GR: string;
+    GT: string;
+    GU: string;
+    GW: string;
+    GY: string;
+    HK: string;
+    HN: string;
+    HR: string;
+    HT: string;
+    HU: string;
+    ID: string;
+    IE: string;
+    IL: string;
+    IM: string;
+    IN: string;
+    IO: string;
+    IQ: string;
+    IR: string;
+    IS: string;
+    IT: string;
+    JE: string;
+    JM: string;
+    JO: string;
+    JP: string;
+    KE: string;
+    KG: string;
+    KH: string;
+    KI: string;
+    KM: string;
+    KN: string;
+    KP: string;
+    KR: string;
+    KW: string;
+    KY: string;
+    KZ: string;
+    LA: string;
+    LB: string;
+    LC: string;
+    LI: string;
+    LK: string;
+    LR: string;
+    LS: string;
+    LT: string;
+    LU: string;
+    LV: string;
+    LY: string;
+    MA: string;
+    MC: string;
+    MD: string;
+    ME: string;
+    MG: string;
+    MH: string;
+    MK: string;
+    ML: string;
+    MM: string;
+    MN: string;
+    MO: string;
+    MP: string;
+    MQ: string;
+    MR: string;
+    MS: string;
+    MT: string;
+    MU: string;
+    MV: string;
+    MW: string;
+    MX: string;
+    MY: string;
+    MZ: string;
+    NA: string;
+    NE: string;
+    NF: string;
+    NG: string;
+    NI: string;
+    NL: string;
+    NO: string;
+    NP: string;
+    NR: string;
+    NU: string;
+    NZ: string;
+    OM: string;
+    PA: string;
+    PE: string;
+    PF: string;
+    PG: string;
+    PH: string;
+    PK: string;
+    PL: string;
+    PN: string;
+    PR: string;
+    PS: string;
+    PT: string;
+    PW: string;
+    PY: string;
+    QA: string;
+    RO: string;
+    RS: string;
+    RU: string;
+    RW: string;
+    SA: string;
+    SB: string;
+    SC: string;
+    SE: string;
+    SG: string;
+    SI: string;
+    SK: string;
+    SL: string;
+    SM: string;
+    SN: string;
+    SO: string;
+    SR: string;
+    SS: string;
+    ST: string;
+    SV: string;
+    SX: string;
+    SY: string;
+    SZ: string;
+    TC: string;
+    TD: string;
+    TG: string;
+    TH: string;
+    TJ: string;
+    TK: string;
+    TL: string;
+    TM: string;
+    TN: string;
+    TO: string;
+    TR: string;
+    TT: string;
+    TV: string;
+    TW: string;
+    TZ: string;
+    UA: string;
+    UG: string;
+    US: string;
+    UY: string;
+    UZ: string;
+    VC: string;
+    VE: string;
+    VG: string;
+    VI: string;
+    VN: string;
+    VU: string;
+    WS: string;
+    YE: string;
+    ZA: string;
+    ZM: string;
+    ZW: string;
+};

package/dist/types/assets/images/index.d.ts

@@ -0,0 +1,5 @@
+export declare const Images: {
+    heroDefault: string;
+    heroPending: string;
+    heroSuccess: string;
+};

package/dist/types/components/cpsl-alert/cpsl-alert.d.ts

@@ -0,0 +1,23 @@
+import { IconType } from '../../interface.js';
+export declare class CpslAlert {
+    /**
+     * The name of the icon to show.
+     */
+    icon?: IconType;
+    /**
+     * Hides the icon.
+     */
+    noIcon?: boolean;
+    /**
+     * The variant of alert.
+     * Options are: `"error"` | `"warning"` | `"success"` | `"custom"`
+     * Default is: `"error"`.
+     */
+    variant?: 'error' | 'warning' | 'success' | 'custom';
+    /**
+     * Whether to show the alert with a filled background based on the variant
+     */
+    filled?: boolean;
+    private get iconType();
+    render(): any;
+}

package/dist/types/components/cpsl-app-bar/cpsl-app-bar.d.ts

@@ -0,0 +1,16 @@
+export declare class CpslAppBar {
+    /**
+     * Height of the app bar.
+     */
+    height: number;
+    /**
+     * The position of the drawer.
+     * Default is `fixed`.
+     */
+    position?: 'fixed' | 'static';
+    /**
+     * Override z-index.
+     */
+    zIndexOverride?: number;
+    render(): any;
+}

package/dist/types/components/cpsl-auth-modal/cpsl-auth-modal.d.ts

@@ -0,0 +1,58 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class CpslAuthModal {
+    private hasAnimatedIn;
+    el: HTMLCpslAuthModalElement;
+    hasFooter: boolean;
+    isMobile: boolean;
+    /**
+     * Duration in seconds of the modal entering.
+     * Default is .15.
+     */
+    enterTransitionDuration?: number;
+    /**
+     * Duration in seconds of the modal exiting.
+     * Default is .15.
+     */
+    exitTransitionDuration?: number;
+    /**
+     * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.
+     */
+    noOverlay?: boolean;
+    /**
+     * Whether or not to show the modal.
+     */
+    open: boolean;
+    /**
+     * Emitted when enter animation starts.
+     */
+    cpslModalEntering: EventEmitter<null>;
+    /**
+     * Emitted when enter animation finishes.
+     */
+    cpslModalEntered: EventEmitter<null>;
+    /**
+     * Emitted when exit animation starts.
+     */
+    cpslModalExiting: EventEmitter<null>;
+    /**
+     * Emitted when exit animation finishes.
+     */
+    cpslModalExited: EventEmitter<null>;
+    /**
+     * Emitted when exit animation finishes.
+     */
+    cpslModalRequestClose: EventEmitter<null>;
+    /**
+     * Override z-index.
+     */
+    zIndexOverride?: number;
+    toggleModal(): void;
+    componentDidLoad(): void;
+    private handleAnimation;
+    private get footerEl();
+    private get modalWrapperEl();
+    private get modalContainerEl();
+    private get footerSlotEl();
+    private get Modal();
+    render(): any;
+}

package/dist/types/components/cpsl-avatar/cpsl-avatar.d.ts

@@ -0,0 +1,21 @@
+export declare class CpslAvatar {
+    /**
+     * The alternate text for the avatar image.
+     */
+    alt?: string;
+    /**
+     * The source of the avatar image.
+     */
+    src: string;
+    /**
+     * The CSS width and height of the icon.
+     */
+    size?: string;
+    /**
+     * The variant of the avatar.
+     * Options are: `"round"`, `"square".
+     * Default is: `"square"`.
+     */
+    variant?: 'round' | 'square';
+    render(): any;
+}

package/dist/types/components/cpsl-button/cpsl-button.d.ts

@@ -0,0 +1,43 @@
+export declare class CpslButton {
+    /**
+     * The tag for the button.
+     * Options are: `"button"`, `"a".
+     * Default is: `"button"`.
+     */
+    as?: 'button' | 'a';
+    /**
+     * If the button is disabled.
+     * Default is: false.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button takes the full width of it's container.
+     * Default is: false.
+     */
+    fullWidth?: boolean;
+    /**
+     * href to use when using a link.
+     */
+    href?: string;
+    /**
+     * The size of the button.
+     * Options are: `"small"`, `"medium".
+     * Default is: `"medium"`.
+     */
+    size?: 'xSmall' | 'small' | 'medium';
+    /**
+     * target to use when using a link.
+     */
+    target?: string;
+    /**
+     * The type of the button.
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * The variant of the button.
+     * Options are: `"primary"`, `"secondary", `"tertiary", `"ghost"`, `"destructive"`.
+     * Default is: `"primary"`.
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive';
+    render(): any;
+}

package/dist/types/components/cpsl-button/cpsl-button.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryFn } from '@storybook/html';
+import { type CpslButton } from './cpsl-button.js';
+declare const meta: Meta<CpslButton & {
+    content?: string;
+}>;
+export default meta;
+type Story = StoryFn<CpslButton & {
+    content?: string;
+}>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Ghost: Story;
+export declare const Destructive: Story;
+export declare const Icon: Story;
+export declare const PrimaryWithIcon: Story;

package/dist/types/components/cpsl-button-group/cpsl-button-group.d.ts

@@ -0,0 +1,12 @@
+export declare class CpslButtonGroup {
+    el: HTMLCpslButtonGroupElement;
+    /**
+     * The id of the selected button.
+     */
+    selectedId?: string;
+    selectItem(): void;
+    componentWillRender(): void;
+    private get buttonSlots();
+    private get otherSlots();
+    render(): any;
+}

package/dist/types/components/cpsl-card/cpsl-card.d.ts

@@ -0,0 +1,3 @@
+export declare class CpslCard {
+    render(): any;
+}

package/dist/types/components/cpsl-checkbox/cpsl-checkbox.d.ts

@@ -0,0 +1,13 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class CpslCheckbox {
+    /**
+     * Whether or not the checkbox is checked.
+     */
+    checked: boolean;
+    /**
+     * Emitted when the checkbox state changes.
+     */
+    cpslCheckboxChanged: EventEmitter<boolean>;
+    private handleCheckboxClick;
+    render(): any;
+}

package/dist/types/components/cpsl-code-input/code-change-interface.d.ts

@@ -0,0 +1,3 @@
+export interface CodeChangeEventDetail {
+    value: string;
+}

package/dist/types/components/cpsl-code-input/cpsl-code-input.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { CodeChangeEventDetail } from './code-change-interface.js';
+export declare class CpslCodeInput {
+    el: HTMLCpslCodeInputElement;
+    /**
+     * Value of the code.
+     */
+    code: string;
+    /**
+     * Error text to show below the input. If this is provided the input will enter an error state.
+     */
+    errorText?: string;
+    /**
+     * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+     */
+    helperText?: string;
+    /**
+     * Length of the code.
+     */
+    length: number;
+    /**
+     * Type of characters to accept in the code.
+     * Defaults to number.
+     */
+    type?: 'number' | 'string';
+    /**
+     * The `cpslInput` event is fired each time the user modifies the input's value.
+     */
+    cpslInput: EventEmitter<CodeChangeEventDetail>;
+    private handleInput;
+    private handleKeyDown;
+    private handleFocus;
+    private handlePaste;
+    private get inputs();
+    render(): any;
+}