Fix Select and Lint TS (#16)

Author: karim-semmoud

README.md

@@ -43,7 +43,7 @@ Add `corex` to your `mix.exs` dependencies:
 ```elixir
 def deps do
   [
-    {:corex, "~> 0.1.0-alpha.21"}
+    {:corex, "~> 0.1.0-alpha.22"}
   ]
 end
 ```

assets/components/accordion.ts

@@ -1,4 +1,4 @@
-import {connect, machine, type Props, type Api}  from "@zag-js/accordion";
+import { connect, machine, type Props, type Api } from "@zag-js/accordion";
 import { VanillaMachine, normalizeProps } from "@zag-js/vanilla";
 import { Component } from "../lib/core";
 
@@ -30,17 +30,23 @@ export class Accordion extends Component<Props, Api> {
       const { value, disabled } = itemData;
       this.spreadProps(itemEl, this.api.getItemProps({ value, disabled }));
 
-      const triggerEl = itemEl.querySelector<HTMLElement>('[data-scope="accordion"][data-part="item-trigger"]');
+      const triggerEl = itemEl.querySelector<HTMLElement>(
+        '[data-scope="accordion"][data-part="item-trigger"]'
+      );
       if (triggerEl) {
         this.spreadProps(triggerEl, this.api.getItemTriggerProps({ value, disabled }));
       }
 
-      const indicatorEl = itemEl.querySelector<HTMLElement>('[data-scope="accordion"][data-part="item-indicator"]');
+      const indicatorEl = itemEl.querySelector<HTMLElement>(
+        '[data-scope="accordion"][data-part="item-indicator"]'
+      );
       if (indicatorEl) {
         this.spreadProps(indicatorEl, this.api.getItemIndicatorProps({ value, disabled }));
       }
 
-      const contentEl = itemEl.querySelector<HTMLElement>('[data-scope="accordion"][data-part="item-content"]');
+      const contentEl = itemEl.querySelector<HTMLElement>(
+        '[data-scope="accordion"][data-part="item-content"]'
+      );
       if (contentEl) {
         this.spreadProps(contentEl, this.api.getItemContentProps({ value, disabled }));
       }
@@ -56,4 +62,4 @@ export class Accordion extends Component<Props, Api> {
       return [];
     }
   }
-}
+}

assets/components/checkbox.ts

@@ -1,4 +1,4 @@
-import {connect, machine, type Props, type Api} from "@zag-js/checkbox";
+import { connect, machine, type Props, type Api } from "@zag-js/checkbox";
 import { VanillaMachine, normalizeProps } from "@zag-js/vanilla";
 import { Component } from "../lib/core";
 
@@ -17,24 +17,32 @@ export class Checkbox extends Component<Props, Api> {
     if (!rootEl) return;
     this.spreadProps(rootEl, this.api.getRootProps());
 
-    const inputEl = rootEl.querySelector<HTMLElement>(':scope > [data-scope="checkbox"][data-part="hidden-input"]');
+    const inputEl = rootEl.querySelector<HTMLElement>(
+      ':scope > [data-scope="checkbox"][data-part="hidden-input"]'
+    );
     if (inputEl) {
       this.spreadProps(inputEl, this.api.getHiddenInputProps());
     }
 
-    const labelEl = rootEl.querySelector<HTMLElement>(':scope > [data-scope="checkbox"][data-part="label"]');
+    const labelEl = rootEl.querySelector<HTMLElement>(
+      ':scope > [data-scope="checkbox"][data-part="label"]'
+    );
     if (labelEl) {
       this.spreadProps(labelEl, this.api.getLabelProps());
     }
 
-    const controlEl = rootEl.querySelector<HTMLElement>(':scope > [data-scope="checkbox"][data-part="control"]');
+    const controlEl = rootEl.querySelector<HTMLElement>(
+      ':scope > [data-scope="checkbox"][data-part="control"]'
+    );
     if (controlEl) {
       this.spreadProps(controlEl, this.api.getControlProps());
-      
-      const indicatorEl = controlEl.querySelector<HTMLElement>(':scope > [data-scope="checkbox"][data-part="indicator"]');
+
+      const indicatorEl = controlEl.querySelector<HTMLElement>(
+        ':scope > [data-scope="checkbox"][data-part="indicator"]'
+      );
       if (indicatorEl) {
         this.spreadProps(indicatorEl, this.api.getIndicatorProps());
       }
     }
   }
