@plexui/vue 0.0.0-stage → 0.1.0

package/dist/es/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { computed, defineComponent, h, onMounted, ref, useId, watch, type PropType } from \"vue\"\nimport { CheckboxIndicator as RekaCheckboxIndicator, CheckboxRoot as RekaCheckboxRoot } from \"reka-ui\"\nimport { bubbleInputStyle, useBubbleInputEffect, useCheckedTracker, useIsFormControl, useSize } from \"./bubbleInput.js\"\nimport { ControlButton, isListener, type Listeners } from \"./ControlButton.js\"\nimport s from \"@plexui/styles/components/Checkbox/Checkbox.module.css\"\n\n// Vue port of packages/ui/src/components/Checkbox/Checkbox.tsx on Reka UI's\n// Checkbox (state, role, aria-checked, Enter handling, indicator presence).\n// Where Reka's DOM differs from Radix's, Radix's is rendered (see the parity\n// tests): the button carries `value`, no `aria-disabled` and no `aria-label`\n// copied from the label text; the hidden form input is Radix's BubbleInput;\n// the consumer's handlers run before the toggle and can cancel it; a form\n// reset restores the initial state.\n\nexport type CheckedState = boolean | \"indeterminate\"\n\nconst CheckboxComponent = defineComponent({\n  name: \"Checkbox\",\n  inheritAttrs: false,\n  props: {\n    /** The `id` of the checkbox. */\n    id: String,\n    /** The state of the checkbox when it is initially rendered. Use when you do not need to control its state. */\n    defaultChecked: { type: [Boolean, String] as PropType<CheckedState>, default: undefined },\n    /** The controlled state of the checkbox. Bind with `v-model:checked`. */\n    checked: { type: [Boolean, String] as PropType<CheckedState>, default: undefined },\n    /** Optional accessible label rendered to the right of the checkbox. The `label` slot takes rich content. */\n    label: String,\n    /** Optional second line below the label, linked via `aria-describedby`. The `description` slot takes rich content. */\n    description: String,\n    /** When `true`, prevents the user from interacting with the checkbox. */\n    disabled: { type: Boolean, default: false },\n    /** When `true`, indicates that the user must check the checkbox before the owning form can be submitted. */\n    required: { type: Boolean, default: undefined },\n    /** The name of the checkbox. Submitted with its owning form as part of a name/value pair. */\n    name: String,\n    /** The value given as data when submitted with a `name`. @default \"on\" */\n    value: String,\n    /** The orientation of the checkbox relative to the label. @default \"left\" */\n    orientation: { type: String as PropType<\"left\" | \"right\">, default: \"left\" },\n    /** Determines if the checkbox should be a fully rounded pill shape. @default false */\n    pill: { type: Boolean, default: false },\n    /** Visual style: `\"solid\"` fills the box when checked, `\"ghost\"` shows the checkmark only. @default \"solid\" */\n    variant: { type: String as PropType<\"solid\" | \"ghost\">, default: \"solid\" },\n  },\n  emits: {\n    /** The state of the checkbox changed */\n    \"update:checked\": (_checked: CheckedState) => true,\n    /** The checkbox gained focus */\n    focus: (_event: FocusEvent) => true,\n    /** The checkbox lost focus */\n    blur: (_event: FocusEvent) => true,\n  },\n  setup(props, { attrs, slots, emit }) {\n    const generatedId = useId()\n    const container = ref<HTMLDivElement | null>(null)\n    const control = ref<HTMLButtonElement | null>(null)\n    const bubbleInput = ref<HTMLInputElement | null>(null)\n    useCheckedTracker(bubbleInput)\n\n    // Radix's useControllableState: controlled while `checked` is set, and\n    // only actual changes are reported\n    const internalChecked = ref<CheckedState>(props.defaultChecked ?? false)\n    const checked = computed(() => props.checked ?? internalChecked.value)\n    // The state a click asks for (Reka's toggle sets it), for the user click\n    let requestedChecked = true\n    const setChecked = (next: CheckedState) => {\n      requestedChecked = next === true\n      if (next === checked.value) return\n      if (props.checked === undefined) internalChecked.value = next\n      emit(\"update:checked\", next)\n    }\n\n    const initialChecked = checked.value\n    const isFormControl = useIsFormControl(control, () => attrs.form)\n    const controlSize = useSize(() => (isFormControl.value ? control.value : null))\n    const onUserClick = useBubbleInputEffect(bubbleInput, () => checked.value, true)\n\n    onMounted(() => {\n      control.value = (container.value?.firstElementChild as HTMLButtonElement | null) ?? null\n    })\n\n    // Like a native checkbox, a form reset restores the initial state\n    watch(control, (button, _, onCleanup) => {\n      const form = button?.form\n      if (!form) return\n      const reset = () => setChecked(initialChecked)\n      form.addEventListener(\"reset\", reset)\n      onCleanup(() => form.removeEventListener(\"reset\", reset))\n    })\n\n    // In a form, the button's click stops here; the input's click bubbles instead\n    const afterClick = (event: Event) => {\n      const hasConsumerStoppedPropagation = event.cancelBubble\n      onUserClick({ requestedChecked, hasConsumerStoppedPropagation })\n      if (bubbleInput.value && isFormControl.value && !hasConsumerStoppedPropagation) event.stopPropagation()\n    }\n\n    // Prevents text selection when double-clicking the label\n    const handleLabelMouseDown = (event: MouseEvent) => {\n      if (!event.defaultPrevented && event.detail > 1) event.preventDefault()\n    }\n\n    return () => {\n      const { class: className, form, ...rest } = attrs\n      const id = props.id ?? generatedId\n      const hasLabel = Boolean(slots.label || props.label)\n      // The description only renders next to a label; it comes before any ids\n      // the caller (a Field, say) passes\n      const descriptionId = hasLabel && (slots.description || props.description) ? `${id}-label-description` : undefined\n      const indeterminateDefault = props.defaultChecked === \"indeterminate\" ? false : props.defaultChecked\n      const inputDefaultChecked = indeterminateDefault ?? (initialChecked === \"indeterminate\" ? false : initialChecked)\n\n      // The consumer's listeners compose with Reka's; other attributes land\n      // on the button after the component's own, as `{...restProps}` does\n      const listeners: Listeners = {\n        onFocus: (event: FocusEvent) => emit(\"focus\", event),\n        onBlur: (event: FocusEvent) => emit(\"blur\", event),\n      }\n      const buttonAttrs: Record<string, unknown> = {}\n      for (const [key, value] of Object.entries(rest)) {\n        if (isListener(key)) listeners[key] = value\n        else buttonAttrs[key] = value\n      }\n      const ariaDescribedBy =\n        [descriptionId, buttonAttrs[\"aria-describedby\"] as string | undefined].filter(Boolean).join(\" \") || undefined\n      const labelElement = hasLabel\n        ? h(\"label\", { for: id, class: s.Label, onMousedown: handleLabelMouseDown }, slots.label ? slots.label() : props.label)\n        : null\n\n      return h(\n        \"div\",\n        {\n          \"ref\": container,\n          \"data-disabled\": props.disabled ? \"\" : undefined,\n          \"data-has-label\": hasLabel ? \"\" : undefined,\n          \"data-orientation\": props.orientation,\n          \"class\": [className, s.Container],\n        },\n        [\n          h(\n            RekaCheckboxRoot as never,\n            {\n              \"asChild\": true,\n              \"modelValue\": checked.value,\n              \"onUpdate:modelValue\": setChecked,\n              \"disabled\": props.disabled,\n              // Passed even when unset, so Reka renders no aria-required=\"false\"\n              \"required\": props.required,\n            },\n            {\n              default: () =>\n                h(\n                  ControlButton,\n                  {\n                    \"listeners\": listeners,\n                    \"after\": { onClick: afterClick },\n                    \"class\": s.Checkbox,\n                    \"id\": id,\n                    \"data-pill\": props.pill ? \"\" : undefined,\n                    \"data-variant\": props.variant,\n                    \"value\": props.value ?? \"on\",\n                    // Reka marks a disabled checkbox aria-disabled; Radix does not\n                    \"aria-disabled\": undefined,\n                    ...buttonAttrs,\n                    \"aria-describedby\": ariaDescribedBy,\n                  },\n                  { default: () => h(RekaCheckboxIndicator, { class: s.CheckMark }) },\n                ),\n            },\n          ),\n          isFormControl.value\n            ? h(\"input\", {\n                \"ref\": bubbleInput,\n                \"type\": \"checkbox\",\n                \"aria-hidden\": \"true\",\n                \"^checked\": inputDefaultChecked ? \"\" : undefined,\n                \"required\": props.required,\n                \"disabled\": props.disabled,\n                \"name\": props.name,\n                \"^value\": props.value ?? \"on\",\n                \"form\": form,\n                \"tabindex\": -1,\n                \"style\": bubbleInputStyle(controlSize.value, { transform: \"translateX(-100%)\" }),\n              })\n            : null,\n          descriptionId\n            ? h(\"div\", { class: s.LabelGroup }, [\n                labelElement,\n                h(\n                  \"span\",\n                  { id: descriptionId, class: s.Description },\n                  slots.description ? slots.description() : props.description,\n                ),\n              ])\n            : labelElement,\n        ],\n      )\n    }\n  },\n})\n\ntype CheckboxOwnProps = InstanceType<typeof CheckboxComponent>[\"$props\"]\n\nexport type CheckboxProps = CheckboxOwnProps\n\nexport const Checkbox = CheckboxComponent\n"]}

