@gbgr/react-headless 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 gbgr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+## @gbgr/react-headless
+
+React headless primitives package.
+
+### Button
+
+```tsx
+import { useButton } from "@gbgr/react-headless";
+
+export function Example() {
+	const { buttonProps } = useButton({
+		type: "button",
+		onPress: () => console.log("pressed"),
+	});
+
+	return (
+		<button {...buttonProps}>
+			Save
+		</button>
+	);
+}
+```
+
+### Button interaction state machine
+
+```tsx
+import { useButton } from "@gbgr/react-headless";
+
+export function Example() {
+	const { buttonProps, state } = useButton({
+		disabled: false,
+		loading: false,
+	});
+
+	return (
+		<button {...buttonProps}>
+			State: {state}
+		</button>
+	);
+}
+```

package/dist/accordion/useAccordion.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import type { DataAttributes } from "../internal/types";
+export type AccordionType = "single" | "multiple";
+type AccordionSingleValue = string | null;
+type AccordionMultipleValue = string[];
+export type UseAccordionProps = {
+    type?: AccordionType;
+    value?: AccordionSingleValue | AccordionMultipleValue;
+    defaultValue?: AccordionSingleValue | AccordionMultipleValue;
+    onValueChange?: (value: AccordionSingleValue | AccordionMultipleValue) => void;
+    /**
+     * Only applies to `type="single"`.
+     * - `true`: clicking an open item can close it (value becomes `null`)
+     * - `false`: at least one item stays open once opened
+     */
+    collapsible?: boolean;
+    disabled?: boolean;
+};
+type GetItemOptions = {
+    value: string;
+    disabled?: boolean;
+};
+type GetTriggerOptions = Omit<GetItemOptions, "disabled"> & {
+    disabled?: boolean;
+};
+export declare function useAccordion(props: UseAccordionProps): {
+    type: AccordionType;
+    value: AccordionSingleValue | AccordionMultipleValue;
+    disabled: boolean;
+    isItemOpen: (itemValue: string) => boolean;
+    setItemOpen: (itemValue: string, nextOpen: boolean) => void;
+    toggleItem: (itemValue: string) => void;
+    getItemProps: (options: GetItemOptions, props?: React.HTMLAttributes<HTMLDivElement>) => React.HTMLAttributes<HTMLDivElement> & DataAttributes;
+    getTriggerProps: (options: GetTriggerOptions, props?: React.ButtonHTMLAttributes<HTMLButtonElement>) => React.ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes;
+    getContentProps: (options: Pick<GetItemOptions, "value">, props?: React.HTMLAttributes<HTMLDivElement>) => React.HTMLAttributes<HTMLDivElement> & DataAttributes;
+};
+export {};
+//# sourceMappingURL=useAccordion.d.ts.map

package/dist/accordion/useAccordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAccordion.d.ts","sourceRoot":"","sources":["../../src/accordion/useAccordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAA;AAEjD,KAAK,oBAAoB,GAAG,MAAM,GAAG,IAAI,CAAA;AACzC,KAAK,sBAAsB,GAAG,MAAM,EAAE,CAAA;AAEtC,MAAM,MAAM,iBAAiB,GAAG;IAC/B,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,CAAC,EAAE,oBAAoB,GAAG,sBAAsB,CAAA;IACrD,YAAY,CAAC,EAAE,oBAAoB,GAAG,sBAAsB,CAAA;IAC5D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,GAAG,sBAAsB,KAAK,IAAI,CAAA;IAC9E;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,cAAc,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB;;;;4BAwCvC,MAAM;6BAUN,MAAM,YAAY,OAAO;4BA2BzB,MAAM;4BA2BR,cAAc,UAAU,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,KAOhE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,cAAc;+BAOjD,iBAAiB,UAClB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,KAyBhD,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,cAAc;+BAO1D,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,UAC9B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,KAevC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,cAAc;EAgB5D"}

package/dist/accordion/useAccordion.js

