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

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

@@ -0,0 +1,164 @@
+import { LitElement, PropertyValues } from 'lit';
+import { InputProps, InputAutocomplete, InputType } from './input.defs';
+
+/**
+ * The `<rtg-input>` component is a text input component for forms and user data
+ * entry with built-in styling and accessibility features.
+ *
+ * @element rtg-input
+ * @slot input
+ */
+export declare class Input extends LitElement implements InputProps {
+    /**
+     * Hint for expected file type in file upload controls. Permitted for file.
+     */
+    accept?: string;
+    /**
+     * Hint for form autofill feature.
+     */
+    autocomplete?: InputAutocomplete;
+    /**
+     * When `true`, prevents the user from interacting with the input.
+     */
+    disabled?: boolean;
+    /**
+     * The form name that the input is associated with.
+     */
+    form?: string;
+    /**
+     * A unique id for the input element.
+     */
+    id: string;
+    /**
+     * When `true`, sets the `aria-invalid` attribute and styles the input
+     * accordingly.
+     */
+    invalid?: boolean;
+    /**
+     * The greatest value in the range of permitted values. Permitted for date,
+     * time, and number.
+     */
+    max?: number;
+    /**
+     * The maximum string length that the user can enter into the field. Permitted
+     * for text, search, url, tel, email, and password.
+     */
+    maxlength?: number;
+    /**
+     * The most negative value in the range of permitted values. Permitted for
+     * date, time, and number.
+     */
+    min?: number;
+    /**
+     * The minimum string length that the user can enter into the field. Permitted
+     * for text, search, url, tel, email, and password.
+     */
+    minlength?: number;
+    /**
+     * When `true`, the user can enter comma separated email addresses in the
+     * `email` input or can choose more than one file with the `file` input.
+     */
+    multiple?: boolean;
+    /**
+     * 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's value must match.
+     * Permitted for text, search, url, tel, email, and password.
+     */
+    pattern?: string;
+    /**
+     * The value of the placeholder text, providing a brief hint to the user.
+     * Permitted for text, search, url, tel, email, password, and number.
+     */
+    placeholder?: string;
+    /**
+     * When `true`, indicates that the user should not be able to edit the value
+     * of the input.
+     */
+    readonly?: boolean;
+    /**
+     * When `true`, indicates that the user must fill the input before the owning
+     * form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * A number that specifies the granularity that the value must adhere to.
+     * Permitted for date, time, and number.
+     */
+    step?: number;
+    /**
+     * The type of the input.
+     */
+    type: InputType;
+    /**
+     * The value of the input. When specified as a prop, it is the initial value.
+     */
+    value?: string;
+    /**
+     * The user-defined "on click" handler for the input.
+     */
+    onClick?: (event: MouseEvent) => void;
+    /**
+     * The user-defined "on input" handler for the input.
+     */
+    onInput?: (event: Event) => void;
+    /**
+     * The user-defined "on change" handler for the input.
+     */
+    onChange?: (event: Event) => void;
+    /**
+     * The user-defined "on focus" handler for the input.
+     */
+    onFocus?: (event: FocusEvent) => void;
+    /**
+     * The user-defined "on blur" handler for the input.
+     */
+    onBlur?: (event: FocusEvent) => void;
+    /**
+     * The id of the input element, determined by the provided `id` prop.
+     */
+    private _inputId?;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * 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, transferring the `id` prop's value to
+     * `_inputId` and removing it from the parent.
+     */
+    protected firstUpdated(): void;
+    /**
+     * Handles the click event of the input, invoking the user-provided event
+     * handler (if provided).
+     */
+    private _onClick;
+    /**
+     * Handles the input event of the input, updating the stored `value` and
+     * invoking the user-provided event handler (if provided).
+     */
+    private _onInput;
+    /**
+     * Handles the change event of the input, updating the stored `value` and
+     * invoking the user-provided event handler (if provided).
+     */
+    private _onChange;
+    /**
+     * Handles the focus event of the input, dispatching the focus event (so it
+     * bubbles) and invoking the user-provided event handler (if provided).
+     */
+    private _onFocus;
+    /**
+     * Handles the blur event of the input, dispatching the focus event (so it
+     * bubbles) and invoking the user-provided event handler (if provided).
+     */
+    private _onBlur;
+    render(): import('lit').TemplateResult<1>;
+}

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

@@ -1,34 +1,12 @@
-import { PropertyValues } from 'lit';
-import { BaseElement } from '../../../helpers';
+import { Input } from './_input';
 
-import * as inputType from './input.type';
-export declare class RtgInput extends BaseElement {
-    constructor();
-    inputElement: HTMLInputElement;
-    disabled: boolean;
-    type: inputType.InputType;
-    placeholder: string;
-    defaultValue: string;
-    value: string;
-    dataKey: string;
-    country: string;
-    countryCode: string;
-    selectedLabel: string;
-    private rawTelValue;
-    private showPassword;
-    private togglePasswordVisibility;
-    private handleCountryChange;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
-    private handleInputChange;
-    private emitValueChange;
-    handleFocus(): void;
-    protected getAttributesToExclude(): string[];
-    protected getAttributesToRemoveFromParent(): string[];
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
-    render(): import('lit').TemplateResult<1>;
-}
+export { Input };
+/**
+ * A text input component for forms and user data entry with built-in styling
+ * and accessibility features.
+ */
 declare global {
     interface HTMLElementTagNameMap {
-        'rtg-input': RtgInput;
+        'rtg-input': Input;
     }
 }

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