package/dist/es/components/Checkbox/ControlButton.js

@@ -0,0 +1,41 @@
+import { defineComponent, h } from "vue";
+export const isListener = (key) => /^on[A-Z]/.test(key);
+const call = (handler, event) => {
+    if (Array.isArray(handler))
+        for (const fn of handler)
+            fn(event);
+    else if (typeof handler === "function")
+        handler(event);
+};
+export const ControlButton = defineComponent({
+    name: "ControlButton",
+    inheritAttrs: false,
+    props: {
+        /** The consumer's listeners (`onClick`, `onKeydown`, ...), run first */
+        listeners: { type: Object, default: () => ({}) },
+        /** Internal work Radix does in the same handler, after Reka's */
+        after: { type: Object, default: () => ({}) },
+        /** Reka handlers that Radix does not have */
+        drop: { type: Array, default: () => [] },
+    },
+    setup(props, { attrs, slots }) {
+        return () => {
+            const handlers = {};
+            const own = Object.keys(attrs).filter(isListener);
+            const keys = new Set([...Object.keys(props.listeners), ...own, ...Object.keys(props.after)]);
+            for (const key of keys) {
+                const consumer = props.listeners[key];
+                const internal = [props.drop.includes(key) ? undefined : attrs[key], props.after[key]];
+                handlers[key] = (event) => {
+                    call(consumer, event);
+                    if (event.defaultPrevented)
+                        return;
+                    for (const handler of internal)
+                        call(handler, event);
+                };
+            }
+            return h("button", { ...attrs, ...handlers }, slots.default?.());
+        };
+    },
+});
+//# sourceMappingURL=ControlButton.js.map

