@saasbase-io/core-elements 1.0.0

package/dist/types/common/index.d.ts

@@ -0,0 +1,15 @@
+export type InputType = "hidden" | "text" | "search" | "tel" | "url" | "email" | "password" | "date" | "month" | "week" | "time" | "datetime-local" | "number" | "range" | "color" | "file";
+export interface FieldConfig {
+    id: string;
+    label: string;
+    type: InputType;
+    placeholder?: string;
+    required?: boolean;
+    pattern?: string;
+    errorMessage?: string;
+}
+export declare enum TextPositionEnum {
+    CENTER = "center",
+    LEFT_TO_RIGHT = "left_to_right",
+    RIGHT_TO_LEFT = "right_to_left"
+}

package/dist/types/components/index.d.ts

@@ -0,0 +1 @@
+export * from './user-profile';

package/dist/types/components/user-profile.d.ts

@@ -0,0 +1,39 @@
+import { TemplateResult } from '../../../node_modules/lit-html';
+export declare enum USER_PROFILE_TAB_VALUES {
+    PROFILE = "Profile",
+    SECURITY = "Security",
+    APPEARANCE = "Appearance",
+    NOTIFICATION = "Notification"
+}
+export declare enum USER_PROFILE_TAB_LIST {
+    PROFILE = "Profile",
+    SECURITY = "Security",
+    APPEARANCE = "Appearance",
+    NOTIFICATION = "Notification"
+}
+export declare enum USER_PROFILE_MODE {
+    MODAL = "MODAL",
+    PAGE = "PAGE"
+}
+export declare enum USER_PROFILE_SIDEBAR_DISPLAY_TYPE {
+    BURGER = "BURGER",
+    REGULAR = "REGULAR"
+}
+export declare enum USER_PROFILE_ORIENTATION {
+    VERTICAL = "VERTICAL",
+    HORIZONTAL = "HORIZONTAL"
+}
+export declare enum USER_PROFILE_WIDGETS_LAYOUT {
+    COLUMN = "COLUMN",
+    ROW = "ROW"
+}
+export interface IProfileContentCustomizations {
+    account?: IProfileWidgetCustomization;
+    personalInfo?: IProfileWidgetCustomization;
+    locations?: IProfileWidgetCustomization;
+    urls?: IProfileWidgetCustomization;
+}
+export interface IProfileWidgetCustomization {
+    icon?: HTMLElement | TemplateResult | Element;
+    title?: string;
+}

package/dist/types/core/index.d.ts

