@insymetri/styleguide 0.1.0

package/dist/style/tailwind/typography.d.ts

@@ -0,0 +1,100 @@
+export declare const fontSize: {
+    readonly h1: readonly ["2.4rem", {
+        readonly lineHeight: "3.2rem";
+        readonly fontWeight: "600";
+    }];
+    readonly h2: readonly ["2.0rem", {
+        readonly lineHeight: "2.8rem";
+        readonly fontWeight: "600";
+    }];
+    readonly h3: readonly ["1.8rem", {
+        readonly lineHeight: "2.4rem";
+        readonly fontWeight: "600";
+    }];
+    readonly h4: readonly ["1.6rem", {
+        readonly lineHeight: "2.0rem";
+        readonly fontWeight: "600";
+    }];
+    readonly h5: readonly ["1.4rem", {
+        readonly lineHeight: "2.0rem";
+        readonly fontWeight: "600";
+    }];
+    readonly h6: readonly ["1.3rem", {
+        readonly lineHeight: "1.6rem";
+        readonly fontWeight: "600";
+    }];
+    readonly m1: readonly ["2.0rem", {
+        readonly lineHeight: "2.8rem";
+        readonly fontWeight: "300";
+    }];
+    readonly m2: readonly ["1.6rem", {
+        readonly lineHeight: "2.4rem";
+        readonly fontWeight: "300";
+    }];
+    readonly m3: readonly ["1.4rem", {
+        readonly lineHeight: "2.0rem";
+        readonly fontWeight: "300";
+    }];
+    readonly 'm3-emphasis': readonly ["1.3rem", {
+        readonly lineHeight: "2.0rem";
+        readonly fontWeight: "500";
+    }];
+    readonly 'm3-small': readonly ["1.3rem", {
+        readonly lineHeight: "2.0rem";
+        readonly fontWeight: "400";
+    }];
+    readonly large: readonly ["1.6rem", {
+        readonly lineHeight: "2.0rem";
+        readonly fontWeight: "400";
+    }];
+    readonly 'large-emphasis': readonly ["1.6rem", {
+        readonly lineHeight: "2.0rem";
+        readonly fontWeight: "500";
+    }];
+    readonly default: readonly ["1.4rem", {
+        readonly lineHeight: "1.6rem";
+        readonly fontWeight: "400";
+    }];
+    readonly emphasis: readonly ["1.4rem", {
+        readonly lineHeight: "1.6rem";
+        readonly fontWeight: "500";
+    }];
+    readonly strong: readonly ["1.4rem", {
+        readonly lineHeight: "1.6rem";
+        readonly fontWeight: "600";
+    }];
+    readonly small: readonly ["1.3rem", {
+        readonly lineHeight: "1.6rem";
+        readonly fontWeight: "400";
+    }];
+    readonly 'small-emphasis': readonly ["1.3rem", {
+        readonly lineHeight: "1.6rem";
+        readonly fontWeight: "500";
+    }];
+    readonly 'small-strong': readonly ["1.3rem", {
+        readonly lineHeight: "1.6rem";
+        readonly fontWeight: "600";
+    }];
+    readonly tiny: readonly ["1.1rem", {
+        readonly lineHeight: "1.2rem";
+        readonly fontWeight: "400";
+    }];
+    readonly 'tiny-emphasis': readonly ["1.1rem", {
+        readonly lineHeight: "1.2rem";
+        readonly fontWeight: "500";
+    }];
+    readonly 'tiny-strong': readonly ["1.1rem", {
+        readonly lineHeight: "1.2rem";
+        readonly fontWeight: "600";
+    }];
+    readonly numeric: readonly ["1.4rem", {
+        readonly lineHeight: "1.6rem";
+        readonly fontWeight: "400";
+    }];
+    readonly 'display-lg': readonly ["4.0rem", {
+        readonly lineHeight: "1.1";
+    }];
+    readonly 'display-md': readonly ["3.0rem", {
+        readonly lineHeight: "1.2";
+    }];
+};

package/dist/style/tailwind/typography.js

@@ -0,0 +1,39 @@
+// Semantic typography scale (matches TOTM conventions).
+// With 62.5% base (1rem = 10px), rem values read as pixels: 2.4rem = 24px.
+// TW4's extended fontSize format bundles size + lineHeight + fontWeight
+// into a single class — e.g. `text-h1` sets all three properties.
+export const fontSize = {
+    // Headings — semibold (600)
+    h1: ['2.4rem', { lineHeight: '3.2rem', fontWeight: '600' }], // 24px
+    h2: ['2.0rem', { lineHeight: '2.8rem', fontWeight: '600' }], // 20px
+    h3: ['1.8rem', { lineHeight: '2.4rem', fontWeight: '600' }], // 18px
+    h4: ['1.6rem', { lineHeight: '2.0rem', fontWeight: '600' }], // 16px
+    h5: ['1.4rem', { lineHeight: '2.0rem', fontWeight: '600' }], // 14px
+    h6: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '600' }], // 13px
+    // Medium — light weight display text (300)
+    m1: ['2.0rem', { lineHeight: '2.8rem', fontWeight: '300' }], // 20px
+    m2: ['1.6rem', { lineHeight: '2.4rem', fontWeight: '300' }], // 16px
+    m3: ['1.4rem', { lineHeight: '2.0rem', fontWeight: '300' }], // 14px
+    'm3-emphasis': ['1.3rem', { lineHeight: '2.0rem', fontWeight: '500' }], // 13px
+    'm3-small': ['1.3rem', { lineHeight: '2.0rem', fontWeight: '400' }], // 13px
+    // Body — large (16px)
+    large: ['1.6rem', { lineHeight: '2.0rem', fontWeight: '400' }],
+    'large-emphasis': ['1.6rem', { lineHeight: '2.0rem', fontWeight: '500' }],
+    // Body — default (14px)
+    default: ['1.4rem', { lineHeight: '1.6rem', fontWeight: '400' }],
+    emphasis: ['1.4rem', { lineHeight: '1.6rem', fontWeight: '500' }],
+    strong: ['1.4rem', { lineHeight: '1.6rem', fontWeight: '600' }],
+    // Body — small (13px)
+    small: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '400' }],
+    'small-emphasis': ['1.3rem', { lineHeight: '1.6rem', fontWeight: '500' }],
+    'small-strong': ['1.3rem', { lineHeight: '1.6rem', fontWeight: '600' }],
+    // Body — tiny (11px)
+    tiny: ['1.1rem', { lineHeight: '1.2rem', fontWeight: '400' }],
+    'tiny-emphasis': ['1.1rem', { lineHeight: '1.2rem', fontWeight: '500' }],
+    'tiny-strong': ['1.1rem', { lineHeight: '1.2rem', fontWeight: '600' }],
+    // Special — numeric uses monospace font (pair with font-mono class)
+    numeric: ['1.4rem', { lineHeight: '1.6rem', fontWeight: '400' }], // 14px
+    // Display — hero/feature sizes (no bundled weight)
+    'display-lg': ['4.0rem', { lineHeight: '1.1' }], // 40px
+    'display-md': ['3.0rem', { lineHeight: '1.2' }], // 30px
+};

