@foldkit/ui 0.112.0

package/dist/radioGroup/index.d.ts

@@ -0,0 +1,169 @@
+import { Effect, Option, Schema as S } from 'effect';
+import * as Command from 'foldkit/command';
+import { type ChildAttribute, type Html } from 'foldkit/html';
+import { type Reflect, type View as SubmodelView } from 'foldkit/submodel';
+/** Controls the radio group layout direction and which arrow keys navigate between options. */
+export declare const Orientation: S.Literals<readonly ["Horizontal", "Vertical"]>;
+export type Orientation = typeof Orientation.Type;
+/** Schema for the radio group component's state, tracking the selected value and orientation. */
+export declare const Model: S.Struct<{
+    readonly id: S.String;
+    readonly selectedValue: S.Option<S.String>;
+    readonly orientation: S.Literals<readonly ["Horizontal", "Vertical"]>;
+}>;
+export type Model = typeof Model.Type;
+/** Sent when a radio option is selected via click or keyboard navigation. */
+export declare const SelectedOption: import("foldkit/schema").CallableTaggedStruct<"SelectedOption", {
+    value: S.String;
+    index: S.Number;
+}>;
+/** Sent when the focus-option command completes. */
+export declare const CompletedFocusOption: import("foldkit/schema").CallableTaggedStruct<"CompletedFocusOption", {}>;
+/** Union of all messages the radio group component can produce. */
+export declare const Message: S.Union<[
+    typeof SelectedOption,
+    typeof CompletedFocusOption
+]>;
+export type SelectedOption = typeof SelectedOption.Type;
+export type CompletedFocusOption = typeof CompletedFocusOption.Type;
+export type Message = typeof Message.Type;
+/** Sent to the parent when an option is committed. Carries the selected
+ *  value and its index. Generic over `Value extends string`: the runtime
+ *  schema stores `value: string`, but the type-level OutMessage exposes
+ *  `value: Value` so consumers who supply `options: ReadonlyArray<MyUnion>`
+ *  receive `value: MyUnion` from the factory's `update` without casting at
+ *  the call site. The cast is fenced inside this module's `update` return,
+ *  sound because the value was selected from the options array the
+ *  consumer supplied. */
+export declare const Selected: import("foldkit/schema").CallableTaggedStruct<"Selected", {
+    value: S.String;
+    index: S.Number;
+}>;
+export type Selected<Value extends string = string> = Readonly<{
+    readonly _tag: 'Selected';
+    readonly value: Value;
+    readonly index: number;
+}>;
+export declare const OutMessage: S.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"Selected", {
+    value: S.String;
+    index: S.Number;
+}>]>;
+/** Generic over `Value extends string` so consumers who create the radio
+ *  group via `RadioGroup.create<MyUnion>()` receive `value: MyUnion` in
+ *  the `Selected` OutMessage from the factory's `update`, instead of
+ *  `value: string`. Defaults to `string` for consumers that don't need the
+ *  lift. */
+export type OutMessage<Value extends string = string> = Selected<Value>;
+/** Configuration for creating a radio group model with `init`. */
+export type InitConfig = Readonly<{
+    id: string;
+    selectedValue?: string;
+    orientation?: Orientation;
+}>;
+/** Creates an initial radio group model from a config. Defaults to no selection and vertical orientation. */
+export declare const init: (config: InitConfig) => Model;
+/** Moves focus to the radio option at the given index. */
+export declare const FocusOption: Command.CommandDefinitionWithArgs<"FocusOption", {
+    id: S.String;
+    index: S.Number;
+}, Effect.Effect<{
+    readonly _tag: "CompletedFocusOption";
+}, never, never>>;
+type UpdateReturn<Value extends string = string> = readonly [
+    Model,
+    ReadonlyArray<Command.Command<Message>>,
+    Option.Option<OutMessage<Value>>
+];
+/** Processes a radio group message and returns the next model, commands, and
+ *  optional OutMessage. Generic over `Value extends string`: pass the consumer's
+ *  union type at the call site to receive `Selected({ value: MyUnion })` without
+ *  casting. Defaults to `string`. */
+export declare const update: <Value extends string = string>(model: Model, message: Message) => UpdateReturn<Value>;
+/** Programmatically selects a value in the radio group, updating the model
+ *  and returning focus commands plus a `Selected` OutMessage. */
+export declare const select: <Value extends string = string>(model: Model, value: Value, options: ReadonlyArray<Value>) => UpdateReturn<Value>;
+/** Reflects an externally-sourced selection onto the model without
+ *  emitting an OutMessage or running the focus command. Use this to mirror
+ *  external truth (a URL parameter, restored storage, a server push) onto
+ *  the radio group's selection. Contrast with `select`, which represents a
+ *  user or programmatic *choice*: it focuses the option and emits
+ *  `Selected`. Takes no `options` (unlike `select`) because it sets the
+ *  value directly rather than deriving a focus index. Returns the model
+ *  directly because it produces no commands and no OutMessage. */
+export declare const reflectSelectedValue: Reflect<Model, Option.Option<string>>;
+/** Per-option render info passed to the consumer's `toView`. The consumer
+ *  spreads `option`, `label`, and `description` onto whichever elements
+ *  carry that role in their layout. Generic over `Value extends string`:
+ *  when `RadioGroup.create<MyUnion>()` is declared, `option.value` is
+ *  typed `MyUnion` so the consumer can switch on it without casting. */
+export type OptionInfo<Value extends string = string> = Readonly<{
+    value: Value;
+    index: number;
+    isSelected: boolean;
+    isActive: boolean;
+    isDisabled: boolean;
+    option: ReadonlyArray<ChildAttribute>;
+    label: ReadonlyArray<ChildAttribute>;
+    description: ReadonlyArray<ChildAttribute>;
+}>;
+/** Render-time payload published to the consumer's `toView`.
+ *
+ *  - `group`: ARIA + role attributes for the wrapping radiogroup element.
+ *  - `options`: one entry per option in `viewInputs.options`, in the same
+ *    order. Includes the value, derived state, and the attribute bundles
+ *    for the option element, its label, and its description.
+ *  - `selectedValue`: the currently-selected value, if any. Convenient
+ *    for the consumer when rendering selected-state visuals next to the
+ *    option attributes.
+ *  - `hiddenInput`: when `viewInputs.name` was supplied, attributes for a
+ *    hidden form input carrying the selected value. The consumer
+ *    renders the `<input>` themselves. Empty array when `name` is
+ *    undefined. */
+export type RenderInfo<Value extends string = string> = Readonly<{
+    group: ReadonlyArray<ChildAttribute>;
+    options: ReadonlyArray<OptionInfo<Value>>;
+    selectedValue: Option.Option<Value>;
+    hiddenInput: ReadonlyArray<ChildAttribute>;
+}>;
+/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field.
+ *  Generic over `Value extends string` so consumers using
+ *  `RadioGroup.create<MyUnion>()` receive `option.value: MyUnion` in
+ *  `toView` and `(value: MyUnion, index) => boolean` in
+ *  `isOptionDisabled`, without casting. */
+export type ViewInputs<Value extends string = string> = Readonly<{
+    options: ReadonlyArray<Value>;
+    ariaLabel: string;
+    toView: (render: RenderInfo<Value>) => Html;
+    isOptionDisabled?: (value: Value, index: number) => boolean;
+    isDisabled?: boolean;
+    name?: string;
+    orientation?: Orientation;
+}>;
+/** Pairs the radio group's `view` and `update` (and `select`) behind a
+ *  single Value-typed entry point. Declaring the radio group once at
+ *  module scope ensures the OutMessage's `value` field carries the
+ *  consumer's union type without an `as` cast at the call site:
+ *
+ *  ```ts
+ *  const ToolRadioGroup = RadioGroup.create<Tool>()
+ *
+ *  // In view:
+ *  h.submodel({ view: ToolRadioGroup.view, ... })
+ *
+ *  // In update:
+ *  const [next, commands, maybeOutMessage] = ToolRadioGroup.update(model, message)
+ *  // maybeOutMessage: Option<RadioGroup.OutMessage<Tool>>
+ *  ```
+ *
+ *  The view's `ViewInputs.options` stays typed `ReadonlyArray<string>`;
+ *  consumers can pass a `ReadonlyArray<MyUnion>` (assignable) and the
+ *  fenced cast inside `update` types the OutMessage's `value` as
+ *  `MyUnion`. */
+export declare const create: <Value extends string = string>() => Readonly<{
+    view: SubmodelView<Model, Message, ViewInputs<Value>>;
+    update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
+    select: (model: Model, value: Value, options: ReadonlyArray<Value>) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
+    reflectSelectedValue: Reflect<Model, Option.Option<Value>>;
+}>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/radioGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/radioGroup/index.ts"],"names":[],"mappings":"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"}