@@ -0,0 +1,28 @@
+export type InputAutocomplete = 'off' | 'on' | string;
+export type InputType = 'date' | 'email' | 'file' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
+export interface InputProps {
+    accept?: string;
+    autocomplete?: InputAutocomplete;
+    disabled?: boolean;
+    form?: string;
+    id: string;
+    invalid?: boolean;
+    max?: number;
+    maxlength?: number;
+    min?: number;
+    minlength?: number;
+    multiple?: boolean;
+    name?: string;
+    pattern?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    step?: number;
+    type: InputType;
+    value?: string;
+    onClick?: (event: MouseEvent) => void;
+    onInput?: (event: Event) => void;
+    onChange?: (event: Event) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+}

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

@@ -1,7 +1,17 @@
-import { Meta, StoryFn } from '@storybook/web-components-vite';
-import { InputArgs } from './input.type';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
 
-declare const _default: Meta;
-export default _default;
-export declare const Input: StoryFn<InputArgs>;
-export declare const SpecificInput: StoryFn;
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Demo: Story;
+export declare const Basic: Story;
+export declare const Field: Story;
+export declare const FieldGroup: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;
+export declare const File: Story;
+export declare const Inline: Story;
+export declare const Grid: Story;
+export declare const Required: Story;
+export declare const Badge: Story;
+export declare const Form: Story;

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

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+
+/**
+ * The `<rtg-input-otp-group>` component is a container for input OTP slots. An
+ * input OTP may have a single group holding all the slots, or multiple groups,
+ * each holding a subset of the slots.
+ *
+ * @element rtg-input-otp-group
+ * @slot input-otp-group
+ */
+export declare class InputOTPGroup extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the input otp group.
+     */
+    private get _groupSlot();
+    /**
+     * Handles the first updated callback, appending the children to the group
+     * slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit').TemplateResult<1>;
+}

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

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+
+/**
+ * The `<rtg-input-otp-separator>` component is a separator used between input
+ * OTP groups.
+ *
+ * @element rtg-input-otp-separator
+ * @slot input-otp-separator
+ */
+export declare class InputOTPSeparator extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    render(): import('lit').TemplateResult<1>;
+}

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

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import { InputOTPSlotProps } from './input-otp.defs';
+
+/**
+ * The `<rtg-input-otp-slot>` component is a decorative container of the
+ * character at a certain index of the input's value.
+ *
+ * @element rtg-input-otp-slot
+ * @slot input-otp-slot
+ */
+export declare class InputOTPSlot extends LitElement implements InputOTPSlotProps {
+    /**
+     * The index of the character being displayed in the slot.
+     */
+    index: number;
+    /**
+     * When `true`, sets the `aria-invalid` attribute and styles the input OTP
+     * slot accordingly.
+     */
+    invalid?: boolean;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the input otp slot.
+     */
+    get _slotSlot(): HTMLElement | null;
+    /**
+     * Handles the click event of the input OTP slot, invoking the parent input
+     * OTP's event listener.
+     */
+    private _handleClick;
+    render(): import('lit').TemplateResult<1>;
+}

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

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

@@ -1,33 +1,17 @@
-import { BaseElement } from '../../../helpers';
-import { PropertyValues } from 'lit';
-import { InputOtpGroup } from './input-otp-group';
-import { InputOtpSeparator } from './input-otp-separator';
-import { InputOtpSlot } from './input-otp-slot';
+import { InputOTP } from './_input-otp';
+import { InputOTPGroup } from './_input-otp-group';
+import { InputOTPSlot } from './_input-otp-slot';
+import { InputOTPSeparator } from './_input-otp-separator';
 
-declare class InputOtp extends BaseElement {
-    constructor();
-    connectedCallback(): void;
-    protected getAttributesToExclude(): string[];
-    get _containerElement(): HTMLDivElement | null;
-    maxLength: number;
-    onChange: () => void;
-    pin: any[];
-    variant: 'digits_only' | 'with_spacing' | 'simple' | 'with_separator';
-    inputes: {
-        value: string;
-        index: number;
-        isSelected: boolean;
-        userIndex: number;
-    }[];
-    raiseEvent(index: number, eventType?: 'changes' | 'focus', customIndex?: number): void;
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
-    checkIfCompleteAndSubmit(): void;
-    protected render(): import('lit').TemplateResult<1>;
-}
-export { InputOtp, InputOtpGroup, InputOtpSeparator, InputOtpSlot };
+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': 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

@@ -1,10 +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 DigitsOnly: Story;
-export declare const WithSpacing: Story;
-export declare const Simple: Story;
-export declare const WithSeparator: Story;
-export declare const InteractiveDemo: Story;
+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').TemplateResult<1>;
+}