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

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

@@ -0,0 +1,21 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The `<rtg-avatar-badge>` component displays a badge indicator on the avatar,
+ * typically positioned at the bottom right.
+ *
+ * @element rtg-avatar-badge
+ * @slot avatar-badge
+ */
+export declare class AvatarBadge extends LitElement {
+    /**
+     * The slot of the avatar badge.
+     */
+    private get _badgeSlot();
+    /**
+     * Handles the first updated callback, appending the children to the badge
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,21 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The `<rtg-avatar-fallback>` component displays a fallback when the image
+ * fails to load.
+ *
+ * @element rtg-avatar-fallback
+ * @slot avatar-fallback
+ */
+export declare class AvatarFallback extends LitElement {
+    /**
+     * The slot of the avatar fallback.
+     */
+    private get _fallbackSlot();
+    /**
+     * Handles the first updated callback, appending the children to the fallback
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,21 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The `<rtg-avatar-group-count>` component displays a count indicator in an
+ * avatar group, typically showing the number of additional avatars.
+ *
+ * @element rtg-avatar-group-count
+ * @slot avatar-group-count
+ */
+export declare class AvatarGroupCount extends LitElement {
+    /**
+     * The slot of the avatar group count.
+     */
+    private get _groupCountSlot();
+    /**
+     * Handles the first updated callback, appending the children to the group
+     * count slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,21 @@
+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,28 @@
+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,65 @@
+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,20 @@
+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,13 @@
+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,43 @@
+import { LitElement } from 'lit';
+import { BadgeProps, BadgeTarget, BadgeVariant } from './badge.defs';
+/**
+ * The `rtg-badge` component displays a badge or a component that looks like a
+ * badge.
+ *
+ * @element rtg-badge
+ * @slot badge
+ */
+export declare class Badge extends LitElement implements BadgeProps {
+    /**
+     * The visual style of the badge.
+     */
+    variant: BadgeVariant;
+    /**
+     * When `true`, sets the `aria-invalid` attribute and styles the badge
+     * accordingly.
+     */
+    invalid?: boolean;
+    /**
+     * The URL that the badge link points to. When provided, an anchor tag
+     * (`<a>`) is rendered instead of a badge.
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     * Optionally provided in conjunction with `href`.
+     */
+    target?: BadgeTarget;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * The slot of the badge root.
+     */
+    private get _rootSlot();
+    /**
+     * Appends children to the badge root slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,10 @@
+import { Badge } from './_badge';
+export { Badge };
+/**
+ * Displays a badge or a component that looks like a badge.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-badge': Badge;
+    }
+}

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

@@ -0,0 +1,8 @@
+export type BadgeVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+export type BadgeTarget = '_blank' | '_parent' | '_self' | '_top' | '_unfencedTop';
+export interface BadgeProps {
+    variant: BadgeVariant;
+    invalid?: boolean;
+    href?: string;
+    target?: BadgeTarget;
+}

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

@@ -0,0 +1,10 @@
+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 Variants: Story;
+export declare const WithIcon: Story;
+export declare const WithSpinner: Story;
+export declare const Link: Story;
+export declare const CustomColors: Story;

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

@@ -0,0 +1,11 @@
+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,14 @@
+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,15 @@
+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,14 @@
+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,11 @@
+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,14 @@
+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,21 @@
+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,4 @@
+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,62 @@
+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,10 @@
+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,13 @@
+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 Spinner: 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" | "destructive" | "secondary" | "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,24 @@
+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,4 @@
+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,21 @@
+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,20 @@
+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>;
+}