@pyreon/elements 0.11.5 → 0.11.7

package/README.md

@@ -45,25 +45,25 @@ When only content is present (no beforeContent/afterContent), Element optimizes
 
 **Content props** (rendered in priority order: children > content > label):
 
-| Prop | Type | Description |
-| ---- | ---- | ----------- |
-| children | `VNode` | Standard children |
-| content | `VNode` | Alternative to children |
-| label | `VNode` | Alternative to children/content |
+| Prop          | Type    | Description                           |
+| ------------- | ------- | ------------------------------------- |
+| children      | `VNode` | Standard children                     |
+| content       | `VNode` | Alternative to children               |
+| label         | `VNode` | Alternative to children/content       |
 | beforeContent | `VNode` | Content rendered before the main slot |
-| afterContent | `VNode` | Content rendered after the main slot |
+| afterContent  | `VNode` | Content rendered after the main slot  |
 
 **Layout props** (all responsive):
 
-| Prop | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
-| tag | `HTMLTags` | `'div'` | HTML element tag |
-| block | `boolean` | — | `flex` vs `inline-flex` |
+| Prop      | Type        | Default    | Description                                                    |
+| --------- | ----------- | ---------- | -------------------------------------------------------------- |
+| tag       | `HTMLTags`  | `'div'`    | HTML element tag                                               |
+| block     | `boolean`   | —          | `flex` vs `inline-flex`                                        |
 | direction | `Direction` | `'inline'` | `'inline'` \| `'rows'` \| `'reverseInline'` \| `'reverseRows'` |
-| alignX | `AlignX` | `'left'` | Horizontal alignment |
-| alignY | `AlignY` | `'center'` | Vertical alignment |
-| gap | `number` | — | Gap between content sections |
-| equalCols | `boolean` | — | Equal width/height for before/after |
+| alignX    | `AlignX`    | `'left'`   | Horizontal alignment                                           |
+| alignY    | `AlignY`    | `'center'` | Vertical alignment                                             |
+| gap       | `number`    | —          | Gap between content sections                                   |
+| equalCols | `boolean`   | —          | Equal width/height for before/after                            |
 
 Each section (content, beforeContent, afterContent) has its own direction, alignX, and alignY props prefixed with the section name:
 
@@ -88,12 +88,12 @@ Text({ paragraph: true, children: 'This renders as a p tag.' })
 Text({ tag: 'strong', label: 'Bold text' })
 ```
 
-| Prop | Type | Description |
-| ---- | ---- | ----------- |
-| tag | `HTMLTextTags` | `'h1'`–`'h6'`, `'p'`, `'span'`, `'strong'`, `'em'`, etc. |
-| paragraph | `boolean` | Shorthand for `tag="p"` |
-| children / label | `VNode` | Text content |
-| css | `ExtendCss` | Extend styling |
+| Prop             | Type           | Description                                              |
+| ---------------- | -------------- | -------------------------------------------------------- |
+| tag              | `HTMLTextTags` | `'h1'`–`'h6'`, `'p'`, `'span'`, `'strong'`, `'em'`, etc. |
+| paragraph        | `boolean`      | Shorthand for `tag="p"`                                  |
+| children / label | `VNode`        | Text content                                             |
+| css              | `ExtendCss`    | Extend styling                                           |
 
 ### List
 
@@ -112,7 +112,10 @@ List({
 // Object data with positional metadata
 List({
   component: ListItem,
-  data: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
+  data: [
+    { id: 1, name: 'Alice' },
+    { id: 2, name: 'Bob' },
+  ],
   itemKey: 'id',
   itemProps: (item, { first, last, odd, even, index }) => ({
     highlighted: first,
@@ -130,15 +133,15 @@ List({
 })
 ```
 