@@ -0,0 +1,11 @@
+export interface EnvConfig {
+    domain: string;
+    apiKey?: string;
+    headers?: Record<string, string>;
+    clientId: string;
+    clientSecret: string;
+    signinUrl: string;
+    signupUrl: string;
+    signinRedirectUrl?: string;
+    locale?: string;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from './common';
+export * from './layout';
+export * from './styles';
+export * from './core';
+export * from './components';
+export * from './react';

package/dist/types/layout/index.d.ts

@@ -0,0 +1,245 @@
+import { Style } from '../styles';
+export interface Container {
+    type: "flex_column" | "flex_row";
+    alignment?: "start" | "center" | "end";
+    children: UIElement[];
+}
+export interface ValidationRule {
+    type: "required" | "min_length" | "max_length" | "min_value" | "max_value" | "email" | "phone" | "date" | "regex" | "field_match";
+    error_message: string;
+    length?: number;
+    value?: string;
+    regex?: string;
+    field_match?: string;
+}
+export type ValidationOnEvent = "change" | "blur" | "submit";
+export interface Input {
+    type: "number" | "text" | "password" | "email" | "hidden" | "search" | "tel" | "url" | "date" | "month" | "week" | "time" | "datetime-local" | "range" | "color" | "file";
+    placeholder?: string;
+    autocomplete?: string;
+    hint?: string;
+    initial_value?: string;
+    data_key?: string;
+    validation?: {
+        rules: ValidationRule[];
+        on_event: ValidationOnEvent;
+    };
+}
+export interface ImageVariants {
+    dark?: string;
+    light?: string;
+}
+export interface Image {
+    image_url: string;
+    link_url?: string;
+}
+export interface Spinner {
+    size: number;
+}
+export interface Gap {
+    type: "vertical" | "horizontal";
+    size: string;
+}
+export interface Label {
+    content: string;
+}
+export interface Logo {
+    image_url: string;
+}
+export interface Watermark {
+    image_url: string;
+    label: string;
+}
+export interface Text {
+    content: string;
+    text_alignment?: "left" | "center" | "right";
+}
+export interface Html {
+    content: string;
+}
+export interface Button {
+    type: "secondary" | "link" | "default" | "destructive" | "outline" | "ghost";
+    text?: string;
+    icon_url?: string;
+    event: string;
+    requires_valid?: string[];
+    submit?: boolean;
+}
+export interface Divider {
+    text?: string;
+}
+export interface Checkbox {
+    label?: string;
+    initial_value?: boolean;
+    data_key?: string;
+    validation?: {
+        rules: ValidationRule[];
+        on_event: ValidationOnEvent;
+    };
+}
+export interface OTP {
+    length: number;
+    timeout: number;
+    variant?: "digits_only" | "with_spacing" | "with_separator" | "simple";
+    data_key?: string;
+    event?: string;
+    resend?: {
+        text?: Text;
+        button?: Button;
+    };
+}
+export interface Error {
+    message: string;
+}
+export interface CountdownProperties {
+    duration?: number;
+    redirect_url?: string;
+    content?: string;
+}
+export type DataElement = {
+    element_type: "checkbox";
+    id: string;
+    properties: Checkbox;
+    style: Style;
+    class: string;
+    data_key: string;
+} | {
+    element_type: "input";
+    id: string;
+    properties: Input;
+    style: Style;
+    class: string;
+    data_key: string;
+} | {
+    element_type: "otp";
+    id: string;
+    properties: OTP;
+    style: Style;
+    class: string;
+    data_key: string;
+};
+export type UIElement = {
+    element_type: "container";
+    id: string;
+    properties: Container;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "label";
+    id: string;
+    properties: Label;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "gap";
+    id: string;
+    properties: Gap;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "html";
+    id: string;
+    properties: Html;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "input";
+    id: string;
+    properties: Input;
+    style: Style;
+    class: string;
+    data_key?: string;
+    hidden?: boolean;
+} | {
+    element_type: "image";
+    id: string;
+    properties: Image;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "spinner";
+    id: string;
+    properties: Spinner;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "logo";
+    id: string;
+    properties: Logo;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "text";
+    id: string;
+    properties: Text;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "button";
+    id: string;
+    properties: Button;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "divider";
+    id: string;
+    properties: Divider;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "checkbox";
+    id: string;
+    properties: Checkbox;
+    style: Style;
+    class: string;
+    data_key?: string;
+    hidden?: boolean;
+} | {
+    element_type: "otp";
+    id: string;
+    properties: OTP;
+    style: Style;
+    class: string;
+    data_key?: string;
+    hidden?: boolean;
+} | {
+    element_type: "error";
+    id: string;
+    properties: Error;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "watermark";
+    id: string;
+    properties: Watermark;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+} | {
+    element_type: "countdown";
+    id: string;
+    properties: CountdownProperties;
+    style: Style;
+    class: string;
+    hidden?: boolean;
+};
+export interface RenderSpec {
+    root_container: UIElement;
+}
+export interface EventResponse {
+    next_screen: string;
+    state: string;
+    session_token: string;
+    render_spec: RenderSpec;
+}

package/dist/types/react/index.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { ICustomizations } from '../styles';
+import { RenderSpec } from '../layout';
+import { IProfileContentCustomizations, IProfileWidgetCustomization, USER_PROFILE_MODE, USER_PROFILE_ORIENTATION, USER_PROFILE_SIDEBAR_DISPLAY_TYPE, USER_PROFILE_WIDGETS_LAYOUT } from '../components';
+import { Account, LocationInfo, PersonalInfo, URLsInfo } from '../../components';
+type WithChildren = {
+    children?: ReactNode;
+};
+type WithCustomizations = {
+    customizations?: ICustomizations | null;
+};
+type WithRenderSpec = {
+    renderSpec?: RenderSpec | null;
+};
+type WidgetLayout = "ROW" | "COLUMN" | typeof USER_PROFILE_WIDGETS_LAYOUT.ROW | typeof USER_PROFILE_WIDGETS_LAYOUT.COLUMN;
+type CommonWidgetProps = WithChildren & WithCustomizations & {
+    showIcons?: boolean;
+    Layout?: WidgetLayout;
+    content?: IProfileWidgetCustomization | null;
+};
+export interface ProviderProps extends WithChildren, WithCustomizations {
+    autoRedirect?: boolean;
+}
+export interface LayoutProps extends WithChildren, WithCustomizations, WithRenderSpec {
+}
+export interface PreviewProps extends WithChildren, WithCustomizations, WithRenderSpec {
+}
+export interface SignInProps extends WithChildren, WithCustomizations {
+}
+export interface SignUpProps extends WithChildren, WithCustomizations {
+}
+export interface UserProfileProps extends WithChildren, WithCustomizations {
+    showAvatarMenu?: boolean;
+    orientation?: "VERTICAL" | "HORIZONTAL" | typeof USER_PROFILE_ORIENTATION.HORIZONTAL | typeof USER_PROFILE_ORIENTATION.VERTICAL;
+    mobileDisplay?: "REGULAR" | "BURGER" | typeof USER_PROFILE_SIDEBAR_DISPLAY_TYPE.REGULAR | typeof USER_PROFILE_SIDEBAR_DISPLAY_TYPE.BURGER;
+    mode?: "PAGE" | "MODAL" | typeof USER_PROFILE_MODE.PAGE | typeof USER_PROFILE_MODE.MODAL;
+    widgetsLayout?: WidgetLayout;
+    content?: IProfileContentCustomizations | null;
+}
+export interface AccountInfoProps extends WithChildren, WithCustomizations {
+    account?: Account;
+    showAvatarMenu?: boolean;
+    toggleAvatarMenu: (e: Event) => void;
+    onAvatarChange: () => void;
+    onAvatarRemove: () => void;
+    showIcons?: boolean;
+    content?: IProfileWidgetCustomization | null;
+    otpVariant?: "simple" | "with_spacing" | "with_separator" | "digits_only";
+    otpLength?: number;
+    Layout?: WidgetLayout;
+}
+export interface LocationInfoProps extends CommonWidgetProps {
+    locationInfo?: LocationInfo;
+}
+export interface UrlsInfoProps extends CommonWidgetProps {
+    URLsInfo?: URLsInfo;
+}
+export interface PersonalInfoProps extends CommonWidgetProps {
+    personal?: PersonalInfo;
+}
+export {};

package/dist/types/styles/index.d.ts

@@ -0,0 +1,67 @@
+export type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+export interface Style {
+    [prop: string]: string | number | undefined | null | Style;
+}
+export interface ICustomizationOptions {
+    class?: string;
+    style?: Style;
+    rule?: "override" | "merge";
+    font?: "font-geist" | "font-inter" | "font-roboto" | "font-open-sans" | "font-lato" | "font-montserrat";
+}
+export interface ICustomizations {
+    byType?: {
+        loader?: {
+            spinner?: ICustomizationOptions;
+            linear?: ICustomizationOptions;
+        };
+        logo?: ICustomizationOptions;
+        buttons?: {
+            defaultButton?: ICustomizationOptions;
+            secondaryButton?: ICustomizationOptions;
+            linkButton?: ICustomizationOptions;
+            outlineButton?: ICustomizationOptions;
+            ghostButton?: ICustomizationOptions;
+            destructiveButton?: ICustomizationOptions;
+        };
+        errors?: {
+            inputError?: ICustomizationOptions;
+            serviceError?: ICustomizationOptions;
+        };
+        inputs?: {
+            inputContainer?: ICustomizationOptions;
+            inputField?: ICustomizationOptions;
+            inputHint?: ICustomizationOptions;
+        };
+        labels?: {
+            inputLabel?: ICustomizationOptions;
+            checkboxLabel?: ICustomizationOptions;
+        };
+        divider?: {
+            dividerContainer?: ICustomizationOptions;
+            dividerLine?: ICustomizationOptions;
+            dividerText?: ICustomizationOptions;
+        };
+        timer?: {
+            countdowns?: ICustomizationOptions;
+        };
+        userProfile?: {
+            container?: ICustomizationOptions;
+            sidebar?: ICustomizationOptions;
+            sidebarTabs?: ICustomizationOptions;
+            sidebarBurgerMenu?: ICustomizationOptions;
+            userProfileCard?: {
+                container?: ICustomizationOptions;
+                header?: {
+                    container?: ICustomizationOptions;
+                    title?: ICustomizationOptions;
+                };
+                editForm?: ICustomizationOptions;
+            };
+        };
+    };
+    byId?: Record<string, ICustomizationOptions>;
+    config?: {
+        breakpoints?: Partial<Record<Breakpoints, string>>;
+        font?: "font-geist" | "font-inter" | "font-roboto" | "font-open-sans" | "font-lato" | "font-montserrat";
+    };
+}

package/dist/utils/components.d.ts

@@ -0,0 +1,7 @@
+import { ICustomizationOptions, ICustomizations, Style } from '../types';
+export declare function mapAlignment(alignment: string): string;
+export declare function mapBtnToCustomizedStyle(variant: "secondary" | "link" | "default" | "destructive" | "outline" | "ghost", customizations: ICustomizations): ICustomizationOptions | undefined;
+export declare function applyCustomizations(defaultClass: string, defaultStyle?: Style, typeCustomization?: ICustomizationOptions, elementId?: string, customizations?: ICustomizations, isRootContainer?: boolean): {
+    class: string;
+    style: Style;
+};

package/dist/utils/html-base64.d.ts

@@ -0,0 +1 @@
+export declare function base64ToHtml(base64: string): string;

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './styles';
+export * from './tailwind';
+export * from './svg-base64';
+export * from './html-base64';

package/dist/utils/styles.d.ts

@@ -0,0 +1,23 @@
+import { Breakpoints, Style } from '../types';
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function mapStyles(style: Style): string;
+export declare function changeTheme(theme: "light" | "dark"): void;
+export declare function initTheme(): void;
+export declare function getTheme(): "light" | "dark";
+export declare function resolveImageUrl(url: string, theme: "light" | "dark"): string;
+export declare function splitStyle(style: Style): {
+    base: Style;
+    responsive: Record<Breakpoints, Style>;
+};
+export declare function mergeBreakpoints(custom?: Partial<Record<Breakpoints, string>>): Record<Breakpoints, string>;
+export declare function injectResponsiveStyles(id: string, responsive: Record<Breakpoints, Style>, customBreakpoints?: Partial<Record<Breakpoints, string>>): void;
+export declare function nextPaint(): Promise<void>;
+/**
+ * Updates flex widths of buttons:
+ * - Last row normally fixed width
+ * - Other rows flex-grow: 1
+ * - If last row === first row, last row grows instead
+ */
+export declare function updateSocialLoginBtnWidths(container: HTMLElement, buttons: HTMLElement[]): Promise<void>;
+export declare function deepMerge<T extends Record<string, any>, U extends Record<string, any>>(target: T, source: U): T & U;

package/dist/utils/svg-base64.d.ts

@@ -0,0 +1,2 @@
+export declare function decodeBase64Svg(icon: string): string | null;
+export declare function resolveIconSource(icon: string): string;

package/dist/utils/tailwind.d.ts

@@ -0,0 +1,7 @@
+import { RenderSpec } from '../types';
+interface JSONEditor {
+    get: () => RenderSpec;
+    set: (data: RenderSpec) => void;
+}
+export declare function initializeDynamicStyles(jsonEditor: JSONEditor, renderSpec: RenderSpec): void;
+export {};

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@saasbase-io/core-elements",
+  "version": "1.0.0",
+  "license": "MIT",
+  "description": "A collection saas based related components",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && npm run build:css",
+    "preview": "vite preview",
+    "test": "echo 'Add tests here'",
+    "lint": "eslint 'src/**/*.{ts,tsx}' --fix",
+    "build:demo": "vite build --config vite.demo.config.ts",
+    "preview:demo": "vite preview --config vite.demo.config.ts",
+    "build:css": "postcss src/styles/tailwind.css -o dist/styles.css"
+  },
+  "keywords": [
+    "lit",
+    "web-components",
+    "typescript",
+    "vite"
+  ],
+  "author": "team-saas-based",
+  "devDependencies": {
+    "@types/jsoneditor": "^9.9.5",
+    "@types/node": "^24.0.4",
+    "@types/react": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
+    "@vitejs/plugin-react": "^4.6.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.38.0",
+    "globals": "^16.4.0",
+    "lit": "^3.3.0",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.1",
+    "react": "^19.1.1",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "dependencies": {
+    "@lit/context": "^1.1.0",
+    "@lit/react": "^1.0.8",
+    "@lit/reactive-element": "^2.1.0",
+    "@revotech-group/revotech-ui-kit": "^0.1.43",
+    "@saasbase-io/loginflow-websdk": "^1.9.3",
+    "jsoneditor": "^10.2.0",
+    "lit-html": "^3.3.0"
+  },
+  "peerDependencies": {
+    "next": ">=13.0.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}