package/dist/radioGroup/index.js

@@ -0,0 +1,197 @@
+import { Array, Effect, Function, Match as M, Option, Predicate, Schema as S, String, pipe, } from 'effect';
+import * as Command from 'foldkit/command';
+import * as Dom from 'foldkit/dom';
+import { childAttributes, html, } from 'foldkit/html';
+import { m } from 'foldkit/message';
+import { evo } from 'foldkit/struct';
+import { defineView, } from 'foldkit/submodel';
+import { keyToIndex } from '../keyboard.js';
+// MODEL
+/** Controls the radio group layout direction and which arrow keys navigate between options. */
+export const Orientation = S.Literals(['Horizontal', 'Vertical']);
+/** Schema for the radio group component's state, tracking the selected value and orientation. */
+export const Model = S.Struct({
+    id: S.String,
+    selectedValue: S.Option(S.String),
+    orientation: Orientation,
+});
+// MESSAGE
+/** Sent when a radio option is selected via click or keyboard navigation. */
+export const SelectedOption = m('SelectedOption', {
+    value: S.String,
+    index: S.Number,
+});
+/** Sent when the focus-option command completes. */
+export const CompletedFocusOption = m('CompletedFocusOption');
+/** Union of all messages the radio group component can produce. */
+export const Message = S.Union([SelectedOption, CompletedFocusOption]);
+// OUT MESSAGE
+/** Sent to the parent when an option is committed. Carries the selected
+ *  value and its index. Generic over `Value extends string`: the runtime
+ *  schema stores `value: string`, but the type-level OutMessage exposes
+ *  `value: Value` so consumers who supply `options: ReadonlyArray<MyUnion>`
+ *  receive `value: MyUnion` from the factory's `update` without casting at
+ *  the call site. The cast is fenced inside this module's `update` return,
+ *  sound because the value was selected from the options array the
+ *  consumer supplied. */
+export const Selected = m('Selected', { value: S.String, index: S.Number });
+export const OutMessage = S.Union([Selected]);
+/** Creates an initial radio group model from a config. Defaults to no selection and vertical orientation. */
+export const init = (config) => ({
+    id: config.id,
+    selectedValue: Option.fromNullishOr(config.selectedValue),
+    orientation: config.orientation ?? 'Vertical',
+});
+// UPDATE
+const optionId = (id, index) => `${id}-option-${index}`;
+/** Moves focus to the radio option at the given index. */
+export const FocusOption = Command.define('FocusOption', { id: S.String, index: S.Number }, CompletedFocusOption)(({ id, index }) => Dom.focus(`#${optionId(id, index)}`).pipe(Effect.ignore, Effect.as(CompletedFocusOption())));
+const withInternalUpdateReturn = M.withReturnType();
+/** Processes a radio group message and returns the next model, commands, and
+ *  optional OutMessage. Generic over `Value extends string`: pass the consumer's
+ *  union type at the call site to receive `Selected({ value: MyUnion })` without
+ *  casting. Defaults to `string`. */
+export const update = (model, message) => {
+    const result = M.value(message).pipe(withInternalUpdateReturn, M.tagsExhaustive({
+        SelectedOption: ({ value, index }) => [
+            evo(model, { selectedValue: () => Option.some(value) }),
+            [FocusOption({ id: model.id, index })],
+            Option.some(Selected({ value, index })),
+        ],
+        CompletedFocusOption: () => [model, [], Option.none()],
+    }));
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    return result;
+};
+/** Programmatically selects a value in the radio group, updating the model
+ *  and returning focus commands plus a `Selected` OutMessage. */
+export const select = (model, value, options) => pipe(options, Array.findFirstIndex(option => option === value), Option.match({
+    onNone: () => [model, [], Option.none()],
+    onSome: index => update(model, SelectedOption({ value, index })),
+}));
+/** Reflects an externally-sourced selection onto the model without
+ *  emitting an OutMessage or running the focus command. Use this to mirror
+ *  external truth (a URL parameter, restored storage, a server push) onto
+ *  the radio group's selection. Contrast with `select`, which represents a
+ *  user or programmatic *choice*: it focuses the option and emits
+ *  `Selected`. Takes no `options` (unlike `select`) because it sets the
+ *  value directly rather than deriving a focus index. Returns the model
+ *  directly because it produces no commands and no OutMessage. */
+export const reflectSelectedValue = Function.dual(2, (model, maybeValue) => evo(model, { selectedValue: () => maybeValue }));
+const labelId = (id, index) => `${id}-option-${index}-label`;
+const descriptionId = (id, index) => `${id}-option-${index}-description`;
+const internalView = defineView((model, viewInputs) => {
+    const h = html();
+    const { id, selectedValue } = model;
+    const { options, ariaLabel, toView, isOptionDisabled: isOptionDisabledFn, isDisabled: isGroupDisabled = false, name, orientation = model.orientation, } = viewInputs;
+    const isDisabled = (index) => {
+        if (isGroupDisabled) {
+            return true;
+        }
+        if (!isOptionDisabledFn) {
+            return false;
+        }
+        return pipe(options, Array.get(index), Option.exists(option => isOptionDisabledFn(option, index)));
+    };
+    const selectedIndex = Option.flatMap(selectedValue, value => Array.findFirstIndex(options, option => option === value));
+    const focusedIndex = pipe(selectedIndex, Option.getOrElse(() => pipe(options.length, Array.makeBy(index => index), Array.findFirst(Predicate.not(isDisabled)), Option.getOrElse(() => 0))));
+    const { nextKey, previousKey } = M.value(orientation).pipe(M.when('Horizontal', () => ({
+        nextKey: 'ArrowRight',
+        previousKey: 'ArrowLeft',
+    })), M.when('Vertical', () => ({
+        nextKey: 'ArrowDown',
+        previousKey: 'ArrowUp',
+    })), M.exhaustive);
+    const resolveKeyIndex = keyToIndex(nextKey, previousKey, options.length, focusedIndex, isDisabled);
+    const handleKeyDown = (currentIndex) => (key) => M.value(key).pipe(M.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => {
+        const nextIndex = resolveKeyIndex(key);
+        return pipe(options, Array.get(nextIndex), Option.map(value => SelectedOption({ value, index: nextIndex })));
+    }), M.when(' ', () => pipe(options, Array.get(currentIndex), Option.map(value => SelectedOption({ value, index: currentIndex })))), M.orElse(() => Option.none()));
+    const optionInfos = Array.map(options, (value, index) => {
+        const isSelected = Option.exists(selectedIndex, selectedIdx => selectedIdx === index);
+        const isFocusable = index === focusedIndex;
+        const isOptionDisabledNow = isDisabled(index);
+        const checkedAttributes = isSelected
+            ? [h.DataAttribute('checked', '')]
+            : [];
+        const activeAttributes = isFocusable
+            ? [h.DataAttribute('active', '')]
+            : [];
+        const disabledAttributes = isOptionDisabledNow
+            ? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
+            : [];
+        const optionAttributes = [
+            h.Id(optionId(id, index)),
+            h.Role('radio'),
+            h.AriaChecked(isSelected),
+            h.AriaLabelledBy(labelId(id, index)),
+            h.AriaDescribedBy(descriptionId(id, index)),
+            h.Tabindex(isFocusable ? 0 : -1),
+            ...checkedAttributes,
+            ...activeAttributes,
+            ...disabledAttributes,
+            ...(isOptionDisabledNow
+                ? []
+                : [
+                    h.OnClick(SelectedOption({ value, index })),
+                    h.OnKeyDownPreventDefault(handleKeyDown(index)),
+                ]),
+        ];
+        const labelAttributes = [h.Id(labelId(id, index))];
+        const descriptionAttributes = [h.Id(descriptionId(id, index))];
+        return {
+            value,
+            index,
+            isSelected,
+            isActive: isFocusable,
+            isDisabled: isOptionDisabledNow,
+            option: childAttributes(optionAttributes),
+            label: childAttributes(labelAttributes),
+            description: childAttributes(descriptionAttributes),
+        };
+    });
+    const groupAttributes = [
+        h.Role('radiogroup'),
+        h.AriaOrientation(String.toLowerCase(orientation)),
+        h.AriaLabel(ariaLabel),
+    ];
+    const hiddenInputAttributes = pipe(Option.fromNullishOr(name), Option.flatMap(inputName => Option.map(selectedValue, value => [
+        h.Type('hidden'),
+        h.Name(inputName),
+        h.Value(value),
+    ])), Option.getOrElse(() => []));
+    return toView({
+        group: childAttributes(groupAttributes),
+        options: optionInfos,
+        selectedValue,
+        hiddenInput: childAttributes(hiddenInputAttributes),
+    });
+});
+/** Pairs the radio group's `view` and `update` (and `select`) behind a
+ *  single Value-typed entry point. Declaring the radio group once at
+ *  module scope ensures the OutMessage's `value` field carries the
+ *  consumer's union type without an `as` cast at the call site:
+ *
+ *  ```ts
+ *  const ToolRadioGroup = RadioGroup.create<Tool>()
+ *
+ *  // In view:
+ *  h.submodel({ view: ToolRadioGroup.view, ... })
+ *
+ *  // In update:
+ *  const [next, commands, maybeOutMessage] = ToolRadioGroup.update(model, message)
+ *  // maybeOutMessage: Option<RadioGroup.OutMessage<Tool>>
+ *  ```
+ *
+ *  The view's `ViewInputs.options` stays typed `ReadonlyArray<string>`;
+ *  consumers can pass a `ReadonlyArray<MyUnion>` (assignable) and the
+ *  fenced cast inside `update` types the OutMessage's `value` as
+ *  `MyUnion`. */
+export const create = () => ({
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    view: internalView,
+    update: (model, message) => update(model, message),
+    select: (model, value, options) => select(model, value, options),
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    reflectSelectedValue: reflectSelectedValue,
+});