package/dist/es/components/Checkbox/ControlButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlButton.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/ControlButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAiB,MAAM,KAAK,CAAA;AAavD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAE/D,MAAM,IAAI,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IAC9C,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;QAAE,KAAK,MAAM,EAAE,IAAI,OAAO;YAAG,EAAc,CAAC,KAAK,CAAC,CAAA;SACvE,IAAI,OAAO,OAAO,KAAK,UAAU;QAAG,OAAmB,CAAC,KAAK,CAAC,CAAA;AACrE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;IAC3C,IAAI,EAAE,eAAe;IACrB,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE;QACL,wEAAwE;QACxE,SAAS,EAAE,EAAE,IAAI,EAAE,MAA6B,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;QACvE,iEAAiE;QACjE,KAAK,EAAE,EAAE,IAAI,EAAE,MAA6B,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;QACnE,6CAA6C;QAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,KAA2B,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE;KAC/D;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,OAAO,GAAG,EAAE;YACV,MAAM,QAAQ,GAA4B,EAAE,CAAA;YAC5C,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;YACjD,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;YAE5F,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;gBACvB,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;gBACrC,MAAM,QAAQ,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;gBACtF,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,KAAY,EAAE,EAAE;oBAC/B,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;oBACrB,IAAI,KAAK,CAAC,gBAAgB;wBAAE,OAAM;oBAClC,KAAK,MAAM,OAAO,IAAI,QAAQ;wBAAE,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;gBACtD,CAAC,CAAA;YACH,CAAC;YAED,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,QAAQ,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;QAClE,CAAC,CAAA;IACH,CAAC;CACF,CAAC,CAAA","sourcesContent":["import { defineComponent, h, type PropType } from \"vue\"\n\n// Internal: the <button> that Checkbox and Switch render through Reka's root\n// with `asChild`. Reka merges its own handlers (toggle on click, Enter key\n// handling) into these attrs and would run them before the consumer's.\n// Radix composes them the other way (composeEventHandlers): the consumer's\n// handler runs first, and Radix skips its own when that one called\n// preventDefault(). So the consumer's listeners arrive separately in\n// `listeners` and are composed that way here.\n\ntype Handler = (event: Event) => void\nexport type Listeners = Record<string, unknown>\n\nexport const isListener = (key: string) => /^on[A-Z]/.test(key)\n\nconst call = (handler: unknown, event: Event) => {\n  if (Array.isArray(handler)) for (const fn of handler) (fn as Handler)(event)\n  else if (typeof handler === \"function\") (handler as Handler)(event)\n}\n\nexport const ControlButton = defineComponent({\n  name: \"ControlButton\",\n  inheritAttrs: false,\n  props: {\n    /** The consumer's listeners (`onClick`, `onKeydown`, ...), run first */\n    listeners: { type: Object as PropType<Listeners>, default: () => ({}) },\n    /** Internal work Radix does in the same handler, after Reka's */\n    after: { type: Object as PropType<Listeners>, default: () => ({}) },\n    /** Reka handlers that Radix does not have */\n    drop: { type: Array as PropType<string[]>, default: () => [] },\n  },\n  setup(props, { attrs, slots }) {\n    return () => {\n      const handlers: Record<string, Handler> = {}\n      const own = Object.keys(attrs).filter(isListener)\n      const keys = new Set([...Object.keys(props.listeners), ...own, ...Object.keys(props.after)])\n\n      for (const key of keys) {\n        const consumer = props.listeners[key]\n        const internal = [props.drop.includes(key) ? undefined : attrs[key], props.after[key]]\n        handlers[key] = (event: Event) => {\n          call(consumer, event)\n          if (event.defaultPrevented) return\n          for (const handler of internal) call(handler, event)\n        }\n      }\n\n      return h(\"button\", { ...attrs, ...handlers }, slots.default?.())\n    }\n  },\n})\n"]}

package/dist/es/components/Checkbox/bubbleInput.js

