svelte-comp 1.3.3 → 1.3.6

package/dist/styles.css

@@ -1,232 +1,234 @@
-/* src/styles.css */
-@source "../node_modules/svelte-comp/**/*";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme {
-  /* COLORS — TEXT */
-  --color-text-default: oklch(15% 0 0deg);
-  --color-text-muted: oklch(60% 0 0deg);
-  --color-text-danger: oklch(92% 0.05 25deg);
-  --color-text-success: oklch(92% 0.05 150deg);
-  --color-text-warning: oklch(95% 0.05 90deg);
-  --color-text-link: oklch(35% 0.3 250deg);
-  --color-text-red: oklch(50% 0.25 30deg);
-
-  /* COLORS — BG */
-  --color-bg-page: oklch(98% 0 0deg);
-  --color-bg-surface: oklch(100% 0 0deg);
-  --color-bg-primary: oklch(62.3% 0.214 259.8deg);
-  --color-primary: var(--color-bg-primary);
-  --color-bg-secondary: oklch(80% 0 0deg);
-  --color-bg-danger: oklch(60% 0.25 30deg);
-  --color-bg-success: oklch(55% 0.2 150deg);
-  --color-bg-warning: oklch(75% 0.2 70deg);
-  --color-bg-muted: oklch(90% 0 0deg);
-
-  /* INTERACTION STATES */
-  --color-bg-hover: oklch(94% 0 0deg);
-  --color-bg-active: oklch(88% 0 0deg);
-
-  /* BORDER */
-  --border-color-default: oklch(85% 0 0deg);
-  --border-color-primary: oklch(50% 0.19 259.8deg);
-  --border-color-strong: oklch(75% 0 0deg);
-  --border-color-focus: oklch(68.7% 0.14 237.5deg);
-
-  /* SHADOW */
-  --shadow-color: oklch(0% 0 0deg / 0.15);
-
-  /* SPACING */
-  --spacing-xs: 0.25rem;
-  --spacing-sm: 0.5rem;
-  --spacing-md: 1rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-
-  /* TYPOGRAPHY */
-  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
-  --font-mono: "Fira Code", "Consolas", "Monaco", monospace;
-
-  /* FONT WEIGHTS */
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* TEXT SIZES */
-  --text-xs: 0.75rem;
-  --text-sm: 0.875rem;
-  --text-md: 1rem;
-  --text-lg: 1.125rem;
-  --text-xl: 1.25rem;
-
-  /* LINE HEIGHT & LETTER SPACING */
-  --line-height-tight: 1.1;
-  --line-height-normal: 1.4;
-  --line-height-relaxed: 1.6;
-  --letter-spacing-tight: -0.01em;
-  --letter-spacing-normal: 0;
-  --letter-spacing-wide: 0.02em;
-
-  /* RADIUS */
-  --radius-sm: 0.125rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-full: 9999px;
-
-  /* TRANSITIONS */
-  --transition-fast: 150ms;
-  --transition-normal: 300ms;
-  --transition-slow: 500ms;
-  --timing-default: ease-in-out;
-
-  /* OPACITY */
-  --opacity-disabled: 0.5;
-  --opacity-hover: 0.9;
-  --opacity-overlay: 0.7;
-
-  /* Z-INDEX */
-  --z-base: 0;
-  --z-dropdown: 10;
-  --z-overlay: 50;
-  --z-modal: 100;
-  --z-toast: 200;
-}
-
-.dark {
-  /* COLORS — TEXT */
-  --color-text-default: oklch(98% 0 0deg);
-  --color-text-muted: oklch(60% 0 0deg);
-  --color-text-danger: oklch(98% 0.02 25deg);
-  --color-text-success: oklch(92% 0.05 150deg);
-  --color-text-warning: oklch(95% 0.05 90deg);
-  --color-text-link: oklch(65% 0.3 250deg);
-  --color-text-red: oklch(50% 0.25 30deg);
-
-  /* COLORS — BG */
-  --color-bg-page: oklch(15% 0 0deg);
-  --color-bg-surface: oklch(26% 0 0deg);
-  --color-bg-primary: oklch(42% 0.19 259.8deg);
-  --color-primary: var(--color-bg-primary);
-  --color-bg-secondary: oklch(45% 0 0deg);
-  --color-bg-danger: oklch(50% 0.25 30deg);
-  --color-bg-success: oklch(45% 0.2 150deg);
-  --color-bg-warning: oklch(65% 0.2 70deg);
-  --color-bg-muted: oklch(30% 0 0deg);
-
-  /* INTERACTION STATES */
-  --color-bg-hover: oklch(25% 0 0deg);
-  --color-bg-active: oklch(18% 0 0deg);
-
-  /* BORDER */
-  --border-color-default: oklch(35% 0 0deg);
-  --border-color-primary: oklch(50% 0.17 259.8deg);
-  --border-color-strong: oklch(45% 0 0deg);
-  --border-color-focus: oklch(68.7% 0.14 237.5deg);
-
-  /* SHADOW */
-  --shadow-color: oklch(0% 0 0deg / 0.6);
-
-  /* OPACITY */
-  --opacity-disabled: 0.4;
-  --opacity-hover: 0.85;
-  --opacity-overlay: 0.6;
-}
-
-/* SCROLLBARS */
-::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-bg-secondary);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: oklch(from var(--color-bg-secondary) l c h / 0.8);
-}
-
-@supports (scrollbar-width: thin) {
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-bg-secondary) transparent;
-  }
-
-  .dark * {
-    scrollbar-color: oklch(from var(--color-bg-secondary) l c h / 0.7)
-      transparent;
-  }
-}
-
-.dark ::-webkit-scrollbar-thumb {
-  background: oklch(from var(--color-bg-secondary) l c h / 0.7);
-}
-
-/* ----------------------------- */
-/* 🎨 Primary color palettes     */
-/* ----------------------------- */
-
-[data-primary="default"] {
-  --color-primary: oklch(62.3% 0.214 259.8deg);
-  --color-bg-primary: var(--color-primary);
-  --border-color-primary: var(--color-primary);
-  --border-color-focus: var(--color-primary);
-}
-
-[data-primary="cyan"] {
-  --color-primary: oklch(86.5% 0.127 207.078);
-  --color-bg-primary: var(--color-primary);
-  --border-color-primary: var(--color-primary);
-  --border-color-focus: var(--color-primary);
-}
-
-[data-primary="red"] {
-  --color-primary: oklch(58% 0.24 30deg);
-  --color-bg-primary: var(--color-primary);
-  --border-color-primary: var(--color-primary);
-  --border-color-focus: var(--color-primary);
-}
-
-[data-primary="green"] {
-  --color-primary: oklch(65% 0.22 140deg);
-  --color-bg-primary: var(--color-primary);
-  --border-color-primary: var(--color-primary);
-  --border-color-focus: var(--color-primary);
-}
-
-[data-primary="yellow"] {
-  --color-primary: oklch(75% 0.18 90deg);
-  --color-bg-primary: var(--color-primary);
-  --border-color-primary: var(--color-primary);
-  --border-color-focus: var(--color-primary);
-}
-
-[data-primary="pink"] {
-  --color-primary: oklch(70% 0.25 350deg);
-  --color-bg-primary: var(--color-primary);
-  --border-color-primary: var(--color-primary);
-  --border-color-focus: var(--color-primary);
-}
-
-[data-primary="orange"] {
-  --color-primary: oklch(72% 0.22 60deg);
-  --color-bg-primary: var(--color-primary);
-  --border-color-primary: var(--color-primary);
-  --border-color-focus: var(--color-primary);
-}
-
-[data-primary="purple"] {
-  --color-primary: oklch(55% 0.22 290deg);
-  --color-bg-primary: var(--color-primary);
-  --border-color-primary: var(--color-primary);
-  --border-color-focus: var(--color-primary);
-}
+/* src/styles.css */
+@source "../node_modules/svelte-comp/**/*";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* COLORS — TEXT */
+  --color-text-default: oklch(15% 0 0deg);
+  --color-text-muted: oklch(60% 0 0deg);
+  --color-text-danger: oklch(92% 0.05 25deg);
+  --color-text-success: oklch(92% 0.05 150deg);
+  --color-text-warning: oklch(95% 0.05 90deg);
+  --color-text-link: oklch(35% 0.3 250deg);
+  --color-text-red: oklch(50% 0.25 30deg);
+  --color-text-inverse: oklch(100% 0 0deg);
+
+  /* COLORS — BG */
+  --color-bg-page: oklch(98% 0 0deg);
+  --color-bg-surface: oklch(100% 0 0deg);
+  --color-bg-primary: oklch(62.3% 0.214 259.8deg);
+  --color-primary: var(--color-bg-primary);
+  --color-bg-secondary: oklch(80% 0 0deg);
+  --color-bg-danger: oklch(60% 0.25 30deg);
+  --color-bg-success: oklch(55% 0.2 150deg);
+  --color-bg-warning: oklch(75% 0.2 70deg);
+  --color-bg-muted: oklch(90% 0 0deg);
+
+  /* INTERACTION STATES */
+  --color-bg-hover: oklch(94% 0 0deg);
+  --color-bg-active: oklch(88% 0 0deg);
+
+  /* BORDER */
+  --border-color-default: oklch(85% 0 0deg);
+  --border-color-primary: oklch(50% 0.19 259.8deg);
+  --border-color-strong: oklch(75% 0 0deg);
+  --border-color-focus: oklch(68.7% 0.14 237.5deg);
+
+  /* SHADOW */
+  --shadow-color: oklch(0% 0 0deg / 0.15);
+
+  /* SPACING */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+
+  /* TYPOGRAPHY */
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: "Fira Code", "Consolas", "Monaco", monospace;
+
+  /* FONT WEIGHTS */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* TEXT SIZES */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-md: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+
+  /* LINE HEIGHT & LETTER SPACING */
+  --line-height-tight: 1.1;
+  --line-height-normal: 1.4;
+  --line-height-relaxed: 1.6;
+  --letter-spacing-tight: -0.01em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.02em;
+
+  /* RADIUS */
+  --radius-sm: 0.125rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+
+  /* TRANSITIONS */
+  --transition-fast: 150ms;
+  --transition-normal: 300ms;
+  --transition-slow: 500ms;
+  --timing-default: ease-in-out;
+
+  /* OPACITY */
+  --opacity-disabled: 0.5;
+  --opacity-hover: 0.9;
+  --opacity-overlay: 0.7;
+
+  /* Z-INDEX */
+  --z-base: 0;
+  --z-dropdown: 10;
+  --z-overlay: 50;
+  --z-modal: 100;
+  --z-toast: 200;
+}
+
+.dark {
+  /* COLORS — TEXT */
+  --color-text-default: oklch(98% 0 0deg);
+  --color-text-muted: oklch(60% 0 0deg);
+  --color-text-danger: oklch(98% 0.02 25deg);
+  --color-text-success: oklch(92% 0.05 150deg);
+  --color-text-warning: oklch(95% 0.05 90deg);
+  --color-text-link: oklch(65% 0.3 250deg);
+  --color-text-red: oklch(50% 0.25 30deg);
+  --color-text-inverse: oklch(100% 0 0deg);										   
+
+  /* COLORS — BG */
+  --color-bg-page: oklch(15% 0 0deg);
+  --color-bg-surface: oklch(26% 0 0deg);
+  --color-bg-primary: oklch(42% 0.19 259.8deg);
+  --color-primary: var(--color-bg-primary);
+  --color-bg-secondary: oklch(45% 0 0deg);
+  --color-bg-danger: oklch(50% 0.25 30deg);
+  --color-bg-success: oklch(45% 0.2 150deg);
+  --color-bg-warning: oklch(65% 0.2 70deg);
+  --color-bg-muted: oklch(30% 0 0deg);
+
+  /* INTERACTION STATES */
+  --color-bg-hover: oklch(25% 0 0deg);
+  --color-bg-active: oklch(18% 0 0deg);
+
+  /* BORDER */
+  --border-color-default: oklch(35% 0 0deg);
+  --border-color-primary: oklch(50% 0.17 259.8deg);
+  --border-color-strong: oklch(45% 0 0deg);
+  --border-color-focus: oklch(68.7% 0.14 237.5deg);
+
+  /* SHADOW */
+  --shadow-color: oklch(0% 0 0deg / 0.6);
+
+  /* OPACITY */
+  --opacity-disabled: 0.4;
+  --opacity-hover: 0.85;
+  --opacity-overlay: 0.6;
+}
+
+/* SCROLLBARS */
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-bg-secondary);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(from var(--color-bg-secondary) l c h / 0.8);
+}
+
+@supports (scrollbar-width: thin) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-bg-secondary) transparent;
+  }
+
+  .dark * {
+    scrollbar-color: oklch(from var(--color-bg-secondary) l c h / 0.7)
+      transparent;
+  }
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: oklch(from var(--color-bg-secondary) l c h / 0.7);
+}
+
+/* ----------------------------- */
+/* 🎨 Primary color palettes     */
+/* ----------------------------- */
+
+[data-primary="default"] {
+  --color-primary: oklch(62.3% 0.214 259.8deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="cyan"] {
+  --color-primary: oklch(86.5% 0.127 207.078);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="red"] {
+  --color-primary: oklch(58% 0.24 30deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="green"] {
+  --color-primary: oklch(65% 0.22 140deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="yellow"] {
+  --color-primary: oklch(75% 0.18 90deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="pink"] {
+  --color-primary: oklch(70% 0.25 350deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="orange"] {
+  --color-primary: oklch(72% 0.22 60deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="purple"] {
+  --color-primary: oklch(55% 0.22 290deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}

package/dist/utils/index.js

@@ -1,4 +1,4 @@
-// src/lib/utils/index.ts
+// src/utils/index.ts
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -75,11 +75,13 @@ export function times(count, fn) {
 //                             FORMAT FILE SIZE
 // -------------------------------------------------------------------------------
 export function formatFileSize(bytes) {
+    if (!Number.isFinite(bytes) || bytes < 0)
+        return "0 Bytes";
     if (bytes === 0)
         return "0 Bytes";
     var k = 1024;
     var sizes = ["Bytes", "KB", "MB", "GB"];
-    var i = Math.floor(Math.log(bytes) / Math.log(k));
+    var i = Math.min(sizes.length - 1, Math.floor(Math.log(bytes) / Math.log(k)));
     return "".concat(parseFloat((bytes / Math.pow(k, i)).toFixed(2)), " ").concat(sizes[i]);
 }
 // -------------------------------------------------------------------------------
@@ -116,8 +118,17 @@ export function throttle(fn, limit) {
 // -------------------------------------------------------------------------------
 //                              STORAGE HELPERS
 // -------------------------------------------------------------------------------
-var hasBrowserStorage = typeof window !== "undefined" && !!window.localStorage;
-var getLocalStorage = function () { return (hasBrowserStorage ? window.localStorage : null); };
+var getLocalStorage = function () {
+    var _a;
+    if (typeof window === "undefined")
+        return null;
+    try {
+        return (_a = window.localStorage) !== null && _a !== void 0 ? _a : null;
+    }
+    catch (_b) {
+        return null;
+    }
+};
 export var storage = {
     get: function (key, defaultValue) {
         var ls = getLocalStorage();

package/package.json

@@ -1,52 +1,52 @@
-{
-  "name": "svelte-comp",
-  "version": "1.3.3",
-  "license": "MIT",
-  "description": "A comprehensive component library built on Svelte 5 (runes) with design tokens (tailwind), accessibility focus, and TypeScript support",
-  "devDependencies": {
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@tailwindcss/vite": "^4.1.17",
-    "@tsconfig/svelte": "^5.0.4",
-    "@types/node": "^24.5.2",
-    "@types/prismjs": "^1.26.5",
-    "prettier": "^3.7.4",
-    "prettier-plugin-svelte": "^3.4.0",
-    "prismjs": "^1.30.0",
-    "svelte": "^5.39.6",
-    "svelte-check": "^4.3.4",
-    "tailwindcss": "^4.1.17",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.1"
-  },
-  "exports": {
-    ".": {
-      "svelte": "./dist/lib/index.js",
-      "types": "./dist/lib/index.d.ts"
-    },
-    "./styles.css": "./dist/styles.css"
-  },
-  "files": [
-    "dist",
-    "dist/styles.css"
-  ],
-  "keywords": [
-    "svelte",
-    "svelte5",
-    "svelte-components",
-    "tailwind",
-    "ui-library"
-  ],
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
-  "scripts": {
-    "build": "svelte-package --input src",
-    "prepublishOnly": "npm run build",
-    "dev": "vite",
-    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
-  },
-  "svelte": "./dist/lib/index.js",
-  "type": "module",
-  "types": "./dist/lib/index.d.ts"
-}
+{
+  "name": "svelte-comp",
+  "version": "1.3.6",
+  "license": "MIT",
+  "description": "A comprehensive component library built on Svelte 5 (runes) with design tokens (tailwind), accessibility focus, and TypeScript support",
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@tailwindcss/vite": "^4.2.4",
+    "@tsconfig/svelte": "^5.0.8",
+    "@types/node": "^24.12.2",
+    "@types/prismjs": "^1.26.6",
+    "prettier": "^3.8.3",
+    "prettier-plugin-svelte": "^3.5.1",
+    "prismjs": "^1.30.0",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.6",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.2"
+  },
+  "exports": {
+    ".": {
+      "svelte": "./dist/lib/index.js",
+      "types": "./dist/lib/index.d.ts"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "dist/styles.css"
+  ],
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "svelte-components",
+    "tailwind",
+    "ui-library"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "scripts": {
+    "build": "svelte-package --input src",
+    "prepublishOnly": "npm run build",
+    "dev": "vite",
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+  },
+  "svelte": "./dist/lib/index.js",
+  "type": "module",
+  "types": "./dist/lib/index.d.ts"
+}