@pithyjs/ui-kit 0.1.0-beta.0

package/dist/organisms/feedback/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/organisms/feedback/Popover.ts"],"names":[],"mappings":"AAAA;;;;;;;EAOE;AAIF,OAAO,EAAgB,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAIrE,kIAAkI;AAClI,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACxB,SAAS,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM;QAAE,EAAE,EAAE,WAAW,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACxD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,WAAW,GAAG,IAAI,CAAC;CAC5D;AAED,uJAAuJ;AACvJ,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CA4JA"}

package/dist/organisms/feedback/Popover.js

@@ -0,0 +1,151 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.popover",
+  "title": "<Popover> Anchored Overlay Component",
+  "category": "feature",
+  "risk": "high"
+}
+*/
+import { effect } from '@pithyjs/signals';
+import { FocusTrap } from '@pithyjs/core';
+import { readReactive } from '../../shared/clickable';
+const VIEWPORT_GUTTER = 8;
+/** @codexApi {"parent":"pithy.ui-kit.popover","name":"Popover","stability":"stable","signature":"(props: PopoverProps) => { destroy: () => void }"} */
+export function Popover(props) {
+    const { open, anchorRef, onClose, content, align = 'right', gap = 8, menuId, zIndex = 'var(--z-popover)', backdropClass, initialFocus, } = props;
+    const backdrop = document.createElement('div');
+    backdrop.className = 'ui-popover-backdrop';
+    backdrop.style.zIndex = zIndex;
+    backdrop.setAttribute('aria-hidden', 'true');
+    if (backdropClass)
+        backdrop.classList.add(backdropClass);
+    backdrop.hidden = true;
+    let activeContent = null;
+    let activeAnchor = null;
+    let trap = null;
+    let cachedMenuWidth = 0;
+    let onKey = null;
+    let onBackdrop = null;
+    let mounted = false;
+    const measureMenu = () => {
+        if (mounted && activeContent)
+            cachedMenuWidth = activeContent.el.offsetWidth;
+    };
+    const position = () => {
+        if (!mounted || !activeContent || !activeAnchor)
+            return;
+        const menuEl = activeContent.el;
+        const rect = activeAnchor.getBoundingClientRect();
+        menuEl.style.top = `${rect.bottom + gap}px`;
+        if (align === 'center' || align === 'start') {
+            const desiredLeft = align === 'center'
+                ? rect.left + rect.width / 2 - cachedMenuWidth / 2
+                : rect.left;
+            const maxLeft = window.innerWidth - cachedMenuWidth - VIEWPORT_GUTTER;
+            const left = Math.max(VIEWPORT_GUTTER, Math.min(maxLeft, desiredLeft));
+            menuEl.style.left = `${left}px`;
+            menuEl.style.right = 'auto';
+        }
+        else {
+            const maxRight = window.innerWidth - cachedMenuWidth - VIEWPORT_GUTTER;
+            const right = Math.max(VIEWPORT_GUTTER, Math.min(maxRight, window.innerWidth - rect.right));
+            menuEl.style.right = `${right}px`;
+            menuEl.style.left = 'auto';
+        }
+    };
+    const onResize = () => {
+        measureMenu();
+        position();
+    };
+    const mount = (anchor) => {
+        onBackdrop = () => onClose();
+        backdrop.addEventListener('pointerdown', onBackdrop);
+        onKey = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                onClose();
+            }
+        };
+        window.addEventListener('keydown', onKey, true);
+        activeContent = content();
+        const menuEl = activeContent.el;
+        menuEl.classList.add('ui-popover');
+        menuEl.style.position = 'fixed';
+        menuEl.style.zIndex = zIndex;
+        if (menuId)
+            menuEl.id = menuId;
+        backdrop.hidden = false;
+        document.body.appendChild(backdrop);
+        document.body.appendChild(menuEl);
+        activeAnchor = anchor;
+        mounted = true;
+        measureMenu();
+        position();
+        window.addEventListener('scroll', position, true);
+        window.addEventListener('resize', onResize);
+        trap = new FocusTrap(menuEl, {
+            initialFocus: initialFocus?.(menuEl) ?? undefined,
+            escapeDeactivates: false,
+            clickOutsideDeactivates: false,
+            preventScroll: false,
+        });
+        trap.activate();
+    };
+    const unmount = () => {
+        window.removeEventListener('scroll', position, true);
+        window.removeEventListener('resize', onResize);
+        if (onKey) {
+            window.removeEventListener('keydown', onKey, true);
+            onKey = null;
+        }
+        if (onBackdrop) {
+            backdrop.removeEventListener('pointerdown', onBackdrop);
+            onBackdrop = null;
+        }
+        trap?.deactivate();
+        trap = null;
+        backdrop.hidden = true;
+        backdrop.remove();
+        if (activeContent) {
+            activeContent.destroy();
+            activeContent.el.remove();
+            activeContent = null;
+        }
+        activeAnchor = null;
+        mounted = false;
+    };
+    let disposed = false;
+    const disposeEffect = effect(() => {
+        const isOpen = readReactive(open);
+        const anchor = anchorRef();
+        queueMicrotask(() => {
+            if (disposed)
+                return;
+            if (isOpen && anchor && !mounted)
+                mount(anchor);
+            else if (isOpen && !anchor && !mounted)
+                onClose();
+            else if (isOpen && !anchor && mounted) {
+                unmount();
+                onClose();
+            }
+            else if (isOpen && anchor && mounted && anchor !== activeAnchor) {
+                activeAnchor = anchor;
+                measureMenu();
+                position();
+            }
+            else if (!isOpen && mounted)
+                unmount();
+        });
+    });
+    return {
+        destroy: () => {
+            disposed = true;
+            disposeEffect();
+            if (mounted)
+                unmount();
+        },
+    };
+}
+//# sourceMappingURL=Popover.js.map

