@stacksjs/components 0.2.70 → 0.2.72

package/dist/composables/utilities/useLocalStorage.d.ts

@@ -7,10 +7,10 @@
  * @returns Object with value, setValue, and removeValue
  */
 export declare function useLocalStorage<T>(key: string, initialValue: T, options?: UseLocalStorageOptions<T>): {
-    value: T
-    setValue: (newValue: T | ((_prev: T) => T)) => void
-    removeValue: () => void
-  };
+  value: T
+  setValue: (newValue: T | ((_prev: T) => T)) => void
+  removeValue: () => void
+};
 /**
  * Reactive localStorage hook with cross-tab synchronization
  *

package/dist/index.js

@@ -1,11 +1,11 @@
 // @bun
-// ../../../../../../../tmp/stx-components-build-ZzY4r2/stubs/stub-0.js
+// ../../../../../../../tmp/stx-components-build-C5TNbr/stubs/stub-0.js
 var stub_0_default = { __stx: true, src: "./components/CodeBlock.stx" };
-// ../../../../../../../tmp/stx-components-build-ZzY4r2/stubs/stub-1.js
+// ../../../../../../../tmp/stx-components-build-C5TNbr/stubs/stub-1.js
 var stub_1_default = { __stx: true, src: "./components/Footer.stx" };
-// ../../../../../../../tmp/stx-components-build-ZzY4r2/stubs/stub-2.js
+// ../../../../../../../tmp/stx-components-build-C5TNbr/stubs/stub-2.js
 var stub_2_default = { __stx: true, src: "./components/Hero.stx" };
-// ../../../../../../../tmp/stx-components-build-ZzY4r2/stubs/stub-3.js
+// ../../../../../../../tmp/stx-components-build-C5TNbr/stubs/stub-3.js
 var stub_3_default = { __stx: true, src: "./components/Installation.stx" };
 // src/composables/useCopyCode.ts
 function useCopyCode(options) {

package/dist/utils/accessibility.d.ts

@@ -215,71 +215,71 @@ export type AriaLive = 'off' | 'polite' | 'assertive';
  * ARIA role types
  */
 export type AriaRole = | 'alert'
-  | 'alertdialog'
-  | 'application'
-  | 'article'
-  | 'banner'
-  | 'button'
-  | 'cell'
-  | 'checkbox'
-  | 'columnheader'
-  | 'combobox'
-  | 'complementary'
-  | 'contentinfo'
-  | 'definition'
-  | 'dialog'
-  | 'directory'
-  | 'document'
-  | 'feed'
-  | 'figure'
-  | 'form'
-  | 'grid'
-  | 'gridcell'
-  | 'group'
-  | 'heading'
-  | 'img'
-  | 'link'
-  | 'list'
-  | 'listbox'
-  | 'listitem'
-  | 'log'
-  | 'main'
-  | 'marquee'
-  | 'math'
-  | 'menu'
-  | 'menubar'
-  | 'menuitem'
-  | 'menuitemcheckbox'
-  | 'menuitemradio'
-  | 'navigation'
-  | 'none'
-  | 'note'
-  | 'option'
-  | 'presentation'
-  | 'progressbar'
-  | 'radio'
-  | 'radiogroup'
-  | 'region'
-  | 'row'
-  | 'rowgroup'
-  | 'rowheader'
-  | 'scrollbar'
-  | 'search'
-  | 'searchbox'
-  | 'separator'
-  | 'slider'
-  | 'spinbutton'
-  | 'status'
-  | 'switch'
-  | 'tab'
-  | 'table'
-  | 'tablist'
-  | 'tabpanel'
-  | 'term'
-  | 'textbox'
-  | 'timer'
-  | 'toolbar'
-  | 'tooltip'
-  | 'tree'
-  | 'treegrid'
-  | 'treeitem';
+| 'alertdialog'
+| 'application'
+| 'article'
+| 'banner'
+| 'button'
+| 'cell'
+| 'checkbox'
+| 'columnheader'
+| 'combobox'
+| 'complementary'
+| 'contentinfo'
+| 'definition'
+| 'dialog'
+| 'directory'
+| 'document'
+| 'feed'
+| 'figure'
+| 'form'
+| 'grid'
+| 'gridcell'
+| 'group'
+| 'heading'
+| 'img'
+| 'link'
+| 'list'
+| 'listbox'
+| 'listitem'
+| 'log'
+| 'main'
+| 'marquee'
+| 'math'
+| 'menu'
+| 'menubar'
+| 'menuitem'
+| 'menuitemcheckbox'
+| 'menuitemradio'
+| 'navigation'
+| 'none'
+| 'note'
+| 'option'
+| 'presentation'
+| 'progressbar'
+| 'radio'
+| 'radiogroup'
+| 'region'
+| 'row'
+| 'rowgroup'
+| 'rowheader'
+| 'scrollbar'
+| 'search'
+| 'searchbox'
+| 'separator'
+| 'slider'
+| 'spinbutton'
+| 'status'
+| 'switch'
+| 'tab'
+| 'table'
+| 'tablist'
+| 'tabpanel'
+| 'term'
+| 'textbox'
+| 'timer'
+| 'toolbar'
+| 'tooltip'
+| 'tree'
+| 'treegrid'
+| 'treeitem';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/components",
   "type": "module",
