@pyck/react 0.0.3 → 0.0.6

package/dist/utils/index.js

@@ -7,6 +7,7 @@ import { de, enGB, enUS } from "date-fns/locale";
 import { match } from "ts-pattern";
 import { z } from "zod";
 import { parseDate as parseDate$1 } from "@ark-ui/react/date-picker";
+import { c } from "react/compiler-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useEnvironmentContext } from "@ark-ui/react/environment";
 
@@ -253,30 +254,62 @@ const partition = (arr, predicate) => arr.reduce(([pass, fail], item) => predica
 
 //#endregion
 //#region src/utils/use-auto-focus.ts
-const useAutoFocus = (shouldFocus = true) => {
+const useAutoFocus = (t0) => {
+	const $ = c(3);
+	const shouldFocus = t0 === void 0 ? true : t0;
 	const ref = useRef(null);
-	useEffect(() => {
-		if (shouldFocus) setTimeout(() => {
-			ref.current?.focus();
-		}, 0);
-	}, [shouldFocus]);
+	let t1;
+	let t2;
+	if ($[0] !== shouldFocus) {
+		t1 = () => {
+			if (shouldFocus) setTimeout(() => {
+				ref.current?.focus();
+			}, 0);
+		};
+		t2 = [shouldFocus];
+		$[0] = shouldFocus;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
 	return ref;
 };
 
 //#endregion
 //#region src/utils/use-effect-once.ts
 const useEffectOnce = (cb) => {
+	const $ = c(4);
 	const savedCallback = useRef(cb);
 	const effectGuard = useRef(false);
-	useEffect(() => {
-		savedCallback.current = cb;
-	});
-	useEffect(() => {
-		if (effectGuard.current !== true) {
-			effectGuard.current = true;
-			savedCallback.current();
-		}
-	}, []);
+	let t0;
+	if ($[0] !== cb) {
+		t0 = () => {
+			savedCallback.current = cb;
+		};
+		$[0] = cb;
+		$[1] = t0;
+	} else t0 = $[1];
+	useEffect(t0);
+	let t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			if (effectGuard.current !== true) {
+				effectGuard.current = true;
+				savedCallback.current();
+			}
+		};
+		t2 = [];
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	useEffect(t1, t2);
 };
 
 //#endregion
@@ -298,79 +331,137 @@ function isSetStateFunction(value) {
 * ```
 */
 function useHistoryState(initialValue, options) {
+	const $ = c(16);
 	const limit = options?.limit ?? 10;
-	const [{ history, index }, setHistoryState] = useState({
-		history: [initialValue],
-		index: 0
-	});
+	let t0;
+	if ($[0] !== initialValue) {
+		t0 = {
+			history: [initialValue],
+			index: 0
+		};
+		$[0] = initialValue;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [t1, setHistoryState] = useState(t0);
+	const { history, index } = t1;
 	if (index >= history.length || index < 0) throw Error(`Impossible State reached: ${index} | ${history.length}`);
 	const state = history[index];
-	/**
-	* Sets a new state value and adds it to the history.
-	* If called after undo operations, discards any "future" states.
-	*/
-	const setState = (setStateFnOrValue) => setHistoryState((prev) => {
-		const currentState = prev.history[prev.index];
-		const newState = isSetStateFunction(setStateFnOrValue) ? setStateFnOrValue(currentState) : setStateFnOrValue;
-		if (prev.index !== prev.history.length - 1) return {
-			history: [...prev.history.slice(0, prev.index + 1), newState],
-			index: prev.index + 1
+	let t2;
+	if ($[2] !== limit) {
+		t2 = (setStateFnOrValue) => setHistoryState((prev) => {
+			const currentState = prev.history[prev.index];
+			const newState = isSetStateFunction(setStateFnOrValue) ? setStateFnOrValue(currentState) : setStateFnOrValue;
+			if (prev.index !== prev.history.length - 1) return {
+				history: [...prev.history.slice(0, prev.index + 1), newState],
+				index: prev.index + 1
+			};
+			if (prev.history.length >= limit) return {
+				history: [...prev.history.slice(1), newState],
+				index: prev.index
+			};
+			return {
+				history: [...prev.history, newState],
+				index: prev.index + 1
+			};
+		});
+		$[2] = limit;
+		$[3] = t2;
+	} else t2 = $[3];
+	const setState = t2;
+	let t3;
+	if ($[4] !== index) {
+		t3 = () => index > 0;
+		$[4] = index;
+		$[5] = t3;
+	} else t3 = $[5];
+	const canUndo = t3;
+	let t4;
+	if ($[6] !== history.length || $[7] !== index) {
+		t4 = () => index < history.length - 1;
+		$[6] = history.length;
+		$[7] = index;
+		$[8] = t4;
+	} else t4 = $[8];
+	const canRedo = t4;
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => {
+			setHistoryState(_temp);
 		};
-		if (prev.history.length >= limit) return {
-			history: [...prev.history.slice(1), newState],
-			index: prev.index
+		$[9] = t5;
+	} else t5 = $[9];
+	const undo = t5;
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => {
+			setHistoryState(_temp2);
 		};
-		return {
-			history: [...prev.history, newState],
-			index: prev.index + 1
+		$[10] = t6;
+	} else t6 = $[10];
+	const redo = t6;
+	let t7;
+	if ($[11] !== canRedo || $[12] !== canUndo || $[13] !== setState || $[14] !== state) {
+		t7 = {
+			state,
+			setState,
+			canUndo,
+			undo,
+			canRedo,
+			redo
 		};
-	});
-	/**
-	* Returns whether there are previous states available to undo to.
-	*/
-	const canUndo = useCallback(() => index > 0, [index]);
-	/**
-	* Returns whether there are future states available to redo to.
-	*/
-	const canRedo = useCallback(() => index < history.length - 1, [index, history.length]);
+		$[11] = canRedo;
+		$[12] = canUndo;
+		$[13] = setState;
+		$[14] = state;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
+}
+function _temp2(prev_1) {
+	return {
+		...prev_1,
+		index: Math.min(prev_1.history.length - 1, prev_1.index + 1)
+	};
+}
+function _temp(prev_0) {
 	return {
-		state,
-		setState,
-		canUndo,
-		undo: useCallback(() => {
-			setHistoryState((prev) => ({
-				...prev,
-				index: Math.max(0, prev.index - 1)
-			}));
-		}, []),
-		canRedo,
-		redo: useCallback(() => {
-			setHistoryState((prev) => ({
-				...prev,
-				index: Math.min(prev.history.length - 1, prev.index + 1)
-			}));
-		}, [])
+		...prev_0,
+		index: Math.max(0, prev_0.index - 1)
 	};
 }
 
 //#endregion
 //#region src/utils/use-hotkey.ts
 const useHotkey = (setOpen) => {
+	const $ = c(4);
 	const env = useEnvironmentContext();
-	useEffect(() => {
-		const document = env.getDocument();
-		const hotkey = /(Mac|iPhone|iPod|iPad)/i.test(navigator?.platform) ? "metaKey" : "ctrlKey";
-		const handleKeydown = (event) => {
-			if (event.key?.toLowerCase() === "k" && event[hotkey]) {
-				event.preventDefault();
-				setOpen(true);
-			}
-		};
-		document.addEventListener("keydown", handleKeydown, true);
-		return () => {
-			document.removeEventListener("keydown", handleKeydown, true);
+	let t0;
+	let t1;
+	if ($[0] !== env || $[1] !== setOpen) {
+		t0 = () => {
+			const document = env.getDocument();
+			const hotkey = /(Mac|iPhone|iPod|iPad)/i.test(navigator?.platform) ? "metaKey" : "ctrlKey";
+			const handleKeydown = (event) => {
+				if (event.key?.toLowerCase() === "k" && event[hotkey]) {
+					event.preventDefault();
+					setOpen(true);
+				}
+			};
+			document.addEventListener("keydown", handleKeydown, true);
+			return () => {
+				document.removeEventListener("keydown", handleKeydown, true);
+			};
 		};
-	}, [env, setOpen]);
+		t1 = [env, setOpen];
+		$[0] = env;
+		$[1] = setOpen;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
 };
 
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pyck/react",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "license": "MIT",
   "homepage": "https://pyck.ai",
   "repository": {
@@ -25,6 +25,14 @@
     "postpack": "bunx clean-package restore"
   },
   "exports": {
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/types/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "default": "./dist/utils/index.js"
+    },
     "./*": {
       "types": "./dist/components/*/index.d.ts",
       "default": "./dist/components/*/index.js"
@@ -45,7 +53,8 @@
   },
   "devDependencies": {
     "@hookform/resolvers": "5.2.2",
-    "@pyck/styled-system": "0.0.3",
+    "@pyck/styled-system": "0.0.6",
+    "@rollup/plugin-babel": "6.1.0",
     "@storybook/react": "10.2.10",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
@@ -54,6 +63,7 @@
     "@types/react": "19.2.10",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react-swc": "4.2.3",
+    "babel-plugin-react-compiler": "1.0.0",
     "happy-dom": "20.6.3",
     "lorem-ipsum": "2.0.8",
     "react": "19.2.4",
@@ -67,7 +77,7 @@
     "zod": "4.3.6"
   },
   "peerDependencies": {
-    "@pyck/styled-system": ">=0.0.3",
+    "@pyck/styled-system": ">=0.0.6",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-hook-form": ">=7.0.0",
@@ -77,6 +87,14 @@
   "clean-package": {
     "replace": {
       "exports": {
+        "./types": {
+          "types": "./dist/types/index.d.ts",
+          "default": "./dist/types/index.js"
+        },
+        "./utils": {
+          "types": "./dist/utils/index.d.ts",
+          "default": "./dist/utils/index.js"
+        },
         "./*": {
           "types": "./dist/components/*/index.d.ts",
           "default": "./dist/components/*/index.js"

package/dist/checkmark-CW-yHMvN.js

@@ -1,18 +0,0 @@
-import { forwardRef } from "react";
-import { ark } from "@ark-ui/react/factory";
-import { styled } from "@pyck/styled-system/jsx";
-import { checkmark } from "@pyck/styled-system/recipes";
-import { dataAttr } from "@pyck/react/utils";
-
-//#region src/components/checkmark/checkmark.tsx
-const StyledCheckmark = styled(ark.svg, checkmark);
-const Checkmark = forwardRef(function Checkmark(props, ref) {
-	const { checked, indeterminate, disabled, ...rest } = props;
-	return <StyledCheckmark ref={ref} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3px" strokeLinecap="round" strokeLinejoin="round" data-state={indeterminate ? "indeterminate" : checked ? "checked" : "unchecked"} data-disabled={dataAttr(disabled)} {...rest}>
-      <title>Checkmark</title>
-      {indeterminate ? <path d="M5 12h14" /> : checked ? <path d="M20 6 9 17l-5-5" /> : null}
-    </StyledCheckmark>;
-});
-
-//#endregion
-export { Checkmark as t };

package/dist/close-button-BM7ikbYh.js

@@ -1,52 +0,0 @@
-import { createContext, mergeProps } from "@ark-ui/react/utils";
-import { forwardRef, useMemo } from "react";
-import { ark } from "@ark-ui/react/factory";
-import { styled } from "@pyck/styled-system/jsx";
-import { button } from "@pyck/styled-system/recipes";
-import { XIcon } from "lucide-react";
-import { Loader } from "@pyck/react/loader";
-import { Group } from "@pyck/react/group";
-
-//#region src/components/button/button-group.tsx
-const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
-	const [variantProps, otherProps] = useMemo(() => button.splitVariantProps(props), [props]);
-	return <ButtonPropsProvider value={variantProps}>
-        <Group ref={ref} {...otherProps} />
-      </ButtonPropsProvider>;
-});
-const [ButtonPropsProvider, useButtonPropsContext] = createContext({
-	name: "ButtonPropsContext",
-	hookName: "useButtonPropsContext",
-	providerName: "<PropsProvider />",
-	strict: false
-});
-
-//#endregion
-//#region src/components/button/button.tsx
-const BaseButton = styled(ark.button, button);
-const Button = forwardRef(function Button(props, ref) {
-	const propsContext = useButtonPropsContext();
-	const { loading, loadingText, children, spinner, spinnerPlacement, ...rest } = useMemo(() => mergeProps(propsContext, props), [propsContext, props]);
-	return <BaseButton type="button" ref={ref} {...rest} data-loading={loading ? "" : void 0} disabled={loading || rest.disabled}>
-      {!props.asChild && loading ? <Loader spinner={spinner} text={loadingText} spinnerPlacement={spinnerPlacement}>
-          {children}
-        </Loader> : children}
-    </BaseButton>;
-});
-
-//#endregion
-//#region src/components/button/icon-button.tsx
-const IconButton = forwardRef(function IconButton(props, ref) {
-	return <Button px="0" py="0" ref={ref} {...props} />;
-});
-
-//#endregion
-//#region src/components/button/close-button.tsx
-const CloseButton = forwardRef(function CloseButton(props, ref) {
-	return <IconButton variant="plain" color="fg.muted" aria-label="Close" ref={ref} {...props}>
-        <XIcon />
-      </IconButton>;
-});
-
-//#endregion
-export { ButtonGroup as i, IconButton as n, Button as r, CloseButton as t };

package/dist/display-date-value-gTlidtNz.js

@@ -1,21 +0,0 @@
-import { t as DisplayValue } from "./display-value-BNKxQ99u.js";
-import { formatDate, formatDateTime, getDateFormats, isString } from "@pyck/react/utils";
-
-//#region src/components/display-date-value/display-date-value.tsx
-const DisplayDateValue = (props) => {
-	const { value, format, copyable, type = "date", locale: localeProp } = props;
-	const locale = localeProp ?? "en-US";
-	const formatValue = (date) => {
-		if (format && isString(format) && !isDateFormatKey(format, locale)) return formatDate(date, format, locale);
-		if (format && isDateFormatKey(format, locale)) return formatDate(date, getDateFormats(locale)[format], locale);
-		return formatDateTime(date, type, locale);
-	};
-	return <DisplayValue value={value} formatValue={formatValue} copyable={copyable} />;
-};
-const isDateFormatKey = (format, locale) => {
-	const formats = getDateFormats(locale);
-	return Object.keys(formats).includes(format);
-};
-
-//#endregion
-export { DisplayDateValue as t };

package/dist/display-value-BNKxQ99u.js

@@ -1,37 +0,0 @@
-import { HStack, VisuallyHidden } from "@pyck/styled-system/jsx";
-import { isString } from "@pyck/react/utils";
-import { Show } from "@pyck/react/show";
-import { Clipboard } from "@pyck/react/clipboard";
-import { Span } from "@pyck/react/span";
-import { Wrap } from "@pyck/react/wrap";
-
-//#region src/components/display-value/display-value.tsx
-const DisplayValue = (props) => {
-	const { value, copyable, formatValue } = props;
-	const formattedValue = isNotEmpty(value) ? formatValue?.(value) ?? String(value) : null;
-	return <Show when={formattedValue != null} fallback={<>
-          <Span color="fg.subtle" aria-hidden>
-            —
-          </Span>
-          <VisuallyHidden>No value</VisuallyHidden>
-        </>}>
-      <Wrap when={copyable} with={(children) => <Clipboard.Root value={formattedValue} timeout={400}>
-            <Clipboard.Trigger _hover={{ "& [data-part=\"indicator\"]": { opacity: 1 } }} _active={{ "& [data-part=\"indicator\"]": { opacity: 1 } }}>
-              <HStack>
-                <Clipboard.Indicator color="fg.subtle" opacity="0" />
-                <Span>{children}</Span>
-              </HStack>
-            </Clipboard.Trigger>
-          </Clipboard.Root>}>
-        {formattedValue}
-      </Wrap>
-    </Show>;
-};
-const isNotEmpty = (value) => {
-	if (value == null) return false;
-	if (isString(value) || Array.isArray(value)) return value.length > 0;
-	return true;
-};
-
-//#endregion
-export { DisplayValue as t };

package/dist/show-IaI-36v9.js

@@ -1,12 +0,0 @@
-import { isValidElement } from "react";
-
-//#region src/components/show/show.tsx
-function Show(props) {
-	const { when, fallback, children } = props;
-	if (!when) return fallback ?? null;
-	const result = typeof children === "function" ? children(when) : children;
-	return isValidElement(result) ? result : <>{result}</>;
-}
-
-//#endregion
-export { Show as t };