fix deps, add tailwind base styles

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+	"files.associations": {
+		"*.css": "tailwindcss"
+	},
+	"makefile.configureOnOpen": false
+}

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "@repo/ui",
+	"name": "@svelte-toolkit/sui",
 	"version": "0.0.1",
 	"scripts": {
 		"dev": "vite dev",
@@ -41,13 +41,12 @@
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@jsrob/svelte-portal": "^0.2.1",
-		"@repo/tailwindcss-config": "workspace:*",
+		"@svelte-toolkit/validate": "^0.0.0",
-		"@repo/validate": "workspace:*",
 		"@sveltejs/adapter-auto": "^4.0.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/vite": "^4.0.0",
+		"@types/node": "^24.0.9",
 		"country-state-city": "^3.2.1",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
@@ -64,12 +63,18 @@
 		"publint": "^0.3.2",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
-		"tailwindcss": "^4.0.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
-		"vite": "^6.2.5"
+		"vite": "^6.2.5",
+		"tailwindcss": "^4.1.3",
+		"@tailwindcss/container-queries": "^0.1.1",
+		"@tailwindcss/forms": "^0.5.10",
+		"tailwindcss-animate": "^1.0.7"
 	},
 	"keywords": [
 		"svelte"
-	]
+	],
+	"publishConfig": {
+		"registry": "https://gitea.auvem.com/api/packages/svelte-toolkit/npm/"
+	}
 }

src/app.css

@@ -1 +1 @@
-@import '@repo/tailwindcss-config/app.css';
+@import '$lib/styles/theme.css';

src/lib/Combobox.svelte

@@ -22,7 +22,7 @@
 
 	import Label from './Label.svelte';
 	import StyledRawInput from './StyledRawInput.svelte';
-	import { InputValidatorEvent, validate, type ValidatorOptions } from '@repo/validate';
+	import { InputValidatorEvent, validate, type ValidatorOptions } from '@svelte-toolkit/validate';
 	import type { Action } from 'svelte/action';
 	import { onMount, tick, untrack, type Snippet } from 'svelte';
 	import { Portal } from '@jsrob/svelte-portal';

