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

package/dist/src/components/ui/separator/_separator.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import { SeparatorOrientation, SeparatorProps } from './separator.defs';
+
+/**
+ * The `<rtg-separator>` component visually or semantically separates content.
+ *
+ * @element rtg-separator
+ * @slot separator
+ */
+export declare class Separator extends LitElement implements SeparatorProps {
+    /**
+     * The orientation of the separator.
+     */
+    orientation: SeparatorOrientation;
+    /**
+     * When `true`, signifies that it is purely visual, carries no semantic
+     * meaning, and ensures it is not present in the accessibility tree.
+     */
+    decorative?: boolean;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,11 @@
+import { Separator } from './_separator';
+
+export { Separator };
+/**
+ * Visually or semantically separates content.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-separator': Separator;
+    }
+}

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

@@ -0,0 +1,5 @@
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export interface SeparatorProps {
+    orientation: SeparatorOrientation;
+    decorative?: boolean;
+}

package/dist/src/components/ui/separator/separator.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 Horizontal: Story;
+export declare const Vertical: Story;
+export declare const Menu: Story;
+export declare const List: Story;

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

@@ -0,0 +1,11 @@
+import { BaseElement } from '../../../helpers';
+
+export declare class RtgSkeleton extends BaseElement {
+    protected createRenderRoot(): this;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-skeleton': RtgSkeleton;
+    }
+}

package/dist/src/components/ui/skeleton/skeleton.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 BasicSkeleton: StoryFn;

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

@@ -0,0 +1 @@
+export declare const skeletonStyles = "rtg-bg-skeleton-color-bg rtg-animate-skeleton-animate rtg-rounded-skeleton-radius";

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

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+
+export declare class Switch extends LitElement {
+    disabled: 'true' | 'false';
+    state: 'checked' | 'unchecked';
+    private _toggleChecked;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-switch': Switch;
+    }
+}

package/dist/src/components/ui/switch/switch.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 Switch: StoryFn;

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

@@ -0,0 +1,4 @@
+export declare const switchStyles: {
+    root: string[];
+    thumb: string[];
+};

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

@@ -0,0 +1,4 @@
+export type SwitchArgs = {
+    disabled: boolean;
+    checked: boolean;
+};

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

@@ -0,0 +1,18 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+
+export declare class Table extends BaseElement {
+    dataTable: Array<any>;
+    footerData: Array<{
+        key: string;
+        value: string | number;
+    }>;
+    captionText: string;
+    get _containerElement(): HTMLTableElement | null;
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private get columnKeys();
+    private capitalizeLabel;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/table/table.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 Table: StoryFn;

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

@@ -0,0 +1,39 @@
+export declare const tableStyles: {
+    preview: string[];
+    container: string[];
+    table: string[];
+    caption: string[];
+    head: {
+        root: string[];
+        row: string[];
+        cell: {
+            base: string[];
+            align: {
+                left: string;
+                right: string;
+            };
+        };
+    };
+    body: {
+        root: string[];
+        row: string[];
+        cell: {
+            base: string[];
+            align: {
+                right: string;
+                left: string;
+            };
+        };
+    };
+    footer: {
+        root: string[];
+        row: string[];
+        cell: {
+            base: string[];
+            align: {
+                right: string;
+                left: string;
+            };
+        };
+    };
+};

package/dist/src/components/ui/tabs/_tabs-content.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TabsContentProps } from './tabs.defs';
+
+/**
+ * The `<rtg-tabs-content>` component contains the content associated with each
+ * trigger.
+ *
+ * @element rtg-tabs-content
+ * @slot tabs-content
+ */
+export declare class TabsContent extends LitElement implements TabsContentProps {
+    /**
+     * A unique value that associates the content with a trigger.
+     */
+    value: string;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the tabs content.
+     */
+    get _contentSlot(): HTMLElement | null;
+    /**
+     * Handles the first updated callback, appending the children to the content
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/tabs/_tabs-list.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TabsListProps, TabsListVariant } from './tabs.defs';
+
+/**
+ * The `<rtg-tabs-list>` component contains the triggers that are aligned along
+ * the edge of the active content.
+ *
+ * @element rtg-tabs-list
+ * @slot tabs-list
+ */
+export declare class TabsList extends LitElement implements TabsListProps {
+    /**
+     * The visual style of the tabs list.
+     */
+    variant: TabsListVariant;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the tabs list.
+     */
+    get _listSlot(): HTMLElement | null;
+    /**
+     * Handles the first updated callback, appending the children to the list
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/tabs/_tabs-trigger.d.ts

@@ -0,0 +1,47 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TabsTriggerProps } from './tabs.defs';
+
+/**
+ * The `<rtg-tabs-trigger>` component is the button that activates its
+ * associated content.
+ *
+ * @element rtg-tabs-trigger
+ * @slot tabs-trigger
+ */
+export declare class TabsTrigger extends LitElement implements TabsTriggerProps {
+    /**
+     * A unique value that associates the trigger with a content.
+     */
+    value: string;
+    /**
+     * When `true`, prevents the user from interacting with the tab.
+     */
+    disabled?: boolean;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the tabs trigger.
+     */
+    get _triggerSlot(): HTMLButtonElement | null;
+    /**
+     * Handles the first updated callback, appending the children to the trigger
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    /**
+     * Sends the trigger select event object, invoking the parent tabs' event
+     * listener.
+     */
+    private _emitSelect;
+    /**
+     * Handles the click event of the trigger button, invoking `_emitSelect`.
+     */
+    private _onClick;
+    /**
+     * Handles the keydown event of the trigger button, invoking `_emitSelect`.
+     */
+    private _onKeyDown;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/tabs/_tabs.d.ts

@@ -0,0 +1,99 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TabsProps, TabsOrientation, TabsDir, TabsActivationMode } from './tabs.defs';
+
+/**
+ * The `<rtg-tabs>` component is the 'root' and contains all the tabs component
+ * parts.
+ *
+ * @element rtg-tabs
+ * @slot tabs
+ */
+export declare class Tabs extends LitElement implements TabsProps {
+    /**
+     * The value of the tab that should be active when initially rendered. Use
+     * when you do not need to control the state of the tabs.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the tab to activate. Should be used in conjunction
+     * with `onValueChange`.
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * The orientation of the tabs.
+     */
+    orientation: TabsOrientation;
+    /**
+     * The reading direction of the tabs.
+     */
+    dir: TabsDir;
+    /**
+     * When `automatic`, tabs are activated when receiving focus. When `manual`,
+     * tabs are activated when clicked.
+     */
+    activationMode: TabsActivationMode;
+    /**
+     * The active tab's value - the value props of the trigger/content pair.
+     */
+    private _activeValue?;
+    /**
+     * The tabs root's base ID, generated by `generatedId`, and used to construct
+     * the trigger and contents children's ids.
+     */
+    private _baseId;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the tabs root.
+     */
+    private get _rootSlot();
+    /**
+     * The tabs list child.
+     */
+    private get _list();
+    /**
+     * The tabs trigger children.
+     */
+    private get _triggers();
+    /**
+     * The tabs content children.
+     */
+    private get _contents();
+    /**
+     * Whether or not the tabs element is 'controlled' - determined by whether or
+     * not the value prop was provided by the user.
+     */
+    private get _isControlled();
+    /**
+     * The value of the active tab: user-provided value if controlled, otherwise,
+     * the internal state value.
+     */
+    private get _currentValue();
+    /**
+     * The event listener callback used for the trigger select event.
+     */
+    private _onTriggerSelect;
+    /**
+     * Sync all the tabs children (list, triggers, and contents), setting their
+     * 'parent-controlled' attributes.
+     */
+    private _sync;
+    /**
+     * Handles the first updated callback, appending the children to the root
+     * slot, determining the active tab, adding the trigger select event listener
+     * and syncing the tabs children.
+     */
+    protected firstUpdated(): void;
+    /**
+     * Handles the updated callback, updating the active tab if changed (and
+     * controlled), and syncing the tabs children.
+     */
+    protected updated(changed: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,18 @@
+import { Tabs } from './_tabs';
+import { TabsList } from './_tabs-list';
+import { TabsTrigger } from './_tabs-trigger';
+import { TabsContent } from './_tabs-content';
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+/**
+ * A set of layered sections of content—known as tab panels—that are displayed
+ * one at a time.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-tabs': Tabs;
+        'rtg-tabs-list': TabsList;
+        'rtg-tabs-trigger': TabsTrigger;
+        'rtg-tabs-content': TabsContent;
+    }
+}

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

@@ -0,0 +1,22 @@
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsDir = 'ltr' | 'rtl';
+export type TabsActivationMode = 'automatic' | 'manual';
+export interface TabsProps {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    orientation: TabsOrientation;
+    dir: TabsDir;
+    activationMode: TabsActivationMode;
+}
+export type TabsListVariant = 'default' | 'line';
+export interface TabsListProps {
+    variant: TabsListVariant;
+}
+export interface TabsTriggerProps {
+    value: string;
+    disabled?: boolean;
+}
+export interface TabsContentProps {
+    value: string;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Generates a unique ID for Tabs to use as its baseId value.
+ * The ID is prefixed with 'rtg-', and consists of a time component as well as a
+ * random component.
+ *
+ * @returns A unique, ~13 char ID for a Tabs baseId value.
+ */
+export declare function generateId(): string;
+/**
+ * Constructs a unique ID for a TabsTrigger slot element.
+ *
+ * @param baseId The ID of the TabsTrigger's Tabs parent.
+ * @param value The value of the TabsTrigger.
+ * @returns The ID of the TabsTrigger's slot.
+ */
+export declare function makeTriggerId(baseId: string, value: string): string;
+/**
+ * Constructs a unique ID for a TabsContent slot element.
+ *
+ * @param baseId The ID of the TabsContent's Tabs parent.
+ * @param value The value of the TabsContent.
+ * @returns The ID of the TabsContent's slot.
+ */
+export declare function makeContentId(baseId: string, value: string): string;

package/dist/src/components/ui/tabs/tabs.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 Line: Story;
+export declare const Vertical: Story;
+export declare const Disabled: Story;
+export declare const Icons: Story;
+export declare const IconOnly: Story;
+export declare const WithContent: Story;

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

@@ -0,0 +1,22 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+
+export declare class TextArea extends BaseElement {
+    constructor();
+    disabled: boolean;
+    placeholder: string;
+    defaultValue: string;
+    rows: number;
+    cols: number;
+    value: string;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    handleInputChange(event: Event): void;
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-textarea': TextArea;
+    }
+}

package/dist/src/components/ui/textarea/textarea.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 TextArea: StoryFn;

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

@@ -0,0 +1 @@
+export declare const textAreaStyles: string[];

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

@@ -0,0 +1,11 @@
+export type TextAreaArgs = {
+    disabled: boolean;
+    disabledButton: boolean;
+    placeholder: string;
+    label: string;
+    defaultValue: string;
+    ButtonLabel: string;
+    id: string;
+    rows: string;
+    cols: string;
+};

package/dist/src/components/ui/toast/toast-action.d.ts

@@ -0,0 +1,27 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+
+import * as toastType from './toast.type';
+export declare class ToastAction extends BaseElement {
+    static toastVariants: {
+        base: string[];
+        variants: {
+            default: string[];
+            destructive: string[];
+        };
+    };
+    get _containerElement(): HTMLButtonElement | null;
+    variant: toastType.ToastVariant;
+    getAttributesToExclude(): string[];
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected getFilteredAttributes(): {
+        [key: string]: string;
+    };
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-toast-action': ToastAction;
+    }
+}

package/dist/src/components/ui/toast/toast-description.d.ts

@@ -0,0 +1,14 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+
+export declare class ToastDescription extends BaseElement {
+    get _containerElement(): HTMLDivElement | null;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-toast-description': ToastDescription;
+    }
+}

package/dist/src/components/ui/toast/toast-title.d.ts

@@ -0,0 +1,14 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+
+export declare class ToastTitle extends BaseElement {
+    get _containerElement(): HTMLDivElement | null;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-toast-title': ToastTitle;
+    }
+}

package/dist/src/components/ui/toast/toast-trigger.d.ts

@@ -0,0 +1,18 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+import { Toast } from './toast';
+
+export declare class ToastTrigger extends BaseElement {
+    constructor();
+    get _containerElement(): HTMLDivElement | null;
+    get _toast(): Toast;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    handleClick(e: Event): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-toast-trigger': ToastTrigger;
+    }
+}

