@ladder-ui/primitives 0.4.0

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { useCheckbox, type UseCheckboxProps } from "./use-checkbox";
+export { useSelect, type UseSelectProps } from "./use-select";
+export { useRadioGroup, type UseRadioGroupProps } from "./use-radio-group";
+export { useOutsideClick } from "./use-outside-click";

package/dist/index.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var react = require('react');
+
+function useCheckbox(props) {
+    const { ref, indeterminate = false, status = "default", disabled, "aria-invalid": ariaInvalid, } = props;
+    const internalRef = react.useRef(null);
+    react.useEffect(() => {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    function setRef(node) {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }
+    const isInvalid = ariaInvalid ?? (status === "error" ? true : undefined);
+    return {
+        wrapperProps: {
+            "data-slot": "checkbox",
+            "data-disabled": disabled ? "true" : undefined,
+            "data-status": status !== "default" ? status : undefined,
+        },
+        inputProps: {
+            ref: setRef,
+            type: "checkbox",
+            disabled,
+            "aria-invalid": isInvalid,
+            "aria-checked": indeterminate ? "mixed" : undefined, // Useful for AT
+        },
+    };
+}
+
+function useSelect(props) {
+    const { value: controlledValue, defaultValue, onValueChange, open: controlledOpen, onOpenChange, disabled, } = props;
+    const [internalOpen, setInternalOpen] = react.useState(false);
+    const [internalValue, setInternalValue] = react.useState(defaultValue);
+    const isOpenControlled = controlledOpen !== undefined;
+    const isValueControlled = controlledValue !== undefined;
+    const open = isOpenControlled ? controlledOpen : internalOpen;
+    const value = isValueControlled ? controlledValue : internalValue;
+    const triggerId = react.useId();
+    const contentId = react.useId();
+    const triggerRef = react.useRef(null);
+    const setOpen = react.useCallback((next) => {
+        if (disabled)
+            return;
+        if (!isOpenControlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [disabled, isOpenControlled, onOpenChange]);
+    const handleValueChange = react.useCallback((newValue) => {
+        if (disabled)
+            return;
+        if (!isValueControlled)
+            setInternalValue(newValue);
+        onValueChange?.(newValue);
+        setOpen(false);
+    }, [disabled, isValueControlled, onValueChange, setOpen]);
+    return {
+        open,
+        setOpen,
+        value,
+        onValueChange: handleValueChange,
+        triggerId,
+        contentId,
+        triggerRef,
+        disabled,
+    };
+}
+
+function useRadioGroup(props = {}) {
+    const { value: controlledValue, defaultValue, onValueChange, name: propName, disabled, } = props;
+    const [internalValue, setInternalValue] = react.useState(defaultValue);
+    const generatedName = react.useId();
+    const isValueControlled = controlledValue !== undefined;
+    const value = isValueControlled ? controlledValue : internalValue;
+    const name = propName ?? generatedName;
+    const handleValueChange = react.useCallback((newValue) => {
+        if (disabled)
+            return;
+        if (!isValueControlled)
+            setInternalValue(newValue);
+        onValueChange?.(newValue);
+    }, [disabled, isValueControlled, onValueChange]);
+    return {
+        value,
+        onValueChange: handleValueChange,
+        name,
+        disabled,
+    };
+}
+
+function useOutsideClick(handler, enabled = true) {
+    const refs = react.useRef([]);
+    react.useEffect(() => {
+        if (!enabled)
+            return;
+        const listener = (event) => {
+            const target = event.target;
+            // Check if click was inside any of the tracked refs
+            const isInside = refs.current.some((ref) => ref.current && ref.current.contains(target));
+            if (!isInside) {
+                handler(event);
+            }
+        };
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [handler, enabled]);
+    const addRef = (ref) => {
+        if (!refs.current.includes(ref)) {
+            refs.current.push(ref);
+        }
+    };
+    return { addRef };
+}
+
+exports.useCheckbox = useCheckbox;
+exports.useOutsideClick = useOutsideClick;
+exports.useRadioGroup = useRadioGroup;
+exports.useSelect = useSelect;

package/dist/index.mjs

@@ -0,0 +1,125 @@
+import { useRef, useEffect, useState, useId, useCallback } from 'react';
+
+function useCheckbox(props) {
+    const { ref, indeterminate = false, status = "default", disabled, "aria-invalid": ariaInvalid, } = props;
+    const internalRef = useRef(null);
+    useEffect(() => {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    function setRef(node) {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }
+    const isInvalid = ariaInvalid ?? (status === "error" ? true : undefined);
+    return {
+        wrapperProps: {
+            "data-slot": "checkbox",
+            "data-disabled": disabled ? "true" : undefined,
+            "data-status": status !== "default" ? status : undefined,
+        },
+        inputProps: {
+            ref: setRef,
+            type: "checkbox",
+            disabled,
+            "aria-invalid": isInvalid,
+            "aria-checked": indeterminate ? "mixed" : undefined, // Useful for AT
+        },
+    };
+}
+
+function useSelect(props) {
+    const { value: controlledValue, defaultValue, onValueChange, open: controlledOpen, onOpenChange, disabled, } = props;
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isOpenControlled = controlledOpen !== undefined;
+    const isValueControlled = controlledValue !== undefined;
+    const open = isOpenControlled ? controlledOpen : internalOpen;
+    const value = isValueControlled ? controlledValue : internalValue;
+    const triggerId = useId();
+    const contentId = useId();
+    const triggerRef = useRef(null);
+    const setOpen = useCallback((next) => {
+        if (disabled)
+            return;
+        if (!isOpenControlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [disabled, isOpenControlled, onOpenChange]);
+    const handleValueChange = useCallback((newValue) => {
+        if (disabled)
+            return;
+        if (!isValueControlled)
+            setInternalValue(newValue);
+        onValueChange?.(newValue);
+        setOpen(false);
+    }, [disabled, isValueControlled, onValueChange, setOpen]);
+    return {
+        open,
+        setOpen,
+        value,
+        onValueChange: handleValueChange,
+        triggerId,
+        contentId,
+        triggerRef,
+        disabled,
+    };
+}
+
+function useRadioGroup(props = {}) {
+    const { value: controlledValue, defaultValue, onValueChange, name: propName, disabled, } = props;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const generatedName = useId();
+    const isValueControlled = controlledValue !== undefined;
+    const value = isValueControlled ? controlledValue : internalValue;
+    const name = propName ?? generatedName;
+    const handleValueChange = useCallback((newValue) => {
+        if (disabled)
+            return;
+        if (!isValueControlled)
+            setInternalValue(newValue);
+        onValueChange?.(newValue);
+    }, [disabled, isValueControlled, onValueChange]);
+    return {
+        value,
+        onValueChange: handleValueChange,
+        name,
+        disabled,
+    };
+}
+
+function useOutsideClick(handler, enabled = true) {
+    const refs = useRef([]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const listener = (event) => {
+            const target = event.target;
+            // Check if click was inside any of the tracked refs
+            const isInside = refs.current.some((ref) => ref.current && ref.current.contains(target));
+            if (!isInside) {
+                handler(event);
+            }
+        };
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [handler, enabled]);
+    const addRef = (ref) => {
+        if (!refs.current.includes(ref)) {
+            refs.current.push(ref);
+        }
+    };
+    return { addRef };
+}
+
+export { useCheckbox, useOutsideClick, useRadioGroup, useSelect };

package/dist/use-checkbox.d.ts

@@ -0,0 +1,27 @@
+import type { Ref } from "react";
+export interface UseCheckboxProps {
+    /** React ref to forward to the native input element. */
+    ref?: Ref<HTMLInputElement>;
+    /** Whether the checkbox is in an indeterminate state. */
+    indeterminate?: boolean;
+    /** Visual validation state. "error" will set aria-invalid="true". */
+    status?: "default" | "error";
+    /** Native disabled state. */
+    disabled?: boolean;
+    /** Explicit aria-invalid, overrides status="error" */
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling";
+}
+export declare function useCheckbox(props: UseCheckboxProps): {
+    wrapperProps: {
+        "data-slot": string;
+        "data-disabled": string | undefined;
+        "data-status": "error" | undefined;
+    };
+    inputProps: {
+        ref: (node: HTMLInputElement | null) => void;
+        type: string;
+        disabled: boolean | undefined;
+        "aria-invalid": boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-checked": "mixed" | undefined;
+    };
+};

package/dist/use-outside-click.d.ts

@@ -0,0 +1,3 @@
+export declare function useOutsideClick(handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): {
+    addRef: (ref: React.RefObject<HTMLElement | null>) => void;
+};

package/dist/use-radio-group.d.ts

@@ -0,0 +1,13 @@
+export interface UseRadioGroupProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+    disabled?: boolean;
+}
+export declare function useRadioGroup(props?: UseRadioGroupProps): {
+    value: string | undefined;
+    onValueChange: (newValue: string) => void;
+    name: string;
+    disabled: boolean | undefined;
+};

package/dist/use-select.d.ts

@@ -0,0 +1,18 @@
+export interface UseSelectProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+}
+export declare function useSelect(props: UseSelectProps): {
+    open: boolean;
+    setOpen: (next: boolean) => void;
+    value: string | undefined;
+    onValueChange: (newValue: string) => void;
+    triggerId: string;
+    contentId: string;
+    triggerRef: import("react").RefObject<HTMLButtonElement | null>;
+    disabled: boolean | undefined;
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@ladder-ui/primitives",
+  "version": "0.4.0",
+  "description": "Pure headless logic and accessibility primitives for Ladder UI",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^19.0.0",
+    "rollup": "^4.59.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "@ladder-ui/core": "0.4.0"
+  },
+  "peerDependencies": {
+    "@ladder-ui/core": ">=0.0.0",
+    "react": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ivelaval/ladder-ui.git",
+    "directory": "packages/primitives"
+  },
+  "scripts": {
+    "build": "pnpm clean && rollup -c",
+    "dev": "rollup -c -w",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}