-| Prop | Type | Description |
-| ---- | ---- | ----------- |
-| data | `Array` | Array of strings, numbers, or objects |
-| component | `ComponentFn` | Component to render for each item |
-| valueName | `string` | Prop name for scalar values (default: `'children'`) |
-| itemKey | `string \| function` | Key extraction for list items |
-| itemProps | `object \| function` | Extra props injected into each item |
-| wrapComponent | `ComponentFn` | Wrapper around each item |
-| rootElement | `boolean` | Wrap list in an Element (enables direction, gap, etc.) |
+| Prop          | Type                 | Description                                            |
+| ------------- | -------------------- | ------------------------------------------------------ |
+| data          | `Array`              | Array of strings, numbers, or objects                  |
+| component     | `ComponentFn`        | Component to render for each item                      |
+| valueName     | `string`             | Prop name for scalar values (default: `'children'`)    |
+| itemKey       | `string \| function` | Key extraction for list items                          |
+| itemProps     | `object \| function` | Extra props injected into each item                    |
+| wrapComponent | `ComponentFn`        | Wrapper around each item                               |
+| rootElement   | `boolean`            | Wrap list in an Element (enables direction, gap, etc.) |
 
 **Positional metadata** passed to `itemProps` callback:
 
@@ -182,12 +185,12 @@ Element({ direction: { xs: 'rows', md: 'inline', lg: 'inline' } })
 
 ## Peer Dependencies
 
-| Package | Version |
-| ------- | ------- |
-| @pyreon/core | >= 0.0.1 |
+| Package            | Version  |
+| ------------------ | -------- |
+| @pyreon/core       | >= 0.0.1 |
 | @pyreon/reactivity | >= 0.0.1 |
-| @pyreon/ui-core | >= 0.0.1 |
-| @pyreon/unistyle | >= 0.0.1 |
+| @pyreon/ui-core    | >= 0.0.1 |
+| @pyreon/unistyle   | >= 0.0.1 |
 
 ## License
 

package/lib/index.d.ts

@@ -13,10 +13,10 @@ type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>;
 type InnerRef = HTMLElement | ((el: HTMLElement | null) => void) | null;
 type CssCallback = (css: typeof config.css) => ReturnType<typeof css>;
 type Css = CssCallback | ReturnType<typeof config.css> | string;
-type Content = Parameters<typeof render>["0"];
-type ContentAlignX = "left" | "center" | "right" | "spaceBetween" | "spaceAround" | "block";
-type ContentAlignY = "top" | "center" | "bottom" | "spaceBetween" | "spaceAround" | "block";
-type ContentDirection = "inline" | "rows" | "reverseInline" | "reverseRows";
+type Content = Parameters<typeof render>['0'];
+type ContentAlignX = 'left' | 'center' | 'right' | 'spaceBetween' | 'spaceAround' | 'block';
+type ContentAlignY = 'top' | 'center' | 'bottom' | 'spaceBetween' | 'spaceAround' | 'block';
+type ContentDirection = 'inline' | 'rows' | 'reverseInline' | 'reverseRows';
 type ContentBoolean = boolean;
 type ContentSimpleValue = string | number;
 type AlignY = ContentAlignY | ContentAlignY[] | Partial<Record<BreakpointKeys, ContentAlignY>>;
@@ -219,7 +219,7 @@ type Props$1 = Partial<{
   /**
    * Extension of **item** `wrapComponent` props to be passed
    */
-  itemKey?: keyof ObjectValue | ((item: SimpleValue | Omit<ObjectValue, "component">, index: number) => SimpleValue);
+  itemKey?: keyof ObjectValue | ((item: SimpleValue | Omit<ObjectValue, 'component'>, index: number) => SimpleValue);
 }>;
 //#endregion
 //#region src/helpers/Iterator/component.d.ts
