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

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,29 @@
+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,29 @@
+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,46 @@
+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,98 @@
+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,17 @@
+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,12 @@
+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,131 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TextareaProps, TextareaAutocomplete, TextareaWrap } from './textarea.defs';
+/**
+ * Displays a form textarea or a component that looks like a textarea.
+ *
+ * @element rtg-textarea
+ * @slot textarea
+ */
+export declare class Textarea extends LitElement implements TextareaProps {
+    /**
+     * Controls whether entered text can be automatically completed by the
+     * browser.
+     */
+    autocomplete?: TextareaAutocomplete;
+    /**
+     * The visible width of the text control, in average character widths.
+     */
+    cols?: number;
+    /**
+     * When `true`, prevents the user from interacting with the textarea.
+     */
+    disabled?: boolean;
+    /**
+     * The form name that the textarea is associated with.
+     */
+    form?: string;
+    /**
+     * A unique id for the textarea element.
+     */
+    id: string;
+    /**
+     * When `true`, sets the `aria-invalid` attribute and styles the textarea
+     * accordingly.
+     */
+    invalid?: boolean;
+    /**
+     * The maximum string length that the user can enter into the field.
+     */
+    maxlength?: number;
+    /**
+     * The minimum string length that the user can enter into the field.
+     */
+    minlength?: number;
+    /**
+     * The name of the textarea. Submitted with its owning form as part of a
+     * name/value pair.
+     */
+    name?: string;
+    /**
+     * The value of the placeholder text, providing a brief hint to the user.
+     */
+    placeholder?: string;
+    /**
+     * When `true`, indicates that the user should not be able to edit the value
+     * of the textarea.
+     */
+    readonly?: boolean;
+    /**
+     * When `true`, indicates that the user must fill the textarea before the
+     * owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * The number of visible text lines for the control.
+     */
+    rows?: number;
+    /**
+     * Indicates how the control should wrap the value for form submission.
+     */
+    wrap?: TextareaWrap;
+    /**
+     * The value of the textarea. When specified as a prop, it is the initial
+     * value.
+     */
+    value?: string;
+    /**
+     * The user-defined "on input" handler for the textarea.
+     */
+    onInput?: (event: Event) => void;
+    /**
+     * The user-defined "on change" handler for the textarea.
+     */
+    onChange?: (event: Event) => void;
+    /**
+     * The user-defined "on focus" handler for the textarea.
+     */
+    onFocus?: (event: FocusEvent) => void;
+    /**
+     * The user-defined "on blur" handler for the textarea.
+     */
+    onBlur?: (event: FocusEvent) => void;
+    /**
+     * The id of the textarea element, determined by the provided `id` prop.
+     */
+    private _textareaId?;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * Handles the updated callback, transferring the `id` prop's value to
+     * `_textareaId` and removing it from the parent (if changed).
+     */
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Handles the first updated callback, transferring the `id` prop's value to
+     * `_textareaId` and removing it from the parent.
+     */
+    protected firstUpdated(): void;
+    /**
+     * Handles the input event of the textarea, updating the stored `value` and
+     * invoking the user-provided event handler (if provided).
+     */
+    private _onInput;
+    /**
+     * Handles the change event of the textarea, updating the stored `value` and
+     * invoking the user-provided event handler (if provided).
+     */
+    private _onChange;
+    /**
+     * Handles the focus event of the textarea, dispatching the focus event (so it
+     * bubbles) and invoking the user-provided event handler (if provided).
+     */
+    private _onFocus;
+    /**
+     * Handles the blur event of the textarea, dispatching the focus event (so it
+     * bubbles) and invoking the user-provided event handler (if provided).
+     */
+    private _onBlur;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,23 @@
+export type TextareaAutocomplete = 'off' | 'on' | string;
+export type TextareaWrap = 'hard' | 'soft' | 'off';
+export interface TextareaProps {
+    autocomplete?: TextareaAutocomplete;
+    cols?: number;
+    disabled?: boolean;
+    form?: string;
+    id: string;
+    invalid?: boolean;
+    maxlength?: number;
+    minlength?: number;
+    name?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    rows?: number;
+    wrap?: TextareaWrap;
+    value?: string;
+    onInput?: (event: Event) => void;
+    onChange?: (event: Event) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+}

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

@@ -0,0 +1,9 @@
+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 Field: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;
+export declare const Button: Story;

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

@@ -0,0 +1,26 @@
+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,13 @@
+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,13 @@
+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,17 @@
+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,23 @@
+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,24 @@
+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,9 @@
+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;

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

@@ -0,0 +1,19 @@
+export declare const toastStyles: {
+    viewportRoot: string[];
+    viewportItem: {
+        base: string[];
+        variants: {
+            default: string[];
+            destructive: string[];
+        };
+    };
+    action: {
+        base: string[];
+        variants: {
+            default: string[];
+            destructive: string[];
+        };
+    };
+    title: string[];
+    description: string[];
+};

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

@@ -0,0 +1 @@
+export type ToastVariant = 'default' | 'destructive';