@octane-xplat/ui 0.9.0 → 0.11.0

package/src/safe-url.ts

@@ -0,0 +1,28 @@
+// Navigation URL safety — ported from Astryx's utils/safeUrl.ts. Blocks the
+// schemes that execute script in a link href; every other value passes
+// through normalized (control chars stripped) rather than rewritten.
+
+function normalizeUrl(url: string): string {
+	// oxlint-disable-next-line no-control-regex -- Strip controls before URL-scheme checks.
+	return url.replace(/[\x00-\x1f\x7f]/g, '').trim()
+}
+
+/** Return the normalized URL, or null for a blocked scheme. */
+export function sanitizeUrl(url: string): string | null {
+	const normalized = normalizeUrl(url)
+	const lower = normalized.toLowerCase()
+	if (
+		lower.startsWith('javascript:') ||
+		lower.startsWith('vbscript:') ||
+		lower.startsWith('data:text/html')
+	) {
+		return null
+	}
+
+	return normalized
+}
+
+/** Inspect a navigation string without changing the value used by its sink. */
+export function isSafeUrl(url: string): boolean {
+	return sanitizeUrl(url) !== null
+}

package/src/safeAreaInsets.macos.tsrx

@@ -1,4 +1,9 @@
-import type { SafeAreaInsets } from './props'
+export interface SafeAreaInsets {
+	top: number
+	right: number
+	bottom: number
+	left: number
+}
 
 /** The AppKit root view begins below the title bar; there are no additional
  * safe-area insets in this window-hosted renderer. */

package/src/scheme-colors.ts

@@ -0,0 +1,53 @@
+// Concrete semantic colors for native text runs — FormattedString spans and
+// property-set colors don't resolve `var(--color-*)`, so leaves that paint
+// text directly mirror the chrome.css palette here (light values in :root,
+// dark values in the .dark block; danger/warning/success are scheme-stable
+// there). Resolve with `useColorScheme()`/`getColorScheme()` from
+// './theme/colorScheme'.
+export type Scheme = 'light' | 'dark'
+
+const TEXT_SECONDARY: Record<Scheme, string> = { light: '#666666', dark: '#a1a1a1' }
+const TEXT_PRIMARY: Record<Scheme, string> = { light: '#0a0a0a', dark: '#ededed' }
+const PRIMARY: Record<Scheme, string> = { light: '#171717', dark: '#ededed' }
+const SUCCESS = '#15803d'
+const WARNING = '#b45309'
+const DANGER = '#dc2626'
+
+export const mutedColor = (scheme: Scheme) => TEXT_SECONDARY[scheme]
+export const textColor = (scheme: Scheme) => TEXT_PRIMARY[scheme]
+export const accentColor = (scheme: Scheme) => PRIMARY[scheme]
+export const successColor = () => SUCCESS
+export const warningColor = () => WARNING
+export const dangerColor = () => DANGER
+
+/** StatusDot variant → ink color painted on the dot on native. */
+export function statusDotColor(variant: string, scheme: Scheme): string {
+	switch (variant) {
+		case 'success':
+			return SUCCESS
+		case 'warning':
+			return WARNING
+		case 'error':
+			return DANGER
+		case 'accent':
+			return PRIMARY[scheme]
+		default:
+			return TEXT_SECONDARY[scheme]
+	}
+}
+
+/** ProgressBar variant → fill color on native. */
+export function progressFillColor(variant: string, scheme: Scheme): string {
+	switch (variant) {
+		case 'success':
+			return SUCCESS
+		case 'warning':
+			return WARNING
+		case 'error':
+			return DANGER
+		case 'neutral':
+			return TEXT_SECONDARY[scheme]
+		default:
+			return PRIMARY[scheme]
+	}
+}

package/src/select-options.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import { filterSelectOptions, groupSelectOptions, toggleVisibleSelection } from './select-options'
+
+describe('finite-list selection data', () => {
+	it('keeps disabled and hidden selections during filtered bulk toggles', () => {
+		const shown = [{ value: 'a' }, { value: 'locked', isDisabled: true }]
+		expect(toggleVisibleSelection(['hidden', 'locked'], shown)).toEqual(['hidden', 'locked', 'a'])
+		expect(toggleVisibleSelection(['hidden', 'locked', 'a'], shown)).toEqual(['hidden', 'locked'])
+	})
+
+	it('filters supporting groups by the same label/value predicate used for navigation', () => {
+		const options = [
+			{ value: 'a', label: 'Apple', group: 'Fruit' },
+			{ value: 'b', label: 'Berlin', group: 'Cities' },
+			{ value: 'c', label: 'Banana', group: 'Fruit' },
+		]
+
+		expect(
+			groupSelectOptions(filterSelectOptions(options, 'A')).flatMap((group) =>
+				group.options.map((option) => option.value),
+			),
+		).toEqual(['a', 'c'])
+	})
+})

package/src/select-options.ts

@@ -0,0 +1,43 @@
+import type { SelectOption } from './props'
+
+export function selectValues(value: string | string[] | null | undefined): string[] {
+	return value == null ? [] : Array.isArray(value) ? [...new Set(value)] : [value]
+}
+
+export function sameSelection(a: string[], b: string[]): boolean {
+	return a.length === b.length && a.every((value, index) => value === b[index])
+}
+
+export function filterSelectOptions(options: SelectOption[], query: string): SelectOption[] {
+	const lower = query.toLowerCase()
+	return options.filter((option) => (option.label ?? option.value).toLowerCase().includes(lower))
+}
+
+export function groupSelectOptions(
+	options: SelectOption[],
+): { heading: string | undefined; options: SelectOption[] }[] {
+	const groups = new Map<string | undefined, SelectOption[]>()
+	for (const option of options) {
+		const rows = groups.get(option.group)
+		if (rows) {
+			rows.push(option)
+		} else {
+			groups.set(option.group, [option])
+		}
+	}
+
+	return [...groups].map(([heading, rows]) => ({ heading, options: rows }))
+}
+
+/** Bulk toggles affect only the visible enabled set, retaining hidden/disabled values. */
+export function toggleVisibleSelection(selected: string[], options: SelectOption[]): string[] {
+	const enabled = options.filter((option) => !option.isDisabled).map((option) => option.value)
+	if (!enabled.length) {
+		return selected
+	}
+
+	const allSelected = enabled.every((value) => selected.includes(value))
+	return allSelected
+		? selected.filter((value) => !enabled.includes(value))
+		: [...new Set([...selected, ...enabled])]
+}

package/src/sheet-detents.ts

@@ -1,5 +1,10 @@
 import { FlexboxLayout, Screen, type View } from '@nativescript/core'
-import { detentOffset, normalizeDetents, snapDetentIndex } from './sheet-snap'
+import {
+	DETENT_FLICK_VELOCITY,
+	detentOffset,
+	normalizeDetents,
+	snapDetentIndex,
+} from './sheet-snap'
 
 const SNAP_MS = 200
 
@@ -18,7 +23,7 @@ export interface SheetDetentsController {
  *  sized to the largest detent and parked at the offset for the current
  *  one. `closeNow` fires after the dismiss slide-out — the caller decides
  *  what closing means (declarative `onDismiss` via RootLayout 'closed',
- *  or the `openSheet` resolution).
+ *  or the `openBottomSheet` resolution).
  *
  *  In-window on native: the OS detent presentations
  *  (UISheetPresentationController / BottomSheetBehavior via
@@ -26,20 +31,38 @@ export interface SheetDetentsController {
  *  window — a different surface contract than the RootLayout child this
  *  sheet is (UIModal/MaterialDialog own the modal path), so the snap
  *  mechanics are self-drawn and identical to the web leaf. */
+export interface SheetDetentsOptions {
+	/** False blocks the swipe-to-dismiss outcome (Astryx 'required' sheets) —
+	 *  a release below the smallest stop snaps back instead of closing. */
+	dismissible?: boolean
+	/** Live translateY updates for scrim-opacity modulation on web. */
+	onOffset?: (offset: number, vh: number) => void
+	/** No snap points: the panel keeps its content height and the grabber
+	 *  only owns swipe-to-dismiss (release below ~40% of the panel or a
+	 *  downward fling). */
+	swipeOnly?: boolean
+}
+
 export function attachSheetDetents(
 	host: any,
 	detents: readonly number[],
 	closeNow: () => void,
+	options: SheetDetentsOptions = {},
 ): SheetDetentsController {
 	const sorted = normalizeDetents(detents)
-	if (!sorted.length) {
+	const swipeOnly = options.swipeOnly === true || !sorted.length
+	if (!sorted.length && !options.swipeOnly) {
 		return { detach: () => {}, enter: () => {} }
 	}
 
 	// Parentless at attach (before RootLayout.open) — fall back to screen
 	// dips; every gesture-time read uses the real parent height.
 	const vh = () => host.parent?.getActualSize?.().height || Screen.mainScreen.heightDIPs
-	const max = sorted[sorted.length - 1]
+	const max = sorted[sorted.length - 1] ?? 0
+	/** Content-sized panels dismiss once the drag covers ~40% of their
+	 *  height (or on a downward fling). */
+	const panelHeight = () => host.getActualSize?.().height || host.height || 0
+	const dismissible = () => options.dismissible !== false
 	let cur = 0
 
 	host.verticalAlignment = 'bottom'
@@ -81,9 +104,26 @@ export function attachSheetDetents(
 		}
 
 		dragging = false
-		const next = snapDetentIndex(host.translateY, vy, sorted, vh())
+		const ty = host.translateY
+		if (swipeOnly) {
+			// Content-sized sheet: dismiss past ~40% of the panel height or on
+			// a downward fling; otherwise settle back to the open position.
+			if (dismissible() && (vy > DETENT_FLICK_VELOCITY || ty > panelHeight() * 0.4)) {
+				animateTo(vh(), closeNow)
+			} else {
+				animateTo(0)
+			}
+
+			return
+		}
+
+		const next = snapDetentIndex(ty, vy, sorted, vh())
 		if (next < 0) {
-			animateTo(vh(), closeNow)
+			if (dismissible()) {
+				animateTo(vh(), closeNow)
+			} else {
+				animateTo(detentOffset(sorted, cur, vh()))
+			}
 		} else {
 			cur = next
 			animateTo(detentOffset(sorted, cur, vh()))
@@ -121,13 +161,21 @@ export function attachSheetDetents(
 
 		lastDy = e.deltaY
 		lastT = now
-		host.translateY = Math.min(Math.max(ty0 + (e.deltaY - dy0), 0), vh())
+		const next = Math.min(Math.max(ty0 + (e.deltaY - dy0), 0), vh())
+		host.translateY = next
+		options.onOffset?.(next, vh())
 	}
 
 	grabber.on('pan', onPan)
 
 	return {
 		enter: () => {
+			if (swipeOnly) {
+				host.translateY = vh()
+				animateTo(0)
+				return
+			}
+
 			// Size the panel now that the host has a parent — grabber row
 			// heights and detent fractions resolve against the RootLayout.
 			host.height = max * vh()

package/src/sheet-detents.web.ts

@@ -1,5 +1,10 @@
 import { setTranslate } from './translate.web'
-import { detentOffset, normalizeDetents, snapDetentIndex } from './sheet-snap'
+import {
+	DETENT_FLICK_VELOCITY,
+	detentOffset,
+	normalizeDetents,
+	snapDetentIndex,
+} from './sheet-snap'
 
 const SNAP_MS = 200
 
@@ -7,12 +12,23 @@ export interface SheetDetentsController {
 	detach: () => void
 }
 
+export interface SheetDetentsOptions {
+	/** False blocks the swipe-to-dismiss outcome — a release below the
+	 *  smallest stop snaps back instead of closing. */
+	dismissible?: boolean
+	/** Live translateY updates for scrim-opacity modulation. */
+	onOffset?: (offset: number, vh: number) => void
+	/** No snap points: the panel keeps its content height and the grabber
+	 *  only owns swipe-to-dismiss. */
+	swipeOnly?: boolean
+}
+
 /** Drag-to-snap detents on a `.vx-sheet` panel: a self-drawn grabber strip
  *  (the only drag target — it never fights inner scrolling) drives the
  *  panel's translateY; the panel is sized to the largest detent and parked
  *  at the offset for the current one. `closeNow` fires after the dismiss
  *  slide-out — the caller decides what closing means (declarative
- *  `onDismiss` or the `openSheet` resolution). In-window on every target —
+ *  `onOpenChange` or the `openBottomSheet` resolution). In-window on every target —
  *  the OS detent presentations (UISheetPresentationController /
  *  BottomSheetDialog) host a modal VC/dialog window, not a RootLayout
  *  child, so the snap mechanics stay self-drawn for pixel parity. */
@@ -20,18 +36,27 @@ export function attachSheetDetents(
 	panel: HTMLElement,
 	detents: readonly number[],
 	closeNow: () => void,
+	options: SheetDetentsOptions = {},
 ): SheetDetentsController {
 	const sorted = normalizeDetents(detents)
-	if (!sorted.length) {
+	const swipeOnly = options.swipeOnly === true || !sorted.length
+	if (!sorted.length && !options.swipeOnly) {
 		return { detach: () => {} }
 	}
 
 	const vh = () => panel.parentElement?.clientHeight || window.innerHeight || 1
-	const max = sorted[sorted.length - 1]
+	const max = sorted[sorted.length - 1] ?? 0
+	/** Content-sized panels dismiss once the drag covers ~40% of their
+	 *  height (or on a downward fling). */
+	const panelHeight = () => panel.getBoundingClientRect().height
+	const dismissible = () => options.dismissible !== false
 
 	panel.classList.add('vx-sheet-detents')
 	// Panel is sized to the largest detent; translateY parks it per detent.
-	panel.style.height = `${max * 100}%`
+	// swipeOnly keeps the content-sized height.
+	if (!swipeOnly) {
+		panel.style.height = `${max * 100}%`
+	}
 
 	const grabber = document.createElement('div')
 	grabber.className = 'vx-sheet-grabber'
@@ -52,6 +77,7 @@ export function attachSheetDetents(
 	const applyTy = (value: number) => {
 		ty = value
 		setTranslate(panel, 0, value)
+		options.onOffset?.(value, vh())
 	}
 
 	const animateTo = (value: number, then?: () => void) => {
@@ -103,9 +129,23 @@ export function attachSheetDetents(
 		}
 
 		dragging = false
+		if (swipeOnly) {
+			if (dismissible() && (vy > DETENT_FLICK_VELOCITY || ty > panelHeight() * 0.4)) {
+				animateTo(vh(), closeNow)
+			} else {
+				animateTo(0)
+			}
+
+			return
+		}
+
 		const next = snapDetentIndex(ty, vy, sorted, vh())
 		if (next < 0) {
-			animateTo(vh(), closeNow)
+			if (dismissible()) {
+				animateTo(vh(), closeNow)
+			} else {
+				animateTo(detentOffset(sorted, cur, vh()))
+			}
 		} else {
 			cur = next
 			animateTo(detentOffset(sorted, cur, vh()))
@@ -126,9 +166,11 @@ export function attachSheetDetents(
 	grabber.addEventListener('pointercancel', up)
 
 	// Slide in from below the screen edge, matching the native leaf's
-	// translateY = vh → detent enter animation.
+	// translateY = vh → resting enter animation.
 	applyTy(vh())
-	const raf = requestAnimationFrame(() => animateTo(detentOffset(sorted, cur, vh())))
+	const raf = requestAnimationFrame(() =>
+		animateTo(swipeOnly ? 0 : detentOffset(sorted, cur, vh())),
+	)
 
 	return {
 		detach: () => {
@@ -140,7 +182,10 @@ export function attachSheetDetents(
 			grabber.removeEventListener('pointercancel', up)
 			grabber.remove()
 			panel.classList.remove('vx-sheet-detents')
-			panel.style.height = ''
+			if (!swipeOnly) {
+				panel.style.height = ''
+			}
+
 			panel.style.transition = ''
 		},
 	}

package/src/sheet-snap.ts

@@ -17,6 +17,51 @@ export function normalizeDetents(input?: readonly number[]): number[] {
 	return [...new Set(input.filter((d) => d > 0 && d <= 1))].sort((a, b) => a - b)
 }
 
+/** One snap point → viewport-height fraction. A number ≤ 1 is already a
+ *  fraction; a larger number is px/dips. Strings accept 'NN%' and 'NNpx'
+ *  (bare numeric strings are px). Returns null when unresolvable. */
+export function snapPointFraction(point: number | string, vh: number): number | null {
+	if (typeof point === 'number') {
+		if (point <= 0) {
+			return null
+		}
+
+		return point <= 1 ? point : point / vh
+	}
+
+	const trimmed = point.trim()
+	const percent = trimmed.match(/^([\d.]+)%$/)
+	if (percent) {
+		return parseFloat(percent[1]) / 100
+	}
+
+	const px = trimmed.match(/^([\d.]+)(?:px)?$/)
+	if (px) {
+		return parseFloat(px[1]) / vh
+	}
+
+	return null
+}
+
+/** Astryx `snapPoints` → sorted detent fractions (the existing controller
+ *  shape). `vh` is the viewport height in px/dips. Stops larger than the
+ *  window clamp to 1. Empty → detents off. */
+export function normalizeSnapPoints(
+	input: readonly (number | string)[] | undefined,
+	vh: number,
+): number[] {
+	if (!input?.length || !(vh > 0)) {
+		return []
+	}
+
+	const fractions = input
+		.map((point) => snapPointFraction(point, vh))
+		.filter((f): f is number => f != null && f > 0)
+		.map((f) => Math.min(f, 1))
+
+	return normalizeDetents(fractions)
+}
+
 /** Resting translateY for a detent: the panel is `max * vh` tall, so the
  *  portion below the screen edge is `(max - detent) * vh`. */
 export function detentOffset(detents: readonly number[], index: number, vh: number): number {

package/src/spacing.ts

@@ -0,0 +1,6 @@
+/** Astryx spacing steps are 4px/dip units (`--spacing-N` = N×4). Shared by
+ *  components whose props take a step number (ScrollableArea padding,
+ *  Dialog padding, Carousel gap). */
+export function spacingStep(step: number | undefined): number | undefined {
+	return step == null ? undefined : step * 4
+}

package/src/stack-layout.ts

@@ -0,0 +1,183 @@
+import type {
+	StackPaddingProps,
+	StackProps,
+	StackItemProps,
+	StackMainAlignment,
+	StackCrossAlignment,
+} from './props'
+
+/** Astryx spacing step → dips (step × 4, matching the upstream
+ *  `--spacing-N` scale: 0.5→2, 1→4, 2→8, 3→12, 4→16, …, 10→40). */
+export function spacingPx(step: number | undefined | null): number | undefined {
+	return step == null ? undefined : step * 4
+}
+
+const JUSTIFY: Record<StackMainAlignment, string> = {
+	start: 'flex-start',
+	center: 'center',
+	end: 'flex-end',
+	between: 'space-between',
+	around: 'space-around',
+	evenly: 'space-evenly',
+}
+
+const ALIGN: Record<StackCrossAlignment, string> = {
+	start: 'flex-start',
+	center: 'center',
+	end: 'flex-end',
+	stretch: 'stretch',
+}
+
+const ALIGN_SELF: Record<string, string> = {
+	start: 'flex-start',
+	end: 'flex-end',
+}
+
+export interface ResolvedStackLayout {
+	/** 'row' | 'column' — the flex-direction value both engines share. */
+	flexDirection: 'row' | 'column'
+	justifyContent?: string
+	alignItems?: string
+	flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'
+	gap?: number
+	scrollable: boolean
+	/** Resolved per-edge padding in dips (edge → axis → padding precedence). */
+	paddingTop?: number
+	paddingRight?: number
+	paddingBottom?: number
+	paddingLeft?: number
+	/** Logical variants for web's inline/block-aware styles. */
+	paddingInlineStart?: number
+	paddingInlineEnd?: number
+	paddingBlockStart?: number
+	paddingBlockEnd?: number
+}
+
+/** Resolve Stack's directional alignment + spacing props into flex values.
+ *  `hAlign`/`vAlign` follow the physical axes; `justify`/`align` alias the
+ *  main/cross axes of the active direction. */
+export function resolveStackLayout(props: StackProps): ResolvedStackLayout {
+	const direction = props.direction ?? 'vertical'
+	const horizontal = direction === 'horizontal'
+
+	const resolvedHAlign = props.hAlign ?? (horizontal ? props.justify : props.align)
+	const resolvedVAlign = props.vAlign ?? (horizontal ? props.align : props.justify)
+
+	const main = horizontal ? resolvedHAlign : resolvedVAlign
+	const cross = horizontal ? resolvedVAlign : resolvedHAlign
+
+	const paddingInlineStart = spacingPx(
+		props.paddingInlineStart ?? props.paddingInline ?? props.padding,
+	)
+
+	const paddingInlineEnd = spacingPx(props.paddingInlineEnd ?? props.paddingInline ?? props.padding)
+	const paddingBlockStart = spacingPx(
+		props.paddingBlockStart ?? props.paddingBlock ?? props.padding,
+	)
+
+	const paddingBlockEnd = spacingPx(props.paddingBlockEnd ?? props.paddingBlock ?? props.padding)
+
+	return {
+		flexDirection: horizontal ? 'row' : 'column',
+		justifyContent:
+			main != null ? (JUSTIFY[main as StackMainAlignment] ?? (main as string)) : undefined,
+		alignItems:
+			cross != null ? (ALIGN[cross as StackCrossAlignment] ?? (cross as string)) : undefined,
+		flexWrap: props.wrap != null && props.wrap !== 'nowrap' ? props.wrap : undefined,
+		gap: spacingPx(props.gap),
+		scrollable: props.isScrollable === true,
+		paddingTop: paddingBlockStart,
+		paddingBottom: paddingBlockEnd,
+		paddingLeft: paddingInlineStart,
+		paddingRight: paddingInlineEnd,
+		paddingInlineStart,
+		paddingInlineEnd,
+		paddingBlockStart,
+		paddingBlockEnd,
+	}
+}
+
+/** The web `style` fragment for a resolved stack (logical padding +
+ *  px-unit sizing — octane renders numbers as px for length props). */
+export function stackWebStyle(
+	layout: ResolvedStackLayout,
+	props: StackSizeLike,
+): Record<string, any> {
+	const style: Record<string, any> = {}
+	if (layout.gap !== undefined) {
+		style.gap = layout.gap
+	}
+
+	if (layout.flexWrap !== undefined) {
+		style.flexWrap = layout.flexWrap
+	}
+
+	if (layout.paddingInlineStart !== undefined) {
+		style.paddingInlineStart = layout.paddingInlineStart
+	}
+
+	if (layout.paddingInlineEnd !== undefined) {
+		style.paddingInlineEnd = layout.paddingInlineEnd
+	}
+
+	if (layout.paddingBlockStart !== undefined) {
+		style.paddingBlockStart = layout.paddingBlockStart
+	}
+
+	if (layout.paddingBlockEnd !== undefined) {
+		style.paddingBlockEnd = layout.paddingBlockEnd
+	}
+
+	if (layout.scrollable) {
+		style.overflow = 'auto'
+	}
+
+	if (props.width != null) {
+		style.width = props.width
+	}
+
+	if (props.height != null) {
+		style.height = props.height
+	}
+
+	if (props.maxWidth != null) {
+		style.maxWidth = props.maxWidth
+	}
+
+	if (props.minHeight != null) {
+		style.minHeight = props.minHeight
+	}
+
+	return style
+}
+
+export interface StackSizeLike {
+	width?: number | string
+	height?: number | string
+	maxWidth?: number | string
+	minHeight?: number | string
+}
+
+/** The style fragment for StackItem — `fill` grows (and is allowed to
+ *  shrink) into remaining space; the min-size reset lets it become a
+ *  scroll region under a flex parent. */
+export function stackItemStyle(props: StackItemProps): Record<string, any> {
+	const style: Record<string, any> = {}
+	if (props.size === 'fill') {
+		style.flexGrow = 1
+		style.flexShrink = 1
+	} else {
+		style.flexGrow = 0
+		style.flexShrink = 0
+	}
+
+	if (props.crossAlignSelf != null) {
+		style.alignSelf = ALIGN_SELF[props.crossAlignSelf] ?? props.crossAlignSelf
+	}
+
+	if (props.isScrollable) {
+		style.overflow = 'auto'
+	}
+
+	return style
+}

package/src/styled.macos.tsrx

@@ -5,7 +5,7 @@ import { cx } from './cx'
 export function styled<P extends { className?: any }, V extends Record<string, any>>(
 	Base: (props: P) => any,
 	def: { base?: any; variants?: V },
-) {
+): (props: P & { [K in keyof V]?: boolean }, context: any) => any {
 	function Styled(props: P & { [K in keyof V]?: boolean }) {
 		const classes: any[] = [def.base]
 		const rest: any = { ...props }

package/src/styled.tsrx

@@ -18,7 +18,7 @@ import { defineUniversalComponent, universalComponent } from 'octane/universal/n
 export function styled<P extends { className?: any }, V extends Record<string, any>>(
 	Base: (props: P) => any,
 	def: { base?: any; variants?: V },
-) {
+): (props: P & { [K in keyof V]?: boolean }, context: any) => any {
 	function Styled(props: P & { [K in keyof V]?: boolean }) {
 		const cls: any[] = [def.base];
 		const rest: any = { ...props };