-  "version": "0.2.70",
+  "version": "0.2.72",
   "description": "A modern component library built with STX, featuring headwind utility classes and TypeScript syntax highlighting.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -58,14 +58,14 @@
   },
   "dependencies": {
     "@cwcss/crosswind": "^0.2.0",
-    "@stacksjs/stx": "0.2.70",
-    "bun-plugin-stx": "0.2.70",
+    "@stacksjs/stx": "0.2.72",
+    "bun-plugin-stx": "0.2.72",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "devDependencies": {
     "@types/bun": "^1.3.11",
     "bun-plugin-dtsx": "^0.21.17",
-    "pickier": "^0.1.20",
+    "pickier": "^0.1.35",
     "typescript": "^6.0.2"
   }
 }

package/src/composables/utilities/useLocalStorage.ts

@@ -36,10 +36,10 @@ export function useLocalStorage<T>(
   initialValue: T,
   options: UseLocalStorageOptions<T> = {},
 ): {
-    value: T
-    setValue: (newValue: T | ((_prev: T) => T)) => void
-    removeValue: () => void
-  } {
+  value: T
+  setValue: (newValue: T | ((_prev: T) => T)) => void
+  removeValue: () => void
+} {
   const {
     serializer = JSON.stringify,
     deserializer = JSON.parse,

package/src/utils/accessibility.ts

@@ -28,76 +28,76 @@ export type AriaLive = 'off' | 'polite' | 'assertive'
 /**
  * ARIA role types
  */
-export type AriaRole =
-  | 'alert'
-  | 'alertdialog'
-  | 'application'
-  | 'article'
-  | 'banner'
-  | 'button'
-  | 'cell'
-  | 'checkbox'
-  | 'columnheader'
-  | 'combobox'
-  | 'complementary'
-  | 'contentinfo'
-  | 'definition'
-  | 'dialog'
-  | 'directory'
-  | 'document'
-  | 'feed'
-  | 'figure'
-  | 'form'
-  | 'grid'
-  | 'gridcell'
-  | 'group'
-  | 'heading'
-  | 'img'
-  | 'link'
-  | 'list'
-  | 'listbox'
-  | 'listitem'
-  | 'log'
-  | 'main'
-  | 'marquee'
-  | 'math'
-  | 'menu'
-  | 'menubar'
-  | 'menuitem'
-  | 'menuitemcheckbox'
-  | 'menuitemradio'
-  | 'navigation'
-  | 'none'
-  | 'note'
-  | 'option'
-  | 'presentation'
-  | 'progressbar'
-  | 'radio'
-  | 'radiogroup'
-  | 'region'
-  | 'row'
-  | 'rowgroup'
-  | 'rowheader'
-  | 'scrollbar'
-  | 'search'
-  | 'searchbox'
-  | 'separator'
-  | 'slider'
-  | 'spinbutton'
-  | 'status'
-  | 'switch'
-  | 'tab'
-  | 'table'
-  | 'tablist'
-  | 'tabpanel'
-  | 'term'
-  | 'textbox'
-  | 'timer'
-  | 'toolbar'
-  | 'tooltip'
-  | 'tree'
-  | 'treegrid'
-  | 'treeitem'
+export type AriaRole = 
+| 'alert'
+| 'alertdialog'
+| 'application'
+| 'article'
+| 'banner'
+| 'button'
+| 'cell'
+| 'checkbox'
+| 'columnheader'
+| 'combobox'
+| 'complementary'
+| 'contentinfo'
+| 'definition'
+| 'dialog'
+| 'directory'
+| 'document'
+| 'feed'
+| 'figure'
+| 'form'
+| 'grid'
+| 'gridcell'
+| 'group'
+| 'heading'
+| 'img'
+| 'link'
+| 'list'
+| 'listbox'
+| 'listitem'
+| 'log'
+| 'main'
+| 'marquee'
+| 'math'
+| 'menu'
+| 'menubar'
+| 'menuitem'
+| 'menuitemcheckbox'
+| 'menuitemradio'
+| 'navigation'
+| 'none'
+| 'note'
+| 'option'
+| 'presentation'
+| 'progressbar'
+| 'radio'
+| 'radiogroup'
+| 'region'
+| 'row'
+| 'rowgroup'
+| 'rowheader'
+| 'scrollbar'
+| 'search'
+| 'searchbox'
+| 'separator'
+| 'slider'
+| 'spinbutton'
+| 'status'
+| 'switch'
+| 'tab'
+| 'table'
+| 'tablist'
+| 'tabpanel'
+| 'term'
+| 'textbox'
+| 'timer'
+| 'toolbar'
+| 'tooltip'
+| 'tree'
+| 'treegrid'
+| 'treeitem'
 
 /**
  * Focus trap options
@@ -504,54 +504,54 @@ export function createRovingTabindex(
 
     switch (event.key) {
       case 'ArrowRight':
-        if (orientation === 'horizontal' || orientation === 'both') {
-          newIndex = currentIndex + 1
-          if (newIndex > maxIndex) {
-            newIndex = loop ? 0 : maxIndex
-          }
-          handled = true
+      if (orientation === 'horizontal' || orientation === 'both') {
+        newIndex = currentIndex + 1
+        if (newIndex > maxIndex) {
+          newIndex = loop ? 0 : maxIndex
         }
-        break
+        handled = true
+      }
+      break
 
       case 'ArrowLeft':
-        if (orientation === 'horizontal' || orientation === 'both') {
-          newIndex = currentIndex - 1
-          if (newIndex < 0) {
-            newIndex = loop ? maxIndex : 0
-          }
-          handled = true
+      if (orientation === 'horizontal' || orientation === 'both') {
+        newIndex = currentIndex - 1
+        if (newIndex < 0) {
+          newIndex = loop ? maxIndex : 0
         }
-        break
+        handled = true
+      }
+      break
 
       case 'ArrowDown':
-        if (orientation === 'vertical' || orientation === 'both') {
-          newIndex = currentIndex + 1
-          if (newIndex > maxIndex) {
-            newIndex = loop ? 0 : maxIndex
-          }
-          handled = true
+      if (orientation === 'vertical' || orientation === 'both') {
+        newIndex = currentIndex + 1
+        if (newIndex > maxIndex) {
+          newIndex = loop ? 0 : maxIndex
         }
-        break
+        handled = true
+      }
+      break
 
       case 'ArrowUp':
-        if (orientation === 'vertical' || orientation === 'both') {
-          newIndex = currentIndex - 1
-          if (newIndex < 0) {
-            newIndex = loop ? maxIndex : 0
-          }
-          handled = true
+      if (orientation === 'vertical' || orientation === 'both') {
+        newIndex = currentIndex - 1
+        if (newIndex < 0) {
+          newIndex = loop ? maxIndex : 0
         }
-        break
+        handled = true
+      }
+      break
 
       case 'Home':
-        newIndex = 0
-        handled = true
-        break
+      newIndex = 0
+      handled = true
+      break
 
       case 'End':
-        newIndex = maxIndex
-        handled = true
-        break
+      newIndex = maxIndex
+      handled = true
+      break
     }
 
     if (handled) {

package/src/utils/animation/helpers.ts

@@ -207,13 +207,13 @@ export function createKeyframes(name: string, frames: Record<string, Record<stri
   const keyframesRule = `
     @keyframes ${name} {
       ${Object.entries(frames)
-        .map(([percentage, styles]) => {
-          const styleString = Object.entries(styles)
-            .map(([prop, value]) => `${prop}: ${value};`)
-            .join(' ')
-          return `${percentage} { ${styleString} }`
-        })
-        .join('\n')}
+    .map(([percentage, styles]) => {
+    const styleString = Object.entries(styles)
+      .map(([prop, value]) => `${prop}: ${value};`)
+      .join(' ')
+    return `${percentage} { ${styleString} }`
+  })
+    .join('\n')}
     }
   `
 

package/src/utils/error-handling.ts

@@ -13,7 +13,6 @@
  * })
  * ```
  */
-
 import process from 'node:process'
 
 /**

package/src/utils/prop-validation.ts

@@ -91,7 +91,7 @@ export const PropTypes: {
   string: new Validator<string>(
     value => typeof value === 'string',
     (value, propName, componentName) =>
-      `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`string\`.`,
+    `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`string\`.`,
   ),
 
   /**
@@ -100,7 +100,7 @@ export const PropTypes: {
   number: new Validator<number>(
     value => typeof value === 'number' && !Number.isNaN(value),
     (value, propName, componentName) =>
-      `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`number\`.`,
+    `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`number\`.`,
   ),
 
   /**
@@ -109,7 +109,7 @@ export const PropTypes: {
   boolean: new Validator<boolean>(
     value => typeof value === 'boolean',
     (value, propName, componentName) =>
-      `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`boolean\`.`,
+    `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`boolean\`.`,
   ),
 
   /**
@@ -117,7 +117,7 @@ export const PropTypes: {
    */
   func: new Validator<(...args: any[]) => any>(
     value => typeof value === 'function',
-  (value, propName, componentName) =>
+    (value, propName, componentName) =>
     `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`function\`.`,
   ),
 
@@ -127,7 +127,7 @@ export const PropTypes: {
   object: new Validator<object>(
     value => typeof value === 'object' && value !== null && !Array.isArray(value),
     (value, propName, componentName) =>
-      `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`object\`.`,
+    `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`object\`.`,
   ),
 
   /**
@@ -136,7 +136,7 @@ export const PropTypes: {
   array: new Validator<any[]>(
     value => Array.isArray(value),
     (value, propName, componentName) =>
-      `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`array\`.`,
+    `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`array\`.`,
   ),
 
   /**
@@ -156,7 +156,7 @@ export const PropTypes: {
     return new Validator(
       value => validValues.includes(value),
       (value, propName, componentName) =>
-        `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected one of [${validValues.map(v => JSON.stringify(v)).join(', ')}].`,
+      `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected one of [${validValues.map(v => JSON.stringify(v)).join(', ')}].`,
     )
   },
 
@@ -168,9 +168,9 @@ export const PropTypes: {
   oneOfType(validators: Validator[]): Validator {
     return new Validator(
       (value, propName, componentName) =>
-        validators.some(v => v.validate(value, propName, componentName)),
+      validators.some(v => v.validate(value, propName, componentName)),
       (_value, propName, componentName) =>
-        `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected one of the specified types.`,
+      `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected one of the specified types.`,
     )
   },
 
@@ -187,7 +187,7 @@ export const PropTypes: {
         return value.every((item, index) => validator.validate(item, `${propName}[${index}]`, componentName))
       },
       (_value, propName, componentName) =>
-        `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected array of specified type.`,
+      `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected array of specified type.`,
     )
   },
 
@@ -214,7 +214,7 @@ export const PropTypes: {
         return true
       },
       (_value, propName, componentName) =>
-        `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected object matching specified shape.`,
+      `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected object matching specified shape.`,
     )
   },
 
@@ -227,7 +227,7 @@ export const PropTypes: {
     return new Validator(
       value => value instanceof expectedClass,
       (_value, propName, componentName) =>
-        `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected instance of \`${expectedClass.name}\`.`,
+      `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected instance of \`${expectedClass.name}\`.`,
     )
   },
 
@@ -257,7 +257,7 @@ export const PropTypes: {
     return new Validator(
       value => typeof value === 'number' && value >= min,
       (value, propName, componentName) =>
-        `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected value >= ${min}.`,
+      `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected value >= ${min}.`,
     )
   },
 
@@ -270,7 +270,7 @@ export const PropTypes: {
     return new Validator(
       value => typeof value === 'number' && value <= max,
       (value, propName, componentName) =>
-        `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected value <= ${max}.`,
+      `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected value <= ${max}.`,
     )
   },
 
@@ -284,7 +284,7 @@ export const PropTypes: {
     return new Validator(
       value => typeof value === 'number' && value >= min && value <= max,
       (value, propName, componentName) =>
-        `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected value between ${min} and ${max}.`,
+      `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected value between ${min} and ${max}.`,
     )
   },
 
@@ -297,7 +297,7 @@ export const PropTypes: {
     return new Validator(
       value => typeof value === 'string' && pattern.test(value),
       (value, propName, componentName) =>
-        `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected value matching pattern ${pattern}.`,
+      `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected value matching pattern ${pattern}.`,
     )
   },
 
@@ -307,7 +307,7 @@ export const PropTypes: {
   email: new Validator<string>(
     value => typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
     (value, propName, componentName) =>
-      `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected valid email address.`,
+    `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected valid email address.`,
   ),
 
   /**
@@ -326,7 +326,7 @@ export const PropTypes: {
       }
     },
     (value, propName, componentName) =>
-      `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected valid URL.`,
+    `Invalid prop \`${propName}\` of value \`${value}\` supplied to \`${componentName}\`, expected valid URL.`,
   ),
 }