package/dist/style/tailwind/z-index.d.ts

@@ -0,0 +1 @@
+export declare const zIndex: Record<string, string>;

package/dist/style/tailwind/z-index.js

@@ -0,0 +1,7 @@
+// Controlled z-index scale (0-19) — matches TOTM pattern
+// Prevents z-index wars with arbitrary values like z-[9999]
+const scale = Array.from({ length: 20 }, (_, i) => [String(i), String(i)]);
+export const zIndex = {
+    ...Object.fromEntries(scale),
+    auto: 'auto',
+};

package/dist/toast.d.ts

@@ -0,0 +1,16 @@
+export declare const toast: {
+    success(message: string, options?: {
+        action?: {
+            label: string;
+            onClick: () => void;
+        };
+    }): string | number;
+    error(message?: string): string | number;
+    info(message: string): string | number;
+    warning(message: string): string | number;
+    promise<T>(promise: Promise<T>, messages: {
+        loading: string;
+        success: string;
+        error?: string;
+    }): string | number | undefined;
+};

package/dist/toast.js

@@ -0,0 +1,24 @@
+import { toast as sonnerToast } from 'svelte-sonner';
+export const toast = {
+    success(message, options) {
+        return sonnerToast.success(message, {
+            action: options?.action,
+        });
+    },
+    error(message) {
+        return sonnerToast.error(message || 'Something went wrong');
+    },
+    info(message) {
+        return sonnerToast.info(message);
+    },
+    warning(message) {
+        return sonnerToast.warning(message);
+    },
+    promise(promise, messages) {
+        return sonnerToast.promise(promise, {
+            loading: messages.loading,
+            success: messages.success,
+            error: messages.error || 'Something went wrong',
+        });
+    },
+};

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+/** Join class names, filtering out falsy values. */
+export declare function cn(...classes: (string | false | null | undefined)[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,4 @@
+/** Join class names, filtering out falsy values. */
+export function cn(...classes) {
+    return classes.filter(Boolean).join(' ');
+}

package/package.json

@@ -0,0 +1,79 @@
+{
+	"name": "@insymetri/styleguide",
+	"version": "0.1.0",
+	"description": "Insymetri shared UI component library built with Svelte 5",
+	"type": "module",
+	"scripts": {
+		"build": "svelte-package -i src/lib -o dist",
+		"prepublishOnly": "npm run build",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"changeset": "changeset",
+		"version": "changeset version",
+		"release": "npm run build && changeset publish"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./style": {
+			"types": "./dist/style/index.d.ts",
+			"default": "./dist/style/index.js"
+		},
+		"./style/*.css": "./dist/style/*.css",
+		"./icons": {
+			"types": "./dist/icons.d.ts",
+			"svelte": "./dist/icons.js",
+			"default": "./dist/icons.js"
+		},
+		"./toast": {
+			"types": "./dist/toast.d.ts",
+			"default": "./dist/toast.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.stories.*"
+	],
+	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"tailwindcss": "^4.0.0",
+		"unplugin-icons": "^22.0.0",
+		"@iconify-json/ph": "*"
+	},
+	"peerDependenciesMeta": {
+		"tailwindcss": {
+			"optional": true
+		}
+	},
+	"dependencies": {
+		"@internationalized/date": "^3.10.0",
+		"bits-ui": "^2.11.4",
+		"svelte-sonner": "^1.0.6"
+	},
+	"devDependencies": {
+		"@storybook/addon-docs": "^10.2.10",
+		"@storybook/svelte-vite": "^10.2.10",
+		"@sveltejs/package": "^2.3.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"storybook": "^10.2.10",
+		"svelte": "^5.0.0",
+		"typescript": "^5.0.0",
+		"tailwindcss": "^4.2.1",
+		"unplugin-icons": "^22.5.0",
+		"@iconify-json/ph": "^1.2.0",
+		"@changesets/cli": "^2.27.0",
+		"@changesets/changelog-github": "^0.5.0"
+	},
+	"license": "UNLICENSED",
+	"private": false,
+	"repository": {
+		"type": "git",
+		"url": ""
+	}
+}