@@ -0,0 +1,133 @@
+import { computed, ref, shallowRef, watch } from "vue";
+// Internal: the hidden native checkbox ("BubbleInput") that Radix renders next
+// to its Checkbox and Switch button while it sits in a form, so form
+// submission, `onChange` on the form and reset work like a native input.
+// Reka only renders a visually hidden input when a `name` is set, with
+// different attributes and styling, so Checkbox and Switch render Radix's.
+/** Radix's `isFormControl`: true until the button mounts (SSR), then whether it is in a form. */
+export const useIsFormControl = (control, form) => computed(() => (control.value ? Boolean(form()) || Boolean(control.value.closest("form")) : true));
+/**
+ * Radix's `useSize`: the element's border-box size, kept current with a
+ * ResizeObserver; a resize lands on the next animation frame (radix-ui 1.8).
+ */
+export const useSize = (element) => {
+    const size = ref();
+    watch(element, (el, _, onCleanup) => {
+        if (!el) {
+            size.value = undefined;
+            return;
+        }
+        size.value = { width: el.offsetWidth, height: el.offsetHeight };
+        if (typeof ResizeObserver === "undefined")
+            return;
+        let frame = 0;
+        const observer = new ResizeObserver((entries) => {
+            if (!Array.isArray(entries) || !entries.length)
+                return;
+            const entry = entries[0];
+            window.cancelAnimationFrame(frame);
+            frame = window.requestAnimationFrame(() => {
+                if ("borderBoxSize" in entry) {
+                    const borderSizeEntry = entry.borderBoxSize;
+                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+                    size.value = { width: borderSize.inlineSize, height: borderSize.blockSize };
+                }
+                else {
+                    size.value = { width: el.offsetWidth, height: el.offsetHeight };
+                }
+            });
+        });
+        observer.observe(el, { box: "border-box" });
+        onCleanup(() => {
+            window.cancelAnimationFrame(frame);
+            observer.unobserve(el);
+        });
+    }, { immediate: true, flush: "post" });
+    return size;
+};
+/** The input's inline style: on top of the button, invisible, out of the pointer's way. */
+export const bubbleInputStyle = (size, style) => ({
+    ...style,
+    ...(size ? { width: `${size.width}px`, height: `${size.height}px` } : {}),
+    position: "absolute",
+    pointerEvents: "none",
+    opacity: 0,
+    margin: 0,
+});
+// React's value tracker per input: its `checked` on mount, then the one React
+// last saw in a bubbling click. A form reset or a `checked` attribute update
+// moves the input's `checked` without the tracker noticing.
+const trackedChecked = new WeakMap();
+/** Starts the input's value tracker when it mounts, as React does. */
+export const useCheckedTracker = (input) => watch(input, (el) => {
+    if (el && !trackedChecked.has(el))
+        trackedChecked.set(el, el.checked);
+}, { flush: "sync" });
+/**
+ * Sets the input's `checked` (and `indeterminate`) through the native setter,
+ * unless `checked` is undefined, and dispatches a `click` so form listeners
+ * see the change, as Radix does; with `stop` the input stops its click, as
+ * Radix's input does for a change the user did not click. React turns that
+ * click into the form's `onChange` when it bubbles (to React's root, also
+ * when stopped there) and the input's `checked` differs from what React's
+ * value tracker last saw; Vue's form listeners are native, so a native
+ * `change` follows in those cases.
+ */
+export const dispatchBubbleClick = (input, checked, bubbles, withIndeterminate, stop = false) => {
+    const descriptor = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "checked");
+    const setChecked = descriptor?.set;
+    if (!setChecked)
+        return;
+    if (checked !== undefined) {
+        if (withIndeterminate)
+            input.indeterminate = checked === "indeterminate";
+        setChecked.call(input, checked === "indeterminate" ? false : checked);
+    }
+    if (stop)
+        input.addEventListener("click", (event) => event.stopPropagation(), { once: true });
+    input.dispatchEvent(new Event("click", { bubbles }));
+    // A click that does not bubble never reaches React's root, nor its tracker
+    if (!bubbles || trackedChecked.get(input) === input.checked)
+        return;
+    trackedChecked.set(input, input.checked);
+    input.dispatchEvent(new Event("change", { bubbles }));
+};
+/**
+ * Radix's BubbleInput effect for Checkbox and Switch (radix-ui 1.8): the
+ * user's click on the button is reported by a click on the input that
+ * bubbles unless the consumer stopped the button's; a change from elsewhere
+ * (the controlled value, a form reset) by a click that stops at the input.
+ * Returns the trigger's `onUserClick`.
+ */
+export const useBubbleInputEffect = (input, checked, withIndeterminate) => {
+    const userClick = shallowRef(null);
+    let prevChecked = checked();
+    let handledUserClick = null;
+    let pendingUserClick = null;
+    watch([input, checked, userClick], () => {
+        const el = input.value;
+        if (!el)
+            return;
+        const current = checked();
+        const checkedChanged = prevChecked !== current;
+        prevChecked = current;
+        const click = userClick.value;
+        const isNewUserClick = click !== null && click !== handledUserClick;
+        handledUserClick = click;
+        if (click && isNewUserClick) {
+            pendingUserClick = checkedChanged ? null : click;
+            dispatchBubbleClick(el, checkedChanged ? current : undefined, !click.hasConsumerStoppedPropagation, withIndeterminate);
+        }
+        else if (checkedChanged) {
+            const pending = pendingUserClick;
+            pendingUserClick = null;
+            const isPendingUserChange = pending?.requestedChecked === current;
+            const bubbles = !(isPendingUserChange && pending.hasConsumerStoppedPropagation);
+            dispatchBubbleClick(el, current, bubbles, withIndeterminate, true);
+        }
+    }, { flush: "post" });
+    return (click) => {
+        userClick.value = click;
+    };
+};
+//# sourceMappingURL=bubbleInput.js.map

