@widgetic/design-system 0.3.78 → 0.3.80

package/dist/styles/fonts.css

@@ -1,6 +1,3 @@
-/* Tailwind config */
-/* @config "../../../tailwind.config.ts"; */
-
 /*** GLOBAL STYLE FONTS ***/
 
   /* BL MELODY FAMILY: rules and classes */
@@ -31,48 +28,47 @@
     font-display: swap;
   }
 
-/* Convert classes to utilities */
-@utility h1 {
+  .h1 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 144px;
     line-height: 0.85;
-}
+  }
 
-@utility h2 {
+  .h2 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 72px;
     line-height: 0.96;
-}
+  }
 
-@utility h3 {
+  .h3 {
     font-family: 'BL Melody';
     font-weight: 700;
     font-size: 56px;
     line-height: 1;
-}
+  }
 
-@utility h4 {
+  .h4 {
     font-family: 'BL Melody';
     font-weight: 600;
     font-size: 32px;
     line-height: 1.1;
-}
+  }
 
-@utility h5 {
+  .h5 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 24px;
     line-height: 1.2;
-}
+  }
 
-@utility h6 {
+  .h6 {
     font-family: 'BL Melody';
     font-weight: 600;
     font-size: 14px;
     line-height: 1;
-}
+  }
 
 
 
@@ -122,62 +118,55 @@
     font-display: swap;
   }
 
-@utility subtitle1 {
+  .subtitle1 {
     font-family: 'Riegla Regular';
     font-size: 32px;
     line-height: 1.2;
-}
+  }
 
-@utility subtitle2 {
+  .subtitle2 {
     font-family: 'Riegla Regular';
     font-size: 24px;
     line-height: 1.3;
-}
-
-@utility body-medium {
-    font-family: 'Riegla Medium';
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 1.4;
-}
+  }
 
-@utility body {
-    font-family: 'Riegla Regular';
-    font-size: 18px;
-    line-height: 1.4;
-}
+  .body-medium {
+    font-family: 'Riegla Medium' !important;
+    font-size: 18px !important;
+    font-weight: 400 !important;
+    line-height: 1.4 !important;
+  }
 
-@utility body-bold {
-    font-family: 'Riegla Regular';
-    font-size: 18px;
-    line-height: 1.4;
-    font-weight: 700;
-}
+  .body {
+    font-family: 'Riegla Regular' !important;
+    font-size: 18px !important;
+    line-height: 1.4 !important;
+  }
 
-@utility subtext {
-    font-family: 'Riegla Regular';
-    font-size: 16px;
-    line-height: 1.4;
-}
+  .subtext {
+    font-family: 'Riegla Regular' !important;
+    font-size: 16px !important;
+    line-height: 1.4 !important;
+  }
 
-@utility caption {
+  .caption {
     font-family: 'Riegla Medium';
-    font-weight: 400;
+    font-weight: 400 !important;
     font-size: 14px;
     line-height: 1.2;
-}
+  }
 
-@utility link {
+  .link {
     font-family: 'Riegla Medium';
     font-size: 14px;
     line-height: 1;
     text-decoration: underline;
-}
+  }
 
-@utility tag {
+  .tag {
     font-family: 'Riegla Medium';
     font-size: 11px;
     line-height: 16px;
     text-transform: uppercase;
-}
+  }
   

package/dist/styles/global.css

@@ -1,53 +1,16 @@
-/* Tailwind import(v4) */
-@import 'tailwindcss';
+/* Tailwind 4
+@import "tailwindcss"; */
+
+/* Taildind 3 imports */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
 /* Import fonts css */
-/* @import './fonts.css' layer(utilities); */
 @import './fonts.css';
 