-}
+}

assets/components/clipboard.ts

@@ -1,4 +1,4 @@
-import {connect, machine, type Props, type Api}  from "@zag-js/clipboard";
+import { connect, machine, type Props, type Api } from "@zag-js/clipboard";
 import { VanillaMachine, normalizeProps } from "@zag-js/vanilla";
 import { Component } from "../lib/core";
 
@@ -17,16 +17,22 @@ export class Clipboard extends Component<Props, Api> {
     if (rootEl) {
       this.spreadProps(rootEl, this.api.getRootProps());
 
-      const labelEl = rootEl.querySelector<HTMLElement>('[data-scope="clipboard"][data-part="label"]');
+      const labelEl = rootEl.querySelector<HTMLElement>(
+        '[data-scope="clipboard"][data-part="label"]'
+      );
       if (labelEl) {
         this.spreadProps(labelEl, this.api.getLabelProps());
       }
 
-      const controlEl = rootEl.querySelector<HTMLElement>('[data-scope="clipboard"][data-part="control"]');
+      const controlEl = rootEl.querySelector<HTMLElement>(
+        '[data-scope="clipboard"][data-part="control"]'
+      );
       if (controlEl) {
         this.spreadProps(controlEl, this.api.getControlProps());
 
-        const inputEl = controlEl.querySelector<HTMLElement>('[data-scope="clipboard"][data-part="input"]');
+        const inputEl = controlEl.querySelector<HTMLElement>(
+          '[data-scope="clipboard"][data-part="input"]'
+        );
         if (inputEl) {
           const inputProps = { ...this.api.getInputProps() };
           const inputAriaLabel = this.el.dataset.inputAriaLabel;
@@ -36,7 +42,9 @@ export class Clipboard extends Component<Props, Api> {
           this.spreadProps(inputEl, inputProps);
         }
 
-        const triggerEl = controlEl.querySelector<HTMLElement>('[data-scope="clipboard"][data-part="trigger"]');
+        const triggerEl = controlEl.querySelector<HTMLElement>(
+          '[data-scope="clipboard"][data-part="trigger"]'
+        );
         if (triggerEl) {
           const triggerProps = { ...this.api.getTriggerProps() };
           const ariaLabel = this.el.dataset.triggerAriaLabel;
@@ -47,6 +55,5 @@ export class Clipboard extends Component<Props, Api> {
         }
       }
     }
-
   }
-}
+}

assets/components/collapsible.ts

@@ -1,4 +1,4 @@
-import {connect, machine, type Props, type Api}  from "@zag-js/collapsible";
+import { connect, machine, type Props, type Api } from "@zag-js/collapsible";
 import { VanillaMachine, normalizeProps } from "@zag-js/vanilla";
 import { Component } from "../lib/core";
 
@@ -13,20 +13,25 @@ export class Collapsible extends Component<Props, Api> {
   }
 
   render(): void {
-    const rootEl = this.el.querySelector<HTMLElement>('[data-scope="collapsible"][data-part="root"]');
+    const rootEl = this.el.querySelector<HTMLElement>(
+      '[data-scope="collapsible"][data-part="root"]'
+    );
     if (rootEl) {
       this.spreadProps(rootEl, this.api.getRootProps());
 
-      const triggerEl = rootEl.querySelector<HTMLElement>('[data-scope="collapsible"][data-part="trigger"]');
+      const triggerEl = rootEl.querySelector<HTMLElement>(
+        '[data-scope="collapsible"][data-part="trigger"]'
+      );
       if (triggerEl) {
         this.spreadProps(triggerEl, this.api.getTriggerProps());
       }
 
-      const contentEl = rootEl.querySelector<HTMLElement>('[data-scope="collapsible"][data-part="content"]');
+      const contentEl = rootEl.querySelector<HTMLElement>(
+        '[data-scope="collapsible"][data-part="content"]'
+      );
       if (contentEl) {
         this.spreadProps(contentEl, this.api.getContentProps());
       }
     }
-
   }
-}
+}