@stanko/ctrls 0.4.4 → 0.4.6

package/README.md

@@ -4,16 +4,16 @@ Minimal library for controlling parameters, designed specifically for algorithmi
 
 [![Multiple Ctrls screenshots, on light and dark backgrounds](https://muffinman.io/ctrls/ctrls.png)](https://muffinman.io/ctrls/)
 
-## Made for algorithmic art
+## Made for algorithmic/generative art
 
-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.
+I built Ctrls for my [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.
 
-Play with the live example above or check the older version in my [Space Invaders generator](https://muffinman.io/invaders/).
+Play with the live example above or check older versions I used for [Space Invaders generator](https://muffinman.io/invaders/) and [Moon Phases](http://muffinman.io/moon/).
 
 ## Features
 
 - Minimal API
-- Six components : RNG seed, easing, boolean, radio, range and dual range
+- Eight components : RNG seed, easing, boolean, radio, range, dual range, file and custom HTML
 - Fully typed, including dynamic typings for controlled properties
 - Light and dark themes included, theming via CSS variables
 
@@ -466,7 +466,7 @@ Check [the source file](https://github.com/Stanko/ctrls/blob/dev/src/scss/_ctrls
 
 ## 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. 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/).
+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 generative drawings](https://muffinman.io/art/).
 
 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.
 
@@ -481,11 +481,12 @@ Thank you for stopping by! If you end up using Ctrls, please let me know, I woul
 ## TODO
 
 * [ ] Add `add/removeEventListener` instead of direct update of `onInput` and `onChange`
+* [ ] Check if `onInput` is triggered when it should
 * [ ] Allow users to pass a custom PRNG lib
 * [ ] Hash storage - check if there is an instance using hash storage already
 * [ ] Storage - local storage
-* [ ] Check if `onInput` si triggered when it should
-* [ ] Use dom helpers everywhere
+* [*] Collapsing animation for the main element and groups
+* [x] Use dom helpers everywhere
 * [x] `toHtmlId(this.name)` => `toHtmlId(this.id)`
 * [x] Add `name` and `id` to inputs
 * [x] TypeDef bug - easing presets should be optional

package/dist/ctrls/index.d.ts

@@ -10,7 +10,6 @@ export declare class Ctrls<Configs extends readonly ConfigItem[]> {
     constructor(configs: Configs, options?: ControlsOptions);
     processControls: (configs: Configs) => HTMLElement[];
     registerControl: (config: TypedControlConfig, onChangeControlHandler: (control: CtrlComponent) => void, onInputControlHandler: (control: CtrlComponent) => void, group?: string) => CtrlComponent;
-    toggleVisibility: () => void;
     addHashListeners: () => void;
     getHash: () => string;
     setHash: () => void;

package/dist/ctrls/index.js

@@ -12,6 +12,7 @@ import Alea from "../utils/alea";
 import { chevronUpIcon, diceIcon } from "../utils/icons";
 import { getHTMLControlElement } from "./ctrl-html";
 import { dom } from "../utils/dom";
+import { getDrawer } from "../utils/get-drawer";
 const controlMap = {
     boolean: BooleanCtrl,
     range: RangeCtrl,
@@ -46,20 +47,15 @@ export class Ctrls {
                     const groupTitle = dom.button("ctrls__group-title", {
                         innerHTML: (config.label || toSpaceCase(config.name)) + chevronUpIcon,
                     });
-                    groupTitle.addEventListener("click", () => {
-                        groupTitle.parentElement?.classList.toggle("ctrls__group--hidden");
-                    });
                     const controlsElements = config.controls.map((itemConfig) => {
                         const control = this.registerControl(itemConfig, onChangeControlHandler, onInputControlHandler, toCamelCase(config.name));
                         return control.element;
                     });
+                    const groupControls = getDrawer("ctrls__group-controls", controlsElements, groupTitle, config.isCollapsed);
                     // Create group element
                     const groupElement = dom.div("ctrls__group", {
-                        children: [groupTitle, ...controlsElements],
+                        children: [groupTitle, groupControls],
                     });
-                    if (config.isCollapsed) {
-                        groupElement.classList.add("ctrls__group--hidden");
-                    }
                     // Add the group element
                     elements.push(groupElement);
                 }
@@ -94,9 +90,6 @@ export class Ctrls {
             this.controls.push(control);
             return control;
         };
-        this.toggleVisibility = () => {
-            this.element.classList.toggle("ctrls--hidden");
-        };
         this.addHashListeners = () => {
             window.addEventListener("hashchange", this.updateFromHash);
             // Update all inputs using initial values from the hash
@@ -172,25 +165,24 @@ export class Ctrls {
             ...options,
         };
         // Title
-        let titleButton = null;
-        if (this.options.title) {
-            titleButton = dom.button("ctrls__title", {
+        let titleButton = this.options.title
+            ? dom.button("ctrls__title", {
                 innerHTML: this.options.title + chevronUpIcon,
-            });
-            titleButton.addEventListener("click", this.toggleVisibility);
-        }
+            })
+            : null;
         // Randomize button
-        let randomizeButton = null;
+        let randomizeRow = null;
         if (this.options.showRandomizeButton) {
-            randomizeButton = dom.button("ctrls__randomize ctrls__btn ctrls__btn--lg", { innerHTML: `Randomize ${diceIcon}` });
+            const randomizeButton = dom.button("ctrls__randomize ctrls__btn ctrls__btn--lg", { innerHTML: `Randomize ${diceIcon}` });
             randomizeButton.addEventListener("click", this.randomize);
+            randomizeRow = dom.div("ctrls__control-no-label", {
+                children: [randomizeButton],
+            });
         }
         // Control elements
         const controlElements = this.processControls(configs);
         // Controls wrapper
-        const controlsContainer = dom.div("ctrls__controls", {
-            children: [...controlElements, randomizeButton],
-        });
+        const controlsContainer = getDrawer("ctrls__controls", [...controlElements, randomizeRow], titleButton);
         // Main element
         this.element = dom.div(`ctrls ctrls--${this.options.theme}-theme`, {
             children: [titleButton, controlsContainer],

package/dist/ctrls.css

@@ -346,58 +346,92 @@
   width: 1rem;
 }
 
-.ctrls__group-title {
-  padding-block: 0.125rem;
+.ctrls__controls-inner {
+  display: grid;
+  gap: 0.5rem;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
+}
+.ctrls__controls-inner > *:last-child:not(:first-child) {
+  margin-bottom: 0.5rem;
 }
 
-.ctrls--hidden .ctrls__title svg,
-.ctrls__group--hidden .ctrls__group-title svg {
-  transform: rotate(180deg);
+.ctrls__drawer {
+  display: none;
+  align-items: flex-start;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 500ms, opacity 500ms, display 500ms;
+  transition-behavior: allow-discrete;
+  overflow: hidden;
+  opacity: 0;
 }
 
-.ctrls__controls {
-  overflow: auto;
+.ctrls__drawer--expanded {
   display: grid;
-  padding: 0.25rem 0;
-  scrollbar-width: thin;
-  scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
+  grid-template-rows: 1fr;
+  opacity: 1;
 }
 
-.ctrls--hidden .ctrls__controls {
-  display: none;
+@starting-style {
+  .ctrls__drawer--ready.ctrls__drawer--expanded {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+}
+.ctrls__drawer-inner {
+  overflow: hidden;
+}
+
+.ctrls__drawer-toggle--collapsed svg {
+  transform: rotate(180deg);
 }
 
 .ctrls__group {
-  margin: 0.25rem 0.5rem;
+  margin-inline: 0.5rem;
   border: 1px solid var(--ctrls-border);
   border-radius: var(--ctrls-radius);
   overflow: hidden;
 }
+.ctrls__group:only-child {
+  margin-block: 0.5rem;
+}
 
 .ctrls__group .ctrls__control {
   grid-template-columns: calc(var(--ctrls-label-width) - 0.5rem) minmax(0, 1fr);
 }
 
-.ctrls__group--hidden {
-  padding-block-end: 0;
+.ctrls__group-controls-inner {
+  display: grid;
+  gap: 0.5rem;
 }
-
-.ctrls__group--hidden .ctrls__control {
-  display: none;
+.ctrls__group-controls-inner > *:first-child {
+  margin-top: 0.25rem;
+}
+.ctrls__group-controls-inner > *:last-child {
+  margin-bottom: 0.25rem;
 }
 
 .ctrls__control {
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   display: grid;
   grid-template-columns: var(--ctrls-label-width) minmax(0, 1fr);
   align-items: center;
 }
 .ctrls__control:hover {
   background: var(--ctrls-hover-bg);
+  box-shadow: 0 0 0 0.25rem var(--ctrls-hover-bg);
 }
 .ctrls__control:hover .ctrls__control-label {
   color: var(--ctrls-theme);
 }
+.ctrls__control:only-child {
+  padding-block: 0.5rem;
+}
+
+.ctrls__control-no-label {
+  padding: 0 0.5rem 0 calc(var(--ctrls-label-width) + 0.5rem);
+}
 
 .ctrls__control-label {
   color: var(--ctrls-text-muted);
@@ -446,8 +480,7 @@
 }
 
 .ctrls__btn--lg {
-  margin-inline-start: calc(var(--ctrls-label-width) + 0.5rem);
-  margin-inline-end: 0.5rem;
+  width: 100%;
   padding: 0.5rem 1rem;
   background: var(--ctrls-btn-bg);
   border: 1px solid var(--ctrls-input-border);
@@ -460,7 +493,7 @@
 }
 
 .ctrls__randomize {
-  margin-block: 0.25rem;
+  grid-column: 2;
 }
 .ctrls__randomize:focus-visible svg, .ctrls__randomize:hover svg {
   transform: rotate(0.5turn);
@@ -776,7 +809,6 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   border: 1px solid var(--ctrls-input-border);
   background: var(--ctrls-input-wrapper-bg);
   border-radius: min(var(--ctrls-radius), 12px);
-  margin-bottom: 0.25rem;
 }
 
 .ctrls__easing {
@@ -820,6 +852,7 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 0.25rem;
+  margin-top: 0.25rem;
 }
 
 .ctrls__easing-buttons button {

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;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;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;;;AAgDF;EACE;IA5CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;IAGA;IACA;IAEA;IAGA;IAGA;;;AASF;EAjDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EAEA;EAGA;EAGA;;;AAeF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAKF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;AAAA;AAAA;EAEE;EACA;;AAKF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;;;AAIJ;EACE;;;AAKA;AAAA;EACE;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;;AAIE;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAON;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;;;AAKF;EACE;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;;;AAKF;EAIE;;AAEA;EACE;;AAPJ;EAUE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAON;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;AAAA;EAEE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;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;;AAIF;EAEE;EACA;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;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;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;;;AAgDF;EACE;IA5CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;IAGA;IACA;IAEA;IAGA;IAGA;;;AASF;EAjDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EAEA;EAGA;EAGA;;;AAeF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAKF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;AAAA;AAAA;EAEE;EACA;;AAKF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAIA;EACE;;;AAMJ;EACE;EACA;EACA;EACA,YACE;EAGF;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAIJ;EACE;;;AAIA;EACE;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;;AAIE;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAON;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;;;AAKF;EACE;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;;;AAKF;EAIE;;AAEA;EACE;;AAPJ;EAUE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAON;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;AAAA;EAEE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;EACA;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-drawer.d.ts

@@ -0,0 +1 @@
+export declare const getDrawer: (className?: string, children?: (HTMLElement | null)[], toggleButton?: HTMLButtonElement | null, isCollapsed?: boolean) => HTMLDivElement;

package/dist/utils/get-drawer.js

@@ -0,0 +1,25 @@
+import { dom } from "./dom";
+export const getDrawer = (className = "", children = [], toggleButton, isCollapsed = false) => {
+    const inner = dom.div(`ctrls__drawer-inner ${className}-inner`, {
+        children,
+    });
+    console.log(children.length);
+    const duration = Math.min(Math.max(children.length * 75, 300), 750);
+    const outer = dom.div(`ctrls__drawer ${className}`, {
+        children: [inner],
+        style: `transition-duration: ${duration}ms`,
+    });
+    if (isCollapsed) {
+        outer.classList.add("ctrls__drawer--collapsed");
+    }
+    else {
+        outer.classList.add("ctrls__drawer--expanded");
+    }
+    toggleButton?.addEventListener("click", () => {
+        outer.classList.add("ctrls__drawer--ready");
+        outer.classList.toggle("ctrls__drawer--collapsed");
+        outer.classList.toggle("ctrls__drawer--expanded");
+        toggleButton?.classList.toggle("ctrls__drawer-toggle--collapsed");
+    });
+    return outer;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanko/ctrls",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "type": "module",
   "scripts": {
     "test": "vitest",