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

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

@@ -0,0 +1,213 @@
+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,17 @@
+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,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 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/label/_label.d.ts

@@ -0,0 +1,27 @@
+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>;
+}

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

@@ -0,0 +1,11 @@
+import { Label } from './_label';
+
+export { Label };
+/**
+ * Renders an accessible label associated with controls.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-label': Label;
+    }
+}

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

@@ -0,0 +1,3 @@
+export interface LabelProps {
+    for?: string;
+}

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

@@ -0,0 +1,11 @@
+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 WithCheckbox: Story;
+export declare const WithInput: Story;
+export declare const WithTextarea: Story;
+export declare const Disabled: Story;
+export declare const Required: Story;

package/dist/src/components/ui/menubar/menubar-checkbox.item.d.ts

@@ -0,0 +1,20 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class MenubarCheckboxItem extends BaseElement {
+    _id: string;
+    _hidden: string;
+    private static _counter;
+    private get _containerElement();
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private get identifier();
+    get value(): string;
+    selected: boolean;
+    private handleMouseEvent;
+    checked: boolean;
+    disabled: boolean;
+    toggleChecked(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/menubar/menubar-content.d.ts

@@ -0,0 +1,20 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+import { MenubarMenu } from './menubar-menu';
+
+export declare class MenubarContent extends BaseElement {
+    state: string;
+    id: string;
+    side: string;
+    isOpen: boolean;
+    get _menubarMenu(): MenubarMenu | null;
+    private get _containerElement();
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProps: PropertyValues): void;
+    handleClickOutside(event: MouseEvent): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/menubar/menubar-group.d.ts

@@ -0,0 +1,15 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class MenubarGroup extends BaseElement {
+    heading: string;
+    _id: string;
+    _hidden: string;
+    private static _counter;
+    private get _containerElement();
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private get identifier();
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,18 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class MenubarItem extends BaseElement {
+    _id: string;
+    _hidden: string;
+    disabled: boolean;
+    private static _counter;
+    private get _containerElement();
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private get identifier();
+    get value(): string;
+    selected: boolean;
+    private handleMouseEvent;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/menubar/menubar-menu.d.ts

@@ -0,0 +1,31 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class MenubarMenu extends BaseElement {
+    isOpen: boolean;
+    uniqueIds: string[];
+    selectedMenu: string;
+    isHovering: boolean;
+    id: string;
+    private closeTimeout;
+    private get _content();
+    private get _button();
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private clearCloseTimeout;
+    private toggleMenubar;
+    handleClickOutside: (e: MouseEvent) => void;
+    protected updated(_changedProperties: PropertyValues): void;
+    private _handleRadioSelected;
+    firstUpdated(): void;
+    raiseEvent(): void;
+    closeAllMenus(): void;
+    private handleMenuMouseEnter;
+    private handleMenuMouseLeave;
+    private scheduleClose;
+    private isDescendant;
+    private setupContentListeners;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/menubar/menubar-radio-item.d.ts

@@ -0,0 +1,20 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class MenubarRadioItem extends BaseElement {
+    _id: string;
+    _hidden: string;
+    private static _counter;
+    private get _containerElement();
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private get identifier();
+    get value(): string;
+    selected: boolean;
+    private handleMouseEvent;
+    checked: boolean;
+    disabled: boolean;
+    toggleChecked(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,14 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class MenubarSeparator extends BaseElement {
+    _id: string;
+    _hidden: string;
+    private static _counter;
+    get _containerElement(): HTMLDivElement | null;
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    private get identifier();
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/menubar/menubar-shortcut.d.ts

@@ -0,0 +1,10 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class MenubarShortcut extends BaseElement {
+    private get _containerElement();
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,10 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class MenubarTrigger extends BaseElement {
+    get _containerElement(): HTMLButtonElement | null;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected getAttributesToExclude(): string[];
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,34 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+import { MenubarCheckboxItem } from './menubar-checkbox.item';
+import { MenubarContent } from './menubar-content';
+import { MenubarGroup } from './menubar-group';
+import { MenubarItem } from './menubar-item';
+import { MenubarMenu } from './menubar-menu';
+import { MenubarRadioItem } from './menubar-radio-item';
+import { MenubarSeparator } from './menubar-separator';
+import { MenubarShortcut } from './menubar-shortcut';
+import { MenubarTrigger } from './menubar-trigger';
+
+declare class Menubar extends BaseElement {
+    private get _containerElement();
+    protected getAttributesToExclude(): string[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarTrigger, };
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-menubar': Menubar;
+        'rtg-menubar-menu': MenubarMenu;
+        'rtg-menubar-checkbox-item': MenubarCheckboxItem;
+        'rtg-menubar-group': MenubarGroup;
+        'rtg-menubar-content': MenubarContent;
+        'rtg-menubar-item': MenubarItem;
+        'rtg-menubar-radio-item': MenubarRadioItem;
+        'rtg-menubar-separator': MenubarSeparator;
+        'rtg-menubar-shortcut': MenubarShortcut;
+        'rtg-menubar-trigger': MenubarTrigger;
+    }
+}

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

@@ -0,0 +1,3 @@
+export declare const scissorsIcon: import('lit-html').TemplateResult<1>;
+export declare const copyIcon: import('lit-html').TemplateResult<1>;
+export declare const clipboardPasteIcon: import('lit-html').TemplateResult<1>;

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

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

@@ -0,0 +1,21 @@
+export declare const menubarStyles: {
+    root: string[];
+    menu: string[];
+    group: string[];
+    trigger: string[];
+    content: string[];
+    item: string[];
+    checkboxItem: {
+        base: string[];
+        indicator: string[];
+        icon: string[];
+    };
+    radioItem: {
+        base: string[];
+        indicator: string[];
+        icon: string[];
+    };
+    label: string[];
+    separator: string[];
+    shortcut: string[];
+};

package/dist/src/components/ui/navigation-menu/navigation-menu-content.d.ts

@@ -0,0 +1,20 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+import { NavigationMenuItem } from './navigation-menu-item';
+
+export declare class NavigationMenuContent extends BaseElement {
+    state: string;
+    id: string;
+    side: string;
+    isOpen: boolean;
+    get _menubarMenu(): NavigationMenuItem | null;
+    get _containerElement(): HTMLDivElement | null;
+    protected getAttributesToExclude(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProps: PropertyValues): void;
+    handleClickOutside(event: MouseEvent): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/navigation-menu/navigation-menu-item.d.ts

@@ -0,0 +1,24 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+
+export declare class NavigationMenuItem extends BaseElement {
+    value: string;
+    navigationLink: boolean;
+    isOpen: boolean;
+    uniqueIds: string[];
+    isHovering: boolean;
+    raiseEvent(): void;
+    firstUpdated(): void;
+    closeAllMenus(): void;
+    toggleMenubar(e: MouseEvent): void;
+    private get _content();
+    private get _button();
+    protected updated(_changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleClickOutside: (e: MouseEvent) => void;
+    handleHover(): void;
+    handleMouseLeave(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/navigation-menu/navigation-menu-link.d.ts

@@ -0,0 +1,10 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+
+export declare class NavigationMenuLink extends BaseElement {
+    get _containerElement(): HTMLAnchorElement | null;
+    href: string;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/navigation-menu/navigation-menu-list.d.ts

@@ -0,0 +1,9 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+
+export declare class NavigationMenuList extends BaseElement {
+    get _containerElement(): HTMLUListElement | null;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/navigation-menu/navigation-menu-trigger.d.ts

@@ -0,0 +1,10 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../../helpers';
+
+export declare class NavigationMenuTrigger extends BaseElement {
+    get _containerElement(): HTMLUListElement | null;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected getAttributesToExclude(): string[];
+    render(): import('lit-html').TemplateResult<1>;
+}