package/dist/src/components/ui/toast/toast-view-port.d.ts

@@ -0,0 +1,24 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+
+import * as toastType from './toast.type';
+export declare class ToastViewPort extends BaseElement {
+    static toastVariants: {
+        base: string[];
+        variants: {
+            default: string[];
+            destructive: string[];
+        };
+    };
+    get _containerElement(): HTMLLIElement | null;
+    variant: toastType.ToastVariant;
+    state: string;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-toast-view-port': ToastViewPort;
+    }
+}

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

@@ -0,0 +1,25 @@
+import { PropertyValues } from 'lit';
+import { ToastViewPort } from './toast-view-port';
+import { BaseElement } from '../../../helpers';
+import { ToastAction } from './toast-action';
+import { ToastDescription } from './toast-description';
+import { ToastTitle } from './toast-title';
+import { ToastTrigger } from './toast-trigger';
+
+declare class Toast extends BaseElement {
+    isOpen: boolean;
+    get _containerElement(): HTMLDivElement | null;
+    onClick(): void;
+    connectedCallback(): void;
+    private get _content();
+    protected updated(_changedProperties: PropertyValues): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export { Toast, ToastAction, ToastDescription, ToastTitle, ToastTrigger, ToastViewPort, };
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-toast': Toast;
+    }
+}

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

@@ -0,0 +1,10 @@
+import { Meta, StoryFn } from '@storybook/web-components-vite';
+
+declare const _default: Meta;
+export default _default;
+/** ===== Toast With Action Variants ===== **/
+export declare const ToastWithActionDefault: StoryFn;
+export declare const ToastWithActionDestructive: StoryFn;
+/** ===== Toast Without Action Variants ===== **/
+export declare const ToastWithoutActionDefault: StoryFn;
+export declare const ToastWithoutActionDestructive: StoryFn;