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

package/dist/src/components/ui/input-otp/_input-otp.d.ts

@@ -0,0 +1,212 @@
+import { LitElement, PropertyValues } from 'lit';
+import { InputOTPProps, InputOTPAutocomplete, InputOTPInputmode } from './input-otp.defs';
+/**
+ * The `<rtg-input-otp>` component is the root input OTP container, holding the
+ * input OTP groups and separators, as well as the input element.
+ *
+ * @element rtg-input-otp
+ * @slot input-otp-container
+ * @slot input-otp-wrapper
+ * @slot input-otp
+ */
+export declare class InputOTP extends LitElement implements InputOTPProps {
+    /**
+     * Hint for form autofill feature.
+     */
+    autocomplete: InputOTPAutocomplete;
+    /**
+     * The default value of the input, used to initialise the internal `_value`
+     * state.
+     */
+    defaultValue?: string;
+    /**
+     * When `true`, prevents the user from interacting with the input OTP.
+     */
+    disabled?: boolean;
+    /**
+     * The form name that the input OTP is associated with.
+     */
+    form?: string;
+    /**
+     * A unique id for the input OTP input element.
+     */
+    id: string;
+    /**
+     * Virtual keyboard appearance on mobile.
+     */
+    inputmode: InputOTPInputmode;
+    /**
+     * The number of slots.
+     */
+    maxlength: number;
+    /**
+     * The name of the input. Submitted with its owning form as part of a
+     * name/value pair.
+     */
+    name?: string;
+    /**
+     * Used to compile a regular expression that the input OTP's value must match.
+     */
+    pattern?: string;
+    /**
+     * When `true`, indicates that the user must fill the input OTP before the
+     * owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * The controlled value of the input OTP. Should be used in conjunction with
+     * `onChange`.
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onChange?: (newValue: string) => unknown;
+    /**
+     * Callback when the input is complete.
+     */
+    onComplete?: (...args: any[]) => unknown;
+    /**
+     * The user-defined blur handler for the input OTP input.
+     */
+    onBlur?: (event: FocusEvent) => void;
+    /**
+     * The user-defined focus handler for the input OTP input.
+     */
+    onFocus?: (event: FocusEvent) => void;
+    /**
+     * The user-defined paste handler for the input OTP input.
+     */
+    onPaste?: (event: ClipboardEvent) => void;
+    /**
+     * Transfomer function that allows pasting.
+     */
+    pasteTransformer?: (pastedText: string) => string;
+    /**
+     * The index of the current active slot.
+     */
+    private _activeSlot;
+    /**
+     * Whether or not the input OTP is currently in a focus state.
+     */
+    private _hasFocus;
+    /**
+     * The uncontrolled value of the input OTP.
+     */
+    private _value;
+    /**
+     * Initial user children of the input otp.
+     */
+    private _children;
+    /**
+     * The id of the input element, determined by the provided `id` prop.
+     */
+    private _inputId?;
+    /**
+     * Initialise `_children`, capturing the user children before Lit renders.
+     */
+    constructor();
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The container/outermost slot of the input otp.
+     */
+    private get _containerSlot();
+    /**
+     * The wrapper slot of the input otp - child of container, parent of input.
+     */
+    private get _wrapperSlot();
+    /**
+     * The input OTP slot children.
+     */
+    private get _slots();
+    /**
+     * 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 input OTP: user-provided value if controlled, otherwise,
+     * the internal, uncontrolled value.
+     */
+    private get _currentValue();
+    /**
+     * The input element of the input otp - inside the wrapper slot.
+     */
+    private _inputEl;
+    /**
+     * Returns the regex expression of the `pattern` prop.
+     */
+    private _regex;
+    /**
+     * Determines the next active slot index.
+     */
+    private _clampIndex;
+    /**
+     * Determines the initial active slot, handling inputs given a default value
+     * or inputs that are prefilled.
+     */
+    private _computeInitialActiveSlot;
+    /**
+     * The 'fake' caret element to display in the input OTP slot when active and
+     * empty.
+     */
+    private _createCaret;
+    /**
+     * Syncs all the input OTP's input OTP slot children, setting their state
+     * attribute and content.
+     */
+    private _sync;
+    /**
+     * Updates the internal `_value` state (if not controlled) and invokes the
+     * user-provided `onChange` handler if provided.
+     */
+    private _updateValue;
+    /**
+     * Helper function that invokes the user-provided `onComplete` handler if the
+     * input is complete (reached `maxlength`).
+     */
+    private _checkComplete;
+    /**
+     * Helper function, handling the insertion of characters into the input.
+     */
+    private _insertChar;
+    /**
+     * Helper function, handling the deletion of characters from the input.
+     */
+    private _deleteChar;
+    /**
+     * Handles the updated callback, transferring the `id` prop's value to
+     * `_inputId` and removing it from the parent (if changed).
+     */
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Handles the first updated callback, appending the children to the container
+     * slot, transferring the `id` prop, and initialising the internal value.
+     */
+    protected firstUpdated(): void;
+    /**
+     * Handles the blur event of the input, dispatching the focus event (so it
+     * bubbles) and invoking the user-provided event handler (if provided).
+     */
+    private _handleBlur;
+    /**
+     * Handles the focus event of the input, dispatching the focus event (so it
+     * bubbles) and invoking the user-provided event handler (if provided).
+     */
+    private _handleFocus;
+    /**
+     * Handles the key down event of the input OTP input, updating internal
+     * states, handling both insertion and deletion.
+     */
+    private _handleKeyDown;
+    /**
+     * Handles the paste event of the input OTP input, invoking the user-provided
+     * `pasteTransformer` (if provided), updating the input value and handling
+     * pattern validation.
+     */
+    private _handlePaste;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/input-otp/input-otp.d.ts

@@ -0,0 +1,16 @@
+import { InputOTP } from './_input-otp';
+import { InputOTPGroup } from './_input-otp-group';
+import { InputOTPSlot } from './_input-otp-slot';
+import { InputOTPSeparator } from './_input-otp-separator';
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+/**
+ * Accessible one-time password component with copy paste functionality.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-input-otp': InputOTP;
+        'rtg-input-otp-group': InputOTPGroup;
+        'rtg-input-otp-slot': InputOTPSlot;
+        'rtg-input-otp-separator': InputOTPSeparator;
+    }
+}

package/dist/src/components/ui/input-otp/input-otp.defs.d.ts

@@ -0,0 +1,28 @@
+export type InputOTPAutocomplete = 'off' | 'on' | string;
+export type InputOTPInputmode = 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url';
+export interface InputOTPProps {
+    autocomplete: InputOTPAutocomplete;
+    defaultValue?: string;
+    disabled?: boolean;
+    form?: string;
+    id: string;
+    inputmode: InputOTPInputmode;
+    maxlength: number;
+    name?: string;
+    pattern?: string;
+    required?: boolean;
+    value?: string;
+    onChange?: (newValue: string) => unknown;
+    onComplete?: (...args: any[]) => unknown;
+    onBlur?: (event: FocusEvent) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onPaste?: (event: ClipboardEvent) => void;
+    pasteTransformer?: (pastedText: string) => string;
+}
+export declare const REGEXP_ONLY_DIGITS = "\\d+";
+export declare const REGEXP_ONLY_CHARS = "[a-zA-Z]+";
+export declare const REGEXP_ONLY_DIGITS_AND_CHARS = "[a-zA-Z0-9]+";
+export interface InputOTPSlotProps {
+    index: number;
+    invalid?: boolean;
+}

package/dist/src/components/ui/input-otp/input-otp.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 Pattern: Story;
+export declare const Separator: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;
+export declare const FourDigits: Story;
+export declare const Alphanumeric: Story;
+export declare const Form: Story;

package/dist/src/components/ui/item/_item-actions.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Container for action buttons or other interactive elements.
+ *
+ * @element rtg-item-actions
+ * @slot item-actions
+ */
+export declare class ItemActions extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item actions.
+     */
+    private get _actionsSlot();
+    /**
+     * Appends children to the item actions slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-content.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Wraps the title and description of the item.
+ *
+ * @element rtg-item-content
+ * @slot item-content
+ */
+export declare class ItemContent extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item content.
+     */
+    private get _contentSlot();
+    /**
+     * Appends children to the item content slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-description.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Displays the description of the item.
+ *
+ * @element rtg-item-description
+ * @slot item-description
+ */
+export declare class ItemDescription extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item description.
+     */
+    private get _descriptionSlot();
+    /**
+     * Appends children to the item description slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-footer.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Displays a footer below the item content.
+ *
+ * @element rtg-item-footer
+ * @slot item-footer
+ */
+export declare class ItemFooter extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item footer.
+     */
+    private get _footerSlot();
+    /**
+     * Appends children to the item footer slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-group.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * A container that groups related items together with consistent styling.
+ *
+ * @element rtg-item-group
+ * @slot item-group
+ */
+export declare class ItemGroup extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item group.
+     */
+    private get _groupSlot();
+    /**
+     * Appends children to the item group slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-header.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Displays a header above the item content.
+ *
+ * @element rtg-item-header
+ * @slot item-header
+ */
+export declare class ItemHeader extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item header.
+     */
+    private get _headerSlot();
+    /**
+     * Appends children to the item header slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-media.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { ItemMediaProps, ItemMediaVariant } from './item.defs';
+/**
+ * Use `rtg-item-media` to display media content such as icons, images, or
+ * avatars.
+ *
+ * @element rtg-item-media
+ * @slot item-media
+ */
+export declare class ItemMedia extends LitElement implements ItemMediaProps {
+    /**
+     * The media type variant of the item media.
+     */
+    variant: ItemMediaVariant;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item media.
+     */
+    private get _mediaSlot();
+    /**
+     * Appends children to the item media slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-separator.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * A separator between items in a group.
+ *
+ * @element rtg-item-separator
+ * @slot item-separator
+ */
+export declare class ItemSeparator extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item separator.
+     */
+    private get _separatorSlot();
+    /**
+     * Appends children to the item separator slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-title.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Displays the title of the item.
+ *
+ * @element rtg-item-title
+ * @slot item-title
+ */
+export declare class ItemTitle extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item title.
+     */
+    private get _titleSlot();
+    /**
+     * Appends children to the item title slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+import { ItemProps, ItemSize, ItemTarget, ItemVariant } from './item.defs';
+/**
+ * The main component for displaying content with media, title, description, and
+ * actions.
+ *
+ * @element rtg-item
+ * @slot item
+ */
+export declare class Item extends LitElement implements ItemProps {
+    /**
+     * The visual style of the item.
+     */
+    variant: ItemVariant;
+    /**
+     * The size of the item.
+     */
+    size: ItemSize;
+    /**
+     * The URL that the item link points to. When provided, an anchor tag (`<a>`)
+     * is rendered instead of a div.
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     * Optionally provided in conjunction with `href`.
+     */
+    target?: ItemTarget;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item root.
+     */
+    private get _rootSlot();
+    /**
+     * Appends children to the item root slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,29 @@
+import { Item } from './_item';
+import { ItemActions } from './_item-actions';
+import { ItemContent } from './_item-content';
+import { ItemDescription } from './_item-description';
+import { ItemFooter } from './_item-footer';
+import { ItemGroup } from './_item-group';
+import { ItemHeader } from './_item-header';
+import { ItemMedia } from './_item-media';
+import { ItemSeparator } from './_item-separator';
+import { ItemTitle } from './_item-title';
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, };
+/**
+ * A versatile component for displaying content with media, title, description,
+ * and actions.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-item-group': ItemGroup;
+        'rtg-item-separator': ItemSeparator;
+        'rtg-item': Item;
+        'rtg-item-media': ItemMedia;
+        'rtg-item-content': ItemContent;
+        'rtg-item-title': ItemTitle;
+        'rtg-item-description': ItemDescription;
+        'rtg-item-actions': ItemActions;
+        'rtg-item-header': ItemHeader;
+        'rtg-item-footer': ItemFooter;
+    }
+}

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

@@ -0,0 +1,13 @@
+export type ItemVariant = "default" | "outline" | "muted";
+export type ItemSize = "default" | "sm" | "xs";
+export type ItemTarget = '_blank' | '_parent' | '_self' | '_top' | '_unfencedTop';
+export interface ItemProps {
+    variant: ItemVariant;
+    size: ItemSize;
+    href?: string;
+    target?: ItemTarget;
+}
+export type ItemMediaVariant = "default" | "icon" | "image";
+export interface ItemMediaProps {
+    variant: ItemMediaVariant;
+}

package/dist/src/components/ui/item/item.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 Variant: Story;
+export declare const Size: Story;
+export declare const Icon: Story;
+export declare const Avatar: Story;
+export declare const Image: Story;
+export declare const Group: Story;
+export declare const Header: Story;
+export declare const Link: Story;

package/dist/src/components/ui/kbd/_kbd-group.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Use the `rtg-kbd-group` component to group `rtg-kbd` components together.
+ *
+ * @element rtg-kbd-group
+ * @slot kbd-group
+ */
+export declare class KbdGroup extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the kbd group.
+     */
+    private get _groupSlot();
+    /**
+     * Appends children to the kbd group slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/kbd/_kbd.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Use the `rtg-kbd` component to display a keyboard key.
+ *
+ * @element rtg-kbd
+ * @slot kbd
+ */
+export declare class Kbd extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the kbd root.
+     */
+    private get _rootSlot();
+    /**
+     * Appends children to the kbd root slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,12 @@
+import { Kbd } from './_kbd';
+import { KbdGroup } from './_kbd-group';
+export { Kbd, KbdGroup };
+/**
+ * Used to display textual user input from keyboard.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-kbd': Kbd;
+        'rtg-kbd-group': KbdGroup;
+    }
+}

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

@@ -0,0 +1,8 @@
+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 Group: Story;
+export declare const Button: Story;
+export declare const InputGroup: Story;

package/dist/src/components/ui/label/_label.d.ts

@@ -0,0 +1,26 @@
+import { LitElement, PropertyValues } from 'lit';
+import { LabelProps } from './label.defs';
+/**
+ * The `<rtg-label>` component renders an accessible label associated with
+ * controls.
+ *
+ * @element rtg-label
+ * @slot label
+ */
+export declare class Label extends LitElement implements LabelProps {
+    /**
+     * The id of the element the label is associated with.
+     */
+    for?: string;
+    /**
+     * The slot of the label 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-html').TemplateResult<1>;
+}