package/dist/radioGroup/public.d.ts

@@ -0,0 +1,3 @@
+export { init, create, Model, Message, OutMessage, Selected, SelectedOption, CompletedFocusOption, FocusOption, } from './index.js';
+export type { Orientation, InitConfig, ViewInputs, RenderInfo, OptionInfo, } from './index.js';
+//# sourceMappingURL=public.d.ts.map

package/dist/radioGroup/public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/radioGroup/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,WAAW,GACZ,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,GACX,MAAM,YAAY,CAAA"}

package/dist/radioGroup/public.js

@@ -0,0 +1 @@
+export { init, create, Model, Message, OutMessage, Selected, SelectedOption, CompletedFocusOption, FocusOption, } from './index.js';

package/dist/select/index.d.ts

@@ -0,0 +1,24 @@
+import type { Attribute } from 'foldkit/html';
+import type { Html } from 'foldkit/html';
+/** Attribute groups the select component provides to the consumer's `toView` callback. */
+export type SelectAttributes<ParentMessage> = Readonly<{
+    select: ReadonlyArray<Attribute<ParentMessage>>;
+    label: ReadonlyArray<Attribute<ParentMessage>>;
+    description: ReadonlyArray<Attribute<ParentMessage>>;
+}>;
+/** Configuration for rendering a select with `view`. */
+export type ViewConfig<ParentMessage> = Readonly<{
+    id: string;
+    toView: (attributes: SelectAttributes<ParentMessage>) => Html;
+    onChange?: (value: string) => ParentMessage;
+    value?: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isAutofocus?: boolean;
+    name?: string;
+}>;
+/** Generates the description element ID from the select's base ID. */
+export declare const descriptionId: (id: string) => string;
+/** Renders an accessible select by building ARIA attribute groups and delegating layout to the consumer's `toView` callback. */
+export declare const view: <ParentMessage>(config: ViewConfig<ParentMessage>) => Html;
+//# sourceMappingURL=index.d.ts.map