@@ -0,0 +1,125 @@
+import * as React from "react";
+import { composeEventHandlers } from "../internal/composeEventHandlers";
+function toIdSegment(value) {
+    return encodeURIComponent(value).replace(/%/g, "_");
+}
+export function useAccordion(props) {
+    const { type = "single", value, defaultValue, onValueChange, collapsible = false, disabled = false, } = props;
+    const baseId = React.useId();
+    const [uncontrolledSingle, setUncontrolledSingle] = React.useState(typeof defaultValue === "string" ? defaultValue : null);
+    const [uncontrolledMultiple, setUncontrolledMultiple] = React.useState(Array.isArray(defaultValue) ? defaultValue : []);
+    const currentValue = value ??
+        (type === "multiple" ? uncontrolledMultiple : uncontrolledSingle);
+    const setValue = React.useCallback((next) => {
+        if (value === undefined) {
+            if (type === "multiple") {
+                setUncontrolledMultiple(Array.isArray(next) ? next : []);
+            }
+            else {
+                setUncontrolledSingle(typeof next === "string" ? next : null);
+            }
+        }
+        onValueChange?.(next);
+    }, [type, value, onValueChange]);
+    const isItemOpen = React.useCallback((itemValue) => {
+        if (type === "multiple") {
+            return Array.isArray(currentValue) && currentValue.includes(itemValue);
+        }
+        return currentValue === itemValue;
+    }, [type, currentValue]);
+    const setItemOpen = React.useCallback((itemValue, nextOpen) => {
+        if (disabled)
+            return;
+        if (type === "multiple") {
+            const prev = Array.isArray(currentValue) ? currentValue : [];
+            const next = nextOpen
+                ? prev.includes(itemValue)
+                    ? prev
+                    : [...prev, itemValue]
+                : prev.filter((v) => v !== itemValue);
+            setValue(next);
+            return;
+        }
+        if (nextOpen) {
+            setValue(itemValue);
+            return;
+        }
+        if (collapsible) {
+            setValue(null);
+        }
+    }, [type, currentValue, setValue, disabled, collapsible]);
+    const toggleItem = React.useCallback((itemValue) => {
+        setItemOpen(itemValue, !isItemOpen(itemValue));
+    }, [isItemOpen, setItemOpen]);
+    const getItemIds = React.useCallback((itemValue) => {
+        const seg = toIdSegment(itemValue);
+        return {
+            triggerId: `${baseId}-accordion-trigger-${seg}`,
+            contentId: `${baseId}-accordion-content-${seg}`,
+        };
+    }, [baseId]);
+    const getItemState = React.useCallback((itemValue, itemDisabled) => {
+        const open = isItemOpen(itemValue);
+        const itemIsDisabled = disabled || itemDisabled;
+        return { open, itemIsDisabled };
+    }, [disabled, isItemOpen]);
+    const getItemProps = React.useCallback((options, props) => {
+        const { value: itemValue, disabled: itemDisabled } = options;
+        const { open, itemIsDisabled } = getItemState(itemValue, itemDisabled);
+        return {
+            ...props,
+            "data-state": open ? "open" : "closed",
+            "data-disabled": itemIsDisabled ? "" : undefined,
+        };
+    }, [getItemState]);
+    const getTriggerProps = React.useCallback((options, props) => {
+        const { value: itemValue, disabled: itemDisabled } = options;
+        const ids = getItemIds(itemValue);
+        const { open, itemIsDisabled } = getItemState(itemValue, itemDisabled);
+        const handleClickInternal = (event) => {
+            if (itemIsDisabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            toggleItem(itemValue);
+        };
+        return {
+            ...props,
+            id: props?.id ?? ids.triggerId,
+            type: "button",
+            disabled: itemIsDisabled,
+            "aria-expanded": open,
+            "aria-controls": ids.contentId,
+            "data-state": open ? "open" : "closed",
+            "data-disabled": itemIsDisabled ? "" : undefined,
+            onClick: composeEventHandlers(props?.onClick, handleClickInternal),
+        };
+    }, [getItemIds, getItemState, toggleItem]);
+    const getContentProps = React.useCallback((options, props) => {
+        const { value: itemValue } = options;
+        const ids = getItemIds(itemValue);
+        const open = isItemOpen(itemValue);
+        return {
+            ...props,
+            id: props?.id ?? ids.contentId,
+            role: "region",
+            "aria-labelledby": ids.triggerId,
+            "data-state": open ? "open" : "closed",
+            "data-hidden": open ? undefined : "",
+            hidden: open ? undefined : true,
+            "aria-hidden": open ? undefined : true,
+        };
+    }, [getItemIds, isItemOpen]);
+    return {
+        type,
+        value: currentValue,
+        disabled,
+        isItemOpen,
+        setItemOpen,
+        toggleItem,
+        getItemProps,
+        getTriggerProps,
+        getContentProps,
+    };
+}

package/dist/button/useButton.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { DataAttributes } from "../internal/types";
+export type ButtonPressEvent = React.MouseEvent | React.KeyboardEvent;
+type InteractionState = "idle" | "hovered" | "pressed" | "disabled" | "loading";
+export type UseButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "type"> & {
+    disabled?: boolean;
+    loading?: boolean;
+    type?: "button" | "submit" | "reset";
+    onPress?: (event: ButtonPressEvent) => void;
+};
+export declare function useButton(props: UseButtonProps): {
+    state: InteractionState;
+    isDisabled: boolean;
+    isLoading: boolean;
+    events: {
+        pointerEnter: () => void;
+        pointerLeave: () => void;
+        pointerDown: (pointerId: number) => void;
+        pointerUp: (pointerId: number, isInside: boolean) => void;
+        pointerCancel: () => void;
+    };
+    buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes;
+};
+export {};
+//# sourceMappingURL=useButton.d.ts.map

package/dist/button/useButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useButton.d.ts","sourceRoot":"","sources":["../../src/button/useButton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;AAEtE,KAAK,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEhF,MAAM,MAAM,cAAc,GAAG,IAAI,CAChC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,MAAM,CACnB,GAAG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC5C,CAAC;AAkBF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc;;;;;;;iCA2EnB,MAAM;+BAER,MAAM,YAAY,OAAO;;;iBA+F5C,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,cAAc;EAEpE"}

package/dist/button/useButton.js

@@ -0,0 +1,129 @@
+import * as React from "react";
+import { composeEventHandlers } from "../internal/composeEventHandlers";
+function isPointInRect(clientX, clientY, rect) {
+    return (clientX >= rect.left &&
+        clientX <= rect.right &&
+        clientY >= rect.top &&
+        clientY <= rect.bottom);
+}
+export function useButton(props) {
+    const { disabled = false, loading = false, type = "button", onPress, onClick, onPointerEnter, onPointerLeave, onPointerDown, onPointerUp, onPointerCancel, ...buttonProps } = props;
+    const isDisabled = disabled || loading;
+    const [internalState, setInternalState] = React.useState("idle");
+    const isPressedRef = React.useRef(false);
+    React.useEffect(() => {
+        if (isDisabled) {
+            isPressedRef.current = false;
+            setInternalState("idle");
+        }
+    }, [isDisabled]);
+    const interactionState = disabled
+        ? "disabled"
+        : loading
+            ? "loading"
+            : internalState;
+    const send = React.useCallback((event) => {
+        if (isDisabled)
+            return;
+        setInternalState((prev) => {
+            switch (event.type) {
+                case "POINTER_ENTER": {
+                    if (isPressedRef.current)
+                        return prev;
+                    return "hovered";
+                }
+                case "POINTER_LEAVE": {
+                    if (isPressedRef.current)
+                        return prev;
+                    return "idle";
+                }
+                case "POINTER_DOWN": {
+                    isPressedRef.current = true;
+                    return "pressed";
+                }
+                case "POINTER_UP": {
+                    isPressedRef.current = false;
+                    return event.isInside ? "hovered" : "idle";
+                }
+                case "POINTER_CANCEL": {
+                    isPressedRef.current = false;
+                    return "idle";
+                }
+                default: {
+                    return prev;
+                }
+            }
+        });
+    }, [isDisabled]);
+    const events = React.useMemo(() => ({
+        pointerEnter: () => send({ type: "POINTER_ENTER" }),
+        pointerLeave: () => send({ type: "POINTER_LEAVE" }),
+        pointerDown: (pointerId) => send({ type: "POINTER_DOWN", pointerId }),
+        pointerUp: (pointerId, isInside) => send({ type: "POINTER_UP", pointerId, isInside }),
+        pointerCancel: () => send({ type: "POINTER_CANCEL" }),
+    }), [send]);
+    const handlePointerEnterInternal = React.useCallback(() => {
+        events.pointerEnter();
+    }, [events]);
+    const handlePointerLeaveInternal = React.useCallback(() => {
+        events.pointerLeave();
+    }, [events]);
+    const handlePointerDownInternal = React.useCallback((event) => {
+        if (isDisabled)
+            return;
+        if (event.button !== 0)
+            return;
+        events.pointerDown(event.pointerId);
+        try {
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // ignore
+        }
+    }, [events, isDisabled]);
+    const handlePointerUpInternal = React.useCallback((event) => {
+        if (isDisabled)
+            return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const isInside = isPointInRect(event.clientX, event.clientY, rect);
+        events.pointerUp(event.pointerId, isInside);
+        try {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        catch {
+            // ignore
+        }
+    }, [events, isDisabled]);
+    const handlePointerCancelInternal = React.useCallback(() => {
+        events.pointerCancel();
+    }, [events]);
+    const handleClick = React.useCallback((event) => {
+        if (isDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        onPress?.(event);
+    }, [isDisabled, onPress]);
+    return {
+        state: interactionState,
+        isDisabled,
+        isLoading: loading,
+        events,
+        buttonProps: {
+            ...buttonProps,
+            type,
+            disabled: isDisabled,
+            "aria-disabled": isDisabled ? true : undefined,
+            "data-state": interactionState === "idle" ? undefined : interactionState,
+            "data-disabled": disabled ? "" : undefined,
+            "data-loading": loading ? "" : undefined,
+            onClick: composeEventHandlers(onClick, handleClick),
+            onPointerEnter: composeEventHandlers(onPointerEnter, handlePointerEnterInternal),
+            onPointerLeave: composeEventHandlers(onPointerLeave, handlePointerLeaveInternal),
+            onPointerDown: composeEventHandlers(onPointerDown, handlePointerDownInternal),
+            onPointerUp: composeEventHandlers(onPointerUp, handlePointerUpInternal),
+            onPointerCancel: composeEventHandlers(onPointerCancel, handlePointerCancelInternal),
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export type { ButtonPressEvent, UseButtonProps } from "./button/useButton";
+export { useButton } from "./button/useButton";
+export type { AccordionType, UseAccordionProps } from "./accordion/useAccordion";
+export { useAccordion } from "./accordion/useAccordion";
+export type { ModeToggleValue, UseModeToggleProps } from "./mode-toggle/useModeToggle";
+export { useModeToggle } from "./mode-toggle/useModeToggle";
+export type { UseTextFieldProps } from "./text-field/useTextField";
+export { useTextField } from "./text-field/useTextField";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAC3D,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { useButton } from "./button/useButton";
+export { useAccordion } from "./accordion/useAccordion";
+export { useModeToggle } from "./mode-toggle/useModeToggle";
+export { useTextField } from "./text-field/useTextField";

package/dist/internal/composeEventHandlers.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+type Handler<E> = ((event: E) => void) | undefined;
+export declare function composeEventHandlers<E extends React.SyntheticEvent>(originalHandler: Handler<E>, ourHandler: Handler<E>, options?: {
+    checkDefaultPrevented?: boolean;
+}): (event: E) => void;
+export {};
+//# sourceMappingURL=composeEventHandlers.d.ts.map

package/dist/internal/composeEventHandlers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeEventHandlers.d.ts","sourceRoot":"","sources":["../../src/internal/composeEventHandlers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;AAEnD,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,KAAK,CAAC,cAAc,EAClE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,EAC3B,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,EACtB,OAAO,CAAC,EAAE;IAAE,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAAE,IAErC,OAAO,CAAC,UAShB"}

package/dist/internal/composeEventHandlers.js

@@ -0,0 +1,9 @@
+export function composeEventHandlers(originalHandler, ourHandler, options) {
+    return (event) => {
+        originalHandler?.(event);
+        if (options?.checkDefaultPrevented !== false && event.defaultPrevented) {
+            return;
+        }
+        ourHandler?.(event);
+    };
+}

package/dist/internal/types.d.ts

@@ -0,0 +1,4 @@
+export type DataAttributes = {
+    [key: `data-${string}`]: string | undefined;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/internal/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/internal/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC"}

package/dist/internal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/mode-toggle/useModeToggle.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { DataAttributes } from "../internal/types";
+export type ModeToggleValue = "light" | "dark";
+export type UseModeToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "role" | "aria-checked"> & {
+    value?: ModeToggleValue;
+    defaultValue?: ModeToggleValue;
+    onValueChange?: (value: ModeToggleValue) => void;
+};
+export declare function useModeToggle(props: UseModeToggleProps): {
+    value: "light" | "dark";
+    setValue: (nextValue: ModeToggleValue) => void;
+    toggleValue: () => void;
+    buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes;
+};
+//# sourceMappingURL=useModeToggle.d.ts.map

package/dist/mode-toggle/useModeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModeToggle.d.ts","sourceRoot":"","sources":["../../src/mode-toggle/useModeToggle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,CAAA;AAE9C,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACpC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,GAAG,MAAM,GAAG,cAAc,CAChC,GAAG;IACH,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,YAAY,CAAC,EAAE,eAAe,CAAA;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;CAChD,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB;;0BAgBzC,eAAe;;iBAsCtB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,cAAc;EAEpE"}

package/dist/mode-toggle/useModeToggle.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { composeEventHandlers } from "../internal/composeEventHandlers";
+export function useModeToggle(props) {
+    const { value, defaultValue = "light", onValueChange, disabled, onClick, ...buttonProps } = props;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const currentValue = value ?? uncontrolledValue;
+    const setValue = React.useCallback((nextValue) => {
+        if (value === undefined) {
+            setUncontrolledValue(nextValue);
+        }
+        onValueChange?.(nextValue);
+    }, [value, onValueChange]);
+    const toggleValue = React.useCallback(() => {
+        const next = currentValue === "light" ? "dark" : "light";
+        setValue(next);
+    }, [currentValue, setValue]);
+    const handleClickInternal = React.useCallback((event) => {
+        if (disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        toggleValue();
+    }, [disabled, toggleValue]);
+    return {
+        value: currentValue,
+        setValue,
+        toggleValue,
+        buttonProps: {
+            ...buttonProps,
+            type: "button",
+            role: "switch",
+            "aria-checked": currentValue === "dark",
+            disabled,
+            "data-value": currentValue,
+            onClick: composeEventHandlers(onClick, handleClickInternal),
+        },
+    };
+}

package/dist/text-field/useTextField.d.ts

@@ -0,0 +1,14 @@
+export type UseTextFieldProps = {
+    type?: string;
+    disabled?: boolean;
+    passwordVisible?: boolean;
+    defaultPasswordVisible?: boolean;
+    onPasswordVisibleChange?: (visible: boolean) => void;
+};
+export declare function useTextField(props: UseTextFieldProps): {
+    isPassword: boolean;
+    isPasswordVisible: boolean;
+    inputType: string;
+    togglePasswordVisible: () => void;
+};
+//# sourceMappingURL=useTextField.d.ts.map

package/dist/text-field/useTextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextField.d.ts","sourceRoot":"","sources":["../../src/text-field/useTextField.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,uBAAuB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CACpD,CAAA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB;;;;;EAwCpD"}

package/dist/text-field/useTextField.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+export function useTextField(props) {
+    const { type = "text", disabled = false, passwordVisible, defaultPasswordVisible = false, onPasswordVisibleChange, } = props;
+    const isPassword = type === "password";
+    const [uncontrolledVisible, setUncontrolledVisible] = React.useState(defaultPasswordVisible);
+    const isPasswordVisible = passwordVisible ?? (isPassword ? uncontrolledVisible : false);
+    const setPasswordVisible = React.useCallback((next) => {
+        if (!isPassword)
+            return;
+        if (passwordVisible === undefined) {
+            setUncontrolledVisible(next);
+        }
+        onPasswordVisibleChange?.(next);
+    }, [isPassword, passwordVisible, onPasswordVisibleChange]);
+    const togglePasswordVisible = React.useCallback(() => {
+        if (disabled)
+            return;
+        setPasswordVisible(!isPasswordVisible);
+    }, [disabled, setPasswordVisible, isPasswordVisible]);
+    return {
+        isPassword,
+        isPasswordVisible,
+        inputType: isPassword ? (isPasswordVisible ? "text" : "password") : type,
+        togglePasswordVisible,
+    };
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@gbgr/react-headless",
+  "version": "0.1.0",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": "./dist/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "typescript": "latest"
+  },
+  "scripts": {
+    "build": "rm -rf dist tsconfig.tsbuildinfo && tsc -b tsconfig.json --force",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo && find src -type f \\( -name '*.js' -o -name '*.js.map' -o -name '*.d.ts' -o -name '*.d.ts.map' \\) -delete"
+  }
+}