@stubber/ui 1.0.0

package/dist/decorators/DecoratorTransparentButton.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  DecoratorTransparentButtonProps */
+/** @typedef {typeof __propDef.events}  DecoratorTransparentButtonEvents */
+/** @typedef {typeof __propDef.slots}  DecoratorTransparentButtonSlots */
+export default class DecoratorTransparentButton extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type DecoratorTransparentButtonProps = typeof __propDef.props;
+export type DecoratorTransparentButtonEvents = typeof __propDef.events;
+export type DecoratorTransparentButtonSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/decorators/FixedWidthDecorator.svelte

@@ -0,0 +1,3 @@
+<div class="w-[400px]">
+  <slot />
+</div>

package/dist/decorators/FixedWidthDecorator.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  FixedWidthDecoratorProps */
+/** @typedef {typeof __propDef.events}  FixedWidthDecoratorEvents */
+/** @typedef {typeof __propDef.slots}  FixedWidthDecoratorSlots */
+export default class FixedWidthDecorator extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type FixedWidthDecoratorProps = typeof __propDef.props;
+export type FixedWidthDecoratorEvents = typeof __propDef.events;
+export type FixedWidthDecoratorSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export { default as PrimaryButton } from "./components/PrimaryButton.svelte";
+export { default as IconButton } from "./components/IconButton.svelte";
+export { default as Chip } from "./components/Chip.svelte";
+export { default as HorizontalTabs } from "./components/HorizontalTabs.svelte";
+export { default as ProfileMenu } from "./components/ProfileMenu.svelte";
+export { default as Breadcrumbs } from "./components/Breadcrumbs.svelte";
+export { default as OrgSwitcher } from "./components/OrgSwitcher.svelte";
+export { default as Checkbox } from "./components/fields/Checkbox.svelte";
+export { default as Radio } from "./components/fields/Radio.svelte";
+export { default as SideNavItem } from "./components/SideNav/SideNavItem.svelte";
+export { default as SideNavTitle } from "./components/SideNav/SideNavTitle.svelte";
+export { default as Modal } from "./components/Modal.svelte";
+export { default as Alert } from "./components/Alert.svelte";
+export { default as StandardInput } from "./components/fields/StandardInput.svelte";
+export { default as Button } from "./atoms/Button.svelte";
+export { default as SpinnerMessage } from "./atoms/SpinnerMessage.svelte";
+export { default as TextOnlyButton } from "./atoms/TextOnlyButton.svelte";
+export { default as TextInput } from "./components/Inputs/TextInput.svelte";
+export { default as PasswordInput } from "./components/Inputs/PasswordInput.svelte";
+export { default as PasswordStrengthValidator } from "./components/PasswordStrengthValidator.svelte";
+export { default as Tooltip } from "./components/Tooltip.svelte";

package/dist/index.js

@@ -0,0 +1,29 @@
+// Reexport your entry components here
+
+export { default as PrimaryButton } from "./components/PrimaryButton.svelte";
+export { default as IconButton } from "./components/IconButton.svelte";
+export { default as Chip } from "./components/Chip.svelte";
+export { default as HorizontalTabs } from "./components/HorizontalTabs.svelte";
+export { default as ProfileMenu } from "./components/ProfileMenu.svelte";
+export { default as Breadcrumbs } from "./components/Breadcrumbs.svelte";
+export { default as OrgSwitcher } from "./components/OrgSwitcher.svelte";
+export { default as Checkbox } from "./components/fields/Checkbox.svelte";
+export { default as Radio } from "./components/fields/Radio.svelte";
+export { default as SideNavItem } from "./components/SideNav/SideNavItem.svelte";
+export { default as SideNavTitle } from "./components/SideNav/SideNavTitle.svelte";
+export { default as Modal } from "./components/Modal.svelte";
+export { default as Alert } from "./components/Alert.svelte";
+export { default as StandardInput } from "./components/fields/StandardInput.svelte";
+//icons
+
+export { default as DocsIcon } from "./assets/docs-icon.svg";
+
+//legacy components
+export { default as Button } from "./atoms/Button.svelte";
+export { default as SpinnerMessage } from "./atoms/SpinnerMessage.svelte";
+export { default as TextOnlyButton } from "./atoms/TextOnlyButton.svelte";
+
+export { default as TextInput } from "./components/Inputs/TextInput.svelte";
+export { default as PasswordInput } from "./components/Inputs/PasswordInput.svelte";
+export { default as PasswordStrengthValidator } from "./components/PasswordStrengthValidator.svelte";
+export { default as Tooltip } from "./components/Tooltip.svelte";

