@pithyjs/ui-kit 0.1.0-beta.0

package/dist/atoms/forms/checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,50 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.checkbox-group",
+  "title": "<CheckboxGroup> Form Atom",
+  "category": "feature"
+}
+*/
+/** @codexApi {"parent":"pithy.ui-kit.checkbox-group","name":"CheckboxGroupProps","stability":"stable","signature":"interface CheckboxGroupProps"} */
+export interface CheckboxGroupProps {
+    /** Explicit fieldset ID — overrides auto-generated ID */
+    id?: string;
+    /** Required group label rendered inside <legend> */
+    label: string;
+    /** Visually hide the legend (still announced by screen readers) */
+    hideLabel?: boolean;
+    /** Persistent helper text below the group */
+    helperText?: string;
+    /** Error message — when present and error is truthy, shown below the group */
+    errorMessage?: string | (() => string);
+    /** Visual error state — static boolean or signal accessor */
+    error?: boolean | (() => boolean);
+    /** Disable the entire group (sets fieldset[disabled]) — static boolean or signal accessor */
+    disabled?: boolean | (() => boolean);
+}
+/**
+ * Accessible group wrapper for `<Checkbox>` controls.
+ *
+ * Renders `<fieldset><legend>...</legend>{children}{helper/error}</fieldset>`.
+ * Children are compiled through PithyJS's full pipeline via `renderChildren()`,
+ * so any markup is supported. The fieldset is marked with `data-slot="default"`
+ * so the site builder can target it as a drop zone.
+ *
+ * Native `fieldset[disabled]` cascades to all descendant form controls, so
+ * setting `disabled` on the group disables every child checkbox without any
+ * extra plumbing.
+ *
+ * @example
+ * ```html
+ * <CheckboxGroup label="'Toppings'">
+ *   <Checkbox label="'Cheese'" name="'toppings'" value="'cheese'" />
+ *   <Checkbox label="'Pepperoni'" name="'toppings'" value="'pepperoni'" />
+ * </CheckboxGroup>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.checkbox-group","name":"CheckboxGroup","stability":"stable","signature":"(props: CheckboxGroupProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export declare function CheckboxGroup({ id: externalId, label, hideLabel, helperText, errorMessage, error, disabled, }: CheckboxGroupProps): {
+    el: HTMLElement | DocumentFragment;
+    destroy: () => void;
+};
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/atoms/forms/checkbox/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/atoms/forms/checkbox/CheckboxGroup.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAWF,qJAAqJ;AACrJ,MAAM,WAAW,kBAAkB;IACjC,yDAAyD;IACzD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IACvC,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IAClC,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,8MAA8M;AAC9M,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EAAE,UAAU,EACd,KAAK,EACL,SAAiB,EACjB,UAAU,EACV,YAAY,EACZ,KAAa,EACb,QAAgB,GACjB,EAAE,kBAAkB,GAAG;IACtB,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAqHA"}

package/dist/atoms/forms/checkbox/CheckboxGroup.js

@@ -0,0 +1,132 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.checkbox-group",
+  "title": "<CheckboxGroup> Form Atom",
+  "category": "feature"
+}
+*/
+import { effect } from '@pithyjs/signals';
+import { renderChildren } from '@pithyjs/core';
+import { captureSlot } from '../../../shared/slots';
+import { generateCheckboxGroupId } from '../../../shared/checkbox';
+import { createHelperElement, createErrorElement, } from '../../../shared/form-elements';
+/**
+ * Accessible group wrapper for `<Checkbox>` controls.
+ *
+ * Renders `<fieldset><legend>...</legend>{children}{helper/error}</fieldset>`.
+ * Children are compiled through PithyJS's full pipeline via `renderChildren()`,
+ * so any markup is supported. The fieldset is marked with `data-slot="default"`
+ * so the site builder can target it as a drop zone.
+ *
+ * Native `fieldset[disabled]` cascades to all descendant form controls, so
+ * setting `disabled` on the group disables every child checkbox without any
+ * extra plumbing.
+ *
+ * @example
+ * ```html
+ * <CheckboxGroup label="'Toppings'">
+ *   <Checkbox label="'Cheese'" name="'toppings'" value="'cheese'" />
+ *   <Checkbox label="'Pepperoni'" name="'toppings'" value="'pepperoni'" />
+ * </CheckboxGroup>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.checkbox-group","name":"CheckboxGroup","stability":"stable","signature":"(props: CheckboxGroupProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export function CheckboxGroup({ id: externalId, label, hideLabel = false, helperText, errorMessage, error = false, disabled = false, }) {
+    if (import.meta.env?.DEV) {
+        if (!label) {
+            console.warn(`[<CheckboxGroup>] Empty label — all groups require an accessible name. Pass a non-empty label string.`);
+        }
+    }
+    const groupId = externalId ?? generateCheckboxGroupId();
+    const fieldset = document.createElement('fieldset');
+    fieldset.classList.add('ui-checkbox-group');
+    fieldset.id = groupId;
+    captureSlot(fieldset, 'default');
+    const legend = document.createElement('legend');
+    legend.classList.add('ui-checkbox-group-legend');
+    if (hideLabel)
+        legend.classList.add('u-visually-hidden');
+    legend.textContent = label;
+    fieldset.appendChild(legend);
+    // Compile children through full pipeline (enables nested components)
+    const { el: childFragment, destroy: destroyChildren } = renderChildren();
+    fieldset.appendChild(childFragment);
+    const helperEl = createHelperElement(`${groupId}-helper`, helperText);
+    if (helperEl)
+        fieldset.appendChild(helperEl);
+    const errorEl = createErrorElement(`${groupId}-error`, errorMessage);
+    if (errorEl)
+        fieldset.appendChild(errorEl);
+    // -- Reactive state --------------------------------------------------------
+    const readError = () => (typeof error === 'function' ? error() : error);
+    const readErrorMessage = () => typeof errorMessage === 'function' ? errorMessage() : errorMessage;
+    const readDisabled = () => typeof disabled === 'function' ? disabled() : disabled;
+    const isReactive = typeof error === 'function' ||
+        typeof errorMessage === 'function' ||
+        typeof disabled === 'function';
+    let prevError = false;
+    let firstRun = true;
+    const applyState = () => {
+        // Disabled
+        const isDisabled = !!readDisabled();
+        fieldset.disabled = isDisabled;
+        if (isDisabled) {
+            fieldset.setAttribute('data-disabled', '');
+        }
+        else {
+            fieldset.removeAttribute('data-disabled');
+        }
+        // Error
+        const isError = !!readError();
+        const msg = readErrorMessage();
+        const showError = isError && !!msg && !!errorEl;
+        // Warn only on first run or false→true transition to avoid console spam
+        if (import.meta.env?.DEV && isError && !msg && (!prevError || firstRun)) {
+            console.warn(`[<CheckboxGroup>] error=true but no errorMessage. ` +
+                `Screen readers will announce "invalid" with no context. ` +
+                `Provide an errorMessage for accessible error identification (WCAG 3.3.1).`);
+        }
+        if (isError) {
+            fieldset.setAttribute('aria-invalid', 'true');
+            fieldset.setAttribute('data-error', '');
+        }
+        else {
+            fieldset.removeAttribute('aria-invalid');
+            fieldset.removeAttribute('data-error');
+        }
+        if (errorEl) {
+            errorEl.textContent = showError ? msg : '';
+            errorEl.hidden = !showError;
+        }
+        // Hide helper when error message is visible (consistent with form atoms)
+        if (helperEl) {
+            helperEl.hidden = !!showError;
+        }
+        // aria-describedby — only reference visible content
+        const descIds = [];
+        if (errorEl && showError)
+            descIds.push(errorEl.id);
+        if (helperEl && !showError)
+            descIds.push(helperEl.id);
+        if (descIds.length > 0) {
+            fieldset.setAttribute('aria-describedby', descIds.join(' '));
+        }
+        else {
+            fieldset.removeAttribute('aria-describedby');
+        }
+        prevError = !!isError;
+        firstRun = false;
+    };
+    const cleanupEffect = isReactive
+        ? effect(applyState)
+        : (applyState(), undefined);
+    return {
+        el: fieldset,
+        destroy: () => {
+            cleanupEffect?.();
+            destroyChildren();
+            fieldset.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/atoms/forms/checkbox/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../../src/atoms/forms/checkbox/CheckboxGroup.ts"],"names":[],"mappings":"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"}