sk-clib 1.2.0 → 1.4.0

package/README.md

@@ -1,61 +1,22 @@
-# sk-clib
+# [sk-clib](https://treltasev.github.io/sk-clib/)
+
+[![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/sk-clib)
 
 A flexible and modular component library built for my SvelteKit projects.
 
 ## 📦 Installation
 
 ```bash
-bun install sk-clib
-```
-
-## 🔧 Usage
-
-Once installed, you can import and use components like this:
-
-```svelte
-<script>
-  import { Header, Text } from 'sk-clib';
-</script>
-
-<Header lg bold>Welp... Hi there :)</Header>
-<Text size="lg" weight="bold">Hello World</Text>
-```
-
-If you're using path aliases, make sure to configure them properly in your `tsconfig.json` or `jsconfig.json`.
-
-## 🛠 Development
-
-To contribute or develop locally:
-
-```bash
-bun clone https://github.com/TreltaSev/sk-clib.git
-cd sk-clib
-bun install
-bun run dev
+npm install sk-clib # Install from npmjs
 ```
 
-This will launch the SvelteKit dev environment so you can view and test components live.
-
-### Commands
-
-* `npm run dev` – Start development server with live preview
-* `npm run build` – Build the library for publishing
-* `npm run lint` – Lint codebase
-* `npm run check` – Run type checking
-* `npm run test` – (If applicable) Run tests
-
-## ✅ Publishing
+```css
+/* app.css */
+@import 'sk-clib/style';
 
-Make sure everything builds correctly:
-
-```bash
-bun run build
+/* ... Other Styling ... */
 ```
 
-Then publish:
-
-```bash
-bun publish
-```
+## 🔧 Documentation
 
-> Ensure your version is bumped and `package.json` is clean of any local dependencies before publishing.
+Take a look at [https://treltasev.github.io/sk-clib/](https://treltasev.github.io/sk-clib/)

package/dist/docs/_layouts/bare.svelte

@@ -7,6 +7,8 @@
 	} = $props();
 </script>
 
-<Header xl class="mt-5" id={`${prev}`}>{title}</Header>
+<a href={`#${prev}`}>
+	<Header xxl class="mt-5" id={`${prev}`}>{title}</Header>
+</a>
 
 {@render children?.()}

package/dist/docs/contributing/+page.svelte

@@ -8,5 +8,21 @@
 </script>
 
 <Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
-<p>You can choose to either contribute to the documentation or the library</p>
+<p>You can choose to either contribute to the documentation or the library, either way, you’ll need to cloen this repo, most likeley as a fork.</p>
+<pre class="language-bash">{@html `<code class="language-bash">bun clone https://github.com/TreltaSev/sk-clib.git
+<span class="token builtin class-name">cd</span> sk-clib
+<span class="token function">npm</span> <span class="token function">install</span>
+<span class="token function">npm</span> run dev</code>`}</pre>
+<p>This should be enough to get you started.</p>
+<h2>Commands</h2>
+<ul>
+<li><code>npm run dev</code> – Start development server with live preview</li>
+<li><code>npm run build</code> – Build the library for publishing</li>
+<li><code>npm run lint</code> – Lint codebase</li>
+<li><code>npm run check</code> – Run type checking</li>
+<li><code>npm run test</code> – (If applicable) Run tests</li>
+</ul>
+<h2>✅ Publishing</h2>
+<p>Make sure everything builds correctly:</p>
+<pre class="language-bash">{@html `<code class="language-bash"><span class="token function">npm</span> run build</code>`}</pre>
 </Layout_MDSVEX_DEFAULT>

package/dist/docs/contributing/documentation/+page.svelte

@@ -8,5 +8,5 @@
 </script>
 
 <Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
-<p>So, you want to contribute to the documentation?</p>
+<p>Just add ’[release]’ to your commit message and push to main.</p>
 </Layout_MDSVEX_DEFAULT>

package/dist/docs/contributing/library/+page.svelte

@@ -8,5 +8,5 @@
 </script>
 
 <Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
-<p>So, you want to contribute to the library?</p>
+<p>Push to production branch</p>
 </Layout_MDSVEX_DEFAULT>

package/dist/docs/getting_started/installation.svelte

@@ -8,5 +8,9 @@
 </script>
 
 <Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
-<pre class="language-bash">{@html `<code class="language-bash">bun <span class="token function">install</span> sk-clib</code>`}</pre>
+<pre class="language-bash">{@html `<code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> sk-clib <span class="token comment"># Install from npmjs</span></code>`}</pre>
+<pre class="language-css">{@html `<code class="language-css"><span class="token comment">/* app.css */</span>
+<span class="token atrule"><span class="token rule">@import</span> <span class="token string">'sk-clib/style'</span><span class="token punctuation">;</span></span>
+
+<span class="token comment">/* ... Other Styling ... */</span></code>`}</pre>
 </Layout_MDSVEX_DEFAULT>

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -207,6 +207,9 @@
   .mt-5 {
     margin-top: calc(var(--spacing) * 5);
   }
+  .mb-20 {
+    margin-bottom: calc(var(--spacing) * 20);
+  }
   .block {
     display: block;
   }
@@ -216,6 +219,10 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -223,9 +230,6 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
-  .h-20 {
-    height: calc(var(--spacing) * 20);
-  }
   .h-fit {
     height: fit-content;
   }
@@ -262,9 +266,15 @@
   .justify-center {
     justify-content: center;
   }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -334,9 +344,18 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
   .text-white {
     color: var(--color-white);
   }
+  .text-white\/40 {
+    color: color-mix(in srgb, #fff 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-white) 40%, transparent);
+    }
+  }
   .text-white\/80 {
     color: color-mix(in srgb, #fff 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -346,6 +365,17 @@
   .italic {
     font-style: italic;
   }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
+  .hover\:text-white\/100 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+  }
   .data-\[state\=toggled\]\:bg-black {
     &[data-state="toggled"] {
       background-color: var(--color-black);
@@ -357,26 +387,6 @@
     }
   }
 }
-@layer base {
-  html, body {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    background-color: var(--color-surface-2);
-  }
-}
-@layer docs {
-  header {
-    font-size: calc(var(--spacing) * 8);
-    color: var(--color-primary);
-  }
-  h1 {
-    color: var(--color-primary);
-  }
-  h2 {
-    color: var(--color-gray-400);
-  }
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -386,11 +396,16 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-border-style: solid;
       --tw-font-weight: initial;
+      --tw-duration: initial;
     }
   }
 }