package/dist/organisms/feedback/Popover.js.map

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

package/dist/organisms/feedback/modal.scss

@@ -0,0 +1,66 @@
+/// Modal component styles
+/// Viewport-level dialog: a centered surface over a dimming backdrop.
+/// Portals to <body>; focus trap and scroll lock come from @pithyjs/core.
+///
+/// @group organisms/feedback
+
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+
+.ui-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-md);
+  background: rgb(var(--color-overlay-rgb) / 0.55);
+
+  &[hidden] {
+    display: none;
+  }
+
+  @include a11y.motion-safe {
+    animation: ui-modal-backdrop-in var(--motion-duration-fast)
+      var(--motion-easing-standard);
+  }
+}
+
+.ui-modal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  inline-size: min(100%, 32rem);
+  max-block-size: min(90vh, 44rem);
+  max-block-size: min(90dvh, 44rem);
+  overflow-y: auto;
+  padding: var(--space-lg);
+  background: var(--color-surface);
+  color: var(--color-text);
+  border: var(--border-width-hairline) var(--border-style-solid)
+    var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+
+  @include a11y.motion-safe {
+    animation: ui-modal-in var(--motion-duration-normal)
+      var(--motion-easing-emphasized);
+  }
+
+  @include a11y.forced-colors {
+    border: var(--border-width-thin) var(--border-style-solid) CanvasText;
+  }
+}
+
+@keyframes ui-modal-backdrop-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes ui-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--space-sm));
+  }
+}

package/dist/organisms/feedback/popover.scss

@@ -0,0 +1,27 @@
+/// Popover component styles
+/// Anchored overlay: a fixed surface positioned relative to a trigger,
+/// portaled to <body> over a transparent click-catching backdrop.
+///
+/// @group organisms/feedback
+
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+
+.ui-popover-backdrop {
+  position: fixed;
+  inset: 0;
+  background: transparent;
+}
+
+.ui-popover {
+  @include a11y.motion-safe {
+    animation: ui-popover-in var(--motion-duration-fast)
+      var(--motion-easing-standard);
+  }
+}
+
+@keyframes ui-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--space-xs)));
+  }
+}

package/dist/organisms/forms/DynamicForm.d.ts

