@popgrids/ui 0.0.1 → 0.0.4

package/dist/index.d.cts

@@ -1,659 +1,22 @@
-import * as lit_html from 'lit-html';
-import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
-
-/**
- * @summary A base element for all components.
- * @description This is the base class for all components in the library.
- *   It provides common functionality and styles.
- *
- * @status experimental
- * @since 0.0.1
- */
-declare class PopElement extends LitElement {
-    static styles: CSSResultGroup;
-    /**
-     * Emits a custom event with optional detail.
-     * @param name - The name of the event.
-     * @param detail - Optional data to include in the event.
-     * @param options - Additional event options (bubbles, composed, cancelable).
-     * @returns The emitted event.
-     */
-    protected emit<T = unknown>(name: string, detail?: T, options?: EventInit): CustomEvent<T>;
-    constructor();
-}
-
-/**
- * @summary A button that looks like a link, used for navigation or action triggering.
- * @status experimental
- * @since 0.0.1
- *
- * @slot - The default slot for the button text.
- * @slot icon - Slot for an optional icon.
- *
- * @csspart base - The component's base wrapper.
- * @csspart content - The text content wrapper.
- * @csspart icon - The icon wrapper.
- *
- * @cssproperty --button-link-gap - The gap between text and icon.
- */
-declare class PopButtonLink extends PopElement {
-    static styles: CSSResultGroup;
-    /** The size of the button link (sm, md, lg). */
-    size: "sm" | "md" | "lg";
-    /** Whether the button should use primary styling. */
-    primary: boolean;
-    /** The theme of the button. */
-    theme: "default" | "white" | "black";
-    /** Whether the button is disabled. */
-    disabled: boolean;
-    /** The URL the button should navigate to when clicked. */
-    href: string;
-    /** The target attribute for the link (if href is provided). */
-    target: string;
-    /** The rel attribute for the link (if href is provided). */
-    rel: string;
-    /** The type attribute for the link (if href is provided). */
-    type: "button" | "submit" | "reset";
-    /** The id attribute for the link. */
-    id: string;
-    private handleClick;
-    private handleKeyDown;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "pop-button-link": PopButtonLink;
-    }
-}
-
-type ButtonTheme = "brand" | "error" | "glass";
-type ButtonVariant = "primary" | "secondary" | "tertiary";
-type ButtonSize = "sm" | "md" | "lg";
-type ButtonAlign = "left" | "center";
-type LoaderTheme = "default" | "reversed" | "black" | "white";
-type LoaderVariant = "loader" | "spinner";
-type ButtonType = "button" | "submit" | "reset" | "menu";
-/**
- * @summary A versatile button component with multiple themes, variants, and states.
- * @status stable
- * @since 1.0.0
- *
- * @slot - The default slot for button content
- * @slot leading - Slot for content before the label
- * @slot trailing - Slot for content after the label
- *
- * @csspart base - The component's base wrapper
- * @csspart label - The button's label wrapper
- * @csspart leading - The leading content wrapper
- * @csspart trailing - The trailing content wrapper
- * @csspart loader - The loader wrapper
- *
- * @cssproperty --bg-resting - Background color in resting state
- * @cssproperty --bg-hover - Background color in hover state
- * @cssproperty --bg-active - Background color in active state
- * @cssproperty --bg-focused - Background color in focused state
- * @cssproperty --color-resting - Text color in resting state
- * @cssproperty --color-hover - Text color in hover state
- * @cssproperty --color-active - Text color in active state
- * @cssproperty --color-focused - Text color in focused state
- */
-declare class PopButton extends PopElement {
-    static styles: CSSResultGroup;
-    /** The button's theme */
-    theme: ButtonTheme;
-    /** The button's variant */
-    variant: ButtonVariant;
-    /** The button's size */
-    size: ButtonSize;
-    /** The button's content alignment */
-    align: ButtonAlign;
-    /** Whether the button is in a loading state */
-    loading: boolean;
-    /** Whether the button is disabled */
-    disabled: boolean;
-    /** Whether the button is in a current/active state */
-    current: boolean;
-    /** Whether the button has an outline style */
-    outline: boolean;
-    /** Whether the button is collapsed (icon only) */
-    collapsed: boolean;
-    /** Whether the button is highlighted */
-    highlight: boolean;
-    /** Whether the button has rounded corners */
-    rounded: boolean;
-    /** Whether the button uses white theme (glass variant) */
-    white: boolean;
-    /** Whether the button uses black theme (glass variant) */
-    black: boolean;
-    /** The loader theme to use when loading */
-    loaderTheme: LoaderTheme;
-    /** The loader variant to use when loading */
-    loaderVariant: LoaderVariant;
-    /** The button's type attribute */
-    type: ButtonType;
-    /** The button's href attribute for link buttons */
-    href?: string;
-    private get buttonClasses();
-    render(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "pop-button": PopButton;
-    }
-}
-
-type ButtonVerticalVariant = "avatar" | "icon";
-/**
- * @summary A vertical button component with icon and notification support.
- * @status stable
- * @since 1.0.0
- *
- * @slot - The default slot for button content
- * @slot leading - Slot for content before the label (usually an icon)
- * @slot trailing - Slot for notification count or indicator
- *
- * @csspart base - The component's base wrapper
- * @csspart label - The button's label wrapper
- * @csspart leading - The leading content wrapper
- * @csspart trailing - The trailing content wrapper
- * @csspart loader - The loader wrapper
- */
-declare class PopButtonVertical extends PopElement {
-    static styles: CSSResultGroup;
-    /** Whether the button is in a loading state */
-    loading: boolean;
-    /** Whether the button is displayed in mini format */
-    mini: boolean;
-    /** Whether the button is in a current/active state */
-    current: boolean;
-    /** The button's variant */
-    variant: ButtonVerticalVariant;
-    /** Whether the button is disabled */
-    disabled: boolean;
-    /** The loader theme to use when loading */
-    loaderTheme: LoaderTheme;
-    /** The loader variant to use when loading */
-    loaderVariant: LoaderVariant;
-    /** The button's type attribute */
-    type: ButtonType;
-    /** The button's href attribute for link buttons */
-    href?: string;
-    private get buttonClasses();
-    render(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "pop-button-vertical": PopButtonVertical;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "pop-button": PopButton;
-        "pop-button-vertical": PopButtonVertical;
-    }
-}
-
-/**
- * @summary A specialized input field designed for code or monospaced text entry.
- * @description The PopCodeInputField component provides a text input styled specifically for code entry,
- * typically using monospaced fonts and appropriate styling for displaying code or technical input.
- * @status experimental
- * @since 0.0.1
- *
- * @csspart base - The component's base wrapper.
- *
- * @property {boolean} disabled - When true, the input field will be disabled and not accept user input.
- * @property {string} name - The name of the input field, used for form submissions.
- * @property {string} value - The current value of the input field.
- */
-declare class PopCodeInputField extends PopElement {
-    static styles: CSSResultGroup;
-    disabled: boolean;
-    name: string;
-    value: string;
-    private input;
-    render(): lit_html.TemplateResult<1>;
-    private onInput;
-    focus(): void;
-    select(): void;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "pop-code-input-field": PopCodeInputField;
-    }
-}
-
-/**
- * @summary A component for displaying a comment's avatar with a customizable size.
- * @status experimental
- * @since 0.0.1
- *
- * @slot - The default slot.
- *
- * @csspart base - The component's base wrapper.
- * @csspart background - The background element.
- * @csspart content - The content element.
- *
- * @cssproperty --comment-avatar-border-size
- * @cssproperty --comment-avatar-border-color
- */
-declare class PopCommentAvatar extends PopElement {
-    static styles: CSSResultGroup;
-    size: "xs" | "sm" | "md" | "lg" | "xl";
-    backgroundColor: string;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'pop-comment-avatar': PopCommentAvatar;
-    }
-}
-
-/**
- * @summary A component for displaying a comment-related icon button.
- * @status experimental
- * @since 0.0.1
- *
- * @event pop-click - Emitted when the button is clicked.
- *
- * @slot - The default slot.
- * @slot example - An example slot.
- *
- * @csspart base - The component's base wrapper.
- *
- * @csspart base - The component's base element.
- * @csspart icon - The container that wraps the icon element.
- *
- * @cssproperty --icon-scale - The beginning scale of the element.
- * @cssproperty --icon-scale-hover - The scale of the element when hovered.
- * @cssproperty --icon-scale-active - The scale of the element when pressed.
- * @cssproperty --icon-size - The size of the icon element
- * @cssproperty --icon-color - The color of the icon element.
- * @cssproperty --icon-color-hover - The color of the icon element when hovered.
- * @cssproperty --icon-color-active - The color of the icon element when pressed.
- * @cssproperty --icon-color-focused - The color of the icon element when focused.
- * @cssproperty --icon-background - The background color of the icon element.
- * @cssproperty --icon-background-hover - The background color of the icon element when hovered.
- * @cssproperty --icon-background-active - The background color of the icon element when pressed.
- * @cssproperty --icon-background-focused - The background color of the icon element when focused.
- */
-declare class PopCommentIcon extends PopElement {
-    static styles: CSSResultGroup;
-    counter: number;
-    iconUrl: string | undefined;
-    size: string;
-    theme: "brand" | "neutral";
-    variant: "add" | "close" | "filter" | "more" | "send" | "cancel";
-    type: "button" | "submit" | "reset" | "menu";
-    disabled: boolean;
-    handleClick(event: Event): void;
-    get icon(): TemplateResult<1>;
-    render(): TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "pop-comment-icon": PopCommentIcon;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "pop-element": PopElement;
-    }
-}
-
-/**
- * @summary A component for displaying a focus indicator.
- * @status experimental
- * @since 0.0.1
- *
- * @csspart base - The component's base wrapper.
- */
-declare class PopFocusIndicator extends PopElement {
-    static styles: CSSResultGroup;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "pop-focus-indicator": PopFocusIndicator;
-    }
-}
-
-/**
- * Input types supported by the form input component.
- * Focused on text-based inputs that make sense for this component.
- */
-type InputType = "text" | "password" | "email" | "search" | "tel" | "url" | "number";
-/**
- * @summary A simple input component with different states and validation.
- * @status stable
- * @since 0.0.1
- *
- * @slot hint - Optional hint/error text to display below the input
- * @slot prefix - Optional content to display before the input
- * @slot suffix - Optional content to display after the input
- *
- * @csspart base - The component's base wrapper
- * @csspart error - The validation error text element
- * @csspart input - The native input element
- * @csspart hint - The hint/error text element
- *
- * @cssproperty --form-input-border-radius - Border radius of the input
- * @cssproperty --form-input-padding - Padding inside the input
- * @cssproperty --form-input-font-size - Input text size
- * @cssproperty --form-input-color - Input text color
- * @cssproperty --form-input-placeholder-color - Placeholder text color
- * @cssproperty --form-input-bg-color - Input background color
- * @cssproperty --form-input-border-color - Input border color
- * @cssproperty --form-input-border-color-focus - Input border color when focused
- * @cssproperty --form-input-border-color-error - Input border color when in error state
- * @cssproperty --form-input-bg-color-error - Input background color when in error state
- * @cssproperty --form-input-hint-font-size - Hint text size
- * @cssproperty --form-input-hint-line-height - Hint line height
- * @cssproperty --form-input-hint-color - Hint text color
- * @cssproperty --form-input-error-font-size - Error text size
- * @cssproperty --form-input-error-line-height - Error line height
- * @cssproperty --form-input-error-color - Error text color
- */
-declare class PopFormInputSimple extends PopElement {
-    static styles: CSSResultGroup;
-    /**
-     * The input's current value
-     */
-    value: string;
-    /**
-     * The input's placeholder text
-     */
-    placeholder?: string;
-    /**
-     * The input's type
-     */
-    type: InputType;
-    /**
-     * The input's name
-     */
-    name?: string;
-    /**
-     * The input's autocomplete attribute
-     */
-    autocomplete?: string;
-    /**
-     * The input's disabled state
-     */
-    disabled: boolean;
-    /**
-     * The input's error state
-     */
-    error: boolean;
-    /**
-     * The input's error message
-     */
-    errorMessage?: string;
-    /**
-     * Whether the input is required
-     */
-    required: boolean;
-    /**
-     * The input's readonly state
-     */
-    readonly: boolean;
-    /**
-     * The input's minimum length
-     */
-    minlength?: number;
-    /**
-     * The input's maximum length
-     */
-    maxlength?: number;
-    /**
-     * The input's pattern for validation
-     */
-    pattern?: string;
-    /**
-     * The input's minimum value (for number type)
-     */
-    min?: number;
-    /**
-     * The input's maximum value (for number type)
-     */
-    max?: number;
-    /**
-     * The input's step value (for number type)
-     */
-    step?: number;
-    /**
-     * The input's inputmode attribute
-     */
-    inputmode?: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
-    private _hasFocus;
-    private _hasBlurred;
-    private _hasBeenValidated;
-    private _showValidationMessage;
-    private _validationMessage;
-    /**
-     * Reference to the native input element
-     */
-    private input;
-    /**
-     * Checks the validity of the input and updates the error state
-     * @returns True if the input is valid, false otherwise
-     */
-    private checkValidity;
-    private handleInput;
-    private handleFocus;
-    private handleBlur;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'pop-form-input-simple': PopFormInputSimple;
-    }
-}
-
-/**
- * @summary A reusable icon component that renders SVG icons from a registered library
- * @status stable
- * @since 0.0.1
- *
- * @csspart base - The component's base wrapper
- * @csspart icon - The icon element
- *
- * @cssproperty --icon-color - Color of the icon
- */
-declare class PopIcon extends PopElement {
-    static styles: CSSResultGroup;
-    /**
-     * The name of the icon to display (e.g., "check", "activity-heart")
-     */
-    name: string;
-    /**
-     * The library to draw the icon from
-     */
-    library: string;
-    /**
-     * The size of the icon in pixels
-     */
-    size: number;
-    /**
-     * Optional CSS color value to apply to the icon
-     */
-    color: string;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "pop-icon": PopIcon;
-    }
-}
-
-/**
- * @summary A loading indicator component that displays a spinner or animation.
- * @status stable
- * @since 0.0.1
- *
- * @dependency pop-loader
- *
- * @property {string} theme - Controls the color scheme. Options: 'default', 'reversed', 'black', 'white'.
- * @property {string} variant - Determines the loading animation style. Options: 'spinner', 'loader'.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --foreground - Controls stroke color in loader variant.
- */
-declare class PopLoader extends PopElement {
-    static styles: CSSResultGroup;
-    theme: "default" | "reversed" | "black" | "white";
-    variant: "spinner" | "loader";
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'pop-loader': PopLoader;
-    }
-}
-
-/**
- * @summary PopLogo renders the PopGrids logo with different variants and themes.
- * @status experimental
- * @since 0.0.1
- *
- * @slot - The default slot.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --logo-color - Controls the color of the logo. Defaults to var(--color-text-text-default).
- */
-declare class PopLogo extends PopElement {
-    static styles: CSSResultGroup;
-    /** The logo variant. */
-    variant: "logo" | "icon";
-    /** The logo theme. */
-    theme: "default" | "reversed" | "black" | "white";
-    /** Whether to display the logo with an outline. */
-    outline: boolean;
-    /** Whether to display the logo in a mini size. */
-    mini: boolean;
-    render(): lit_html.TemplateResult<1> | undefined;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'pop-logo': PopLogo;
-    }
-}
-
-/**
- * @summary A component for displaying a sum or total value.
- * @status experimental
- * @since 0.0.1
- *
- * @slot - The default slot.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --sum-background - The background color.
- * @cssproperty --sum-border-color - The border color.
- * @cssproperty --sum-color - The text color.
- */
-declare class PopSum extends PopElement {
-    static styles: CSSResultGroup;
-    /** An example attribute. */
-    id: string;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'pop-sum': PopSum;
-    }
-}
-
-/**
- * @summary Displays a countdown timer to a specified future timestamp.
- * @status experimental
- * @since 0.0.1
- *
- * @event pop-expired - Emitted when the countdown reaches zero.
- *
- * @property {string} expires - ISO8601 datetime string of when countdown expires
- *
- * @csspart base - The component's base wrapper.
- */
-declare class PopTimestampCountdown extends PopElement {
-    static styles: CSSResultGroup;
-    /**
-     * ISO8601 datetime string of when countdown expires
-     * @attr expires-at
-     */
-    expires: string;
-    /**
-     * The ISO8601 datetime string from the element content
-     */
-    get datetimeContent(): string;
-    private interval?;
-    private displayText;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Formats time in milliseconds to MM:SS format
-     */
-    private formatTime;
-    /**
-     * Get the timestamp to use, with priority for the attribute value
-     */
-    private getTargetTimestamp;
-    /**
-     * Updates the countdown on each tick
-     */
-    private tick;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'pop-timestamp-countdown': PopTimestampCountdown;
-    }
-}
-
-/**
- * @summary A toast notification component that displays brief messages to users.
- * @status experimental
- * @since 0.0.1
- *
- * @dependency pop-element
- *
- * @event pop-close - Emitted when the close button is clicked.
- *
- * @slot - The default slot for the toast content/message.
- * @slot icon - Optional slot for an icon to display before the content.
- *
- * @csspart base - The component's base wrapper.
- * @csspart close - The close button.
- */
-declare class PopToast extends PopElement {
-    static styles: CSSResultGroup;
-    /** The toast theme variant: 'default', 'transparent', or 'reversed'. */
-    theme: "transparent" | "default" | "reversed";
-    private close;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'pop-toast': PopToast;
-    }
-}
-
-declare const colors: string[];
-declare const sampleColor: () => string;
-
-export { type ButtonAlign, type ButtonSize, type ButtonTheme, type ButtonType, type ButtonVariant, type ButtonVerticalVariant, type InputType, type LoaderTheme, type LoaderVariant, PopButton, PopButtonLink, PopButtonVertical, PopCodeInputField, PopCommentAvatar, PopCommentIcon, PopElement, PopFocusIndicator, PopFormInputSimple, PopIcon, PopLoader, PopLogo, PopSum, PopTimestampCountdown, PopToast, colors, sampleColor };
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    align?: "left" | "center" | "right" | null | undefined;
+    collapsed?: boolean | null | undefined;
+    outline?: boolean | null | undefined;
+    leading?: boolean | null | undefined;
+    theme?: "base" | "brand" | "error" | null | undefined;
+    trailing?: boolean | null | undefined;
+    variant?: "default" | "outline" | "primary" | "secondary" | "tertiary" | null | undefined;
+    pill?: boolean | null | undefined;
+    size?: "default" | "lg" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+declare function Button({ className, children, collapsed, variant, size, align, outline, pill, theme, leadingElement, trailingElement, ...props }: Button$1.Props & VariantProps<typeof buttonVariants> & {
+    leadingElement?: React.ReactNode;
+    trailingElement?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { Button, buttonVariants };