-/* Tailwind config load *after* main imports - needed for tailwind 4 
-go 3 levels up in development mode, 2 levels up in production mode*/
-@config "../../tailwind.config.ts";
-
-/* Utility classes for border radius - Moved to top level */
-/* NOTE: We define these custom utilities BEFORE the base layer 
-   so they are available for @apply within the base layer if needed, 
-   and Tailwind processes them correctly. */
-@utility rounded-pill {
-  border-radius: var(--radius-pill);
-}
-
-@utility rounded-large {
-  border-radius: var(--radius-large);
-}
-
-@utility rounded-medium {
-  border-radius: var(--radius-medium);
-}
-
-@utility rounded-small {
-  border-radius: var(--radius-small);
-}
-
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
-  /* Rule for Default border color fix from first @layer block */
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-
-  /* CSS Variables now defined globally on :root */
+  /* CSS Variables Here at the top of the base layer */
   :root {
     /* Site Grid Variables */
     --site-column-width: 74px;
@@ -93,10 +56,11 @@ go 3 levels up in development mode, 2 levels up in production mode*/
     /* Icon Colors */
     --icon-success: 142 71% 45%;
     --icon-error: 0 84% 60%;
+  }
 
-    
-    /* Widgetic Color Variables (Moved from .widgetic-colors) */
-    /* convert colors from hex to HSL (Hue, Saturation, Lightness) format */
+  /* CLASSES FOR WIDGETIC COMPONENTS */
+  /* convert colors from hex to HSL (Hue, Saturation, Lightness) format */
+  .widgetic-colors {
     --dark: 120 35.7% 9.4%;
     --deep-forest-green: 115 24.1% 24.7%;
     --sage-green: 108 25.4% 52.9%;
@@ -105,6 +69,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
     --forest-green: 90 16.7% 83.3%;
     --error: 0 89% 65.7%;
     --light-error: 0 45.5% 93.7%;
+    
     /* Greys */
     --grey1: 0 0% 96.1%;
     --grey2: 0 0% 94.1%;
@@ -113,10 +78,11 @@ go 3 levels up in development mode, 2 levels up in production mode*/
     --grey5: 0 0% 40%;
     --grey6: 0 0% 26.7%;
     --grey7: 0 0% 12.9%;
+  }
 
-
-
-    /* Border radius values */
+  /* Border radius tokens */
+  .widgetic-radius {
+    /* Corner radius values */
     --radius-pill: 100px;   /* Pill/Extra large corner radius */
     --radius-large: 15px;   /* Large corner radius */
     --radius-medium: 12px;  /* Medium corner radius */
@@ -128,6 +94,22 @@ go 3 levels up in development mode, 2 levels up in production mode*/
     --breakpoint-tablet: 744px;
     --breakpoint-desktop: 1156px;
   }
