@revotech-group/revotech-ui-kit 0.2.1 → 0.2.2

package/dist/src/assets/icons/anchor.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function anchorIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/app-window.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function appWindowIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/arrow-right.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function arrowRightIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/arrow-up-right.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function arrowUpRightIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/arrow-up.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function arrowUpIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/asterisk.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function asteriskIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/badge-alert.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function badgeAlertIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/badge-check.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function badgeCheckIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/badge-info.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function badgeInfoIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/badge-x.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function badgeXIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/captions.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function captionsIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/check.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function checkIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/circle-alert.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function circleAlertIcon(className?: string): TemplateResult;

package/dist/src/assets/icons/circle-check.icon.d.ts

@@ -1 +1,3 @@
-export declare function circleCheckIcon(): import('lit').TemplateResult<2>;
+import { TemplateResult } from 'lit';
+
+export declare function circleCheckIcon(className?: string): TemplateResult;

package/dist/src/assets/icons/circle-fading-arrow-up.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function circleFadingArrowUpIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/code.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function codeIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/external-link.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function externalLinkIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/git-branch-minus.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function gitBranchMinusIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/git-branch-plus.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function gitBranchPlusIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/house.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function houseIcon(className?: string): TemplateResult<1>;

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

@@ -1,21 +1,48 @@
-export * from './arrows.icon';
-export * from './tick.icon';
-export * from './search.icon';
-export * from './help-circle.icon';
-export * from './circle.icon';
+export * from './anchor.icon';
+export * from './app-window.icon';
+export * from './arrow-right.icon';
 export * from './arrow-up-circle.icon';
+export * from './arrow-up-right.icon';
+export * from './arrow-up.icon';
+export * from './arrows.icon';
+export * from './asterisk.icon';
+export * from './badge-alert.icon';
+export * from './badge-check.icon';
+export * from './badge-info.icon';
+export * from './badge-x.icon';
+export * from './captions.icon';
+export * from './carousel-arrow-left';
+export * from './carousel-arrow-right';
+export * from './chart.icon';
+export * from './check.icon';
+export * from './chorven-down.icon';
+export * from './circle-alert.icon';
 export * from './circle-check.icon';
+export * from './circle-fading-arrow-up.icon';
 export * from './circle-x.icon';
-export * from './radio.icon';
-export * from './chorven-down.icon';
-export * from './radio-group.icon';
+export * from './circle.icon';
 export * from './close.icon';
-export * from './dot.icon';
-export * from './plus.icon';
+export * from './code.icon';
 export * from './decrease.icon';
-export * from './chart.icon';
-export * from './carousel-arrow-left';
-export * from './carousel-arrow-right';
-export * from './minus.icon';
+export * from './dot.icon';
+export * from './external-link.icon';
 export * from './eye-off';
 export * from './eye-on';
+export * from './git-branch-minus.icon';
+export * from './git-branch-plus.icon';
+export * from './help-circle.icon';
+export * from './house.icon';
+export * from './info.icon';
+export * from './loader-circle.icon';
+export * from './mail-warning.icon';
+export * from './minus.icon';
+export * from './plus.icon';
+export * from './rabbit.icon';
+export * from './radio-group.icon';
+export * from './radio.icon';
+export * from './refresh-cw.icon';
+export * from './search.icon';
+export * from './settings.icon';
+export * from './shopping-bag.icon';
+export * from './tick.icon';
+export * from './wand.icon';

package/dist/src/assets/icons/info.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function infoIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/loader-circle.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function loaderCircleIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/mail-warning.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function mailWarningIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/minus.icon.d.ts

@@ -1 +1,3 @@
-export declare function minusIcon(): import('lit').TemplateResult<2>;
+import { TemplateResult } from 'lit';
+
+export declare function minusIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/plus.icon.d.ts

@@ -1 +1 @@
-export declare function plusIcon(): import('lit').TemplateResult<2>;
+export declare function plusIcon(className?: string): import('lit').TemplateResult<1>;

package/dist/src/assets/icons/rabbit.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function rabbitIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/refresh-cw.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function refreshCwIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/search.icon.d.ts

@@ -1 +1,3 @@
-export declare function searchIcon(): import('lit').TemplateResult<2>;
+import { TemplateResult } from 'lit';
+
+export declare function searchIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/settings.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function settingsIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/shopping-bag.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function shoppingBagIcon(className?: string): TemplateResult<1>;

package/dist/src/assets/icons/wand.icon.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+
+export declare function wandIcon(className?: string): TemplateResult<1>;