package/dist/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/select/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAIxC,0FAA0F;AAC1F,MAAM,MAAM,gBAAgB,CAAC,aAAa,IAAI,QAAQ,CAAC;IACrD,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;IAC/C,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;IAC9C,WAAW,EAAE,aAAa,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;CACrD,CAAC,CAAA;AAEF,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,aAAa,IAAI,QAAQ,CAAC;IAC/C,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IAC7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,aAAa,CAAA;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAC,CAAA;AAEF,sEAAsE;AACtE,eAAO,MAAM,aAAa,GAAI,IAAI,MAAM,KAAG,MAA6B,CAAA;AAExE,gIAAgI;AAChI,eAAO,MAAM,IAAI,GAAI,aAAa,EAChC,QAAQ,UAAU,CAAC,aAAa,CAAC,KAChC,IAuDF,CAAA"}

package/dist/select/index.js

@@ -0,0 +1,40 @@
+import { Predicate } from 'effect';
+import { html } from 'foldkit/html';
+/** Generates the description element ID from the select's base ID. */
+export const descriptionId = (id) => `${id}-description`;
+/** Renders an accessible select by building ARIA attribute groups and delegating layout to the consumer's `toView` callback. */
+export const view = (config) => {
+    const h = html();
+    const { toView, id, onChange, value, isDisabled = false, isInvalid = false, isAutofocus = false, name, } = config;
+    const disabledAttributes = isDisabled
+        ? [h.AriaDisabled(true), h.Disabled(true), h.DataAttribute('disabled', '')]
+        : [];
+    const invalidAttributes = isInvalid
+        ? [h.AriaInvalid(true), h.DataAttribute('invalid', '')]
+        : [];
+    const changeAttributes = Predicate.isNotUndefined(onChange) && !isDisabled
+        ? [h.OnChange(onChange)]
+        : [];
+    const valueAttributes = Predicate.isNotUndefined(value)
+        ? [h.Value(value)]
+        : [];
+    const autofocusAttributes = isAutofocus ? [h.Autofocus(true)] : [];
+    const nameAttributes = Predicate.isNotUndefined(name) ? [h.Name(name)] : [];
+    const allSelectAttributes = [
+        h.Id(id),
+        h.AriaDescribedBy(descriptionId(id)),
+        ...disabledAttributes,
+        ...invalidAttributes,
+        ...changeAttributes,
+        ...valueAttributes,
+        ...autofocusAttributes,
+        ...nameAttributes,
+    ];
+    const labelAttributes = [h.For(id)];
+    const descriptionAttributes = [h.Id(descriptionId(id))];
+    return toView({
+        select: allSelectAttributes,
+        label: labelAttributes,
+        description: descriptionAttributes,
+    });
+};

package/dist/select/public.d.ts

@@ -0,0 +1,3 @@
+export { view, descriptionId } from './index.js';
+export type { ViewConfig, SelectAttributes } from './index.js';
+//# sourceMappingURL=public.d.ts.map

package/dist/select/public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/select/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAEhD,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA"}

package/dist/select/public.js

@@ -0,0 +1 @@
+export { view, descriptionId } from './index.js';