src/lib/PinInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { isValueValid, validate, type ValidatorOptions } from '@repo/validate';
+	import { isValueValid, validate, type ValidatorOptions } from '@svelte-toolkit/validate';
 	import Label from './Label.svelte';
 
 	let {

src/lib/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Label from './Label.svelte';
-	import { validate } from '@repo/validate';
+	import { validate } from '@svelte-toolkit/validate';
 
 	let {
 		name,

src/lib/StateMachine.svelte

@@ -39,7 +39,7 @@
 	import type { MouseEventHandler } from 'svelte/elements';
 	import { tweened } from 'svelte/motion';
 	import { fade, fly } from 'svelte/transition';
-	import { validateForm } from '@repo/validate';
+	import { validateForm } from '@svelte-toolkit/validate';
 
 	let {
 		pages,

src/lib/StyledRawInput.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { validate, type InputValidatorEvent, type ValidatorOptions } from '@repo/validate';
+	import {
+		validate,
+		type InputValidatorEvent,
+		type ValidatorOptions
+	} from '@svelte-toolkit/validate';
 
 	type $Props = Omit<HTMLInputAttributes, 'name' | 'value'> & {
 		name: string;

src/lib/TextInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Label from './Label.svelte';
 	import StyledRawInput from './StyledRawInput.svelte';
-	import { type ValidatorOptions } from '@repo/validate';
+	import { type ValidatorOptions } from '@svelte-toolkit/validate';
 
 	let {
 		name,

src/lib/TimeInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { liveValidator, validate } from '@repo/validate';
+	import { liveValidator, validate } from '@svelte-toolkit/validate';
 	import Label from './Label.svelte';
 	import StyledRawInput from './StyledRawInput.svelte';
 	import { onMount } from 'svelte';

src/lib/ToggleGroup.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Label from './Label.svelte';
 	import ToggleSelect from './ToggleSelect.svelte';
-	import { validate, validateInput } from '@repo/validate';
+	import { validate, validateInput } from '@svelte-toolkit/validate';
 
 	let {
 		items,

src/lib/styles/theme.css

@@ -0,0 +1,94 @@
+/* packages/ui/src/styles/theme.css */
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/container-queries';
+@plugin 'tailwindcss-animate';
+
+@theme {
+	/* Fonts - easily overrideable */
+	--font-*: initial;
+	--font-sans: var(--ui-font-sans, Work Sans, sans-serif);
+	--font-serif: var(--ui-font-serif, Merriweather, serif);
+	--font-mono: var(--ui-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
+
+	/* Primary Colors */
+	--color-primary-50: var(--ui-primary-50, #f0f8fe);
+	--color-primary-100: var(--ui-primary-100, #ddeefc);
+	--color-primary-200: var(--ui-primary-200, #c2e3fb);
+	--color-primary-300: var(--ui-primary-300, #98d2f8);
+	--color-primary-400: var(--ui-primary-400, #68b9f2);
+	--color-primary-500: var(--ui-primary-500, #459bec);
+	--color-primary-600: var(--ui-primary-600, #2f80e1);
+	--color-primary-700: var(--ui-primary-700, #2463c1);
+	--color-primary-800: var(--ui-primary-800, #2556a8);
+	--color-primary-900: var(--ui-primary-900, #234b85);
+	--color-primary-950: var(--ui-primary-950, #1a2f51);
+	--color-primary: var(--ui-primary, #2463c1);
+
+	/* Secondary Colors */
+	--color-secondary-50: var(--ui-secondary-50, #f2f7fc);
+	--color-secondary-100: var(--ui-secondary-100, #e1edf8);
+	--color-secondary-200: var(--ui-secondary-200, #cbe0f2);
+	--color-secondary-300: var(--ui-secondary-300, #a7cce9);
+	--color-secondary-400: var(--ui-secondary-400, #7cb1de);
+	--color-secondary-500: var(--ui-secondary-500, #5d95d4);
+	--color-secondary-600: var(--ui-secondary-600, #487bc6);
+	--color-secondary-700: var(--ui-secondary-700, #3f69b6);
+	--color-secondary-800: var(--ui-secondary-800, #395694);
+	--color-secondary-900: var(--ui-secondary-900, #324a76);
+	--color-secondary-950: var(--ui-secondary-950, #222f49);
+	--color-secondary: var(--ui-secondary, #487bc6);
+
+	/* Accent Colors */
+	--color-accent-50: var(--ui-accent-50, #f0f9ff);
+	--color-accent-100: var(--ui-accent-100, #e1f2fd);
+	--color-accent-200: var(--ui-accent-200, #bbe7fc);
+	--color-accent-300: var(--ui-accent-300, #7fd3fa);
+	--color-accent-400: var(--ui-accent-400, #3cbef4);
+	--color-accent-500: var(--ui-accent-500, #12a5e5);
+	--color-accent-600: var(--ui-accent-600, #068cce);
+	--color-accent-700: var(--ui-accent-700, #066a9e);
+	--color-accent-800: var(--ui-accent-800, #095983);
+	--color-accent-900: var(--ui-accent-900, #0e4b6c);
+	--color-accent-950: var(--ui-accent-950, #093048);
+	--color-accent: var(--ui-accent, #068cce);
+
+	/* Text Colors */
+	--color-text-50: var(--ui-text-50, #f6f6f6);
+	--color-text-100: var(--ui-text-100, #e7e7e7);
+	--color-text-200: var(--ui-text-200, #d1d1d1);
+	--color-text-300: var(--ui-text-300, #b0b0b0);
+	--color-text-400: var(--ui-text-400, #888888);
+	--color-text-500: var(--ui-text-500, #6d6d6d);
+	--color-text-600: var(--ui-text-600, #5d5d5d);
+	--color-text-700: var(--ui-text-700, #4f4f4f);
+	--color-text-800: var(--ui-text-800, #454545);
+	--color-text-900: var(--ui-text-900, #3d3d3d);
+	--color-text-950: var(--ui-text-950, #2a2a2a);
+	--color-text: var(--ui-text, #2a2a2a);
+
+	/* Background */
+	--color-background: var(--ui-background, #f2efec);
+
+	/* Shadows */
+	--shadow-centre: var(--ui-shadow-centre, 0 0 80px -6px rgb(0 0 0 / 0.25));
+
+	/* Transitions */
+	--transition-property-height: height;
+	--transition-property-width: width;
+	--transition-property-opacity: opacity;
+	--transition-property-colors: background-color, border-color, color, fill, stroke;
+	--transition-property-font-color: color;
+}
+
+@layer base {
+
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentcolor);
+	}
+}