@@ -272,15 +272,15 @@ declare const Component$3: ({
  * Event handlers are throttled for performance, and nested overlay blocking
  * is coordinated through the overlay context.
  */
-type Align$1 = "bottom" | "top" | "left" | "right";
-type AlignX$2 = "left" | "center" | "right";
-type AlignY$2 = "bottom" | "top" | "center";
+type Align$1 = 'bottom' | 'top' | 'left' | 'right';
+type AlignX$2 = 'left' | 'center' | 'right';
+type AlignY$2 = 'bottom' | 'top' | 'center';
 type UseOverlayProps = Partial<{
   isOpen: boolean;
-  openOn: "click" | "hover" | "manual";
-  closeOn: "click" | "clickOnTrigger" | "clickOutsideContent" | "hover" | "manual";
-  type: "dropdown" | "tooltip" | "popover" | "modal" | "custom";
-  position: "absolute" | "fixed" | "relative" | "static";
+  openOn: 'click' | 'hover' | 'manual';
+  closeOn: 'click' | 'clickOnTrigger' | 'clickOutsideContent' | 'hover' | 'manual';
+  type: 'dropdown' | 'tooltip' | 'popover' | 'modal' | 'custom';
+  position: 'absolute' | 'fixed' | 'relative' | 'static';
   align: Align$1;
   alignX: AlignX$2;
   alignY: AlignY$2;
@@ -336,9 +336,9 @@ declare const useOverlay: ({
 };
 //#endregion
 //#region src/Overlay/component.d.ts
-type Align = "bottom" | "top" | "left" | "right";
-type AlignX$1 = "left" | "center" | "right";
-type AlignY$1 = "bottom" | "top" | "center";
+type Align = 'bottom' | 'top' | 'left' | 'right';
+type AlignX$1 = 'left' | 'center' | 'right';
+type AlignY$1 = 'bottom' | 'top' | 'center';
 type TriggerRenderer = (props: Partial<{
   active: boolean;
   showContent: () => void;

package/package.json

@@ -1,24 +1,13 @@
 {
   "name": "@pyreon/elements",
-  "version": "0.11.5",
+  "version": "0.11.7",
+  "description": "Foundational UI components for Pyreon",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
     "directory": "packages/ui-system/elements"
   },
-  "description": "Foundational UI components for Pyreon",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "bun": "./src/index.ts",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
-    }
-  },
-  "types": "./lib/index.d.ts",
-  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -27,8 +16,16 @@
     "LICENSE",
     "src"
   ],
-  "engines": {
-    "node": ">= 22"
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -37,20 +34,23 @@
     "prepublish": "bun run build",
     "build": "bun run vl_rolldown_build",
     "build:watch": "bun run vl_rolldown_build-watch",
-    "lint": "biome check src/",
+    "lint": "oxlint .",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   },
+  "devDependencies": {
+    "@pyreon/typescript": "^0.11.7",
+    "@vitus-labs/tools-rolldown": "^1.15.3"
+  },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.5",
-    "@pyreon/reactivity": "^0.11.5",
-    "@pyreon/ui-core": "^0.11.5",
-    "@pyreon/unistyle": "^0.11.5"
+    "@pyreon/core": "^0.11.7",
+    "@pyreon/reactivity": "^0.11.7",
+    "@pyreon/ui-core": "^0.11.7",
+    "@pyreon/unistyle": "^0.11.7"
   },
-  "devDependencies": {
-    "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.5"
+  "engines": {
+    "node": ">= 22"
   }
 }

package/src/Element/component.tsx

@@ -7,20 +7,20 @@
  * skipping children or switching sub-tags accordingly.
  */
 
-import { onMount } from "@pyreon/core"
-import { render } from "@pyreon/ui-core"
-import { PKG_NAME } from "../constants"
-import { Content, Wrapper } from "../helpers"
-import type { PyreonElement } from "./types"
-import { getShouldBeEmpty, isInlineElement } from "./utils"
+import { onMount } from '@pyreon/core'
+import { render } from '@pyreon/ui-core'
+import { PKG_NAME } from '../constants'
+import { Content, Wrapper } from '../helpers'
+import type { PyreonElement } from './types'
+import { getShouldBeEmpty, isInlineElement } from './utils'
 
 const equalize = (el: HTMLElement, direction: unknown) => {
   const beforeEl = el.firstElementChild as HTMLElement | null
   const afterEl = el.lastElementChild as HTMLElement | null
 
   if (beforeEl && afterEl && beforeEl !== afterEl) {
-    const type: "height" | "width" = direction === "rows" ? "height" : "width"
-    const prop = type === "height" ? "offsetHeight" : "offsetWidth"
+    const type: 'height' | 'width' = direction === 'rows' ? 'height' : 'width'
+    const prop = type === 'height' ? 'offsetHeight' : 'offsetWidth'
     const beforeSize = beforeEl[prop]
     const afterSize = afterEl[prop]
 
@@ -32,10 +32,10 @@ const equalize = (el: HTMLElement, direction: unknown) => {
   }
 }
 
-const defaultDirection = "inline"
-const defaultContentDirection = "rows"
-const defaultAlignX = "left"
-const defaultAlignY = "center"
+const defaultDirection = 'inline'
+const defaultContentDirection = 'rows'
+const defaultAlignX = 'left'
+const defaultAlignY = 'center'
 
 const Component: PyreonElement = ({
   innerRef,
@@ -87,7 +87,7 @@ const Component: PyreonElement = ({
   const CHILDREN = children ?? content ?? label
 
   const isInline = isInlineElement(tag)
-  const SUB_TAG = isInline ? "span" : undefined
+  const SUB_TAG = isInline ? 'span' : undefined
 
   // --------------------------------------------------------
   // direction & alignX & alignY calculations
@@ -114,7 +114,7 @@ const Component: PyreonElement = ({
 
   const mergedRef = (node: HTMLElement | null) => {
     equalizeRef = node
-    if (typeof externalRef === "function") externalRef(node)
+    if (typeof externalRef === 'function') externalRef(node)
     else if (externalRef != null) {
       ;(externalRef as unknown as { current: HTMLElement | null }).current = node
     }

package/src/Element/constants.ts

@@ -1,35 +1,35 @@
 /** Props consumed by Element that should not be forwarded to the underlying DOM node. */
 export const RESERVED_PROPS = [
-  "innerRef",
-  "tag",
-  "block",
-  "label",
-  "children",
-  "beforeContent",
-  "afterContent",
+  'innerRef',
+  'tag',
+  'block',
+  'label',
+  'children',
+  'beforeContent',
+  'afterContent',
 
-  "equalCols",
-  "vertical",
-  "direction",
-  "alignX",
-  "alignY",
+  'equalCols',
+  'vertical',
+  'direction',
+  'alignX',
+  'alignY',
 
-  "css",
-  "contentCss",
-  "beforeContentCss",
-  "afterContentCss",
+  'css',
+  'contentCss',
+  'beforeContentCss',
+  'afterContentCss',
 
-  "contentDirection",
-  "contentAlignX",
-  "contentAlignY",
+  'contentDirection',
+  'contentAlignX',
+  'contentAlignY',
 
-  "beforeContentDirection",
-  "beforeContentAlignX",
-  "beforeContentAlignY",
+  'beforeContentDirection',
+  'beforeContentAlignX',
+  'beforeContentAlignY',
 
-  "afterContentDirection",
-  "afterContentAlignX",
-  "afterContentAlignY",
+  'afterContentDirection',
+  'afterContentAlignX',
+  'afterContentAlignY',
 ] as const
 
 /**

package/src/Element/index.ts

@@ -1,5 +1,5 @@
-import component from "./component"
-import type { Props, PyreonElement } from "./types"
+import component from './component'
+import type { Props, PyreonElement } from './types'
 
 export type { Props as ElementProps, PyreonElement }
 

package/src/Element/types.ts

@@ -1,5 +1,5 @@
-import type { ComponentFn, PyreonHTMLAttributes } from "@pyreon/core"
-import type { HTMLTags } from "@pyreon/ui-core"
+import type { ComponentFn, PyreonHTMLAttributes } from '@pyreon/core'
+import type { HTMLTags } from '@pyreon/ui-core'
 import type {
   AlignX,
   AlignY,
@@ -10,7 +10,7 @@ import type {
   PyreonStatic,
   Responsive,
   ResponsiveBoolType,
-} from "../types"
+} from '../types'
 
 export type Props = Partial<{
   /**

package/src/Element/utils.ts

@@ -1,4 +1,4 @@
-import { EMPTY_ELEMENTS, INLINE_ELEMENTS } from "./constants"
+import { EMPTY_ELEMENTS, INLINE_ELEMENTS } from './constants'
 
 type GetValue = (tag?: string) => boolean
 

package/src/List/component.tsx

@@ -5,13 +5,13 @@
  * is wrapped in an Element that receives all non-iterator props (e.g.,
  * layout, alignment, css), allowing the list to be styled as a single block.
  */
-import { omit, pick } from "@pyreon/ui-core"
-import { PKG_NAME } from "../constants"
-import type { ElementProps, PyreonElement } from "../Element"
-import { Element } from "../Element"
-import type { Props as IteratorProps } from "../helpers/Iterator"
-import Iterator from "../helpers/Iterator"
-import type { MergeTypes } from "../types"
+import { omit, pick } from '@pyreon/ui-core'
+import { PKG_NAME } from '../constants'
+import type { ElementProps, PyreonElement } from '../Element'
+import { Element } from '../Element'
+import type { Props as IteratorProps } from '../helpers/Iterator'
+import Iterator from '../helpers/Iterator'
+import type { MergeTypes } from '../types'
 
 type ListProps = {
   /**

package/src/List/index.ts

@@ -1,5 +1,5 @@
-import type { Props } from "./component"
-import component from "./component"
+import type { Props } from './component'
+import component from './component'
 
 export type { Props as ListProps }
 export { component as List }

package/src/Overlay/component.tsx

@@ -6,18 +6,18 @@
  * a dropdown inside another dropdown) via blocked-state propagation.
  */
 
-import type { VNodeChild } from "@pyreon/core"
-import { onMount, Portal } from "@pyreon/core"
-import { render } from "@pyreon/ui-core"
-import { PKG_NAME } from "../constants"
-import type { Content, PyreonComponent } from "../types"
-import useOverlay, { type UseOverlayProps } from "./useOverlay"
+import type { VNodeChild } from '@pyreon/core'
+import { onMount, Portal } from '@pyreon/core'
+import { render } from '@pyreon/ui-core'
+import { PKG_NAME } from '../constants'
+import type { Content, PyreonComponent } from '../types'
+import useOverlay, { type UseOverlayProps } from './useOverlay'
 
-const IS_BROWSER = typeof window !== "undefined"
+const IS_BROWSER = typeof window !== 'undefined'
 
-type Align = "bottom" | "top" | "left" | "right"
-type AlignX = "left" | "center" | "right"
-type AlignY = "bottom" | "top" | "center"
+type Align = 'bottom' | 'top' | 'left' | 'right'
+type AlignX = 'left' | 'center' | 'right'
+type AlignY = 'bottom' | 'top' | 'center'
 
 type TriggerRenderer = (
   props: Partial<{
@@ -50,8 +50,8 @@ const Component: PyreonComponent<Props> = ({
   children,
   trigger,
   DOMLocation,
-  triggerRefName = "ref",
-  contentRefName = "ref",
+  triggerRefName = 'ref',
+  contentRefName = 'ref',
   ...props
 }) => {
   const {
@@ -71,16 +71,16 @@ const Component: PyreonComponent<Props> = ({
   const { openOn, closeOn, type } = props
 
   const passHandlers =
-    openOn === "manual" || closeOn === "manual" || closeOn === "clickOutsideContent"
+    openOn === 'manual' || closeOn === 'manual' || closeOn === 'clickOutsideContent'
 
   const ariaHasPopup = (() => {
     switch (type) {
-      case "modal":
-        return "dialog" as const
-      case "tooltip":
-        return "true" as const
+      case 'modal':
+        return 'dialog' as const
+      case 'tooltip':
+        return 'true' as const
       default:
-        return "menu" as const
+        return 'menu' as const
     }
   })()
 
@@ -95,8 +95,8 @@ const Component: PyreonComponent<Props> = ({
       {render(trigger, {
         [triggerRefName]: triggerRef,
         active: active(),
-        "aria-expanded": active(),
-        "aria-haspopup": ariaHasPopup,
+        'aria-expanded': active(),
+        'aria-haspopup': ariaHasPopup,
         ...(passHandlers ? { showContent, hideContent } : {}),
       })}
 
@@ -106,8 +106,8 @@ const Component: PyreonComponent<Props> = ({
             <Provider {...ctx}>
               {render(children, {
                 [contentRefName]: contentRef,
-                role: type === "modal" ? "dialog" : undefined,
-                "aria-modal": type === "modal" ? true : undefined,
+                role: type === 'modal' ? 'dialog' : undefined,
+                'aria-modal': type === 'modal' ? true : undefined,
                 active: active(),
                 align,
                 alignX: alignX(),

package/src/Overlay/context.tsx

@@ -4,8 +4,8 @@
  * closing in response to click/hover events that belong to the child.
  */
 
-import type { VNodeChild } from "@pyreon/core"
-import { createContext, provide, useContext } from "@pyreon/core"
+import type { VNodeChild } from '@pyreon/core'
+import { createContext, provide, useContext } from '@pyreon/core'
 
 export interface OverlayContext {
   blocked: boolean | (() => boolean)

package/src/Overlay/index.ts

@@ -1,6 +1,6 @@
-import component, { type Props } from "./component"
-import OverlayProvider from "./context"
-import useOverlay, { type UseOverlayProps } from "./useOverlay"
+import component, { type Props } from './component'
+import OverlayProvider from './context'
+import useOverlay, { type UseOverlayProps } from './useOverlay'
 
 export type { Props as OverlayProps, UseOverlayProps }