@indobaseinc/auth-ui-svelte 1.0.0

package/dist/UI/Button.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Appearance } from '../types';
+declare const __propDef: {
+    props: Omit<svelte.JSX.HTMLAttributes<HTMLButtonElement>, "loading"> & {
+        loading?: boolean | undefined;
+        color?: "default" | "primary" | undefined;
+        appearance?: Appearance | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type ButtonProps_ = typeof __propDef.props;
+export { ButtonProps_ as ButtonProps };
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps_, ButtonEvents, ButtonSlots> {
+}

package/dist/UI/Container.svelte

@@ -0,0 +1,41 @@
+<script>import { css } from '@stitches/core';
+import { generateClassNames } from '@indobaseinc/auth-ui-shared';
+const containerDefaultStyles = css({
+    display: 'flex',
+    gap: '4px',
+    variants: {
+        direction: {
+            horizontal: {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(48px, 1fr))'
+            },
+            vertical: {
+                flexDirection: 'column',
+                margin: '8px 0'
+            }
+        },
+        gap: {
+            small: {
+                gap: '4px'
+            },
+            medium: {
+                gap: '8px'
+            },
+            large: {
+                gap: '16px'
+            }
+        }
+    }
+});
+export let direction = 'horizontal';
+export let gap = 'small';
+export let appearance = {};
+$: classNames = generateClassNames('container', containerDefaultStyles({
+    direction,
+    gap
+}), appearance);
+</script>
+
+<div {...$$restProps} style={appearance?.style?.container} class={classNames.join(' ')}>
+	<slot />
+</div>

package/dist/UI/Container.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: any;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ContainerProps = typeof __propDef.props;
+export type ContainerEvents = typeof __propDef.events;
+export type ContainerSlots = typeof __propDef.slots;
+export default class Container extends SvelteComponentTyped<ContainerProps, ContainerEvents, ContainerSlots> {
+}
+export {};

package/dist/UI/Divider.svelte

@@ -0,0 +1,16 @@
+<script>import { css } from '@stitches/core';
+import { generateClassNames } from '@indobaseinc/auth-ui-shared';
+const dividerDefaultStyles = css({
+    background: '$dividerBackground',
+    display: 'block',
+    margin: '16px 0',
+    height: '1px',
+    width: '100%'
+});
+export let appearance = {};
+const classNames = generateClassNames('divider', dividerDefaultStyles(), appearance);
+</script>
+
+<div {...$$restProps} style={appearance?.style?.divider} class={classNames.join(' ')}>
+	<slot />
+</div>

package/dist/UI/Divider.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: any;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DividerProps = typeof __propDef.props;
+export type DividerEvents = typeof __propDef.events;
+export type DividerSlots = typeof __propDef.slots;
+export default class Divider extends SvelteComponentTyped<DividerProps, DividerEvents, DividerSlots> {
+}
+export {};

package/dist/UI/Input.svelte

@@ -0,0 +1,49 @@
+<script>import { css } from '@stitches/core';
+import { generateClassNames } from '@indobaseinc/auth-ui-shared';
+const inputDefaultStyles = css({
+    fontFamily: '$inputFontFamily',
+    background: '$inputBackground',
+    borderRadius: '$inputBorderRadius',
+    padding: '$inputPadding',
+    cursor: 'text',
+    borderWidth: '$inputBorderWidth',
+    borderColor: '$inputBorder',
+    borderStyle: 'solid',
+    fontSize: '$baseInputSize',
+    width: '100%',
+    color: '$inputText',
+    boxSizing: 'border-box',
+    '&:hover': {
+        borderColor: '$inputBorderHover',
+        outline: 'none'
+    },
+    '&:focus': {
+        borderColor: '$inputBorderFocus',
+        outline: 'none'
+    },
+    '&::placeholder': {
+        color: '$inputPlaceholder',
+        letterSpacing: 'initial'
+    },
+    transitionProperty: 'background-color, border',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionDuration: '100ms',
+    variants: {
+        type: {
+            default: {
+                letterSpacing: '0px'
+            },
+            password: {
+                letterSpacing: '0px'
+            }
+        }
+    }
+});
+export let value = undefined;
+export let appearance = {};
+$: classNames = generateClassNames('input', inputDefaultStyles({
+    type: 'default'
+}), appearance);
+</script>
+
+<input {...$$restProps} style={appearance?.style?.input} class={classNames.join(' ')} bind:value />

package/dist/UI/Input.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: any;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type InputProps_ = typeof __propDef.props;
+export { InputProps_ as InputProps };
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponentTyped<InputProps_, InputEvents, InputSlots> {
+}

package/dist/UI/Label.svelte

@@ -0,0 +1,16 @@
+<script>import { css } from '@stitches/core';
+import { generateClassNames } from '@indobaseinc/auth-ui-shared';
+const labelDefaultStyles = css({
+    fontFamily: '$labelFontFamily',
+    fontSize: '$baseLabelSize',
+    marginBottom: '$labelBottomMargin',
+    color: '$inputLabelText',
+    display: 'block'
+});
+export let appearance = {};
+$: classNames = generateClassNames('label', labelDefaultStyles(), appearance);
+</script>
+
+<label {...$$restProps} style={appearance?.style?.label} class={classNames.join(' ')}>
+	<slot />
+</label>

package/dist/UI/Label.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: any;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type LabelProps_ = typeof __propDef.props;
+export { LabelProps_ as LabelProps };
+export type LabelEvents = typeof __propDef.events;
+export type LabelSlots = typeof __propDef.slots;
+export default class Label extends SvelteComponentTyped<LabelProps_, LabelEvents, LabelSlots> {
+}

package/dist/UI/Loader.svelte

@@ -0,0 +1,30 @@
+<script>import { css } from '@stitches/core';
+import { generateClassNames } from '@indobaseinc/auth-ui-shared';
+const loaderDefaultStyles = css({
+    borderRadius: '50%',
+    width: '10em',
+    height: '10em',
+    margin: '60px auto',
+    fontSize: '10px',
+    position: 'relative',
+    textIndent: '-9999em',
+    borderTop: '1.1em solid rgba(255, 255, 255, 0.2)',
+    borderRight: '1.1em solid rgba(255, 255, 255, 0.2)',
+    borderBottom: '1.1em solid rgba(255, 255, 255, 0.2)',
+    borderLeft: '1.1em solid #ffffff',
+    '-webkit-transform': 'translateZ(0)',
+    '-ms-transform': 'translateZ(0)',
+    transform: 'translateZ(0)',
+    '-webkit-animation': 'load8 1.1s infinite linear',
+    animation: 'load8 1.1s infinite linear',
+    '&:after': {
+        borderRadius: '50%',
+        width: '10em',
+        height: '10em'
+    }
+});
+export let appearance = {};
+$: classNames = generateClassNames('loader', loaderDefaultStyles(), appearance);
+</script>
+
+<div {...$$restProps} style={appearance?.style?.loader} class={classNames.join(' ')} />

package/dist/UI/Loader.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: any;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LoaderProps = typeof __propDef.props;
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponentTyped<LoaderProps, LoaderEvents, LoaderSlots> {
+}
+export {};

package/dist/UI/Message.svelte

@@ -0,0 +1,34 @@
+<script>import { css } from '@stitches/core';
+import { generateClassNames } from '@indobaseinc/auth-ui-shared';
+const messageDefaultStyles = css({
+    fontFamily: '$bodyFontFamily',
+    fontSize: '$baseInputSize',
+    marginBottom: '$labelBottomMargin',
+    display: 'block',
+    textAlign: 'center',
+    borderRadius: '0.375rem',
+    padding: '1.5rem 1rem',
+    lineHeight: '1rem',
+    variants: {
+        color: {
+            default: {
+                color: '$messageText',
+                backgroundColor: '$messageBackground',
+                border: '1px solid $messageBorder'
+            },
+            danger: {
+                color: '$messageTextDanger',
+                backgroundColor: '$messageBackgroundDanger',
+                border: '1px solid $messageBorderDanger'
+            }
+        }
+    }
+});
+export let color = 'default';
+export let appearance = {};
+$: classNames = generateClassNames('message', messageDefaultStyles({ color }), appearance);
+</script>
+
+<span {...$$restProps} style={appearance?.style?.message} class={classNames.join(' ')}>
+	<slot />
+</span>

package/dist/UI/Message.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: any;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MessageProps = typeof __propDef.props;
+export type MessageEvents = typeof __propDef.events;
+export type MessageSlots = typeof __propDef.slots;
+export default class Message extends SvelteComponentTyped<MessageProps, MessageEvents, MessageSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './Auth/index';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './Auth/index.js';

package/dist/types.d.ts

@@ -0,0 +1,41 @@
+import type { BaseAppearance } from '@indobaseinc/auth-ui-shared';
+export interface Appearance extends BaseAppearance {
+    style?: {
+        anchor?: string;
+        button?: string;
+        container?: string;
+        divider?: string;
+        input?: string;
+        label?: string;
+        loader?: string;
+        message?: string;
+    };
+}
+export interface AuthSettings {
+    external?: {
+        apple?: boolean;
+        azure?: boolean;
+        bitbucket?: boolean;
+        discord?: boolean;
+        github?: boolean;
+        gitlab?: boolean;
+        keycloak?: boolean;
+        google?: boolean;
+        linkedin?: boolean;
+        facebook?: boolean;
+        notion?: boolean;
+        spotify?: boolean;
+        slack?: boolean;
+        workos?: boolean;
+        twitch?: boolean;
+        twitter?: boolean;
+        email?: boolean;
+        phone?: boolean;
+        saml?: boolean;
+        zoom?: boolean;
+    };
+    disable_signup?: boolean;
+    mailer_autoconfirm?: boolean;
+    phone_autoconfirm?: boolean;
+    sms_provider?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@indobaseinc/auth-ui-svelte",
+  "version": "1.0.0",
+  "description": "Pre-built Svelte auth UI components for Indobase",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "typesVersions": {
+    ">4.0": {
+      ".": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Indobase/Indobase.git",
+    "directory": "packages/indobase-auth-ui/packages/svelte"
+  },
+  "keywords": [
+    "Indobase",
+    "Auth",
+    "Svelte"
+  ],
+  "author": "Indobase",
+  "license": "MIT",
+  "homepage": "https://indobase.in",
+  "scripts": {
+    "build": "svelte-kit sync && svelte-package && pnpm fix:esm && find dist -name '._*' -delete && find dist -name '.\\!*' -delete",
+    "test": "playwright test",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write .",
+    "fix:esm": "fix-esm-import-path dist/index.js"
+  },
+  "dependencies": {
+    "@stitches/core": "^1.2.8",
+    "@indobaseinc/auth-ui-shared": "workspace:*",
+    "svelte": "^3.55.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.25.0",
+    "@indobaseinc/indobase-js": "^1.0.8",
+    "@indobaseinc/auth-js": "^1.0.8",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.15.2",
+    "@sveltejs/package": "^2.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "fix-esm-import-path": "^1.3.1",
+    "prettier": "^2.8.4",
+    "prettier-plugin-svelte": "^2.9.0",
+    "svelte-check": "^3.0.3",
+    "svelte-preprocess": "^5.0.1",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.5.2"
+  },
+  "peerDependencies": {
+    "@indobaseinc/indobase-js": "^1.0.8",
+    "@indobaseinc/auth-js": "^1.0.8"
+  }
+}