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

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

@@ -0,0 +1,16 @@
+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 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-group/_input-group-addon.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+import { InputGroupAddonAlign, InputGroupAddonProps } from './input-group.defs';
+/**
+ * Displays icons, text, buttons, or other content alongside inputs.
+ *
+ * @element rtg-input-group-addon
+ * @slot input-group-addon
+ */
+export declare class InputGroupAddon extends LitElement implements InputGroupAddonProps {
+    /**
+     * The position of the addon relative to the input.
+     */
+    align: InputGroupAddonAlign;
+    /**
+     * When `true`, a border is added to the top/bottom if the addon has the
+     * block-end/block-start alignment.
+     */
+    border?: boolean;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the input group addon.
+     */
+    private get _addonSlot();
+    /**
+     * Appends children to the input group addon slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+import { InputGroupButtonProps, InputGroupButtonSize } from './input-group.defs';
+import { ButtonType, ButtonVariant, ButtonTarget } from '../button/button.defs';
+/**
+ * Displays buttons within input groups.
+ *
+ * @element rtg-input-group-button
+ * @slot input-group-button
+ */
+export declare class InputGroupButton extends LitElement implements InputGroupButtonProps {
+    /**
+     * The visual style of the button.
+     */
+    variant: ButtonVariant;
+    /**
+     * The size of the button.
+     */
+    size: InputGroupButtonSize;
+    /**
+     * The type of the button.
+     */
+    type: ButtonType;
+    /**
+     * When `true`, prevents the user from interacting with the button.
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, sets the `aria-invalid` attribute and styles the button
+     * accordingly.
+     */
+    invalid?: boolean;
+    /**
+     * The URL that the button link points to. When provided, an anchor tag
+     * (`<a>`) is rendered instead of a button.
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     * Optionally provided in conjunction with `href`.
+     */
+    target?: ButtonTarget;
+    /**
+     * The user-defined "on click" handler for the button.
+     */
+    onClick?: (event: MouseEvent) => void;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the input group button.
+     */
+    private get _buttonSlot();
+    /**
+     * Appends children to the input group button slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,140 @@
+import { LitElement, PropertyValues } from 'lit';
+import { InputAutocomplete, InputType } from '../input/input.defs';
+import { InputGroupInputProps } from './input-group.defs';
+/**
+ * Replacement for `<rtg-input>` when building input groups. This component has
+ * the input group styles pre-applied and uses the unified data slot for focus
+ * state handling.
+ *
+ * @element rtg-input-group-input
+ * @slot input-group-input
+ */
+export declare class InputGroupInput extends LitElement implements InputGroupInputProps {
+    /**
+     * 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;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,114 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TextareaAutocomplete, TextareaWrap } from '../textarea/textarea.defs';
+import { InputGroupTextareaProps } from './input-group.defs';
+/**
+ * Replacement for `<rtg-textarea>` when building input groups. This component
+ * has the textarea group styles pre-applied and uses the unified data slot for
+ * focus state handling.
+ *
+ * @element rtg-input-group-textarea
+ * @slot input-group-textarea
+ */
+export declare class InputGroupTextarea extends LitElement implements InputGroupTextareaProps {
+    /**
+     * 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;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * The main component that wraps inputs and addons.
+ *
+ * @element rtg-input-group
+ * @slot input-group
+ */
+export declare class InputGroup extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the input group root.
+     */
+    private get _rootSlot();
+    /**
+     * Appends children to the input group root slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,20 @@
+import { InputGroup } from './_input-group';
+import { InputGroupAddon } from './_input-group-addon';
+import { InputGroupButton } from './_input-group-button';
+import { InputGroupInput } from './_input-group-input';
+import { InputGroupText } from './_input-group-text';
+import { InputGroupTextarea } from './_input-group-textarea';
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, };
+/**
+ * Add addons, buttons, and helper content to inputs.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-input-group': InputGroup;
+        'rtg-input-group-addon': InputGroupAddon;
+        'rtg-input-group-button': InputGroupButton;
+        'rtg-input-group-text': InputGroupText;
+        'rtg-input-group-input': InputGroupInput;
+        'rtg-input-group-textarea': InputGroupTextarea;
+    }
+}

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

@@ -0,0 +1,16 @@
+import { ButtonProps, ButtonSize } from '../button/button.defs';
+import { InputProps } from '../input/input.defs';
+import { TextareaProps } from '../textarea/textarea.defs';
+export type InputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+export interface InputGroupAddonProps {
+    align: InputGroupAddonAlign;
+    border?: boolean;
+}
+export type InputGroupButtonSize = Extract<ButtonSize, 'xs' | 'icon-xs' | 'sm' | 'icon-sm'>;
+export interface InputGroupButtonProps extends Omit<ButtonProps, 'size'> {
+    size: InputGroupButtonSize;
+}
+export interface InputGroupInputProps extends InputProps {
+}
+export interface InputGroupTextareaProps extends TextareaProps {
+}

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

@@ -0,0 +1,15 @@
+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 InlineStart: Story;
+export declare const InlineEnd: Story;
+export declare const BlockStart: Story;
+export declare const BlockEnd: Story;
+export declare const Icon: Story;
+export declare const Text: Story;
+export declare const Button: Story;
+export declare const Kbd: Story;
+export declare const Spinner: Story;
+export declare const Textarea: Story;

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

@@ -0,0 +1,25 @@
+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-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,15 @@
+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-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,34 @@
+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-html').TemplateResult<1>;
+}