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

package/dist/src/components/ui/button/_button.d.ts

@@ -0,0 +1,63 @@
+import { LitElement, PropertyValues } from 'lit';
+import { ButtonProps, ButtonVariant, ButtonSize, ButtonType, ButtonTarget } from './button.defs';
+
+/**
+ * The `<rtg-button>` component is a wrapper around the `button` element that
+ * adds a variety of styles and functionality.
+ *
+ * @element rtg-button
+ * @slot button
+ */
+export declare class Button extends LitElement implements ButtonProps {
+    /**
+     * The visual style of the button.
+     */
+    variant: ButtonVariant;
+    /**
+     * The size of the button.
+     */
+    size: ButtonSize;
+    /**
+     * 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;
+    /**
+     * The slot of the button root.
+     */
+    private get _rootSlot();
+    /**
+     * Handles the click event of the inner button (or link), invoking the
+     * user-defined `onClick` handler if provided.
+     */
+    private _handleClick;
+    /**
+     * 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>;
+}

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

@@ -1,22 +1,11 @@
-import { PropertyValues } from 'lit';
-import { BaseElement } from '../../../helpers';
+import { Button } from './_button';
 
-import * as buttonType from './button.type';
-export declare class Button extends BaseElement {
-    static buttonVariants: (props?: ({
-        variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-        size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
-    } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
-    click: () => void;
-    disabled: boolean;
-    type: buttonType.ButtonType;
-    variant: buttonType.ButtonVariant;
-    size: buttonType.ButtonSize;
-    buttonElement: HTMLButtonElement;
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
-    protected getAttributesToExclude(): string[];
-    protected getAttributesToRemoveFromParent(): string[];
-    protected firstUpdated(): void;
-    protected updated(_changedProperties: PropertyValues): void;
-    render(): import('lit').TemplateResult<1>;
+export { Button };
+/**
+ * Displays a button or a component that looks like a button.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-button': Button;
+    }
 }

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

@@ -0,0 +1,14 @@
+export type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+export type ButtonSize = 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonTarget = '_blank' | '_parent' | '_self' | '_top' | '_unfencedTop';
+export interface ButtonProps {
+    variant: ButtonVariant;
+    size: ButtonSize;
+    type: ButtonType;
+    disabled?: boolean;
+    invalid?: boolean;
+    href?: string;
+    target?: ButtonTarget;
+    onClick?: (event: MouseEvent) => void;
+}

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

@@ -3,4 +3,12 @@ import { Meta, StoryObj } from '@storybook/web-components-vite';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
-export declare const Buttons: Story;
+export declare const Demo: Story;
+export declare const Size: Story;
+export declare const Variants: Story;
+export declare const Icon: Story;
+export declare const WithIcon: Story;
+export declare const Rounded: Story;
+export declare const Loading: Story;
+export declare const Invalid: Story;
+export declare const Link: Story;

package/dist/src/components/ui/button/button.style.d.ts

@@ -1,4 +1,4 @@
 export declare const buttonStyle: (props?: ({
     variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-    size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;

package/dist/src/components/ui/card/_card-action.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The `<rtg-card-action>` component places content in the top-right of the
+ * header (for example, a button or a badge).
+ *
+ * @element rtg-card-action
+ * @slot card-action
+ */
+export declare class CardAction extends LitElement {
+    /**
+     * The slot of the card action.
+     */
+    private get _actionSlot();
+    /**
+     * Handles the first updated callback, appending the children to the action
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit').TemplateResult<1>;
+}

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

@@ -0,0 +1,21 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The `<rtg-card-content>` component is used for the main card body.
+ *
+ * @element rtg-card-content
+ * @slot card-content
+ */
+export declare class CardContent extends LitElement {
+    /**
+     * The slot of the card content.
+     */
+    private get _contentSlot();
+    /**
+     * Handles the first updated callback, appending the children to the content
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit').TemplateResult<1>;
+}

package/dist/src/components/ui/card/_card-description.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The `<rtg-card-description>` component is used for helper text under the
+ * title.
+ *
+ * @element rtg-card-description
+ * @slot card-description
+ */
+export declare class CardDescription extends LitElement {
+    /**
+     * The slot of the card description.
+     */
+    private get _descriptionSlot();
+    /**
+     * Handles the first updated callback, appending the children to the
+     * description slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit').TemplateResult<1>;
+}

package/dist/src/components/ui/card/_card-footer.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, PropertyValues } from 'lit';
+import { CardFooterProps } from './card.defs';
+
+/**
+ * The `<rtg-card-footer>` component is used for actions and secondary content
+ * at the bottom of the card.
+ *
+ * @element rtg-card-footer
+ * @slot card-footer
+ */
+export declare class CardFooter extends LitElement implements CardFooterProps {
+    /**
+     * When `true`, the card footer is styled with a top border and padding.
+     */
+    bordered?: boolean;
+    /**
+     * The slot of the card footer.
+     */
+    private get _footerSlot();
+    /**
+     * Handles the first updated callback, appending the children to the footer
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit').TemplateResult<1>;
+}

package/dist/src/components/ui/card/_card-header.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, PropertyValues } from 'lit';
+import { CardHeaderProps } from './card.defs';
+
+/**
+ * The `<rtg-card-header>` component is used for a title, description, and
+ * optional action.
+ *
+ * @element rtg-card-header
+ * @slot card-header
+ */
+export declare class CardHeader extends LitElement implements CardHeaderProps {
+    /**
+     * When `true`, the card header is styled with a bottom border and padding.
+     */
+    bordered?: boolean;
+    /**
+     * The slot of the card header.
+     */
+    private get _headerSlot();
+    /**
+     * Handles the first updated callback, appending the children to the header
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit').TemplateResult<1>;
+}

package/dist/src/components/ui/card/_card-title.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The `<rtg-card-title>` component is used for the card title.
+ *
+ * @element rtg-card-title
+ * @slot card-title
+ */
+export declare class CardTitle extends LitElement {
+    /**
+     * The slot of the card title.
+     */
+    private get _titleSlot();
+    /**
+     * Handles the first updated callback, appending the children to the title
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit').TemplateResult<1>;
+}

package/dist/src/components/ui/card/_card.d.ts

@@ -0,0 +1,26 @@
+import { LitElement, PropertyValues } from 'lit';
+import { CardProps, CardSize } from './card.defs';
+
+/**
+ * The `<rtg-card>` component is the root container for card content.
+ *
+ * @element rtg-card
+ * @slot card
+ */
+export declare class Card extends LitElement implements CardProps {
+    /**
+     * The size of the card.
+     */
+    size: CardSize;
+    /**
+     * The slot of the card 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>;
+}

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

@@ -1,27 +1,23 @@
-import { BaseElement } from '../../../helpers';
-import { PropertyValues } from 'lit';
-import { CardContent } from './card-content';
-import { CardDescription } from './card-description';
-import { CardFooter } from './card-footer';
-import { CardHeader } from './card-header';
-import { CardTitle } from './card-title';
+import { Card } from './_card';
+import { CardHeader } from './_card-header';
+import { CardTitle } from './_card-title';
+import { CardDescription } from './_card-description';
+import { CardAction } from './_card-action';
+import { CardContent } from './_card-content';
+import { CardFooter } from './_card-footer';
 
-declare class Card extends BaseElement {
-    wrapperDivElement: HTMLDivElement;
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
-    protected getAttributesToExclude(): string[];
-    protected getAttributesToRemoveFromParent(): string[];
-    protected firstUpdated(_changedProperties: PropertyValues): void;
-    render(): import('lit').TemplateResult<1>;
-}
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, };
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, };
+/**
+ * Displays a card with header, content, and footer.
+ */
 declare global {
     interface HTMLElementTagNameMap {
         'rtg-card': Card;
-        'rtg-card-title': CardTitle;
         'rtg-card-header': CardHeader;
-        'rtg-card-footer': CardFooter;
+        'rtg-card-title': CardTitle;
         'rtg-card-description': CardDescription;
+        'rtg-card-action': CardAction;
         'rtg-card-content': CardContent;
+        'rtg-card-footer': CardFooter;
     }
 }

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

@@ -0,0 +1,10 @@
+export type CardSize = 'default' | 'sm';
+export interface CardProps {
+    size: CardSize;
+}
+export interface CardHeaderProps {
+    bordered?: boolean;
+}
+export interface CardFooterProps {
+    bordered?: boolean;
+}

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

@@ -1,6 +1,12 @@
 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 Cards: Story;
+export declare const Demo: Story;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const BorderedHeader: Story;
+export declare const BorderedFooter: Story;
+export declare const Image: Story;
+export declare const MeetingNotes: Story;

package/dist/src/components/ui/checkbox/_checkbox.d.ts

@@ -0,0 +1,66 @@
+import { LitElement, PropertyValues } from 'lit';
+import { CheckboxProps } from './checkbox.defs';
+
+/**
+ * The `<rtg-checkbox>` component is a control that allows the user to toggle
+ * between checked and not checked.
+ *
+ * @element rtg-checkbox
+ * @slot checkbox
+ * @slot checkbox-indicator
+ * @slot checkbox-input
+ */
+export declare class Checkbox extends LitElement implements CheckboxProps {
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when
+     * you do not need to control its checked state.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction
+     * with `onCheckedChange`.
+     */
+    checked?: boolean;
+    /**
+     * Event handler called when the checked state of the checkbox changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * When `true`, prevents the user from interacting with the checkbox.
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, indicates that the user must check the checkbox before the
+     * owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * When `true`, sets the `aria-invalid` attribute and styles the checkbox
+     * accordingly.
+     */
+    invalid?: boolean;
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a
+     * name/value pair.
+     */
+    name?: string;
+    /**
+     * The value given as data when submitted with a `name`.
+     */
+    value: string;
+    /**
+     * The internal state of the checkbox, initialised according to the
+     * `defaultChecked` and `checked` props.
+     */
+    private _checked?;
+    private _getState;
+    private _handleClick;
+    private _renderIndicator;
+    private _renderInput;
+    /**
+     * Handles the first updated callback, initialising the `_checked` state.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit').TemplateResult<1>;
+}

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

@@ -1,17 +1,9 @@
-import { LitElement } from 'lit';
-import { CheckboxProperties } from './checkbox.type';
+import { Checkbox } from './_checkbox';
 
-export declare class Checkbox extends LitElement implements CheckboxProperties {
-    disabled: boolean;
-    checked: boolean;
-    type: string;
-    value: string;
-    required: boolean;
-    private _onClick;
-    click(): void;
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
-    render(): import('lit').TemplateResult<1>;
-}
+export { Checkbox };
+/**
+ * A control that allows the user to toggle between checked and not checked.
+ */
 declare global {
     interface HTMLElementTagNameMap {
         'rtg-checkbox': Checkbox;

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

@@ -0,0 +1,11 @@
+export type CheckboxState = 'checked' | 'unchecked';
+export interface CheckboxProps {
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    name?: string;
+    value: string;
+}

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

@@ -1,9 +1,10 @@
-import { Meta, StoryFn, StoryObj } from '@storybook/web-components-vite';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
 
-declare const _default: Meta;
-export default _default;
-export declare const CheckboxWithRequired: StoryFn;
-export declare const Checkbox: StoryFn;
-export declare const CheckboxWithValue: StoryFn;
+declare const meta: Meta;
+export default meta;
 type Story = StoryObj;
-export declare const Checkboxes: Story;
+export declare const Demo: Story;
+export declare const Basic: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;
+export declare const Description: Story;

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

@@ -28,7 +28,7 @@ export * from './pagination/pagination';
 export * from './drawer/drawer';
 export * from './select/select';
 export * from './toast/toast';
-export * from './tabs/tab';
+export * from './tabs/tabs';
 export * from './toggle/toggle';
 export * from './toggle-group/toggle-group';
 export * from './input-otp/input-otp';