sk-clib 1.5.0 → 1.7.0

package/README.md

@@ -1,22 +1,58 @@
-# [sk-clib](https://treltasev.github.io/sk-clib/)
+# Svelte library
 
-[![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/sk-clib)
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
 
-A flexible and modular component library built for my SvelteKit projects.
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
 
-## 📦 Installation
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
-npm install sk-clib # Install from npmjs
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
 ```
 
-```css
-/* app.css */
-@import 'sk-clib/style';
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-/* ... Other Styling ... */
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
 ```
 
-## 🔧 Documentation
+To create a production version of your showcase app:
 
-Take a look at [https://treltasev.github.io/sk-clib/](https://treltasev.github.io/sk-clib/)
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/styles.css

@@ -7,7 +7,6 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -31,10 +30,6 @@
     --radius-md: 0.375rem;
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
-    --color-primary: #ff7073;
-    --color-secondary: #70ff73;
-    --color-surface-0: #141212;
-    --color-surface-2: #262222;
   }
 }
 @layer base {
@@ -204,14 +199,8 @@
       max-width: 96rem;
     }
   }
-  .mt-5 {
-    margin-top: calc(var(--spacing) * 5);
-  }
-  .mb-20 {
-    margin-bottom: calc(var(--spacing) * 20);
-  }
-  .block {
-    display: block;
+  .contents {
+    display: contents;
   }
   .flex {
     display: flex;
@@ -219,17 +208,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%;
   }
-  .h-12 {
-    height: calc(var(--spacing) * 12);
-  }
   .h-fit {
     height: fit-content;
   }
@@ -251,9 +233,6 @@
   .cursor-pointer {
     cursor: pointer;
   }
-  .resize {
-    resize: both;
-  }
   .flex-col {
     flex-direction: column;
   }
@@ -266,37 +245,18 @@
   .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);
   }
-  .border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
   .bg-\[var\(--color-primary\)\] {
     background-color: var(--color-primary);
   }
   .bg-black {
     background-color: var(--color-black);
   }
-  .bg-surface-0 {
-    background-color: var(--color-surface-0);
-  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .px-\[20\%\] {
-    padding-inline: 20%;
-  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -344,38 +304,12 @@
     --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)) {
-      color: color-mix(in oklab, var(--color-white) 80%, transparent);
-    }
-  }
   .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);
@@ -387,25 +321,14 @@
     }
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-font-weight {
   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/button/components/button.svelte

@@ -1,24 +1,26 @@
-<script lang="ts">
-	// --- Logic ---
-	import { cn } from '../../../utils';
-	import type { Props } from '..';
-
-	let { children, class: className, buttonClass = $bindable('px-4 py-2 rounded-md bg-[var(--color-primary)] color-[var(--color-white)]'), ...rest }: Props = $props();
-
-	// Setup Button's Default Class
-	let buttonCls = $state(cn(buttonClass, className));
-	$effect(() => {
-		buttonCls = cn(buttonClass, className);
-	});
-</script>
-
-<button class={cn(buttonCls)} {...rest} tabindex="0">
-	{@render children?.()}
-</button>
-
-<!--@component
-    Generated by SvelteForge🔥
-
-    # Button Component
-    Simple button component for easy customization and easy onclick functionality
--->
+<script lang="ts">
+	// --- Logic ---
+	import { cn } from '../../../utils';
+	import type { Props } from '..';
+
+	let { children, class: className, buttonClass = $bindable('px-4 py-2 rounded-md bg-[var(--color-primary)] color-[var(--color-white)]'), ...rest }: Props = $props();
+
+
+	// Setup Button's Default Class
+	let buttonCls = $state(cn(buttonClass, className));
+	$effect(() => {
+		buttonCls = cn(buttonClass, className);
+	});
+</script>
+
+<button class={cn(buttonCls)} {...rest} tabindex="0">
+	{@render children?.()}
+</button>
+
+<!--@component
+    Generated by SvelteForge🔥
+
+    # Button Component
+    Simple button component for easy customization and easy onclick functionality
+	Button is easily configured, colored, and will also abide to WCAG standards.
+-->

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

@@ -2,8 +2,9 @@ import type { Props } from '..';
 /**
  * Generated by SvelteForge🔥
  *
- * # Button Component
- * Simple button component for easy customization and easy onclick functionality
+ *    # Button Component
+ *    Simple button component for easy customization and easy onclick functionality
+ * Button is easily configured, colored, and will also abide to WCAG standards.
  */
 declare const Button: import("svelte").Component<Props, {}, "buttonClass">;
 type Button = ReturnType<typeof Button>;

package/dist/ui/flex/components/flex.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-
-    // --- Components ---
-    import { Frame } from "../.."
-
-    // --- Logic ---
-    import { cn } from '../../../utils';
-    import type { Props } from ".."
-    
-    let {
-        children,
-        class: className,
-        ...rest
-    }: Props = $props();
-
-</script>
-
-<Frame class={ cn(className) } {...rest} flex>
-    {@render children?.()}
-</Frame>
-
-<!--@component
-    Generated by SvelteForge🔥
-
-    # Flex Component
-    Wrapper component for Frame with the flex attribute passed
--->
-
+<script lang="ts">
+
+    // --- Components ---
+    import { Frame } from "../.."
+
+    // --- Logic ---
+    import { cn } from '../../../utils';
+    import type { Props } from ".."
+    
+    let {
+        children,
+        class: className,
+        ...rest
+    }: Props = $props();
+
+</script>
+
+<Frame class={ cn(className) } {...rest} flex>
+    {@render children?.()}
+</Frame>
+
+<!--@component
+    Generated by SvelteForge🔥
+
+    # Flex Component
+    Wrapper component for Frame with the flex attribute passed
+-->
+

package/dist/ui/frame/components/frame.svelte

@@ -1,83 +1,83 @@
-<script lang="ts">
-	// --- Logic ---
-	import { cn, Tokenizer } from '../../../utils';
-	import type { Props } from '..';
-
-	let {
-		children,
-		class: className,
-		flex = $bindable(undefined),
-		row = $bindable(undefined),
-		col = $bindable(undefined),
-		center = $bindable(undefined),
-		centerx = $bindable(undefined),
-		centery = $bindable(undefined),
-		fill = $bindable(undefined),
-		fillw = $bindable(undefined),
-		fillh = $bindable(undefined),
-		noshrink = $bindable(undefined),
-		aspectSquare = $bindable(undefined),
-		cursorAuto = $bindable(undefined),
-		cursorDefault = $bindable(undefined),
-		cursorPointer = $bindable(undefined),
-		...rest
-	}: Props = $props();
-
-	const tokenInstance = new Tokenizer(className);
-
-
-	function addTokenIf(statement: any, token: string) {
-		if (statement === true) {
-			className += ` ${token}`;
-		}
-	}
-
-	// Flex Box
-	tokenInstance.addTokenIf(flex, 'flex');
-	tokenInstance.addTokenIf(row, 'flex-row');
-	tokenInstance.addTokenIf(col, 'flex-col');
-
-	// Positioning
-	tokenInstance.addTokenIf(center, 'items-center justify-center');
-	tokenInstance.addTokenIf(centerx, 'items-center');
-	tokenInstance.addTokenIf(centery, 'justify-center');
-
-	// Size Fillings
-	tokenInstance.addTokenIf(fill, 'size-full');
-	tokenInstance.addTokenIf(fillw, 'w-full');
-	tokenInstance.addTokenIf(fillh, 'h-full');
-
-	// Flex Config
-	tokenInstance.addTokenIf(noshrink, 'shrink-0');
-
-	// Aspect Ratios
-	tokenInstance.addTokenIf(aspectSquare, 'aspect-square');
-
-	// Cursor Options
-	tokenInstance.addTokenIf(cursorAuto, 'cursor-auto');
-	tokenInstance.addTokenIf(cursorDefault, 'cursor-default');
-	tokenInstance.addTokenIf(cursorPointer, 'cursor-pointer');
-</script>
-
-<div class={cn(tokenInstance.className)} {...rest}>
-	{@render children?.()}
-</div>
-
-<!--@component
-    Generated by SvelteForge🔥 [Component Template]
-
-    # Frame Component
-    A simple wrapper for flexbox and other layout options.
-    This component is a wrapper for the `div` element, with additional classes and properties to control layout and styling.
-    It is designed to be used in conjunction with other components to create complex layouts.
-
-    ## Usage
-    ```svelte
-    <Frame class="my-frame" flex row center fill>
-        <ChildComponent />
-    </Frame>
-    ```
-
-    This will create a flex container that is a row, centered, and fills the available space.
-    The `class` prop can be used to add additional classes to the frame, and the `children` prop can be used to pass in child components.
--->
+<script lang="ts">
+	// --- Logic ---
+	import { cn, Tokenizer } from '../../../utils';
+	import type { Props } from '..';
+
+	let {
+		children,
+		class: className,
+		flex = $bindable(undefined),
+		row = $bindable(undefined),
+		col = $bindable(undefined),
+		center = $bindable(undefined),
+		centerx = $bindable(undefined),
+		centery = $bindable(undefined),
+		fill = $bindable(undefined),
+		fillw = $bindable(undefined),
+		fillh = $bindable(undefined),
+		noshrink = $bindable(undefined),
+		aspectSquare = $bindable(undefined),
+		cursorAuto = $bindable(undefined),
+		cursorDefault = $bindable(undefined),
+		cursorPointer = $bindable(undefined),
+		...rest
+	}: Props = $props();
+
+	const tokenInstance = new Tokenizer(className);
+
+
+	function addTokenIf(statement: any, token: string) {
+		if (statement === true) {
+			className += ` ${token}`;
+		}
+	}
+
+	// Flex Box
+	tokenInstance.addTokenIf(flex, 'flex');
+	tokenInstance.addTokenIf(row, 'flex-row');
+	tokenInstance.addTokenIf(col, 'flex-col');
+
+	// Positioning
+	tokenInstance.addTokenIf(center, 'items-center justify-center');
+	tokenInstance.addTokenIf(centerx, 'items-center');
+	tokenInstance.addTokenIf(centery, 'justify-center');
+
+	// Size Fillings
+	tokenInstance.addTokenIf(fill, 'size-full');
+	tokenInstance.addTokenIf(fillw, 'w-full');
+	tokenInstance.addTokenIf(fillh, 'h-full');
+
+	// Flex Config
+	tokenInstance.addTokenIf(noshrink, 'shrink-0');
+
+	// Aspect Ratios
+	tokenInstance.addTokenIf(aspectSquare, 'aspect-square');
+
+	// Cursor Options
+	tokenInstance.addTokenIf(cursorAuto, 'cursor-auto');
+	tokenInstance.addTokenIf(cursorDefault, 'cursor-default');
+	tokenInstance.addTokenIf(cursorPointer, 'cursor-pointer');
+</script>
+
+<div class={cn(tokenInstance.className)} {...rest}>
+	{@render children?.()}
+</div>
+
+<!--@component
+    Generated by SvelteForge🔥 [Component Template]
+
+    # Frame Component
+    A simple wrapper for flexbox and other layout options.
+    This component is a wrapper for the `div` element, with additional classes and properties to control layout and styling.
+    It is designed to be used in conjunction with other components to create complex layouts.
+
+    ## Usage
+    ```svelte
+    <Frame class="my-frame" flex row center fill>
+        <ChildComponent />
+    </Frame>
+    ```
+
+    This will create a flex container that is a row, centered, and fills the available space.
+    The `class` prop can be used to add additional classes to the frame, and the `children` prop can be used to pass in child components.
+-->