package/dist/es/components/Checkbox/bubbleInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubbleInput.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/bubbleInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { computed, ref, shallowRef, watch, type CSSProperties, type Ref } from \"vue\"\n\n// Internal: the hidden native checkbox (\"BubbleInput\") that Radix renders next\n// to its Checkbox and Switch button while it sits in a form, so form\n// submission, `onChange` on the form and reset work like a native input.\n// Reka only renders a visually hidden input when a `name` is set, with\n// different attributes and styling, so Checkbox and Switch render Radix's.\n\n/** Radix's `isFormControl`: true until the button mounts (SSR), then whether it is in a form. */\nexport const useIsFormControl = (control: Ref<HTMLElement | null>, form: () => unknown) =>\n  computed(() => (control.value ? Boolean(form()) || Boolean(control.value.closest(\"form\")) : true))\n\n/**\n * Radix's `useSize`: the element's border-box size, kept current with a\n * ResizeObserver; a resize lands on the next animation frame (radix-ui 1.8).\n */\nexport const useSize = (element: () => HTMLElement | null) => {\n  const size = ref<{ width: number; height: number }>()\n\n  watch(\n    element,\n    (el, _, onCleanup) => {\n      if (!el) {\n        size.value = undefined\n        return\n      }\n      size.value = { width: el.offsetWidth, height: el.offsetHeight }\n      if (typeof ResizeObserver === \"undefined\") return\n\n      let frame = 0\n      const observer = new ResizeObserver((entries) => {\n        if (!Array.isArray(entries) || !entries.length) return\n        const entry = entries[0]\n        window.cancelAnimationFrame(frame)\n        frame = window.requestAnimationFrame(() => {\n          if (\"borderBoxSize\" in entry) {\n            const borderSizeEntry = entry.borderBoxSize\n            const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry\n            size.value = { width: borderSize.inlineSize, height: borderSize.blockSize }\n          } else {\n            size.value = { width: el.offsetWidth, height: el.offsetHeight }\n          }\n        })\n      })\n      observer.observe(el, { box: \"border-box\" })\n      onCleanup(() => {\n        window.cancelAnimationFrame(frame)\n        observer.unobserve(el)\n      })\n    },\n    { immediate: true, flush: \"post\" },\n  )\n\n  return size\n}\n\n/** The input's inline style: on top of the button, invisible, out of the pointer's way. */\nexport const bubbleInputStyle = (\n  size: { width: number; height: number } | undefined,\n  style?: CSSProperties,\n): CSSProperties => ({\n  ...style,\n  ...(size ? { width: `${size.width}px`, height: `${size.height}px` } : {}),\n  position: \"absolute\",\n  pointerEvents: \"none\",\n  opacity: 0,\n  margin: 0,\n})\n\n// React's value tracker per input: its `checked` on mount, then the one React\n// last saw in a bubbling click. A form reset or a `checked` attribute update\n// moves the input's `checked` without the tracker noticing.\nconst trackedChecked = new WeakMap<HTMLInputElement, boolean>()\n\n/** Starts the input's value tracker when it mounts, as React does. */\nexport const useCheckedTracker = (input: Ref<HTMLInputElement | null>) =>\n  watch(\n    input,\n    (el) => {\n      if (el && !trackedChecked.has(el)) trackedChecked.set(el, el.checked)\n    },\n    { flush: \"sync\" },\n  )\n\n/**\n * Sets the input's `checked` (and `indeterminate`) through the native setter,\n * unless `checked` is undefined, and dispatches a `click` so form listeners\n * see the change, as Radix does; with `stop` the input stops its click, as\n * Radix's input does for a change the user did not click. React turns that\n * click into the form's `onChange` when it bubbles (to React's root, also\n * when stopped there) and the input's `checked` differs from what React's\n * value tracker last saw; Vue's form listeners are native, so a native\n * `change` follows in those cases.\n */\nexport const dispatchBubbleClick = (\n  input: HTMLInputElement,\n  checked: boolean | \"indeterminate\" | undefined,\n  bubbles: boolean,\n  withIndeterminate: boolean,\n  stop = false,\n) => {\n  const descriptor = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, \"checked\")\n  const setChecked = descriptor?.set\n  if (!setChecked) return\n  if (checked !== undefined) {\n    if (withIndeterminate) input.indeterminate = checked === \"indeterminate\"\n    setChecked.call(input, checked === \"indeterminate\" ? false : checked)\n  }\n  if (stop) input.addEventListener(\"click\", (event) => event.stopPropagation(), { once: true })\n  input.dispatchEvent(new Event(\"click\", { bubbles }))\n  // A click that does not bubble never reaches React's root, nor its tracker\n  if (!bubbles || trackedChecked.get(input) === input.checked) return\n  trackedChecked.set(input, input.checked)\n  input.dispatchEvent(new Event(\"change\", { bubbles }))\n}\n\ntype UserClick = { requestedChecked: boolean; hasConsumerStoppedPropagation: boolean }\n\n/**\n * Radix's BubbleInput effect for Checkbox and Switch (radix-ui 1.8): the\n * user's click on the button is reported by a click on the input that\n * bubbles unless the consumer stopped the button's; a change from elsewhere\n * (the controlled value, a form reset) by a click that stops at the input.\n * Returns the trigger's `onUserClick`.\n */\nexport const useBubbleInputEffect = (\n  input: Ref<HTMLInputElement | null>,\n  checked: () => boolean | \"indeterminate\",\n  withIndeterminate: boolean,\n) => {\n  const userClick = shallowRef<UserClick | null>(null)\n  let prevChecked = checked()\n  let handledUserClick: UserClick | null = null\n  let pendingUserClick: UserClick | null = null\n\n  watch(\n    [input, checked, userClick],\n    () => {\n      const el = input.value\n      if (!el) return\n      const current = checked()\n      const checkedChanged = prevChecked !== current\n      prevChecked = current\n      const click = userClick.value\n      const isNewUserClick = click !== null && click !== handledUserClick\n      handledUserClick = click\n\n      if (click && isNewUserClick) {\n        pendingUserClick = checkedChanged ? null : click\n        dispatchBubbleClick(el, checkedChanged ? current : undefined, !click.hasConsumerStoppedPropagation, withIndeterminate)\n      } else if (checkedChanged) {\n        const pending = pendingUserClick\n        pendingUserClick = null\n        const isPendingUserChange = pending?.requestedChecked === current\n        const bubbles = !(isPendingUserChange && pending.hasConsumerStoppedPropagation)\n        dispatchBubbleClick(el, current, bubbles, withIndeterminate, true)\n      }\n    },\n    { flush: \"post\" },\n  )\n\n  return (click: UserClick) => {\n    userClick.value = click\n  }\n}\n"]}

package/dist/es/components/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyC,MAAM,eAAe,CAAA","sourcesContent":["export { Checkbox, type CheckboxProps, type CheckedState } from \"./Checkbox.js\"\n"]}

