@revotech-group/revotech-ui-kit 0.2.3 → 0.2.4

package/dist/src/components/ui/avatar/_avatar-group.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The `<rtg-avatar-group>` component displays a group of avatars with
+ * overlapping styling.
+ *
+ * @element rtg-avatar-group
+ * @slot avatar-group
+ */
+export declare class AvatarGroup extends LitElement {
+    /**
+     * The slot of the avatar group.
+     */
+    private get _groupSlot();
+    /**
+     * Handles the first updated callback, appending the children to the group
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/avatar/_avatar-image.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+import { AvatarImageProps } from './avatar.defs';
+
+/**
+ * The `<rtg-avatar-image>` component displays the avatar image.
+ *
+ * @element rtg-avatar-image
+ * @slot avatar-image
+ */
+export declare class AvatarImage extends LitElement implements AvatarImageProps {
+    /**
+     * The source of the avatar image.
+     */
+    src?: string;
+    /**
+     * The alt text of the avatar image.
+     */
+    alt?: string;
+    /**
+     * Handles the image load event.
+     */
+    private _onLoad;
+    /**
+     * Handles the image error event.
+     */
+    private _onError;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/avatar/_avatar.d.ts

@@ -0,0 +1,66 @@
+import { LitElement, PropertyValues } from 'lit';
+import { AvatarSize, AvatarProps } from './avatar.defs';
+
+/**
+ * The `<rtg-avatar>` component is the root component that wraps the avatar
+ * image and fallback.
+ *
+ * @element rtg-avatar
+ * @slot avatar
+ */
+export declare class Avatar extends LitElement implements AvatarProps {
+    /**
+     * The size of the avatar.
+     */
+    size: AvatarSize;
+    /**
+     * Whether the image has loaded.
+     */
+    private _imageLoaded;
+    /**
+     * Whether the image has errored.
+     */
+    private _imageError;
+    /**
+     * The slot of the avatar root.
+     */
+    private get _rootSlot();
+    /**
+     * The avatar image child.
+     */
+    private get _avatarImageChild();
+    /**
+     * The avatar fallback child.
+     */
+    private get _avatarFallbackChild();
+    /**
+     * Shows or hides the avatar image and avatar fallback children based on the
+     * image error and loaded state.
+     */
+    private _syncChildren;
+    /**
+     * Handles the image load event.
+     */
+    private _onImageLoad;
+    /**
+     * Handles the image error event.
+     */
+    private _onImageError;
+    /**
+     * Handles the connected callback, adding the image load and image error event
+     * listeners.
+     */
+    connectedCallback(): void;
+    /**
+     * Handles the disconnected callback, removing the image load and image error
+     * event listeners.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Handles the first updated callback, appending the children to the root
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/avatar/avatar.d.ts

@@ -0,0 +1,21 @@
+import { Avatar } from './_avatar';
+import { AvatarImage } from './_avatar-image';
+import { AvatarFallback } from './_avatar-fallback';
+import { AvatarBadge } from './_avatar-badge';
+import { AvatarGroup } from './_avatar-group';
+import { AvatarGroupCount } from './_avatar-group-count';
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount, };
+/**
+ * An image element with a fallback for representing the user.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-avatar': Avatar;
+        'rtg-avatar-image': AvatarImage;
+        'rtg-avatar-fallback': AvatarFallback;
+        'rtg-avatar-badge': AvatarBadge;
+        'rtg-avatar-group': AvatarGroup;
+        'rtg-avatar-group-count': AvatarGroupCount;
+    }
+}

package/dist/src/components/ui/avatar/avatar.defs.d.ts

@@ -0,0 +1,8 @@
+export type AvatarSize = 'default' | 'sm' | 'lg';
+export interface AvatarProps {
+    size: AvatarSize;
+}
+export interface AvatarImageProps {
+    src?: string;
+    alt?: string;
+}

package/dist/src/components/ui/avatar/avatar.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Demo: Story;
+export declare const Basic: Story;
+export declare const Fallback: Story;
+export declare const Sizes: Story;
+export declare const Badge: Story;
+export declare const BadgeWithIcon: Story;
+export declare const AvatarGroup: Story;
+export declare const AvatarGroupCount: Story;
+export declare const AvatarGroupWithIcon: Story;

package/dist/src/components/ui/badge/badge.d.ts

@@ -0,0 +1,20 @@
+import { BaseElement } from '../../../helpers';
+
+import * as badgeType from './badge.type';
+export declare class Badge extends BaseElement {
+    static badgeVariants: (props?: ({
+        variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    variant: badgeType.BadgeVariant;
+    id: string;
+    protected getAttributesToExclude(): string[];
+    private _children;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-badge': Badge;
+    }
+}

package/dist/src/components/ui/badge/badge.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Badge: Story;
+export declare const BadgeWithLink: Story;

package/dist/src/components/ui/badge/badge.style.d.ts

@@ -0,0 +1,3 @@
+export declare const badgeStyle: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/src/components/ui/badge/badge.type.d.ts

@@ -0,0 +1 @@
+export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';

package/dist/src/components/ui/breadcrumb/breadcrumb-ellipsis.d.ts

@@ -0,0 +1,12 @@
+import { BaseElement } from '../../../helpers';
+
+export declare class BreadCrumbEllipsis extends BaseElement {
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-bread-crumb-ellipsis': BreadCrumbEllipsis;
+    }
+}

package/dist/src/components/ui/breadcrumb/breadcrumb-item.d.ts

@@ -0,0 +1,15 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class BreadCrumbItem extends BaseElement {
+    get _containerElement(): HTMLLIElement | null;
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-bread-crumb-item': BreadCrumbItem;
+    }
+}

package/dist/src/components/ui/breadcrumb/breadcrumb-link.d.ts

@@ -0,0 +1,16 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class BreadCrumbLink extends BaseElement {
+    href: string;
+    get _containerElement(): HTMLAnchorElement | null;
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-bread-crumb-link': BreadCrumbLink;
+    }
+}

package/dist/src/components/ui/breadcrumb/breadcrumb-list.d.ts

@@ -0,0 +1,15 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class BreadCrumbList extends BaseElement {
+    get _containerElement(): HTMLOListElement | null;
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-bread-crumb-list': BreadCrumbList;
+    }
+}

package/dist/src/components/ui/breadcrumb/breadcrumb-separator.d.ts

@@ -0,0 +1,12 @@
+import { BaseElement } from '../../../helpers';
+
+export declare class BreadCrumbSeparator extends BaseElement {
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-bread-crumb-separator': BreadCrumbSeparator;
+    }
+}

package/dist/src/components/ui/breadcrumb/breadcrumb-text.d.ts

@@ -0,0 +1,15 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class BreadCrumbText extends BaseElement {
+    get _containerElement(): HTMLSpanElement | null;
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-bread-crumb-text': BreadCrumbText;
+    }
+}

package/dist/src/components/ui/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,22 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+import { BreadCrumbEllipsis } from './breadcrumb-ellipsis';
+import { BreadCrumbItem } from './breadcrumb-item';
+import { BreadCrumbLink } from './breadcrumb-link';
+import { BreadCrumbList } from './breadcrumb-list';
+import { BreadCrumbSeparator } from './breadcrumb-separator';
+import { BreadCrumbText } from './breadcrumb-text';
+
+declare class BreadCrumb extends BaseElement {
+    get _containerElement(): HTMLElementTagNameMap['nav'] | null;
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-bread-crumb': BreadCrumb;
+    }
+}
+export { BreadCrumb, BreadCrumbEllipsis, BreadCrumbItem, BreadCrumbLink, BreadCrumbList, BreadCrumbSeparator, BreadCrumbText, };

package/dist/src/components/ui/breadcrumb/breadcrumb.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/web-components-vite';
+
+declare const _default: Meta;
+export default _default;
+export declare const BreadCrumb: StoryFn;

package/dist/src/components/ui/breadcrumb/breadcrumb.styles.d.ts

@@ -0,0 +1,4 @@
+type TBreadcrumbPart = 'list' | 'item' | 'link' | 'page' | 'separator' | 'ellipsis';
+type TBreadcrumbStyles = Record<TBreadcrumbPart, string | string[]>;
+export declare const breadcrumbStyles: TBreadcrumbStyles;
+export {};

package/dist/src/components/ui/button/_button.d.ts

@@ -0,0 +1,63 @@
+import { LitElement, PropertyValues } from 'lit';
+import { ButtonProps, ButtonVariant, ButtonSize, ButtonType, ButtonTarget } from './button.defs';
+
+/**
+ * The `<rtg-button>` component is a wrapper around the `button` element that
+ * adds a variety of styles and functionality.
+ *
+ * @element rtg-button
+ * @slot button
+ */
+export declare class Button extends LitElement implements ButtonProps {
+    /**
+     * The visual style of the button.
+     */
+    variant: ButtonVariant;
+    /**
+     * The size of the button.
+     */
+    size: ButtonSize;
+    /**
+     * The type of the button.
+     */
+    type: ButtonType;
+    /**
+     * When `true`, prevents the user from interacting with the button.
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, sets the `aria-invalid` attribute and styles the button
+     * accordingly.
+     */
+    invalid?: boolean;
+    /**
+     * The URL that the button link points to. When provided, an anchor tag
+     * (`<a>`) is rendered instead of a button.
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     * Optionally provided in conjunction with `href`.
+     */
+    target?: ButtonTarget;
+    /**
+     * The user-defined "on click" handler for the button.
+     */
+    onClick?: (event: MouseEvent) => void;
+    /**
+     * The slot of the button root.
+     */
+    private get _rootSlot();
+    /**
+     * Handles the click event of the inner button (or link), invoking the
+     * user-defined `onClick` handler if provided.
+     */
+    private _handleClick;
+    /**
+     * Handles the first updated callback, appending the children to the root
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/button/button.d.ts

@@ -0,0 +1,11 @@
+import { Button } from './_button';
+
+export { Button };
+/**
+ * Displays a button or a component that looks like a button.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-button': Button;
+    }
+}

package/dist/src/components/ui/button/button.defs.d.ts

@@ -0,0 +1,14 @@
+export type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+export type ButtonSize = 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonTarget = '_blank' | '_parent' | '_self' | '_top' | '_unfencedTop';
+export interface ButtonProps {
+    variant: ButtonVariant;
+    size: ButtonSize;
+    type: ButtonType;
+    disabled?: boolean;
+    invalid?: boolean;
+    href?: string;
+    target?: ButtonTarget;
+    onClick?: (event: MouseEvent) => void;
+}

package/dist/src/components/ui/button/button.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Demo: Story;
+export declare const Size: Story;
+export declare const Variants: Story;
+export declare const Icon: Story;
+export declare const WithIcon: Story;
+export declare const Rounded: Story;
+export declare const Loading: Story;
+export declare const Invalid: Story;
+export declare const Link: Story;

package/dist/src/components/ui/button/button.style.d.ts

@@ -0,0 +1,4 @@
+export declare const buttonStyle: (props?: ({
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/src/components/ui/calendar/calendar.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TCalendarMode } from './calendar.helpers';
+
+export declare class Calendar extends LitElement {
+    currentDate: Date;
+    selectedStartDate: Date | null;
+    selectedEndDate: Date | null;
+    mode: TCalendarMode;
+    private _userClass;
+    private _userStyle;
+    getDaysInMonth(year: number, month: number): number;
+    previousMonth(): void;
+    nextMonth(): void;
+    selectDate(day: number, isOutside: boolean): void;
+    isDayInRange(day: Date, exclusive?: boolean): boolean;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-calendar': Calendar;
+    }
+}

package/dist/src/components/ui/calendar/calendar.helpers.d.ts

@@ -0,0 +1,3 @@
+export type TCalendarMode = 'single' | 'range';
+export declare const WEEKDAYS: string[];
+export declare function formatFullDate(date: Date): string;

package/dist/src/components/ui/calendar/calendar.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/web-components-vite';
+
+declare const _default: Meta;
+export default _default;
+export declare const Calendar: StoryFn;

package/dist/src/components/ui/calendar/calendar.style.d.ts

@@ -0,0 +1,40 @@
+export declare const calendarStyles: {
+    host: string[];
+    root: string[];
+    months: string[];
+    nav: string[];
+    month: string[];
+    buttonPrevious: string[];
+    buttonNext: string[];
+    chevron: string[];
+    monthCaption: string[];
+    captionLabel: string[];
+    monthGrid: string[];
+    weekdays: string[];
+    weekday: string[];
+    weeks: string[];
+    week: string[];
+    day: {
+        base: string[];
+        today: string[];
+        selected: {
+            common: string[];
+            single: string[];
+            range: {
+                start: string[];
+                middle: string[];
+                end: string[];
+            };
+        };
+        index: {
+            first: string[];
+            last: string[];
+        };
+        hidden: string[];
+    };
+    dayButton: {
+        base: string[];
+        outside: string[];
+        today: string[];
+    };
+};

package/dist/src/components/ui/card/_card-action.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The `<rtg-card-action>` component places content in the top-right of the
+ * header (for example, a button or a badge).
+ *
+ * @element rtg-card-action
+ * @slot card-action
+ */
+export declare class CardAction extends LitElement {
+    /**
+     * The slot of the card action.
+     */
+    private get _actionSlot();
+    /**
+     * Handles the first updated callback, appending the children to the action
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/card/_card-content.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The `<rtg-card-content>` component is used for the main card body.
+ *
+ * @element rtg-card-content
+ * @slot card-content
+ */
+export declare class CardContent extends LitElement {
+    /**
+     * The slot of the card content.
+     */
+    private get _contentSlot();
+    /**
+     * Handles the first updated callback, appending the children to the content
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/card/_card-description.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The `<rtg-card-description>` component is used for helper text under the
+ * title.
+ *
+ * @element rtg-card-description
+ * @slot card-description
+ */
+export declare class CardDescription extends LitElement {
+    /**
+     * The slot of the card description.
+     */
+    private get _descriptionSlot();
+    /**
+     * Handles the first updated callback, appending the children to the
+     * description slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/card/_card-footer.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, PropertyValues } from 'lit';
+import { CardFooterProps } from './card.defs';
+
+/**
+ * The `<rtg-card-footer>` component is used for actions and secondary content
+ * at the bottom of the card.
+ *
+ * @element rtg-card-footer
+ * @slot card-footer
+ */
+export declare class CardFooter extends LitElement implements CardFooterProps {
+    /**
+     * When `true`, the card footer is styled with a top border and padding.
+     */
+    bordered?: boolean;
+    /**
+     * The slot of the card footer.
+     */
+    private get _footerSlot();
+    /**
+     * Handles the first updated callback, appending the children to the footer
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/card/_card-header.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, PropertyValues } from 'lit';
+import { CardHeaderProps } from './card.defs';
+
+/**
+ * The `<rtg-card-header>` component is used for a title, description, and
+ * optional action.
+ *
+ * @element rtg-card-header
+ * @slot card-header
+ */
+export declare class CardHeader extends LitElement implements CardHeaderProps {
+    /**
+     * When `true`, the card header is styled with a bottom border and padding.
+     */
+    bordered?: boolean;
+    /**
+     * The slot of the card header.
+     */
+    private get _headerSlot();
+    /**
+     * Handles the first updated callback, appending the children to the header
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}