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

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

@@ -1,11 +1,9 @@
-import { BaseElement } from '../../../helpers';
+import { Label } from './_label';
 
-export declare class Label extends BaseElement {
-    for: string;
-    protected getAttributesToExclude(): string[];
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
-    render(): import('lit').TemplateResult<1>;
-}
+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

@@ -1,6 +1,11 @@
-import { Meta, StoryFn } from '@storybook/web-components-vite';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
 
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryFn;
-export declare const HtmlFor: StoryFn;
+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/pagination/pagination-link.d.ts

@@ -1,11 +1,11 @@
 import { BaseElement } from '../../../helpers';
 import { PropertyValues } from 'lit';
-import { ButtonSize } from '../button/button.type';
+import { ButtonSize } from '../button/button.defs';
 
 export declare class PaginationLink extends BaseElement {
     state: string;
     isActive: boolean;
-    size: ButtonSize;
+    size: Exclude<ButtonSize, 'xs' | 'icon-xs'>;
     href: string;
     get _containerElement(): HTMLAnchorElement | null;
     protected createRenderRoot(): HTMLElement | DocumentFragment;

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

@@ -4,7 +4,7 @@ export declare const paginationStyles: {
     item: string[];
     link: (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;
     previous: {
         base: string[];

package/dist/src/components/ui/sample-demo/sample-demo.d.ts

@@ -4,7 +4,7 @@ import * as sampleType from './sample.type';
 export declare class SampleDemo extends LitElement {
     static buttonVariants: (props?: ({
         variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-        size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+        size?: "default" | "sm" | "lg" | "icon" | null | undefined;
     } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
     click: () => void;
     disabled: boolean;

package/dist/src/components/ui/sample-demo/sample.style.d.ts

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

package/dist/src/components/ui/separator/_separator.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import { SeparatorOrientation, SeparatorProps } from './separator.defs';
+
+/**
+ * The `<rtg-separator>` component visually or semantically separates content.
+ *
+ * @element rtg-separator
+ * @slot separator
+ */
+export declare class Separator extends LitElement implements SeparatorProps {
+    /**
+     * The orientation of the separator.
+     */
+    orientation: SeparatorOrientation;
+    /**
+     * When `true`, signifies that it is purely visual, carries no semantic
+     * meaning, and ensures it is not present in the accessibility tree.
+     */
+    decorative?: boolean;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit').TemplateResult<1>;
+}

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

@@ -1,14 +1,9 @@
-import { BaseElement } from '../../../helpers';
-import { PropertyValues } from 'lit';
-import { SEPARATOR_ORIENTATION } from './separator.defs';
+import { Separator } from './_separator';
 
-export declare class Separator extends BaseElement {
-    orientation: SEPARATOR_ORIENTATION;
-    protected getAttributesToExclude(): string[];
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
-    protected updated(changedProperties: PropertyValues): void;
-    render(): import('lit').TemplateResult<1>;
-}
+export { Separator };
+/**
+ * Visually or semantically separates content.
+ */
 declare global {
     interface HTMLElementTagNameMap {
         'rtg-separator': Separator;

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

@@ -1,10 +1,5 @@
-export declare enum SEPARATOR_ORIENTATION {
-    /**
-     * @vertical Type
-     */
-    VERTICAL = "vertical",
-    /**
-     * @horizontal Type
-     */
-    HORIZONTAL = "horizontal"
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export interface SeparatorProps {
+    orientation: SeparatorOrientation;
+    decorative?: boolean;
 }

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

@@ -3,6 +3,8 @@ import { Meta, StoryObj } from '@storybook/web-components-vite';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
-export declare const Default: Story;
+export declare const Demo: Story;
 export declare const Horizontal: Story;
 export declare const Vertical: Story;
+export declare const Menu: Story;
+export declare const List: Story;

package/dist/src/components/ui/tabs/_tabs-content.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TabsContentProps } from './tabs.defs';
+
+/**
+ * The `<rtg-tabs-content>` component contains the content associated with each
+ * trigger.
+ *
+ * @element rtg-tabs-content
+ * @slot tabs-content
+ */
+export declare class TabsContent extends LitElement implements TabsContentProps {
+    /**
+     * A unique value that associates the content with a trigger.
+     */
+    value: string;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the tabs content.
+     */
+    get _contentSlot(): HTMLElement | null;
+    /**
+     * Handles the first updated callback, appending the children to the content
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit').TemplateResult<1>;
+}

package/dist/src/components/ui/tabs/_tabs-list.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TabsListProps, TabsListVariant } from './tabs.defs';
+
+/**
+ * The `<rtg-tabs-list>` component contains the triggers that are aligned along
+ * the edge of the active content.
+ *
+ * @element rtg-tabs-list
+ * @slot tabs-list
+ */
+export declare class TabsList extends LitElement implements TabsListProps {
+    /**
+     * The visual style of the tabs list.
+     */
+    variant: TabsListVariant;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the tabs list.
+     */
+    get _listSlot(): HTMLElement | null;
+    /**
+     * Handles the first updated callback, appending the children to the list
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit').TemplateResult<1>;
+}

package/dist/src/components/ui/tabs/_tabs-trigger.d.ts

@@ -0,0 +1,47 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TabsTriggerProps } from './tabs.defs';
+
+/**
+ * The `<rtg-tabs-trigger>` component is the button that activates its
+ * associated content.
+ *
+ * @element rtg-tabs-trigger
+ * @slot tabs-trigger
+ */
+export declare class TabsTrigger extends LitElement implements TabsTriggerProps {
+    /**
+     * A unique value that associates the trigger with a content.
+     */
+    value: string;
+    /**
+     * When `true`, prevents the user from interacting with the tab.
+     */
+    disabled?: boolean;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the tabs trigger.
+     */
+    get _triggerSlot(): HTMLButtonElement | null;
+    /**
+     * Handles the first updated callback, appending the children to the trigger
+     * slot.
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    /**
+     * Sends the trigger select event object, invoking the parent tabs' event
+     * listener.
+     */
+    private _emitSelect;
+    /**
+     * Handles the click event of the trigger button, invoking `_emitSelect`.
+     */
+    private _onClick;
+    /**
+     * Handles the keydown event of the trigger button, invoking `_emitSelect`.
+     */
+    private _onKeyDown;
+    render(): import('lit').TemplateResult<1>;
+}

package/dist/src/components/ui/tabs/_tabs.d.ts

@@ -0,0 +1,99 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TabsProps, TabsOrientation, TabsDir, TabsActivationMode } from './tabs.defs';
+
+/**
+ * The `<rtg-tabs>` component is the 'root' and contains all the tabs component
+ * parts.
+ *
+ * @element rtg-tabs
+ * @slot tabs
+ */
+export declare class Tabs extends LitElement implements TabsProps {
+    /**
+     * The value of the tab that should be active when initially rendered. Use
+     * when you do not need to control the state of the tabs.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the tab to activate. Should be used in conjunction
+     * with `onValueChange`.
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * The orientation of the tabs.
+     */
+    orientation: TabsOrientation;
+    /**
+     * The reading direction of the tabs.
+     */
+    dir: TabsDir;
+    /**
+     * When `automatic`, tabs are activated when receiving focus. When `manual`,
+     * tabs are activated when clicked.
+     */
+    activationMode: TabsActivationMode;
+    /**
+     * The active tab's value - the value props of the trigger/content pair.
+     */
+    private _activeValue?;
+    /**
+     * The tabs root's base ID, generated by `generatedId`, and used to construct
+     * the trigger and contents children's ids.
+     */
+    private _baseId;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the tabs root.
+     */
+    private get _rootSlot();
+    /**
+     * The tabs list child.
+     */
+    private get _list();
+    /**
+     * The tabs trigger children.
+     */
+    private get _triggers();
+    /**
+     * The tabs content children.
+     */
+    private get _contents();
+    /**
+     * 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 active tab: user-provided value if controlled, otherwise,
+     * the internal state value.
+     */
+    private get _currentValue();
+    /**
+     * The event listener callback used for the trigger select event.
+     */
+    private _onTriggerSelect;
+    /**
+     * Sync all the tabs children (list, triggers, and contents), setting their
+     * 'parent-controlled' attributes.
+     */
+    private _sync;
+    /**
+     * Handles the first updated callback, appending the children to the root
+     * slot, determining the active tab, adding the trigger select event listener
+     * and syncing the tabs children.
+     */
+    protected firstUpdated(): void;
+    /**
+     * Handles the updated callback, updating the active tab if changed (and
+     * controlled), and syncing the tabs children.
+     */
+    protected updated(changed: PropertyValues): void;
+    render(): import('lit').TemplateResult<1>;
+}

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

@@ -0,0 +1,18 @@
+import { Tabs } from './_tabs';
+import { TabsList } from './_tabs-list';
+import { TabsTrigger } from './_tabs-trigger';
+import { TabsContent } from './_tabs-content';
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+/**
+ * A set of layered sections of content—known as tab panels—that are displayed
+ * one at a time.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-tabs': Tabs;
+        'rtg-tabs-list': TabsList;
+        'rtg-tabs-trigger': TabsTrigger;
+        'rtg-tabs-content': TabsContent;
+    }
+}

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

@@ -0,0 +1,22 @@
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsDir = 'ltr' | 'rtl';
+export type TabsActivationMode = 'automatic' | 'manual';
+export interface TabsProps {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    orientation: TabsOrientation;
+    dir: TabsDir;
+    activationMode: TabsActivationMode;
+}
+export type TabsListVariant = 'default' | 'line';
+export interface TabsListProps {
+    variant: TabsListVariant;
+}
+export interface TabsTriggerProps {
+    value: string;
+    disabled?: boolean;
+}
+export interface TabsContentProps {
+    value: string;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Generates a unique ID for Tabs to use as its baseId value.
+ * The ID is prefixed with 'rtg-', and consists of a time component as well as a
+ * random component.
+ *
+ * @returns A unique, ~13 char ID for a Tabs baseId value.
+ */
+export declare function generateId(): string;
+/**
+ * Constructs a unique ID for a TabsTrigger slot element.
+ *
+ * @param baseId The ID of the TabsTrigger's Tabs parent.
+ * @param value The value of the TabsTrigger.
+ * @returns The ID of the TabsTrigger's slot.
+ */
+export declare function makeTriggerId(baseId: string, value: string): string;
+/**
+ * Constructs a unique ID for a TabsContent slot element.
+ *
+ * @param baseId The ID of the TabsContent's Tabs parent.
+ * @param value The value of the TabsContent.
+ * @returns The ID of the TabsContent's slot.
+ */
+export declare function makeContentId(baseId: string, value: string): string;

package/dist/src/components/ui/tabs/tabs.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 Basic: Story;
+export declare const Line: Story;
+export declare const Vertical: Story;
+export declare const Disabled: Story;
+export declare const Icons: Story;
+export declare const IconOnly: Story;
+export declare const WithContent: Story;

package/dist/src/{components/ui/input/countryOptions.d.ts → helpers/country-codes.d.ts}

@@ -1,4 +1,4 @@
-export declare const countryOptions: {
+export declare const COUNTRY_CODES: {
     label: string;
     value: string;
     code: string;

package/dist/src/helpers/index.d.ts

@@ -1,6 +1,7 @@
-export * from './mouse-conroller.helper';
-export * from './style.helpers';
 export * from './base-element';
+export * from './country-codes';
 export * from './genrate-uuid.helper';
+export * from './mouse-conroller.helper';
 export * from './shadow-wrapper';
+export * from './style.helpers';
 export * from './widget-controller';

package/dist/src/tokens/tailwind/border-radius.d.ts

@@ -8,13 +8,10 @@ export declare const borderRadius: {
     'combo-box-item-radius': string;
     'carousel-button-radius': string;
     'textarea-radius': string;
-    'tab-list-radius': string;
-    'tab-trigger-radius': string;
     'toast-viewport-item-radius': string;
     'toast-action-radius': string;
     'toggle-group-item-radius': string;
     'toggle-radius': string;
-    'input-radius': string;
     'scrollarea-radius': string;
     'switch-radius': string;
     'switch-thumb-radius': string;
@@ -31,7 +28,6 @@ export declare const borderRadius: {
     'menubar-item-radius': string;
     'menubar-checkbox-item-radius': string;
     'menubar-radio-item-radius': string;
-    'input-otp-slot-radius': string;
     'hover-card-content-radius': string;
     'dropdown-menu-content-radius': string;
     'dropdown-menu-item-radius': string;
@@ -48,14 +44,9 @@ export declare const borderRadius: {
     'command-radius': string;
     'command-input-radius': string;
     'command-item-radius': string;
-    'checkbox-radius': string;
-    'card-radius': string;
     'calendar-weekday-radius': string;
     'calendar-day-radius': string;
     'button-radius': string;
     'badge-radius': string;
-    'avatar-radius': string;
-    'avatar-fallback-radius': string;
-    'alert-radius': string;
     'accordion-trigger-radius': string;
 };

package/dist/src/tokens/tailwind/border-width.d.ts

@@ -12,21 +12,17 @@ export declare const borderWidth: {
     'popover-content-width-border': string;
     'menubar-width-border': string;
     'menubar-content-width-border': string;
-    'input-otp-slot-width-border': string;
     'hover-card-content-width-border': string;
     'dropdown-menu-content-width-border': string;
     'drawer-content-width-border': string;
     'dialog-content-width-border': string;
     'context-menu-content-width-border': string;
     'command-input-wrapper-width-border': string;
-    'checkbox-width-border': string;
-    'card-width-border': string;
     'calendar-day-width-border-focus': string;
     'button-width-border-focus': string;
     'button-width-border-invalid': string;
     'button-outline-width-border': string;
     'badge-width-border': string;
-    'alert-width-border': string;
     'accordion-item-width-border': string;
     'accordion-trigger-width-border-focus': string;
 };

package/dist/src/tokens/tailwind/box-shadow.d.ts

@@ -2,7 +2,6 @@ export declare const boxShadow: {
     'navigation-menu-item-shadow-focus': string;
     'navigation-menu-content-container-shadow': string;
     'combo-box-group-shadow': string;
-    'tab-trigger-shadow-active': string;
     'toast-viewport-item-shadow': string;
     'switch-shadow': string;
     'select-trigger-shadow': string;
@@ -11,13 +10,8 @@ export declare const boxShadow: {
     'popover-content-shadow': string;
     'menubar-shadow': string;
     'menubar-content-shadow': string;
-    'input-otp-slot-shadow': string;
-    'input-shadow': string;
     'hover-card-content-shadow': string;
     'dropdown-menu-content-shadow': string;
     'dialog-content-shadow': string;
     'context-menu-content-shadow': string;
-    'checkbox-shadow': string;
-    'card-shadow': string;
-    'button-outline-shadow': string;
 };