@stanko/ctrls 0.1.0 → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Stanko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,18 +1,21 @@
 # Ctrls
 
+Minimal library for controlling parameters, designed specifically for algorithmic art.
+
+[![Multiple Ctrls screenshots, on light and dark backgrounds](https://muffinman.io/ctrls/ctrls.png)](https://muffinman.io/ctrls/)
+
 ## Made for algorithmic art
 
-I made Ctrls for my [algorithmic art projects](https://muffinman.io/art/). By default, the state is saved in the URL, which lets you navigate history and easily share links. Besides standard components like checkboxes and ranges, it also includes two that are especially useful for generative projects: RNG seed and easing. These not only let you adjust parameters but also provide functions (`rng` and `easing`) that you can call directly.
+I built Ctrls for my [algorithmic art projects](https://muffinman.io/art/). By default, the state is saved in the URL, which lets you navigate history and share links easily. Along with standard components like checkboxes and ranges, it includes two especially useful for generative work: RNG seed and easing. These not only let you adjust parameters but also expose functions (rng and easing) you can call directly.
 
-You can play with the live example above or check the older version on my [Space Invaders generator](https://muffinman.io/invaders/).
+Play with the live example above or check the older version in my [Space Invaders generator](https://muffinman.io/invaders/).
 
 ## Features
 
 - Minimal API
-- Six components (RNG seed, easing, boolean, radio, range and dual range)
-- Fully typed, including the dynamic typings for properties it controls
-- Light and dark themes included
-- Easy to theme through CSS variables
+- Six components : RNG seed, easing, boolean, radio, range and dual range
+- Fully typed, including dynamic typings for controlled properties
+- Light and dark themes included, theming via CSS variables
 
 ## Quick start
 
@@ -22,7 +25,7 @@ Install the library:
 npm install @stanko/ctrls
 ````
 
-Define your controls as an array and instantiate a `Ctrls` class:
+Define controls as an array, then instantiate the `Ctrls` class:
 
 ```ts
 import { Ctrls } from "@stanko/ctrls";
@@ -62,12 +65,14 @@ export const options = new Ctrls(config, {
   showRandomizeButton: true,
 });
 
+// Render Ctrls elements on the page
+document.querySelector('.my-controls').appendChild(options.element);
+
+// If you need to pass values you can export a type for them for convenience
 export type Options = ReturnValue<options.getValues()>;
 ```
 
-Add your handlers. Ctrls provides `onChange` and `onInput` methods.
-
-To get the current values, use `.getValues()`.
+Add `onChange` or `onInput` handlers. If you need to get the current values, use `.getValues()`.
 
 ```ts
 options.onChange = (updatedValues: Partial<Options>) => {
@@ -85,25 +90,45 @@ options.onInput = (updatedValues: Partial<Options>) => {
 
 ## API
 
-To instantiate:
+Constructor accepts two parameters - an array of control config object (see below for details) and an options object.
+
+```ts
+constructor(controls: Configs, options?: ControlsOptions)
+```
+
+The available options are:
 
 ```ts
 type ControlsOptions = {
-  showRandomizeButton?: boolean;
-  storage?: "hash" | null;
-  theme?: "system" | "light" | "dark";
+  showRandomizeButton?: boolean; // default: true
+  storage?: "hash" | "none"; // default: "hash"
+  theme?: "system" | "light" | "dark"; // default: "system"
+  parent?: Element; // if passed, the Ctrls element will be appended to this HTML element
 };
 ```
 
 Public API:
 
-* `element`
-* `onChange`
-* `onInput`
-* `getValues`
-* `randomize`
+```ts
+// The main Ctrls element
+.element: HTMLDivElement
+
+// Change handler called whenever any of the values is changed.
+// It's only parameter is an object containing the updated values.
+// The only way this object can have multiple attributes is when using the hash storage.
+.onChange(updatedValues)
+
+// Input handler called while user is inputting values (while dragging a slider for example).
+// Same as `onChange`, the only parameter is an object containing the updated values.
+.onInput(updatedValues)
+
+// Returns the values as an object, including rng and easing functions.
+.getValues()
+
+// Randomizes values for all controls that don't have randomization disabled.
+.randomize()
+```
 
-But technically all of the methods are public. I've done this on purpose to let you experiment.
 
 ## Controls
 
@@ -116,11 +141,11 @@ All controls share the following properties:
   name: string;
 
   // --- Optional --- //
-  // If passed it will be used instead of the name
+  // If passed, it will be used instead of the name
   label?: string;
-  // Depends on the control type, if it is not passed it will be randomly generated
+  // Depends on the control type, the default value for the control
   defaultValue?: T;
-  // Should the value be randomized when randomize button is clicked
+  // Disabled the value randomization (via randomize method or button)
   isRandomizationDisabled?: boolean; // default: false
 }
 ```
@@ -129,7 +154,7 @@ Some controls will have a few more properties explained below.
 
 ### Boolean
 
-A checkbox control for boolean parameter.
+Checkbox control for boolean parameters.
 
 <div class="example">
 
@@ -144,7 +169,7 @@ A checkbox control for boolean parameter.
 
 ### Seed
 
-A text input which generates a random text seed and creates a random number generator using the seed.
+Text input that generates a random text seed and creates a seeded random number generator.
 
 <div class="example">
 
@@ -157,7 +182,7 @@ A text input which generates a random text seed and creates a random number gene
 
 </div>
 
-A seeded RNG will be created and it will be included in the values. For the example above the return value of `.getValues()` would look like this:
+A seeded RNG will be created and included in the values. For the example above `.getValues()` returns:
 
 ```ts
 {
@@ -168,7 +193,7 @@ A seeded RNG will be created and it will be included in the values. For the exam
 
 ### Easing
 
-Cubic-bezier easing control which also creates easing function you can use directly. It includes five presets, which can be changed through the `presets` property. To disable presets pass an empty array.
+Cubic-bezier easing control that also generates an easing function. Includes five presets (configurable via the `presets` property). Pass an empty array to disable presets.
 
 ```ts
 {
@@ -198,7 +223,7 @@ Example:
 
 Please note that the string `ease_` will be removed from the preset labels.
 
-An easing function will be created and it will be included in the values. For the example above the return value of `.getValues()` would look like this:
+An easing function will be created and included in the values. For the example above `.getValues()` returns:
 
 ```ts
 {
@@ -209,7 +234,7 @@ An easing function will be created and it will be included in the values. For th
 
 ### Range
 
-A range slider that controls a number parameter. Accepts minimum, maximum and step values. It includes a few additional properties:
+Range slider that controls a number parameter. Accepts minimum, maximum and step values. It includes a few additional properties:
 
 ```ts
 {
@@ -241,7 +266,7 @@ Example:
 
 ### Dual range
 
-A range input with two handles that control minimum and maximum values. Includes the same additional properties as the range input.
+Range input with two handles that control minimum and maximum values. Includes the same additional properties as the range input. Uses my own [dual-range-input](https://github.com/stanko/dual-range-input) library.
 
 ```ts
 {
@@ -273,7 +298,7 @@ Example:
 
 ### Radio
 
-A grid of radio buttons. Can be set to have between one and five columns.
+Grid of radio buttons. Can be set to have between one and five columns.
 
 ```ts
 {
@@ -308,27 +333,38 @@ Example:
 
 ## Theming
 
-Ctrls relies on CSS variables for theming. There is a lot of variables you can tweak, but I suggest starting with these four:
+Ctrls uses CSS variables for theming. There are many you can adjust, but I recommend starting with these four:
+
+```scss
+.ctrls {
+  // Theme color's hue, default is blue
+  --ctrls-h: 245;
 
-```css
---ctrls-c: 0.7;
---ctrls-h: 220;
---ctrls-radius: 4px;
---ctrls-range-thumb-radius: 4px;
+  // Theme color's chroma
+  --ctrls-c: 0.25;
+
+  // Radius
+  --ctrls-radius: 4px;
+  --ctrls-range-thumb-radius: 4px;
+}
 ```
 
+Try tweaking these values live in this example. For convenience, the range thumb radius is set to half the main radius.
+
 <div class="theme-controls">
 </div>
 
+Check [the source file](https://github.com/Stanko/ctrls/blob/dev/src/scss/_ctrls.scss) to see all of the available variables.
+
 ## Why?
 
-You might ask why I made another library when [dat.GUI](https://github.com/dataarts/dat.gui) and [TweakPane](https://tweakpane.github.io/docs/) already exist. They both solve a general use case, with extensive options and elaborate APIs, while I wanted something smaller and easier to adapt for [my algorithmic drawings](https://muffinman.io/art/).
+You might ask why I made another library when [dat.GUI](https://github.com/dataarts/dat.gui) and [TweakPane](https://tweakpane.github.io/docs/) already exist. Both target general use cases with extensive options and elaborate APIs, while I wanted something smaller and easier to adapt for [my algorithmic drawings](https://muffinman.io/art/).
 
-I originally built a crude library with no plans to release it. Over time I polished it, ported it to TypeScript, and realized it might actually be useful to others. The code is solid, though I would love to add a few more features.
+I first hacked together a crude library with no plans to release it. Over time I polished it, ported it to TypeScript, and realized it could be useful to others. The code is solid, though I would love to add a few more features.
 
-Ctrls is a very opinionated library tailored to my likings. I'm open to suggestions, but they need to fit algorithmic art workflows and align with my vision. It's not meant to be a general-purpose library - others already cover that space well.
+Ctrls is opinionated and tailored to my likings. I'm open to suggestions, but they need to fit algorithmic art use-case and align with my vision. It's not meant to be a general-purpose library - others already cover that space well.
 
-I also want to mention that I really like TweakPane, and Ctrls' homepage is heavily influenced by it.
+Finally, I should note that I really like Tweakpane, and Ctrls’ homepage is heavily inspired by it.
 
 ## Cheers!
 
@@ -336,14 +372,14 @@ Thank you for stopping by! If you end up using Ctrls, please let me know, I woul
 
 ## TODO
 
-* [ ] Demo - favicon and metadata
-* [ ] Readme - screenshots
-* [ ] Prefix input names' with `ctrl_${id}_${name}` to avoid collisions
 * [ ] Allow users to pass a custom PRNG lib
 * [ ] Hash storage - check if there is an instance using hash storage already
-* [ ] Demo - stop animation when not in viewport
 * [ ] Add title which collapses the controls
 * [ ] Storage - local storage
+* [x] Prefix input names' with `ctrl_${id}_${name}` to avoid collisions
+* [x] Demo - stop animation when not in viewport
+* [x] Demo - favicon and metadata
+* [x] Readme - screenshots
 * [x] Use web safe / system fonts by default
 * [x] Experiment with chroma for light and dark shades of the main color
 * [x] On input event / handler

package/dist/ctrls/ctrl-radio.d.ts

@@ -17,6 +17,7 @@ export declare class RadioCtrl implements Ctrl<string> {
     items: Option[];
     element: HTMLElement;
     columns: 1 | 2 | 3 | 4 | 5;
+    id: string;
     constructor(config: CtrlTypeRegistry["radio"]["config"], onChange: CtrlChangeHandler<string>, onInput: CtrlChangeHandler<string>);
     parse: (string: string) => string;
     getRandomValue: () => string;

package/dist/ctrls/ctrl-radio.js

@@ -1,4 +1,6 @@
 import random from "../utils/random";
+import { toKebabCase } from "../utils/string-utils";
+import { getRandomString } from "../utils/get-random-string";
 export class RadioCtrl {
     constructor(config, onChange, onInput) {
         this.type = "radio";
@@ -21,7 +23,7 @@ export class RadioCtrl {
             const inputs = items.map((item) => {
                 const input = document.createElement("input");
                 input.setAttribute("type", "radio");
-                input.setAttribute("name", this.name);
+                input.setAttribute("name", this.id);
                 input.setAttribute("value", item.value);
                 input.checked = item.value === value;
                 input.addEventListener("change", () => {
@@ -58,7 +60,9 @@ export class RadioCtrl {
             this.value = item?.value || this.getDefaultValue();
             // Unselect previous option
             const prev = this.element.querySelector(`input:checked`);
-            prev.checked = false;
+            if (prev) {
+                prev.checked = false;
+            }
             // Select new option
             const next = this.element.querySelector(`[value="${this.value}"]`);
             next.checked = true;
@@ -73,6 +77,7 @@ export class RadioCtrl {
         this.columns = config.columns || 3;
         this.name = config.name;
         this.label = config.label || config.name;
+        this.id = `ctrls-${getRandomString()}-${toKebabCase(this.name)}`;
         const defaultValue = this.items.find((item) => item.value === config.defaultValue);
         this.value = defaultValue?.value || this.getDefaultValue();
         this.isRandomizationDisabled = config.isRandomizationDisabled || false;

package/dist/ctrls/index.d.ts

@@ -94,6 +94,7 @@ type ControlsOptions = {
     showRandomizeButton?: boolean;
     storage?: "hash" | "none";
     theme?: "system" | "light" | "dark";
+    parent?: Element;
 };
 export declare class Ctrls<Configs extends readonly TypedControlConfig[]> {
     options: ControlsOptions;

package/dist/ctrls/index.js

@@ -141,6 +141,9 @@ export class Ctrls {
         if (this.options.storage === "hash") {
             this.addHashListeners();
         }
+        if (this.options.parent) {
+            this.options.parent.appendChild(this.element);
+        }
     }
     getValues() {
         const options = {};

package/dist/ctrls.css

@@ -209,7 +209,7 @@
   --ctrls-checkbox-hover-text: var(--ctrls-gray-200);
   --ctrls-checkbox-checked-bg: var(--ctrls-theme);
   --ctrls-checkbox-checked-text: var(--ctrls-gray-50);
-  --ctrls-checkbox-checked-hover-bg: oklch(0.4 0.35 var(--ctrls-h));
+  --ctrls-checkbox-checked-hover-bg: oklch(0.5 var(--ctrls-c) var(--ctrls-h));
   --ctrls-easing-border: var(--ctrls-gray-200);
   --ctrls-ctrls__easing-handle-bg: var(--ctrls-gray-50);
   --ctrls-ctrls__easing-handle-border: var(--ctrls-gray-300);
@@ -236,6 +236,9 @@
     --ctrls-btn-bg: oklch(0.2 0.001 var(--ctrls-h));
     --ctrls-btn-hover-bg: oklch(0.1 0.001 var(--ctrls-h));
     --ctrls-input-bg: var(--ctrls-input-wrapper-bg);
+    --ctrls-checkbox-checked-hover-bg: oklch(
+      0.45 calc(var(--ctrls-c) - 0.1) var(--ctrls-h)
+    );
   }
 }
 .ctrls--dark-theme {
@@ -258,6 +261,9 @@
   --ctrls-btn-bg: oklch(0.2 0.001 var(--ctrls-h));
   --ctrls-btn-hover-bg: oklch(0.1 0.001 var(--ctrls-h));
   --ctrls-input-bg: var(--ctrls-input-wrapper-bg);
+  --ctrls-checkbox-checked-hover-bg: oklch(
+    0.45 calc(var(--ctrls-c) - 0.1) var(--ctrls-h)
+  );
 }
 
 .ctrls {

package/dist/ctrls.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA0CF;EACE;IAtCA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;;;AASF;EA3CE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;;;AAeF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;;AAGF;EACE;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;;AAOA;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAKA;AAAA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EAGE;;AAEA;EACE;;AANJ;EASE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;;AAEA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}
+{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;;AAGF;EACE;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;;AAOA;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAKA;AAAA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EAGE;;AAEA;EACE;;AANJ;EASE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;;AAEA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}

package/dist/utils/get-random-string.d.ts

@@ -0,0 +1 @@
+export declare const getRandomString: (slice?: number) => string;

package/dist/utils/get-random-string.js

@@ -0,0 +1,5 @@
+export const getRandomString = (slice = 4) => {
+    const random = Math.random().toString(36).substring(2).slice(0, slice);
+    const time = Date.now().toString(36).slice(0, slice);
+    return `${random}${time}`;
+};

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@stanko/ctrls",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
+    "start": "npm run parse-markdown && vite",
+    "build": "npm run parse-markdown && tsc && rm -rf ./docs && vite build && touch ./docs/.nojekyll",
     "build-css": "sass ./src/scss/index.scss ./dist/ctrls.css",
     "build-lib": "rm -rf ./dist && tsc -p ./tsconfig-lib.json && npm run build-css",
+    "parse-markdown": "node ./parse-markdown.js",
     "preview": "vite preview",
     "prepare": "cp ./pre-commit ./.git/hooks/pre-commit && chmod +x ./.git/hooks/pre-commit"
   },