package/dist/es/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,123 @@
+import { Fragment, Text, defineComponent, h, isVNode, normalizeStyle } from "vue";
+import { CopyButton } from "../Button/index.js";
+import { renderHighlightedRows } from "./highlight.js";
+import s from "@plexui/styles/components/CodeBlock/CodeBlock.module.css";
+// Vue port of packages/ui/src/components/CodeBlock/CodeBlock.tsx. React's
+// `CodeBlockBase.Code` / `CodeBlockBase.CopyButton` are flat exports here
+// (`CodeBlockBaseCode`, `CodeBlockBaseCopyButton`): runtime-compiled
+// templates cannot resolve dotted names from the `components` option.
+//
+// React takes the code as a string `children`. Here it is the text of the
+// default slot (`<CodeBlock>{{ code }}</CodeBlock>`, interpolation keeps
+// whitespace) or, when the slot is empty, the `code` prop.
+/** Concatenates the text of slot vnodes (text, interpolations, v-for fragments). */
+export const getSlotText = (nodes) => {
+    let text = "";
+    for (const node of nodes ?? []) {
+        if (node == null || typeof node === "boolean")
+            continue;
+        if (Array.isArray(node)) {
+            text += getSlotText(node);
+        }
+        else if (!isVNode(node)) {
+            text += String(node);
+        }
+        else if (node.type === Text) {
+            text += String(node.children ?? "");
+        }
+        else if (node.type === Fragment && Array.isArray(node.children)) {
+            text += getSlotText(node.children);
+        }
+        // Elements and comments carry no code: React's `children` is a string
+    }
+    return text;
+};
+const resolveCode = (slotNodes, code) => {
+    const slotText = getSlotText(slotNodes);
+    return slotText !== "" ? slotText : (code ?? "");
+};
+/** Root container. Every attribute falls through to the <div>, like React's rest props. */
+export const CodeBlockBase = defineComponent({
+    name: "CodeBlockBase",
+    setup(_props, { slots }) {
+        return () => h("div", { class: s.CodeBlock }, slots.default?.());
+    },
+});
+/** Copy button pinned to the block. Like React, only `class` reaches the DOM. */
+export const CodeBlockBaseCopyButton = defineComponent({
+    name: "CodeBlockBaseCopyButton",
+    inheritAttrs: false,
+    props: {
+        /** Value written to the clipboard */
+        copyValue: { type: String, required: true },
+        disabled: { type: Boolean, default: undefined },
+        loading: { type: Boolean, default: undefined },
+    },
+    setup(props, { attrs }) {
+        return () => h("div", { class: [s.CopyButtonContainer, attrs.class] }, [
+            h(CopyButton, {
+                copyValue: props.copyValue,
+                variant: "ghost",
+                color: "secondary",
+                pill: false,
+                size: "2xs",
+                uniform: true,
+                loading: props.loading,
+                disabled: props.disabled,
+            }),
+        ]);
+    },
+});
+/** The highlighted <pre><code>. Like React, only `class` reaches the DOM from attributes. */
+export const CodeBlockBaseCode = defineComponent({
+    name: "CodeBlockBaseCode",
+    inheritAttrs: false,
+    props: {
+        /** The code, when the default slot is empty */
+        code: String,
+        /** Prism language name */
+        language: String,
+        /**
+         * Attributes for the <code> element. When set, they replace the default
+         * `language-<language>` class (react-syntax-highlighter behaviour).
+         */
+        codeTagProps: Object,
+    },
+    setup(props, { slots, attrs }) {
+        return () => {
+            const code = resolveCode(slots.default?.(), props.code);
+            const { language, codeTagProps } = props;
+            // react-syntax-highlighter's default `codeTagProps`, then
+            // `style = { whiteSpace: "pre", ...codeTagProps.style }`
+            const codeProps = codeTagProps
+                ? { ...codeTagProps, style: normalizeStyle([{ whiteSpace: "pre" }, codeTagProps.style]) }
+                : { class: language ? `language-${language}` : undefined, style: { whiteSpace: "pre" } };
+            return h("pre", { class: ["prismjs", s.SyntaxHighlighter, attrs.class] }, [
+                h("code", codeProps, renderHighlightedRows(code, language)),
+            ]);
+        };
+    },
+});
+/** Code block with syntax highlighting and a copy button. */
+export const CodeBlock = defineComponent({
+    name: "CodeBlock",
+    inheritAttrs: false,
+    props: {
+        /** The code, when the default slot is empty */
+        code: String,
+        /** Prism language name */
+        language: String,
+    },
+    setup(props, { slots, attrs }) {
+        return () => {
+            const code = resolveCode(slots.default?.(), props.code);
+            return h(CodeBlockBase, { class: attrs.class }, {
+                default: () => [
+                    h(CodeBlockBaseCode, { language: props.language, code }),
+                    h(CodeBlockBaseCopyButton, { copyValue: code }),
+                ],
+            });
+        };
+    },
+});
+//# sourceMappingURL=CodeBlock.js.map