package/dist/utils/actions.d.ts

@@ -0,0 +1,4 @@
+export function clickOutside(element: any, callbackFunction: any): {
+    update(newCallbackFunction: any): void;
+    destroy(): void;
+};

package/dist/utils/actions.js

@@ -0,0 +1,20 @@
+// these are svelte actions
+// not stubber actions
+
+export function clickOutside(element, callbackFunction) {
+  function onClick(event) {
+    if (!element.contains(event.target)) {
+      callbackFunction();
+    }
+  }
+  document.body.addEventListener("click", onClick);
+
+  return {
+    update(newCallbackFunction) {
+      callbackFunction = newCallbackFunction;
+    },
+    destroy() {
+      document.body.removeEventListener("click", onClick);
+    },
+  };
+}

package/dist/utils/shadcn-utils.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+import type { ClassValue } from "clsx";
+import type { TransitionConfig } from "svelte/transition";
+export declare function cn(...inputs: ClassValue[]): string;
+type FlyAndScaleParams = {
+    y?: number;
+    x?: number;
+    start?: number;
+    duration?: number;
+};
+export declare function styleToString(style: Record<string, number | string | undefined>): string;
+export declare function flyAndScale(node: Element, params?: FlyAndScaleParams): TransitionConfig;
+export {};

package/dist/utils/shadcn-utils.js