package/dist/src/components/ui/alert/_alert-action.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The `<rtg-alert-action>` component displays an action element (like a button)
+ * positioned absolutely in the top-right corner of the alert.
+ *
+ * @element rtg-alert-action
+ * @slot alert-action
+ */
+export declare class AlertAction extends LitElement {
+    /**
+     * The slot of the alert 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').TemplateResult<1>;
+}

package/dist/src/components/ui/alert/_alert-description.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The `<rtg-alert-description>` component displays the description or content
+ * of the alert.
+ *
+ * @element rtg-alert-description
+ * @slot alert-description
+ */
+export declare class AlertDescription extends LitElement {
+    /**
+     * The slot of the alert 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').TemplateResult<1>;
+}

package/dist/src/components/ui/alert/_alert-title.d.ts

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

package/dist/src/components/ui/alert/_alert.d.ts

@@ -0,0 +1,26 @@
+import { LitElement, PropertyValues } from 'lit';
+import { AlertProps, AlertVariant } from './alert.defs';
+
+/**
+ * The `<rtg-alert>` component displays a callout for user attention.
+ *
+ * @element rtg-alert
+ * @slot alert
+ */
+export declare class Alert extends LitElement implements AlertProps {
+    /**
+     * The visual style of the alert.
+     */
+    variant: AlertVariant;
+    /**
+     * The slot of the alert root.
+     */
+    private get _rootSlot();
+    /**
+     * Handles the first updated callback, appending the children to the root
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit').TemplateResult<1>;
+}

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

@@ -1,25 +1,17 @@
-import { BaseElement } from '../../../helpers';
-import { PropertyValues } from 'lit';
-import { TAlertVariant } from './alert.types';
+import { Alert } from './_alert';
+import { AlertTitle } from './_alert-title';
+import { AlertDescription } from './_alert-description';
+import { AlertAction } from './_alert-action';
 
-declare class Alert extends BaseElement {
-    protected createRenderRoot(): this;
-    private get _containerElement();
-    title: string;
-    message: string;
-    icon: string;
-    static alertVariants: (props?: ({
-        variant?: "default" | "destructive" | "brand" | "success" | "warning" | "info" | "brand-tonal" | "destructive-tonal" | "success-tonal" | "warning-tonal" | "info-tonal" | null | undefined;
-    } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
-    variant: TAlertVariant;
-    private get alertClasses();
-    protected getAttributesToRemoveFromParent(): string[];
-    protected firstUpdated(_changedProperties: PropertyValues): void;
-    render(): import('lit').TemplateResult<1>;
-}
-export { Alert };
+export { Alert, AlertTitle, AlertDescription, AlertAction, };
+/**
+ * Displays a callout for user attention.
+ */
 declare global {
     interface HTMLElementTagNameMap {
         'rtg-alert': Alert;
+        'rtg-alert-title': AlertTitle;
+        'rtg-alert-description': AlertDescription;
+        'rtg-alert-action': AlertAction;
     }
 }

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

@@ -0,0 +1,4 @@
+export type AlertVariant = 'default' | 'brand' | 'destructive' | 'warning' | 'success' | 'info' | 'brand-tonal' | 'destructive-tonal' | 'warning-tonal' | 'success-tonal' | 'info-tonal';
+export interface AlertProps {
+    variant: AlertVariant;
+}

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

@@ -1,9 +1,13 @@
 import { Meta, StoryObj } from '@storybook/web-components-vite';
 
-declare const _default: Meta;
-export default _default;
+declare const meta: Meta;
+export default meta;
 type Story = StoryObj;
-export declare const Alert: Story;
-export declare const SuccessAlert: Story;
-export declare const DestructiveAlert: Story;
-export declare const SmallWarningAlert: Story;
+export declare const Demo: Story;
+export declare const Basic: Story;
+export declare const Icons: Story;
+export declare const Links: Story;
+export declare const Destructive: Story;
+export declare const Variants: Story;
+export declare const Action: Story;
+export declare const CustomColors: Story;

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

@@ -0,0 +1,22 @@
+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').TemplateResult<1>;
+}

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

@@ -0,0 +1,22 @@
+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').TemplateResult<1>;
+}

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

@@ -0,0 +1,22 @@
+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').TemplateResult<1>;
+}

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').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').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').TemplateResult<1>;
+}

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

@@ -1,20 +1,21 @@
-import { BaseElement } from '../../../helpers';
-import { PropertyValues } from 'lit';
-import { AvatarFallback } from './avatar-fallback';
-import { AvatarImage } from './avatar-image';
+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';
 
-declare class Avatar extends BaseElement {
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
-    spanElement: HTMLButtonElement;
-    protected getAttributesToRemoveFromParent(): string[];
-    protected firstUpdated(_changedProperties: PropertyValues): void;
-    render(): import('lit').TemplateResult<1>;
-}
-export { Avatar, AvatarFallback, AvatarImage };
+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-fallback': AvatarFallback;
         '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

@@ -1,5 +1,14 @@
-import { Meta, StoryFn } from '@storybook/web-components-vite';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
 
-declare const _default: Meta;
-export default _default;
-export declare const Avatar: StoryFn;
+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;