package/dist/es/components/CodeBlock/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../../src/components/CodeBlock/CodeBlock.ts"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, Text, defineComponent, h, isVNode, normalizeStyle, type PropType, type VNodeArrayChildren } from \"vue\"\nimport { CopyButton } from \"../Button/index.js\"\nimport { renderHighlightedRows } from \"./highlight.js\"\nimport s from \"@plexui/styles/components/CodeBlock/CodeBlock.module.css\"\n\n// Vue port of packages/ui/src/components/CodeBlock/CodeBlock.tsx. React's\n// `CodeBlockBase.Code` / `CodeBlockBase.CopyButton` are flat exports here\n// (`CodeBlockBaseCode`, `CodeBlockBaseCopyButton`): runtime-compiled\n// templates cannot resolve dotted names from the `components` option.\n//\n// React takes the code as a string `children`. Here it is the text of the\n// default slot (`<CodeBlock>{{ code }}</CodeBlock>`, interpolation keeps\n// whitespace) or, when the slot is empty, the `code` prop.\n\n/** Concatenates the text of slot vnodes (text, interpolations, v-for fragments). */\nexport const getSlotText = (nodes: VNodeArrayChildren | undefined): string => {\n  let text = \"\"\n  for (const node of nodes ?? []) {\n    if (node == null || typeof node === \"boolean\") continue\n    if (Array.isArray(node)) {\n      text += getSlotText(node)\n    } else if (!isVNode(node)) {\n      text += String(node)\n    } else if (node.type === Text) {\n      text += String(node.children ?? \"\")\n    } else if (node.type === Fragment && Array.isArray(node.children)) {\n      text += getSlotText(node.children)\n    }\n    // Elements and comments carry no code: React's `children` is a string\n  }\n  return text\n}\n\nconst resolveCode = (slotNodes: VNodeArrayChildren | undefined, code: string | undefined) => {\n  const slotText = getSlotText(slotNodes)\n  return slotText !== \"\" ? slotText : (code ?? \"\")\n}\n\n/** Root container. Every attribute falls through to the <div>, like React's rest props. */\nexport const CodeBlockBase = defineComponent({\n  name: \"CodeBlockBase\",\n  setup(_props, { slots }) {\n    return () => h(\"div\", { class: s.CodeBlock }, slots.default?.())\n  },\n})\n\n/** Copy button pinned to the block. Like React, only `class` reaches the DOM. */\nexport const CodeBlockBaseCopyButton = defineComponent({\n  name: \"CodeBlockBaseCopyButton\",\n  inheritAttrs: false,\n  props: {\n    /** Value written to the clipboard */\n    copyValue: { type: String, required: true },\n    disabled: { type: Boolean, default: undefined },\n    loading: { type: Boolean, default: undefined },\n  },\n  setup(props, { attrs }) {\n    return () =>\n      h(\"div\", { class: [s.CopyButtonContainer, attrs.class] }, [\n        h(CopyButton, {\n          copyValue: props.copyValue,\n          variant: \"ghost\",\n          color: \"secondary\",\n          pill: false,\n          size: \"2xs\",\n          uniform: true,\n          loading: props.loading,\n          disabled: props.disabled,\n        }),\n      ])\n  },\n})\n\n/** Attributes for the <code> element (react-syntax-highlighter's `codeTagProps`). */\nexport type CodeTagProps = Record<string, unknown> & { class?: unknown; style?: unknown }\n\n/** The highlighted <pre><code>. Like React, only `class` reaches the DOM from attributes. */\nexport const CodeBlockBaseCode = defineComponent({\n  name: \"CodeBlockBaseCode\",\n  inheritAttrs: false,\n  props: {\n    /** The code, when the default slot is empty */\n    code: String,\n    /** Prism language name */\n    language: String,\n    /**\n     * Attributes for the <code> element. When set, they replace the default\n     * `language-<language>` class (react-syntax-highlighter behaviour).\n     */\n    codeTagProps: Object as PropType<CodeTagProps>,\n  },\n  setup(props, { slots, attrs }) {\n    return () => {\n      const code = resolveCode(slots.default?.(), props.code)\n      const { language, codeTagProps } = props\n\n      // react-syntax-highlighter's default `codeTagProps`, then\n      // `style = { whiteSpace: \"pre\", ...codeTagProps.style }`\n      const codeProps = codeTagProps\n        ? { ...codeTagProps, style: normalizeStyle([{ whiteSpace: \"pre\" }, codeTagProps.style as never]) }\n        : { class: language ? `language-${language}` : undefined, style: { whiteSpace: \"pre\" } }\n\n      return h(\"pre\", { class: [\"prismjs\", s.SyntaxHighlighter, attrs.class] }, [\n        h(\"code\", codeProps, renderHighlightedRows(code, language)),\n      ])\n    }\n  },\n})\n\n/** Code block with syntax highlighting and a copy button. */\nexport const CodeBlock = defineComponent({\n  name: \"CodeBlock\",\n  inheritAttrs: false,\n  props: {\n    /** The code, when the default slot is empty */\n    code: String,\n    /** Prism language name */\n    language: String,\n  },\n  setup(props, { slots, attrs }) {\n    return () => {\n      const code = resolveCode(slots.default?.(), props.code)\n      return h(CodeBlockBase, { class: attrs.class }, {\n        default: () => [\n          h(CodeBlockBaseCode, { language: props.language, code }),\n          h(CodeBlockBaseCopyButton, { copyValue: code }),\n        ],\n      })\n    }\n  },\n})\n\nexport type CodeBlockProps = InstanceType<typeof CodeBlock>[\"$props\"]\n"]}

package/dist/es/components/CodeBlock/CollapsibleCodeBlock.js

