@foldkit/ui 0.112.0

package/dist/test/apps/disabledButton.js

@@ -0,0 +1,71 @@
+import { Match as M, Schema as S } from 'effect';
+import * as Command from 'foldkit/command';
+import { html } from 'foldkit/html';
+import { m } from 'foldkit/message';
+import * as Dialog from '../../dialog/index.js';
+// MODEL
+export const Model = S.Struct({
+    isEnabled: S.Boolean,
+    dialog: Dialog.Model,
+});
+// MESSAGE
+export const ClickedToggle = m('ClickedToggle');
+export const ClickedSubmit = m('ClickedSubmit');
+export const GotDialogMessage = m('GotDialogMessage', {
+    message: Dialog.Message,
+});
+export const Message = S.Union([ClickedToggle, ClickedSubmit, GotDialogMessage]);
+// INIT
+export const initialModel = {
+    isEnabled: false,
+    dialog: Dialog.init({ id: 'test-dialog', isOpen: true }),
+};
+// UPDATE
+export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
+    ClickedToggle: () => [{ ...model, isEnabled: !model.isEnabled }, []],
+    ClickedSubmit: () => [model, []],
+    GotDialogMessage: ({ message: dialogMessage }) => {
+        const [nextDialog, commands] = Dialog.update(model.dialog, dialogMessage);
+        return [
+            { ...model, dialog: nextDialog },
+            Command.mapMessages(commands, dialogMessage => GotDialogMessage({ message: dialogMessage })),
+        ];
+    },
+}));
+// VIEW
+const submitButton = (isEnabled) => {
+    const h = html();
+    return h.button([
+        h.Class('submit'),
+        ...(isEnabled ? [h.OnClick(ClickedSubmit())] : [h.Disabled(true)]),
+    ], ['Submit']);
+};
+/** Plain view, no dialog wrapper. */
+export const view = (model) => {
+    const h = html();
+    return h.div([], [
+        h.button([h.OnClick(ClickedToggle())], ['Toggle']),
+        submitButton(model.isEnabled),
+    ]);
+};
+/** View with submit button inside a dialog's panel. */
+export const viewWithDialog = (model) => {
+    const h = html();
+    return h.div([], [
+        h.button([h.OnClick(ClickedToggle())], ['Toggle']),
+        h.submodel({
+            slotId: model.dialog.id,
+            model: model.dialog,
+            view: Dialog.view,
+            viewInputs: {
+                toView: ({ dialog, backdrop, panel, isVisible }) => h.dialog([...dialog], isVisible
+                    ? [
+                        h.div([...backdrop], []),
+                        h.div([...panel], [submitButton(model.isEnabled)]),
+                    ]
+                    : []),
+            },
+            toParentMessage: message => GotDialogMessage({ message }),
+        }),
+    ]);
+};

package/dist/textarea/index.d.ts

@@ -0,0 +1,26 @@
+import type { Attribute } from 'foldkit/html';
+import type { Html } from 'foldkit/html';
+/** Attribute groups the textarea component provides to the consumer's `toView` callback. */
+export type TextareaAttributes<ParentMessage> = Readonly<{
+    textarea: ReadonlyArray<Attribute<ParentMessage>>;
+    label: ReadonlyArray<Attribute<ParentMessage>>;
+    description: ReadonlyArray<Attribute<ParentMessage>>;
+}>;
+/** Configuration for rendering a textarea with `view`. */
+export type ViewConfig<ParentMessage> = Readonly<{
+    id: string;
+    toView: (attributes: TextareaAttributes<ParentMessage>) => Html;
+    onInput?: (value: string) => ParentMessage;
+    value?: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isAutofocus?: boolean;
+    name?: string;
+    rows?: number;
+    placeholder?: string;
+}>;
+/** Generates the description element ID from the textarea's base ID. */
+export declare const descriptionId: (id: string) => string;
+/** Renders an accessible textarea 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/textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/textarea/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAIxC,4FAA4F;AAC5F,MAAM,MAAM,kBAAkB,CAAC,aAAa,IAAI,QAAQ,CAAC;IACvD,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;IACjD,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,0DAA0D;AAC1D,MAAM,MAAM,UAAU,CAAC,aAAa,IAAI,QAAQ,CAAC;IAC/C,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,CAAC,UAAU,EAAE,kBAAkB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IAC/D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,aAAa,CAAA;IAC1C,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;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAC,CAAA;AAEF,wEAAwE;AACxE,eAAO,MAAM,aAAa,GAAI,IAAI,MAAM,KAAG,MAA6B,CAAA;AAExE,kIAAkI;AAClI,eAAO,MAAM,IAAI,GAAI,aAAa,EAChC,QAAQ,UAAU,CAAC,aAAa,CAAC,KAChC,IA+DF,CAAA"}

package/dist/textarea/index.js

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

package/dist/textarea/public.d.ts

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

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

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

package/dist/textarea/public.js

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