@saasbase-io/core-elements 1.13.0 → 1.15.0

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
+export * from './wrappers';
 export * from './renderers';
 export * from './ui';
 export * from './widgets';
-export * from './wrappers';

package/dist/components/renderers/_updated/container/container.d.ts

@@ -0,0 +1,19 @@
+import { PropertyValues } from '../../../../../node_modules/lit';
+import { BaseElement } from '../../../wrappers/base-element/base-element';
+import { ContainerAlignment, ContainerType } from './container.types';
+export declare class SbContainer extends BaseElement {
+    id: string;
+    type: ContainerType;
+    root: boolean;
+    alignment?: ContainerAlignment;
+    protected createRenderRoot(): this;
+    protected firstUpdated(_changed: PropertyValues): Promise<void>;
+    protected updated(_changed: PropertyValues): Promise<void>;
+    private get containerStyles();
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-container": SbContainer;
+    }
+}

package/dist/components/renderers/_updated/container/container.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const FlexRow: Story;
+export declare const RootCard: Story;

package/dist/components/renderers/_updated/container/container.types.d.ts

@@ -0,0 +1,8 @@
+export type ContainerType = "flex_column" | "flex_row";
+export type ContainerAlignment = "start" | "center" | "end";
+export type ContainerProps = {
+    id?: string;
+    type?: ContainerType;
+    root?: boolean;
+    alignment?: ContainerAlignment;
+};

package/dist/components/renderers/_updated/{sb-countdown.d.ts → countdown/countdown.d.ts}

@@ -1,5 +1,5 @@
-import { PropertyValues } from '../../../../node_modules/lit';
-import { BaseElement } from '../..';
+import { PropertyValues } from '../../../../../node_modules/lit';
+import { BaseElement } from '../../..';
 export declare class SbCountdown extends BaseElement {
     get _containerElement(): HTMLLIElement | null;
     content: string;
@@ -17,5 +17,10 @@ export declare class SbCountdown extends BaseElement {
     private completeCountdown;
     private clearTimer;
     private renderContent;
-    render(): import('../../../../node_modules/lit-html').TemplateResult<1>;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-countdown": SbCountdown;
+    }
 }

package/dist/components/renderers/_updated/countdown/countdown.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const CustomContent: Story;
+export declare const LongDuration: Story;

package/dist/components/renderers/_updated/countdown/countdown.types.d.ts

@@ -0,0 +1,6 @@
+export type CountdownProps = {
+    content?: string;
+    duration?: number;
+    redirectUrl?: string;
+    id?: string;
+};

package/dist/components/renderers/_updated/error/_error.d.ts