@@ -0,0 +1,73 @@
+import { defineComponent, h, ref } from "vue";
+import { Button } from "../Button/index.js";
+import { CodeBlockBase, CodeBlockBaseCode, CodeBlockBaseCopyButton, getSlotText } from "./CodeBlock.js";
+import s from "@plexui/styles/components/CodeBlock/CodeBlock.module.css";
+// React's inline `style={{ maxHeight: n }}`: numbers get "px", except 0
+const toPx = (value) => (value === 0 ? "0" : `${value}px`);
+// Room for the View Code button, unless `collapsedHeight` is smaller
+const MIN_COLLAPSED_HEIGHT = 140;
+/**
+ * Vue port of packages/ui/src/components/CodeBlock/CollapsibleCodeBlock.tsx.
+ * The code is the default slot's text or the `code` prop; like React, only
+ * `class` reaches the DOM from attributes. `defaultExpanded` is read once.
+ */
+export const CollapsibleCodeBlock = defineComponent({
+    name: "CollapsibleCodeBlock",
+    inheritAttrs: false,
+    props: {
+        /** The code string to display, when the default slot is empty */
+        code: String,
+        /** Syntax highlighting language */
+        language: String,
+        /** Whether the code block starts expanded. @default false */
+        defaultExpanded: { type: Boolean, default: false },
+        /** Height of the collapsed container in pixels. @default 140 */
+        collapsedHeight: { type: Number, default: 140 },
+        /** Maximum height when expanded (enables scroll if exceeded) */
+        maxExpandedHeight: Number,
+        /** Whether to show the copy button when expanded. @default true */
+        copyable: { type: Boolean, default: true },
+    },
+    setup(props, { slots, attrs }) {
+        const isExpanded = ref(props.defaultExpanded);
+        return () => {
+            const slotText = getSlotText(slots.default?.());
+            const code = slotText !== "" ? slotText : (props.code ?? "");
+            const containerStyle = isExpanded.value
+                ? props.maxExpandedHeight
+                    ? { maxHeight: toPx(props.maxExpandedHeight) }
+                    : undefined
+                : {
+                    maxHeight: toPx(props.collapsedHeight),
+                    minHeight: toPx(Math.min(props.collapsedHeight, MIN_COLLAPSED_HEIGHT)),
+                };
+            return h(CodeBlockBase, {
+                "class": [s.CollapsibleCodeBlock, attrs.class],
+                "data-collapsed": !isExpanded.value ? "" : undefined,
+                "style": containerStyle,
+            }, {
+                default: () => [
+                    h(CodeBlockBaseCode, { language: props.language, code }),
+                    ...(!isExpanded.value
+                        ? [
+                            h("div", { class: s.GradientOverlay }),
+                            h("div", { class: s.ViewCodeButtonContainer }, [
+                                h(Button, {
+                                    color: "secondary",
+                                    variant: "solid",
+                                    size: "sm",
+                                    pill: true,
+                                    onClick: () => {
+                                        isExpanded.value = true;
+                                    },
+                                }, { default: () => "View Code" }),
+                            ]),
+                        ]
+                        : []),
+                    isExpanded.value && props.copyable ? h(CodeBlockBaseCopyButton, { copyValue: code }) : null,
+                ],
+            });
+        };
+    },
+});
+//# sourceMappingURL=CollapsibleCodeBlock.js.map

package/dist/es/components/CodeBlock/CollapsibleCodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleCodeBlock.js","sourceRoot":"","sources":["../../../../src/components/CodeBlock/CollapsibleCodeBlock.ts"],"names":[],"mappings":"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","sourcesContent":["import { defineComponent, h, ref } from \"vue\"\nimport { Button } from \"../Button/index.js\"\nimport { CodeBlockBase, CodeBlockBaseCode, CodeBlockBaseCopyButton, getSlotText } from \"./CodeBlock.js\"\nimport s from \"@plexui/styles/components/CodeBlock/CodeBlock.module.css\"\n\n// React's inline `style={{ maxHeight: n }}`: numbers get \"px\", except 0\nconst toPx = (value: number) => (value === 0 ? \"0\" : `${value}px`)\n\n// Room for the View Code button, unless `collapsedHeight` is smaller\nconst MIN_COLLAPSED_HEIGHT = 140\n\n/**\n * Vue port of packages/ui/src/components/CodeBlock/CollapsibleCodeBlock.tsx.\n * The code is the default slot's text or the `code` prop; like React, only\n * `class` reaches the DOM from attributes. `defaultExpanded` is read once.\n */\nexport const CollapsibleCodeBlock = defineComponent({\n  name: \"CollapsibleCodeBlock\",\n  inheritAttrs: false,\n  props: {\n    /** The code string to display, when the default slot is empty */\n    code: String,\n    /** Syntax highlighting language */\n    language: String,\n    /** Whether the code block starts expanded. @default false */\n    defaultExpanded: { type: Boolean, default: false },\n    /** Height of the collapsed container in pixels. @default 140 */\n    collapsedHeight: { type: Number, default: 140 },\n    /** Maximum height when expanded (enables scroll if exceeded) */\n    maxExpandedHeight: Number,\n    /** Whether to show the copy button when expanded. @default true */\n    copyable: { type: Boolean, default: true },\n  },\n  setup(props, { slots, attrs }) {\n    const isExpanded = ref(props.defaultExpanded)\n\n    return () => {\n      const slotText = getSlotText(slots.default?.())\n      const code = slotText !== \"\" ? slotText : (props.code ?? \"\")\n\n      const containerStyle = isExpanded.value\n        ? props.maxExpandedHeight\n          ? { maxHeight: toPx(props.maxExpandedHeight) }\n          : undefined\n        : {\n            maxHeight: toPx(props.collapsedHeight),\n            minHeight: toPx(Math.min(props.collapsedHeight, MIN_COLLAPSED_HEIGHT)),\n          }\n\n      return h(\n        CodeBlockBase,\n        {\n          \"class\": [s.CollapsibleCodeBlock, attrs.class],\n          \"data-collapsed\": !isExpanded.value ? \"\" : undefined,\n          \"style\": containerStyle,\n        },\n        {\n          default: () => [\n            h(CodeBlockBaseCode, { language: props.language, code }),\n            ...(!isExpanded.value\n              ? [\n                  h(\"div\", { class: s.GradientOverlay }),\n                  h(\"div\", { class: s.ViewCodeButtonContainer }, [\n                    h(\n                      Button,\n                      {\n                        color: \"secondary\",\n                        variant: \"solid\",\n                        size: \"sm\",\n                        pill: true,\n                        onClick: () => {\n                          isExpanded.value = true\n                        },\n                      },\n                      { default: () => \"View Code\" },\n                    ),\n                  ]),\n                ]\n              : []),\n            isExpanded.value && props.copyable ? h(CodeBlockBaseCopyButton, { copyValue: code }) : null,\n          ],\n        },\n      )\n    }\n  },\n})\n\nexport type CollapsibleCodeBlockProps = InstanceType<typeof CollapsibleCodeBlock>[\"$props\"]\n"]}