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

package/dist/src/components/ui/form/rtg-form-field.d.ts

@@ -0,0 +1,20 @@
+import { BaseElement } from '../../../helpers';
+
+export declare class RtgFormField extends BaseElement {
+    private form;
+    name: string;
+    validators: ((value: any) => string | null)[];
+    defaultValue: any;
+    fieldName: string;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    get _container(): HTMLDivElement | null;
+    private registered;
+    protected updated(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-form-field': RtgFormField;
+    }
+}

package/dist/src/components/ui/form/rtg-form-item.d.ts

@@ -0,0 +1,17 @@
+import { BaseElement } from '../../../helpers';
+
+export declare class RtgFormItem extends BaseElement {
+    private _generatedId;
+    itemContext: {
+        id: `${string}-${string}-${string}-${string}-${string}`;
+    };
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    get _container(): HTMLDivElement | null;
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-form-item': RtgFormItem;
+    }
+}

package/dist/src/components/ui/form/rtg-form-label.d.ts

@@ -0,0 +1,20 @@
+import { BaseElement } from '../../../helpers';
+import { RtgFormField } from './rtg-form-field';
+
+export declare class RtgFormLabel extends BaseElement {
+    private form;
+    private hasError;
+    private unsubscribe;
+    get _field(): RtgFormField;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    get _label(): HTMLLabelElement | null;
+    protected firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-form-label': RtgFormLabel;
+    }
+}

package/dist/src/components/ui/form/rtg-form-message.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import { RtgFormField } from './rtg-form-field';
+
+export declare class RtgFormMessage extends LitElement {
+    private form;
+    private error;
+    get _field(): RtgFormField;
+    private unsubscribe;
+    protected createRenderRoot(): this;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-form-message': RtgFormMessage;
+    }
+}

package/dist/src/components/ui/form/rtg-form.d.ts

@@ -0,0 +1,24 @@
+import { FormController } from './form-controller';
+import { BaseElement } from '../../../helpers';
+import { RtgFormController } from './rtg-form-controller';
+import { RtgFormDescription } from './rtg-form-description';
+import { RtgFormField } from './rtg-form-field';
+import { RtgFormItem } from './rtg-form-item';
+import { RtgFormLabel } from './rtg-form-label';
+import { RtgFormMessage } from './rtg-form-message';
+
+declare class RtgForm extends BaseElement {
+    form: FormController;
+    onSubmit: (values: any) => void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    get _formElement(): HTMLFormElement | null;
+    protected firstUpdated(): void;
+    private handleSubmit;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export { RtgForm, RtgFormController, RtgFormDescription, RtgFormField, RtgFormItem, RtgFormLabel, RtgFormMessage, };
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-form': RtgForm;
+    }
+}

package/dist/src/components/ui/hoverCard/hover-card-content.d.ts

@@ -0,0 +1,16 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+
+export declare class HoverContent extends BaseElement {
+    state: 'open' | 'closed';
+    private isOpen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onStateChange;
+    private handlePointerLeaveCheck;
+    updated(changedProps: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected getAttributesToExclude(): string[];
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/hoverCard/hover-card-trigger.d.ts

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

package/dist/src/components/ui/hoverCard/hover-card.d.ts

@@ -0,0 +1,29 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+import { HoverContent } from './hover-card-content';
+import { HoverCardTrigger } from './hover-card-trigger';
+
+declare class HoverCard extends BaseElement {
+    isOpen: boolean;
+    private hoverTimeout;
+    private get _containerElement();
+    private get _content();
+    private get _trigger();
+    protected getAttributesToExclude(): string[];
+    protected updated(_changedProperties: PropertyValues): void;
+    private openCard;
+    private closeCard;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export { HoverCard, HoverCardTrigger, HoverContent };
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-hover-card': HoverCard;
+        'rtg-hover-card-trigger': HoverCardTrigger;
+        'rtg-hover-card-content': HoverContent;
+    }
+}

package/dist/src/components/ui/hoverCard/hover-card.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 HoverCard: StoryFn;

package/dist/src/components/ui/hoverCard/hover-card.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const hoverCardStyles: {
+    root: string[];
+    trigger: string[];
+    content: string[];
+};

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

@@ -0,0 +1,42 @@
+export * from './input/input';
+export * from './label/label';
+export * from './checkbox/checkbox';
+export * from './avatar/avatar';
+export * from './aspect-ratio/aspect-ratio';
+export * from './badge/badge';
+export * from './alert/alert';
+export * from './calendar/calendar';
+export * from './date-picker/date-picker';
+export * from './accordion/accordion';
+export * from './progress/progress';
+export * from './button/button';
+export * from './card/card';
+export * from './carousel/carousel';
+export * from './combobox/combo-box';
+export * from './separator/separator';
+export * from './hoverCard/hover-card';
+export * from './command/command';
+export * from './context-menu/context-menu';
+export * from './collapsible/collapsible';
+export * from './dialog/dialog';
+export * from './switch/switch';
+export * from './popover/popover';
+export * from './dropdown-menu/dropdown-menu';
+export * from './textarea/textarea';
+export * from './radio-group/radio-group';
+export * from './pagination/pagination';
+export * from './drawer/drawer';
+export * from './select/select';
+export * from './toast/toast';
+export * from './tabs/tabs';
+export * from './toggle/toggle';
+export * from './toggle-group/toggle-group';
+export * from './input-otp/input-otp';
+export * from './breadcrumb/breadcrumb';
+export * from './navigation-menu/navigation-menu';
+export * from './menubar/menubar';
+export * from './table/table';
+export * from './form/rtg-form';
+export * from './skeleton/skeleton';
+export * from './scroll-area/scroll-area';
+export * from './field/field';

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

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

@@ -0,0 +1,12 @@
+import { Input } from './_input';
+
+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': 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

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