@@ -0,0 +1,77 @@
+import { LitElement } from '../../../../../node_modules/lit';
+import { ErrorContent, ErrorIcon, ErrorProps, ErrorVariant } from './error.types';
+/**
+ * A destructive alert used for displaying auth errors.
+ * @element sb-error
+ *
+ * @part error (rtg-alert)
+ * @part error-icon (svg)
+ * @part error-title (rtg-alert-title)
+ * @part error-description (rtg-alert-description)
+ */
+export declare class SbError extends LitElement implements ErrorProps {
+    private static readonly _ROOT;
+    private static readonly _ICON;
+    private static readonly _TITLE;
+    private static readonly _DESCRIPTION;
+    /**
+     * The stable CSS part names exposed for external targeting.
+     */
+    static get parts(): {
+        root: string;
+        icon: string;
+        title: string;
+        description: string;
+    };
+    /**
+     * A unique substring for fallback part IDs generated.
+     */
+    seed: string;
+    /**
+     * The `id` of the root part and the base of sub-part IDs.
+     */
+    childId?: string;
+    /**
+     * The visual variant of the alert.
+     */
+    variant: ErrorVariant;
+    /**
+     * The text content (title and/or description) of the error alert.
+     */
+    content: ErrorContent;
+    /**
+     * The Lucide icon rendered in the error alert.
+     */
+    icon?: ErrorIcon;
+    /**
+     * Overrides default behavior to render into light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The `id` of the root element. Equal to `childId` when provided, otherwise
+     * derived from the component's part name and `seed`.
+     */
+    get rootId(): string;
+    /**
+     * The `id` of the spinner element, derived from `rootId` with the icon part
+     * name appended.
+     */
+    get iconId(): string;
+    /**
+     * The `id` of the spinner element, derived from `rootId` with the title part
+     * name appended.
+     */
+    get titleId(): string;
+    /**
+     * The `id` of the spinner element, derived from `rootId` with the description
+     * part name appended.
+     */
+    get descriptionId(): string;
+    /**
+     * Uses the `variant` prop to derive the `variant` prop passed to `rtg-alert`.
+     *  - `"default"` error = `"destructive"` alert
+     *  - `"tonal"` error = `"destructive-tonal"` alert
+     */
+    private get _variant();
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/_updated/error/error.defs.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from '../../../../../node_modules/lit';
+import { ErrorIcon } from './error.types';
+export declare const ERROR_ICONS: Record<ErrorIcon, (id: string, part: string) => TemplateResult<1>>;

package/dist/components/renderers/_updated/error/error.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const Variant: Story;
+export declare const Content: Story;
+export declare const Icon: Story;

package/dist/components/renderers/_updated/{sb-error → error}/error.types.d.ts

@@ -1,3 +1,4 @@
+export type ErrorVariant = "default" | "tonal";
 export type ErrorIcon = "badge-alert" | "badge-x" | "circle-alert" | "circle-x" | "shield-alert" | "shield-x";
 export type ErrorContent = {
     title: string;
@@ -11,7 +12,8 @@ export type ErrorContent = {
 };
 export type ErrorProps = {
     seed: string;
-    icon?: ErrorIcon;
+    childId?: string;
+    variant: ErrorVariant;
     content: ErrorContent;
-    tonal?: boolean;
+    icon?: ErrorIcon;
 };

package/dist/components/renderers/_updated/{sb-error/error.d.ts → error/index.d.ts}

@@ -1,4 +1,5 @@
 import { SbError } from './_error';
+export { SbError };
 declare global {
     interface HTMLElementTagNameMap {
         "sb-error": SbError;

package/dist/components/renderers/_updated/field/_name-field.d.ts

@@ -0,0 +1,57 @@
+import { LitElement } from '../../../../../node_modules/lit';
+export type NameFieldValidateType = "success" | "required" | "format";
+export declare class SbNameField extends LitElement {
+    private static readonly _ROOT;
+    private static readonly _FIRST;
+    private static readonly _LAST;
+    static get parts(): {
+        root: string;
+        firstField: string;
+        lastField: string;
+        input: string;
+        label: string;
+        error: string;
+        mark: string;
+        description: string;
+    };
+    static get validateEventName(): string;
+    firstLabel: string;
+    lastLabel: string;
+    seed: string;
+    childId?: string;
+    name: string;
+    required?: boolean;
+    disabled?: boolean;
+    firstName: string;
+    lastName: string;
+    firstPlaceholder: string;
+    lastPlaceholder: string;
+    requiredError: string;
+    formatError: string;
+    mark?: string;
+    caret?: boolean;
+    private _first;
+    private _firstInvalid;
+    private _firstError;
+    private _last;
+    private _lastInvalid;
+    private _lastError;
+    protected createRenderRoot(): this;
+    get rootId(): string;
+    private _renderMark;
+    private _dispatchValidate;
+    private _validateName;
+    private _validate;
+    validate(): boolean;
+    private _handleInput;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _renderFirstField;
+    private _renderLastField;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-name-field": SbNameField;
+    }
+}

package/dist/components/renderers/_updated/field/field.stories/name-field.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { SbNameField } from '../_name-field';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<SbNameField>;
+export declare const Basic: Story;
+export declare const Required: Story;
+export declare const FormatValidation: Story;
+export declare const MarkAndCaret: Story;
+export declare const Disabled: Story;
+export declare const Form: Story;
+export declare const Validate: Story;

package/dist/components/renderers/_updated/field/field.types.d.ts

@@ -77,4 +77,33 @@ export type IdentifierFieldProps = Omit<BaseFieldProps, "label" | "content" | "f
     content: IdentifierFieldContent;
     autocomplete?: IdentifierFieldAutocomplete;
 };
+export type NameFieldValidateType = BaseFieldValidateType;
+export type NameFieldContent = BaseFieldContent;
+export type NameFieldProps = {
+    seed: string;
+    childId?: string;
+    fieldId?: string;
+    /**
+     * Base form field name (e.g. "name", "full_name")
+     */
+    name: string;
+    content: NameFieldContent;
+    /**
+     * Label for first name input (e.g. "First name")
+     */
+    firstLabel: string;
+    /**
+     * Label for last name input (e.g. "Last name")
+     */
+    lastLabel: string;
+    firstPlaceholder?: string;
+    lastPlaceholder?: string;
+    description?: string;
+    mark?: string;
+    caret?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    requiredError: string;
+    formatError: string;
+};
 export {};

package/dist/components/renderers/_updated/field/index.d.ts

@@ -1,10 +1,11 @@
 import { SbConfirmField } from './_confirm-field';
 import { SbEmailField } from './_email-field';
 import { SbIdentifierField } from './_identifier-field';
+import { SbNameField } from './_name-field';
 import { SbPasswordField } from './_password-field';
 import { SbPhoneField } from './_phone-field';
 import { SbUsernameField } from './_username-field';
-export { SbConfirmField, SbEmailField, SbIdentifierField, SbPasswordField, SbPhoneField, SbUsernameField, };
+export { SbConfirmField, SbEmailField, SbIdentifierField, SbPasswordField, SbPhoneField, SbUsernameField, SbNameField, };
 declare global {
     interface HTMLElementTagNameMap {
         "sb-email-field": SbEmailField;
@@ -13,5 +14,6 @@ declare global {
         "sb-password-field": SbPasswordField;
         "sb-confirm-field": SbConfirmField;
         "sb-identifier-field": SbIdentifierField;
+        "sb-name-field": SbNameField;
     }
 }

package/dist/components/renderers/_updated/gap/gap.d.ts

@@ -0,0 +1,14 @@
+import { BaseElement } from '../../..';
+import { GapType } from './gap.types';
+export declare class SbGap extends BaseElement {
+    size: string;
+    type: GapType;
+    id: string;
+    protected createRenderRoot(): this;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-gap": SbGap;
+    }
+}

package/dist/components/renderers/_updated/gap/gap.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;

package/dist/components/renderers/_updated/gap/gap.types.d.ts

@@ -0,0 +1,6 @@
+export type GapType = "vertical" | "horizontal";
+export type GapProps = {
+    size?: string;
+    id?: string;
+    type?: GapType;
+};

package/dist/components/renderers/_updated/{sb-header.d.ts → header/header.d.ts}

@@ -1,9 +1,9 @@
-import { BaseElement } from '../..';
-import { PropertyValues } from '../../../../node_modules/lit';
+import { BaseElement } from '../../..';
+import { PropertyValues } from '../../../../../node_modules/lit';
 export declare class SbHeader extends BaseElement {
     get _containerElement(): HTMLLIElement | null;
     align: string;
     gap: string;
     protected firstUpdated(_changedProperties: PropertyValues): void;
-    render(): import('../../../../node_modules/lit-html').TemplateResult<1>;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
 }

package/dist/components/renderers/_updated/header/header.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const AuthHeader: Story;

package/dist/components/renderers/_updated/index.d.ts

@@ -1,13 +1,14 @@
+export * from './error';
 export * from './field';
 export * from './form';
 export * from './passkey-button';
 export * from './provider';
-export * from './sb-error';
-export * from './sb-gap';
-export * from './sb-header';
-export * from './sb-logo';
-export * from './sb-otp';
-export * from './sb-subtitle';
-export * from './sb-container';
-export * from './sb-title';
+export * from './gap/gap';
+export * from './header/header';
+export * from './logo/logo';
+export * from './otp/otp';
+export * from './subtitle/subtitle';
+export * from './container/container';
+export * from './title/title';
 export * from './watermark';
+export * from './countdown/countdown';

package/dist/components/renderers/_updated/{sb-logo.d.ts → logo/logo.d.ts}

@@ -1,4 +1,4 @@
-import { BaseElement } from '../..';
+import { BaseElement } from '../../..';
 export declare class SbLogo extends BaseElement {
     get _containerElement(): HTMLLIElement | null;
     id: string;
@@ -9,5 +9,10 @@ export declare class SbLogo extends BaseElement {
     disconnectedCallback(): void;
     private getTheme;
     protected createRenderRoot(): this;
-    render(): import('../../../../node_modules/lit-html').TemplateResult<1>;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-logo": SbLogo;
+    }
 }

package/dist/components/renderers/_updated/logo/logo.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const ImageLogo: Story;
+export declare const SvgLogo: Story;

package/dist/components/renderers/_updated/logo/logo.types.d.ts

@@ -0,0 +1,6 @@
+export type LogoTheme = "dark" | "light" | string;
+export type LogoProps = {
+    imageUrl?: string;
+    id?: string;
+    theme?: LogoTheme;
+};

package/dist/components/renderers/_updated/{sb-otp.d.ts → otp/otp.d.ts}

@@ -1,7 +1,8 @@
-import { BaseElement, SaasBaseLayout } from '../..';
+import { BaseElement } from '../../..';
+import { OtpVariant } from './otp.types';
 export declare class SbOtp extends BaseElement {
     get _containerElement(): HTMLLIElement | null;
-    variant: string;
+    variant: OtpVariant;
     length: number;
     timeout: number;
     dataKey: string;
@@ -10,14 +11,17 @@ export declare class SbOtp extends BaseElement {
     resendButtonText: string;
     resendEvent: string;
     id: string;
-    component: SaasBaseLayout;
     protected createRenderRoot(): this;
-    private patchComponentRequestUpdate;
-    connectedCallback(): void;
+    private emit;
     private buildOTPContentHTML;
     private handleComplete;
     private handleFocus;
     private handleBlur;
     private handleResend;
-    render(): import('../../../../node_modules/lit-html').TemplateResult | null;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-otp": SbOtp;
+    }
 }

package/dist/components/renderers/_updated/otp/otp.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;

package/dist/components/renderers/_updated/otp/otp.types.d.ts

@@ -0,0 +1,12 @@
+export type OtpVariant = "simple" | "with_separator" | "with_spacing" | "digits_only";
+export type OtpProps = {
+    variant?: OtpVariant;
+    length?: number;
+    timeout?: number;
+    dataKey?: string;
+    event?: string;
+    resendText?: string;
+    resendButtonText?: string;
+    resendEvent?: string;
+    id?: string;
+};

package/dist/components/renderers/_updated/subtitle/subtitle.d.ts

@@ -0,0 +1,13 @@
+import { BaseElement } from '../../..';
+export declare class SbSubtitle extends BaseElement {
+    get _containerElement(): HTMLLIElement | null;
+    id: string;
+    content: string;
+    protected createRenderRoot(): this;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-subtitle": SbSubtitle;
+    }
+}

package/dist/components/renderers/_updated/subtitle/subtitle.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const LongContent: Story;

package/dist/components/renderers/_updated/subtitle/subtitle.types.d.ts

@@ -0,0 +1,4 @@
+export type SubtitleProps = {
+    content?: string;
+    id?: string;
+};

package/dist/components/renderers/_updated/title/title.d.ts

@@ -0,0 +1,13 @@
+import { BaseElement } from '../../..';
+export declare class SbTitle extends BaseElement {
+    get _containerElement(): HTMLLIElement | null;
+    id: string;
+    content: string;
+    protected createRenderRoot(): this;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-title": SbTitle;
+    }
+}

package/dist/components/renderers/_updated/title/title.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const PageTitle: Story;

package/dist/components/renderers/_updated/title/title.types.d.ts

@@ -0,0 +1,4 @@
+export type TitleProps = {
+    content?: string;
+    id?: string;
+};