@@ -0,0 +1,119 @@
+import { clsx } from "clsx";
+import { cubicOut } from "svelte/easing";
+import { twMerge } from "tailwind-merge";
+// import { error } from "@sveltejs/kit";
+// import { persisted } from "svelte-persisted-store";
+// import type { DocResolver } from "../types/docs.js";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export function styleToString(style) {
+    return Object.keys(style).reduce((str, key) => {
+        if (style[key] === undefined)
+            return str;
+        return `${str}${key}:${style[key]};`;
+    }, "");
+}
+export function flyAndScale(node, params = { y: -8, x: 0, start: 0.95, duration: 150 }) {
+    const style = getComputedStyle(node);
+    const transform = style.transform === "none" ? "" : style.transform;
+    const scaleConversion = (valueA, scaleA, scaleB) => {
+        const [minA, maxA] = scaleA;
+        const [minB, maxB] = scaleB;
+        const percentage = (valueA - minA) / (maxA - minA);
+        const valueB = percentage * (maxB - minB) + minB;
+        return valueB;
+    };
+    return {
+        duration: params.duration ?? 200,
+        delay: 0,
+        css: (t) => {
+            const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+            const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+            const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+            return styleToString({
+                transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+                opacity: t,
+            });
+        },
+        easing: cubicOut,
+    };
+}
+// type Modules = Record<string, () => Promise<unknown>>;
+// function findMatch(slug: string, modules: Modules) {
+// 	let match: { path?: string; resolver?: DocResolver } = {};
+// 	for (const [path, resolver] of Object.entries(modules)) {
+// 		if (slugFromPath(path) === slug) {
+// 			match = { path, resolver: resolver as unknown as DocResolver };
+// 			break;
+// 		}
+// 	}
+// 	if (!match.path) {
+// 		match = getIndexDocIfExists(slug, modules);
+// 	}
+// 	return match;
+// }
+// function getIndexDocIfExists(slug: string, modules: Modules) {
+// 	let match: { path?: string; resolver?: DocResolver } = {};
+// 	for (const [path, resolver] of Object.entries(modules)) {
+// 		if (path.includes(`/${slug}/index.md`)) {
+// 			match = { path, resolver: resolver as unknown as DocResolver };
+// 			break;
+// 		}
+// 	}
+// 	return match;
+// }
+// export async function getDoc(slug: string) {
+// 	const modules = import.meta.glob(`/src/content/**/*.md`);
+// 	const match = findMatch(slug, modules);
+// 	const doc = await match?.resolver?.();
+// 	if (!doc || !doc.metadata) {
+// 		error(404);
+// 	}
+// 	return {
+// 		component: doc.default,
+// 		metadata: doc.metadata,
+// 		title: doc.metadata.title,
+// 	};
+// }
+// export function slugFromPathname(pathname: string) {
+// 	return pathname.split("/").pop() ?? "";
+// }
+// const liftMode = persisted<string[]>("lift-mode", []);
+// export function getLiftMode(name: string) {
+// 	function toggleLiftMode(name: string) {
+// 		liftMode.update((prev) => {
+// 			return prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name];
+// 		});
+// 	}
+// 	const isLiftMode = derived(liftMode, ($configStore) => $configStore.includes(name));
+// 	return {
+// 		isLiftMode,
+// 		toggleLiftMode,
+// 	};
+// }
+// export const packageManagers = ["pnpm", "bun", "yarn", "npm"] as const;
+// export type PackageManager = (typeof packageManagers)[number];
+// export const selectedPackageManager = persisted<PackageManager>("package-manager", "npm");
+// const packageManagerToScriptCmd: Record<PackageManager, string> = {
+// 	npm: "npx",
+// 	yarn: "yarn dlx",
+// 	pnpm: "pnpm dlx",
+// 	bun: "bunx",
+// };
+// export function getPackageManagerScriptCmd(pm: PackageManager): string {
+// 	return packageManagerToScriptCmd[pm];
+// }
+// const packageManagerToInstallCmd: Record<PackageManager, string> = {
+// 	npm: "install",
+// 	yarn: "add",
+// 	pnpm: "add",
+// 	bun: "add",
+// };
+// export function getPackageManagerInstallCmd(pm: PackageManager): string {
+// 	return packageManagerToInstallCmd[pm];
+// }
+// // eslint-disable-next-line ts/no-explicit-any
+// export function isPackageManager(value: any): value is PackageManager {
+// 	return packageManagers.includes(value);
+// }

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@stubber/ui",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build --output-dir build/storybook-static",
+    "format": "prettier --write '{public,src}/**/*.{css,html,js,svelte}'"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^4.2.19"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.0-rc.9",
+    "@storybook/addon-interactions": "^7.0.0-rc.9",
+    "@storybook/addon-links": "^7.0.0-rc.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-svelte-csf": "^4.2.0",
+    "@storybook/blocks": "^7.0.0-rc.9",
+    "@storybook/svelte": "^7.0.0-rc.9",
+    "@storybook/sveltekit": "^7.0.0-rc.9",
+    "@storybook/testing-library": "^0.0.14-next.1",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/package": "^2.0.0",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.7",
+    "prettier-plugin-svelte": "^2.10.0",
+    "publint": "^0.1.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.0-rc.9",
+    "svelte": "^4.2.19",
+    "svelte-check": "^3.0.1",
+    "tailwindcss": "^3.3.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.2.0"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "bits-ui": "^0.21.16",
+    "clsx": "^2.1.1",
+    "svelte-popperjs": "^1.3.2",
+    "svelte-select": "^5.6.0",
+    "svelte-sonner": "^0.3.28",
+    "tailwind-variants": "^0.3.0",
+    "tippy.js": "^6.3.7"
+  }
+}