package/dist/ui/index.d.ts

@@ -2,4 +2,5 @@ export { default as Button } from "./button/components/button.svelte";
 export { default as Flex } from "./flex/components/flex.svelte";
 export { default as Frame } from "./frame/components/frame.svelte";
 export { default as Header } from "./header/components/header.svelte";
+export { default as Spacer } from "./spacer/components/spacer.svelte";
 export { default as Text } from "./text/components/text.svelte";

package/dist/ui/index.js

@@ -5,4 +5,5 @@ export { default as Button } from "./button/components/button.svelte";
 export { default as Flex } from "./flex/components/flex.svelte";
 export { default as Frame } from "./frame/components/frame.svelte";
 export { default as Header } from "./header/components/header.svelte";
+export { default as Spacer } from "./spacer/components/spacer.svelte";
 export { default as Text } from "./text/components/text.svelte";

package/dist/ui/spacer/components/spacer.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	// --- Logic ---
+	import { cn, Tokenizer } from '../../../utils';
+	import type { Props } from '..';
+
+	let {
+		children,
+		class: className,
+
+		// Horizontal / Vertical
+		horizontal = $bindable(undefined),
+		vertical = $bindable(undefined),
+
+		// Width / Height
+		width = $bindable(undefined),
+		height = $bindable(undefined),
+
+		// Catch-alls
+		...rest
+	}: Props = $props();
+
+	const tokenInstance = new Tokenizer(className);
+
+	// Horizontal / Vertical
+	tokenInstance.addTokenIf(horizontal || width, 'w-full');
+	tokenInstance.addTokenIf(vertical || height, 'h-full');
+
+	if ([horizontal, vertical, width, height].every((val) => val === undefined)) {
+		tokenInstance.addTokenIf(true, 'size-full');
+	}
+
+</script>
+
+<div class={cn(tokenInstance.className)} {...rest}>
+	{@render children?.()}
+</div>
+
+<!--@component
+    ---
+    name: Spacer
+    props:
+        horizontal (undefined|boolean) = undefined: Expands the component to the most width it can occupy
+        vertical (undefined|boolean) = undefined: Expands the component to the most height it can occupy
+        width (undefined|boolean) = undefined: Expands the component to the most width it can occupy
+        height (undefined|boolean) = undefined: Expands the component to the most height it can occupy
+    ---
+    
+    Element that is soley made to fill in space. If nothing is passed, assumes 'size-full',
+    otherwise, it fills the direction you tell it to.
+-->

package/dist/ui/spacer/components/spacer.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Props } from '..';
+/**
+ * ---
+ * name: Spacer
+ * props:
+ *     horizontal (undefined|boolean) = undefined: Expands the component to the most width it can occupy
+ *     vertical (undefined|boolean) = undefined: Expands the component to the most height it can occupy
+ *     width (undefined|boolean) = undefined: Expands the component to the most width it can occupy
+ *     height (undefined|boolean) = undefined: Expands the component to the most height it can occupy
+ * ---
+ *
+ * Element that is soley made to fill in space. If nothing is passed, assumes 'size-full',
+ * otherwise, it fills the direction you tell it to.
+ */
+declare const Spacer: import("svelte").Component<Props, {}, "horizontal" | "vertical" | "width" | "height">;
+type Spacer = ReturnType<typeof Spacer>;
+export default Spacer;

package/dist/ui/spacer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as _, default as Root } from "./components/spacer.svelte";
+export type { tSpacerProps as Props, } from "./types";

package/dist/ui/spacer/index.js

@@ -0,0 +1 @@
+export { default as _, default as Root } from "./components/spacer.svelte";

package/dist/ui/spacer/types.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type tSpacerProps = HTMLAttributes<HTMLDivElement> & {
+    horizontal?: boolean;
+    vertical?: boolean;
+    width?: boolean;
+    height?: boolean;
+};

package/dist/ui/spacer/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sk-clib",
-	"version": "1.2.0",
+	"version": "1.4.0",
 	"type": "module",
 	"files": [
 		"dist",
@@ -27,7 +27,7 @@
 		"**/*.css"
 	],
 	"scripts": {
-		"build": "svelte-package && npx tailwindcss -i ./src/app.css -o ./dist/styles.css",
+		"build": "svelte-package && npm run css_build",
 		"webbuild": "vite build",
 		"prepublishOnly": "npm run build && publint --skip-pack",
 		"dev": "vite dev",
@@ -35,13 +35,15 @@
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint ."
+		"lint": "prettier --check . && eslint .",
+		"css_build": "npx tailwindcss -i ./src/library.css -o ./dist/styles.css"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.0.0",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
+		"@iconify-json/mdi": "^1.2.3",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
@@ -55,6 +57,7 @@
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
+		"unplugin-icons": "^22.1.0",
 		"vite": "^6.2.6"
 	},
 	"keywords": [

package/dist/docs/contributing/documentation/sublevel/+page.svelte

@@ -1,12 +0,0 @@
-<script context="module">
-	export const metadata = {"title":"This is a sub level","order":6};
-	const { title, order } = metadata;
-</script>
-
-<script>
-	import Layout_MDSVEX_DEFAULT from '/home/runner/work/sk-clib/sk-clib/src/lib/docs/_layouts/bare.svelte';
-</script>
-
-<Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
-<p>This is a dope sub level</p>
-</Layout_MDSVEX_DEFAULT>

package/dist/docs/contributing/library/other.svelte

@@ -1,12 +0,0 @@
-<script context="module">
-	export const metadata = {"title":"Other Doc Key","order":2};
-	const { title, order } = metadata;
-</script>
-
-<script>
-	import Layout_MDSVEX_DEFAULT from '/home/runner/work/sk-clib/sk-clib/src/lib/docs/_layouts/bare.svelte';
-</script>
-
-<Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
-<p> sma lama duma</p>
-</Layout_MDSVEX_DEFAULT>