+  /* Utility classes for border radius */
+  .rounded-pill {
+    border-radius: var(--radius-pill);
+  }
+
+  .rounded-large {
+    border-radius: var(--radius-large);
+  }
+
+  .rounded-medium {
+    border-radius: var(--radius-medium);
+  }
+
+  .rounded-small {
+    border-radius: var(--radius-small);
+  }
 
   /*** GLOBAL STYLE CLASSES ***/
   * {
@@ -144,18 +126,18 @@ go 3 levels up in development mode, 2 levels up in production mode*/
 
   /* This is the root container of the website(app.html) */
   .root-ct {
-    @apply w-full h-screen;
+    @apply min-h-screen;
     display: block !important;
   }
 
   /* This is the root layout container of the website pages */
   .layout-ct {
-    @apply w-full h-full;
+    @apply min-h-screen w-full;
   }
 
   .page-ct {
     width: 100%;
-    height: 100%;
+    height: 100vh;
     /* background-color: green; */
   }
 
@@ -182,7 +164,6 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   }
 
   .native-scrollbar::-webkit-scrollbar-thumb {
-    @apply bg-muted;
     cursor: pointer;
     
     border: calc(var(--scrollbar-width) / 3) solid transparent;
@@ -570,7 +551,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
 
   /* Modal Button Styles */
   .modal-btn-primary {
-    @apply !h6 !inline-flex !items-center !justify-center;
+    @apply h6 inline-flex items-center justify-center !important;
     padding: 0 16px !important;
     min-height: 34px !important;
     border-radius: var(--radius-pill) !important;
@@ -586,7 +567,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   }
 
   .modal-btn-secondary {
-    @apply !h6 !inline-flex !items-center !justify-center;
+    @apply h6 inline-flex items-center justify-center !important;
     padding: 0 16px !important;
     min-height: 34px !important;
     border-radius: var(--radius-pill) !important;
@@ -604,9 +585,9 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   }
 
   .modal-btn-attention {
-    @apply !h6 !inline-flex !items-center !justify-center;
+    @apply h6 inline-flex items-center justify-center !important;
     padding: 0 16px !important;
-    height: 34px !important;
+    height: 34px;
     border-radius: var(--radius-pill) !important;
     background-color: hsl(var(--error)) !important;
     color: white !important;
@@ -623,7 +604,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
 
   /* Primary Button - Base styfles */
   .btn-primary {
-    @apply !inline-flex !items-center !justify-center !gap-2;
+    @apply inline-flex items-center justify-center gap-2 !important;
     padding: 8px 16px !important;
     height: 34px !important;
     border-radius: var(--radius-small) !important;
@@ -643,7 +624,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
 
   /* Primary Button sizes */
   .btn-primary-small {
-    @apply !body-medium !inline-flex !items-center !justify-center !gap-1;
+    @apply body-medium inline-flex items-center justify-center gap-1 !important;
     padding: 4px 12px 6px 12px !important;
     border-radius: var(--radius-medium) !important;
     background-color: hsl(var(--deep-forest-green)) !important;
@@ -651,7 +632,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   }
 
   .btn-primary-large {
-    @apply !body-medium !inline-flex !items-center !justify-center !gap-3;
+    @apply body-medium inline-flex items-center justify-center gap-3 !important;
     padding: 16px 32px !important;
     min-height: 56px !important;
     border-radius: var(--radius-medium) !important;
@@ -671,7 +652,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
 
   /* Secondary Button */
   .btn-secondary {
-    @apply !h6 !inline-flex !items-center !justify-center !gap-2;
+    @apply h6 inline-flex items-center justify-center gap-2 !important;
     padding: 0 16px !important;
     height: 34px !important;
     border-radius: var(--radius-small) !important;
@@ -710,7 +691,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   }
 
   .dropdown-menu-item {
-    @apply !flex !items-center !gap-2 !w-full !text-left !h6 !text-[hsl(var(--grey7))] !whitespace-nowrap;
+    @apply flex items-center gap-2 w-full text-left h6 text-[hsl(var(--grey7))] whitespace-nowrap;
     padding: 8px 16px;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.3.78",
+	"version": "0.3.80",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -14,23 +14,23 @@
 		"**/*.ts"
 	],
 	"scripts": {
-		"i": "rm -rf node_modules && rm -rf package-lock.json && npm i && npm link",
+		"i": "rm -rf node_modules && rm -rf package-lock.json && npm i && npm link && npm run set-git",
+		"set-git": "git config core.ignorecase false",
 		"unlink": "rm -rf \"$(npm root -g)/@widgetic/design-system\" 2>/dev/null || true",
 		"clean-modules": "rm -rf node_modules",
+		"clean-svelte-cache": "rm -rf .svelte-kit && npx svelte-kit sync",
+		"clean-npm-cache": "npm cache clean --force",
 		"llinks": "ls -la node_modules/@widgetic",
 		"glinks": "npm ls --global | grep widgetic",
 		"dev": "concurrently \"npm run dev-sv\" \"npm run package:watch\"",
 		"dev-with-check": "NODE_ENV=development concurrently \"npm run check:watch\" \"npm run dev-sv\" \"npm run package:watch\"",
 		"dev-open": "npm run dev-sv -- --open",
 		"dev-sv": "NODE_ENV=development vite dev",
+		"watch": "concurrently \"npm run check:watch\" \"npm run lint -- --watch\" \"npm run package:watch\"",
+		"build": "rm -rf dist && NODE_ENV=production vite build && npm run package",
+		"package:watch": "NODE_ENV=development svelte-package --watch | grep -v '$app/environment'",
 		"build-sv": "vite build",
-		"watch": "concurrently \"npm run check:watch\" \"npm run package:watch\"",
-		"build": "NODE_ENV=production vite build && npm run package",
-		"package:watch:svelte": "NODE_ENV=development svelte-package --watch | grep -v '$app/environment'",
-		"package:watch:css": "chokidar 'dist/styles/global.css' --debounce 500 -c \"npm run update-config-path\" --initial",
-		"package:watch": "concurrently \"npm run package:watch:svelte\" \"npm run package:watch:css\"",
-		"package": "NODE_ENV=production svelte-package | grep -v '$app/environment' && npm run update-config-path",
-		"update-config-path": "if [ -f dist/styles/global.css ] && grep -q '@config \"../../../tailwind.config.ts\";' dist/styles/global.css; then echo 'Updating @config path in dist/styles/global.css...'; sed -i '' 's|@config \"../../../tailwind.config.ts\";|@config \"../../tailwind.config.ts\";|g' dist/styles/global.css; else :; fi",
+		"package": "svelte-package | grep -v '$app/environment'",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "NODE_OPTIONS='--max-old-space-size=8192' svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"check:strict": "tsc --noEmit && npm run check",
@@ -39,10 +39,9 @@
 		"i-shadcn": "npm run clean-shadcn && npm run i-shadcn-init && npm run i-shadcn-comps",
 		"clean-shadcn": "rm -rf ./src/lib/components/ui",
 		"i-shadcn-init": "npx shadcn-svelte@next init",
-		"i-shadcn-comps": "npx shadcn-svelte@next add accordion badge breadcrumb button calendar card checkbox collapsible command dialog drawer dropdown-menu hover-card input input-otp label popover progress radio-group range-calendar scroll-area select separator slider sonner switch table tabs textarea toogle toggle-group tooltip",
+		"i-shadcn-comps": "npx shadcn-svelte@next add accordion badge button calendar range-calendar card checkbox collapsible dialog drawer dropdown-menu input input-otp label popover progress radio-group scroll-area select separator slider switch table tabs textarea tooltip",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
-		"clvtch": "rm -rf node_modules/.vite",
 		"prepublishOnly": "npm run package",
 		"publish-package": "npm run package && npm publish"
 	},
@@ -109,44 +108,22 @@
 	],
 	"peerDependencies": {
 		"@internationalized/date": "^3.6.0",
-		"@sveltejs/kit": "^2.20.7",
-		"bits-ui": "^1.3.19",
-		"shadcn-svelte": "1.0.0-next.9",
-		"svelte": "^5.27.0",
-		"tailwindcss": "^4.1.4"
+		"@sveltejs/kit": "^2.20.2",
+		"@tabler/icons-svelte": "^3.30.0",
+		"bits-ui": "^1.3.0",
+		"lucide-svelte": "^0.468.0",
+		"shadcn-svelte": "latest",
+		"svelte": "^5.25.6",
+		"svelte-sonner": "^0.3.28",
+		"tailwindcss": "^3.4.16"
 	},
 	"devDependencies": {
 		"@internationalized/date": "^3.6.0",
 		"@sveltejs/adapter-node": "^5.2.9",
-		"@sveltejs/kit": "^2.20.7",
+		"@sveltejs/kit": "^2.20.2",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/postcss": "^4.1.4",
 		"@tailwindcss/typography": "^0.5.15",
-		"@types/node": "^22.10.1",
-		"bits-ui": "^1.3.19",
-		"chokidar-cli": "^3.0.0",
-		"concurrently": "^9.1.0",
-		"eslint": "^9.7.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
-		"globals": "^15.0.0",
-		"postcss": "^8.5.3",
-		"prettier": "^3.3.2",
-		"prettier-plugin-svelte": "^3.2.6",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"shadcn-svelte": "1.0.0-next.9",
-		"svelte": "^5.27.0",
-		"svelte-check": "^4.1.6",
-		"svelte-sonner": "^0.3.28",
-		"tailwindcss": "^4.1.4",
-		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^6.2.6"
-	},
-	"dependencies": {
-		"@hirasso/thumbhash-custom-element": "^0.5.5",
-		"@tabler/icons-svelte": "^3.30.0",
 		"@tiptap/core": "^2.9.1",
 		"@tiptap/extension-bubble-menu": "^2.9.1",
 		"@tiptap/extension-code-block-lowlight": "^2.9.1",
@@ -169,21 +146,42 @@
 		"@tiptap/extension-underline": "^2.9.1",
 		"@tiptap/pm": "^2.9.1",
 		"@tiptap/starter-kit": "^2.9.1",
+		"@types/node": "^22.10.1",
+		"autoprefixer": "^10.4.20",
+		"bits-ui": "^1.3.0",
 		"clsx": "^2.1.1",
+		"concurrently": "^9.1.0",
+		"eslint": "^9.7.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
 		"lowlight": "^3.2.0",
 		"lucide-svelte": "^0.468.0",
 		"mode-watcher": "^0.5.0",
-		"pdfjs-dist": "^4.10.38",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-tailwindcss": "^0.6.5",
+		"svelte": "^5.25.6",
 		"svelte-awesome-color-picker": "^3.1.4",
+		"svelte-check": "^4.1.0",
 		"svelte-sonner": "^0.3.28",
 		"svelte-tiptap": "^2.0.3",
 		"tailwind-merge": "^2.5.5",
 		"tailwind-variants": "^0.3.0",
 		"tailwindcss-animate": "^1.0.7",
-		"vaul-svelte": "^1.0.0-next.3"
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0",
+		"vaul-svelte": "^1.0.0-next.3",
+		"vite": "^6.0.1"
 	},
 	"volta": {
 		"node": "22.14.0",
 		"npm": "11.1.0"
+	},
+	"dependencies": {
+		"@hirasso/thumbhash-custom-element": "^0.5.5",
+		"@tabler/icons-svelte": "^3.30.0",
+		"pdfjs-dist": "^4.10.38"
 	}
 }

package/tailwind.config.ts

@@ -1,10 +1,12 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
 import type { Config } from "tailwindcss";
 import tailwindcssAnimate from "tailwindcss-animate";
 import tailwindcssTypography from '@tailwindcss/typography';
 
 const config: Config = {
-	darkMode: "class",
+	darkMode: ["class"],
 	content: ["./src/**/*.{html,js,svelte,ts}"],
+	safelist: ["dark"],
 	theme: {
 		container: {
 			center: true,
@@ -65,6 +67,9 @@ const config: Config = {
 				md: "calc(var(--radius) - 2px)",
 				sm: "calc(var(--radius) - 4px)"
 			},
+			fontFamily: {
+				sans: [...fontFamily.sans]
+			},
 			keyframes: {
 				"accordion-down": {
 					from: { height: "0" },

package/dist/components/search-input/index2.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponent } from 'svelte';
-
-export interface SearchInputProps {
-  placeholder?: string;
-  value?: string;
-  onInput?: (event: Event) => Promise<void> | void;
-  onKeydown?: (event: KeyboardEvent) => void;
-  onClear?: () => void;
-  onPaste?: (event: ClipboardEvent) => void;
-  containerClass?: string;
-  inputClass?: string;
-}
-
-export default class SearchInput extends SvelteComponent<SearchInputProps> {} 

package/dist/components/shad-editor/README.md

@@ -1,18 +0,0 @@
-# ShadEditor Component
-
-This directory contains the Svelte components for a rich text editor based on Tiptap and styled with shadcn-svelte UI elements.
-
-## Origin
-
-The code was originally scaffolded using version `0.0.7` of the now-deprecated `shadeditor` CLI tool.
-
-*   Original (deprecated) npm package: [https://www.npmjs.com/package/shadeditor](https://www.npmjs.com/package/shadeditor)
-*   The author appears to have continued development under a new name/project called "Edra": [https://edra.tsuzat.com/](https://edra.tsuzat.com/)
-
-## Current Status
-
-The components in this directory have been adapted to work within the Widgetic Design System after its migration to **Tailwind CSS v4**.
-
-**Important:** Do not attempt to update or reinstall this component using the original `shadeditor` CLI (`npx shadeditor init`) or the new one from edra, as it is designed for Tailwind v3 and will likely break the current Tailwind v4 configuration and component adaptations.
-
-Use the component as it exists within this design system project.

package/dist/icons/eye-off.svg

@@ -1 +0,0 @@
-<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-eye-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg>

package/dist/icons/eye.svg

@@ -1 +0,0 @@
-<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-eye"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg>