ajo-ui 0.1.0

package/src/field.tsx

@@ -0,0 +1,61 @@
+import type { IntrinsicElements, Stateful, Stateless, WithChildren } from 'ajo'
+import type { OmitArg } from './utils'
+import { label, statefulRootAttrs as rootAttrs, type LabelView } from 'ajo-cloves'
+import { context } from 'ajo/context'
+
+type FieldBehaviorArgs = {
+	/** Marks composed field parts as invalid for ARIA wiring. */
+	invalid?: boolean
+	/** Stable id prefix for the field wiring. */
+	name?: string
+}
+
+type FieldRootArgs = WithChildren<FieldBehaviorArgs>
+
+/** Arguments for a field host that coordinates labels, descriptions, and errors. */
+export type FieldArgs = WithChildren<OmitArg<IntrinsicElements['div'], 'children'> & FieldBehaviorArgs>
+
+/** Label-clove contract exposed to controls composed inside a Field. */
+export type FieldContextValue = Pick<LabelView,
+	| 'buttonAttrs'
+	| 'controlAttrs'
+	| 'describe'
+	| 'descriptionAttrs'
+	| 'errorAttrs'
+	| 'groupAttrs'
+	| 'ids'
+	| 'labelAttrs'
+>
+
+/** Field context carrying label clove wiring to composed field parts. */
+export const FieldContext = context<FieldContextValue | null>(null)
+
+/** Unstyled behavior root for one field's label, description, and error wiring. */
+const FieldRoot: Stateful<FieldRootArgs> = function* (args) {
+	const view = label(this, { prefix: () => args.name })
+
+	for (const next of this) {
+		view.reset()
+		view.sync(Boolean(next.invalid))
+		FieldContext(view)
+
+		yield <>{next.children}</>
+	}
+}
+
+/** Unstyled field host with label, description, and error wiring. */
+export const Field: Stateless<FieldArgs> = ({
+	children,
+	invalid,
+	name,
+	...attrs
+}) => (
+	<FieldRoot
+		{...rootAttrs(attrs)}
+		invalid={invalid}
+		name={name}
+		attr:data-slot="field"
+	>
+		{children}
+	</FieldRoot>
+)

package/src/index.ts

@@ -0,0 +1,37 @@
+export * from './accordion'
+export * from './avatar'
+export * from './calendar'
+export * from './carousel'
+export * from './chart'
+export * from './checkbox'
+export * from './checkbox-group'
+export * from './collapsible'
+export * from './command'
+export * from './context-menu'
+export * from './data-table'
+export * from './dialog'
+export * from './direction'
+export * from './drawer'
+export * from './field'
+export * from './input-date'
+export * from './input-group'
+export * from './input-otp'
+export * from './menu'
+export * from './menubar'
+export * from './message-scroller'
+export * from './navigation-menu'
+export * from './popover'
+export * from './progress'
+export * from './radio-group'
+export * from './resizable'
+export * from './select'
+export * from './sidebar'
+export * from './slider'
+export * from './switch'
+export * from './tabs'
+export * from './toggle'
+export * from './toggle-group'
+export * from './toast'
+export * from './toolbar'
+export * from './tooltip'
+export * from './virtual-list'