@@ -0,0 +1,118 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.dynamic-form",
+  "title": "<DynamicForm> Organism",
+  "category": "feature"
+}
+*/
+import { type ValidateOn } from './form-state';
+import type { ValidationRule } from './validation';
+/** @codexApi {"parent":"pithy.ui-kit.dynamic-form","name":"FieldConfig","stability":"stable","signature":"interface FieldConfig"} */
+export interface FieldConfig {
+    /** Unique field name — used as key in form values */
+    name: string;
+    /** Field type — maps to an atom component */
+    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'toggle';
+    /** Visible label */
+    label: string;
+    /** Placeholder text (for text-like inputs and textarea) */
+    placeholder?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Options for select and radio fields */
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    /** Validation rules for this field */
+    validation?: ValidationRule[];
+    /** Conditional visibility: show only when another field matches a value */
+    dependsOn?: {
+        field: string;
+        value: unknown;
+    };
+    /** Grid column span (number or "full" for full width) */
+    span?: 'full' | number;
+    /** Helper text shown below the field */
+    helperText?: string;
+    /** Autocomplete hint (e.g. "name", "email") — maps to the HTML autocomplete attribute */
+    autocomplete?: string;
+}
+/** @codexApi {"parent":"pithy.ui-kit.dynamic-form","name":"FormConfig","stability":"stable","signature":"interface FormConfig"} */
+export interface FormConfig {
+    /** Field definitions */
+    fields: FieldConfig[];
+    /** Submit button label (default: "Submit") */
+    submitLabel?: string;
+    /**
+     * Static hidden inputs submitted with the form.
+     * Useful for service metadata (e.g. Formsubmit.co `_subject`, `_next`, `_captcha`).
+     * Each entry renders as `<input type="hidden" name=KEY value=VALUE>`.
+     */
+    hiddenFields?: Record<string, string>;
+    /**
+     * Add a honeypot spam-protection field. Bots fill all visible inputs;
+     * a filled honeypot causes the submission to be silently rejected.
+     * Pass `true` to use the default name `_honey`, or a string for a custom name.
+     */
+    honeypot?: boolean | string;
+}
+/** @codexApi {"parent":"pithy.ui-kit.dynamic-form","name":"DynamicFormProps","stability":"stable","signature":"interface DynamicFormProps"} */
+export interface DynamicFormProps {
+    /** Form field configuration — static or lazy accessor */
+    config: FormConfig | (() => FormConfig);
+    /**
+     * Called with current values when form is submitted and valid.
+     * Optional when `action` is set — the native browser submission handles delivery.
+     */
+    onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
+    /** Number of grid columns (default: 1) */
+    columns?: number;
+    /** When to run validation (default: "submit") */
+    validateOn?: ValidateOn;
+    /**
+     * Native form `action` URL. When set, the form posts via the browser
+     * after passing client-side validation (e.g. for Formsubmit.co exports).
+     * Without this, the form is JS-only and calls `onSubmit`.
+     */
+    action?: string;
+    /** Native form `method` (default: "POST" when `action` is set) */
+    method?: 'GET' | 'POST';
+    /** Accessible label for the form (sets aria-label) */
+    ariaLabel?: string;
+    /** ID of an element that labels this form (sets aria-labelledby) */
+    ariaLabelledBy?: string;
+}
+/**
+ * Config-driven form organism.
+ *
+ * Renders form fields from a `FormConfig` object, wiring each field's
+ * value, error, and event handlers to a shared `FormState` automatically.
+ * Supports grid layout with column spans and conditional field visibility
+ * via `dependsOn`.
+ *
+ * @example
+ * ```typescript
+ * const form = DynamicForm({
+ *   config: {
+ *     fields: [
+ *       { name: "email", type: "email", label: "Email", required: true },
+ *       { name: "message", type: "textarea", label: "Message", span: "full" },
+ *     ],
+ *     submitLabel: "Send",
+ *   },
+ *   columns: 2,
+ *   validateOn: "blur",
+ *   onSubmit: async (values) => console.log(values),
+ * });
+ * document.body.appendChild(form.el);
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.dynamic-form","name":"DynamicForm","stability":"stable","signature":"(props: DynamicFormProps) => { el: HTMLFormElement; destroy: () => void }"} */
+export declare function DynamicForm({ config: configProp, onSubmit, columns: rawColumns, validateOn, action, method, ariaLabel, ariaLabelledBy, }: DynamicFormProps): {
+    el: HTMLFormElement;
+    destroy: () => void;
+};
+//# sourceMappingURL=DynamicForm.d.ts.map

package/dist/organisms/forms/DynamicForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../src/organisms/forms/DynamicForm.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAGF,OAAO,EAAmC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqBnD,qIAAqI;AACrI,MAAM,WAAW,WAAW;IAC1B,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,IAAI,EACA,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,GACL,UAAU,GACV,QAAQ,GACR,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;IACb,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,sCAAsC;IACtC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,2EAA2E;IAC3E,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC;IAC9C,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,mIAAmI;AACnI,MAAM,WAAW,UAAU;IACzB,wBAAwB;IACxB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC7B;AAED,+IAA+I;AAC/I,MAAM,WAAW,gBAAgB;IAC/B,yDAAyD;IACzD,MAAM,EAAE,UAAU,GAAG,CAAC,MAAM,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA6LD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,yLAAyL;AACzL,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EAAE,UAAU,EAClB,QAAoB,EACpB,OAAO,EAAE,UAAc,EACvB,UAAsB,EACtB,MAAkB,EAClB,MAAkB,EAClB,SAAqB,EACrB,cAA0B,GAC3B,EAAE,gBAAgB,GAAG;IAAE,EAAE,EAAE,eAAe,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAyYjE"}