@spelyco/react-lib 0.0.1-alpha

package/README.md

@@ -0,0 +1,103 @@
+# @spelyco/react-lib
+
+Shared React hooks and utilities for Spelyco UI packages. Framework-agnostic — works with both `@spelyco/react` and `@spelyco/react-native`.
+
+## Installation
+
+```bash
+bun add @spelyco/react-lib
+```
+
+## Hooks
+
+### useBoolean
+
+Manages a boolean state with stable action callbacks.
+
+```tsx
+import { useBoolean } from "@spelyco/react-lib";
+
+function Modal() {
+  const { value: isOpen, setTrue: open, setFalse: close, toggle } = useBoolean(false);
+
+  return (
+    <>
+      <button onClick={open}>Open</button>
+      {isOpen && <dialog onClose={close}>...</dialog>}
+    </>
+  );
+}
+```
+
+**API**
+
+```ts
+function useBoolean(initialValue?: boolean): {
+  value: boolean;
+  setTrue: () => void;
+  setFalse: () => void;
+  toggle: () => void;
+  setValue: (value: boolean) => void;
+}
+```
+
+---
+
+### useDebounce
+
+Delays updating a value until after a specified wait period. Useful for search inputs and API calls.
+
+```tsx
+import { useDebounce } from "@spelyco/react-lib";
+
+function Search() {
+  const [query, setQuery] = useState("");
+  const debouncedQuery = useDebounce(query, 400);
+
+  useEffect(() => {
+    if (debouncedQuery) fetchResults(debouncedQuery);
+  }, [debouncedQuery]);
+
+  return <input onChange={(e) => setQuery(e.target.value)} />;
+}
+```
+
+**API**
+
+```ts
+function useDebounce<T>(value: T, delay?: number): T
+// delay defaults to 300ms
+```
+
+## Utils
+
+### cn
+
+Merges class names, filtering out falsy values. Lightweight alternative to `clsx`.
+
+```tsx
+import { cn } from "@spelyco/react-lib";
+
+cn("btn", isActive && "btn--active", undefined, "btn--lg");
+// → "btn btn--active btn--lg"
+
+cn(["base", ["nested", "classes"]]);
+// → "base nested classes"
+```
+
+**API**
+
+```ts
+function cn(...inputs: ClassValue[]): string
+// ClassValue = string | undefined | null | false | ClassValue[]
+```
+
+## Peer Dependencies
+
+| Package | Version |
+|---|---|
+| `react` | `>=18` |
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,15 @@
+interface UseBooleanReturn {
+    value: boolean;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+    setValue: (value: boolean) => void;
+}
+declare function useBoolean(initialValue?: boolean): UseBooleanReturn;
+
+declare function useDebounce<T>(value: T, delay?: number): T;
+
+type ClassValue = string | undefined | null | false | ClassValue[];
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn, useBoolean, useDebounce };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+interface UseBooleanReturn {
+    value: boolean;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+    setValue: (value: boolean) => void;
+}
+declare function useBoolean(initialValue?: boolean): UseBooleanReturn;
+
+declare function useDebounce<T>(value: T, delay?: number): T;
+
+type ClassValue = string | undefined | null | false | ClassValue[];
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn, useBoolean, useDebounce };

package/dist/index.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var react = require('react');
+
+// src/hooks/useBoolean.ts
+function useBoolean(initialValue = false) {
+  const [value, setValue] = react.useState(initialValue);
+  const setTrue = react.useCallback(() => setValue(true), []);
+  const setFalse = react.useCallback(() => setValue(false), []);
+  const toggle = react.useCallback(() => setValue((v) => !v), []);
+  return { value, setTrue, setFalse, toggle, setValue };
+}
+function useDebounce(value, delay = 300) {
+  const [debouncedValue, setDebouncedValue] = react.useState(value);
+  react.useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return inputs.flat(Infinity).filter(Boolean).join(" ");
+}
+
+exports.cn = cn;
+exports.useBoolean = useBoolean;
+exports.useDebounce = useDebounce;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useBoolean.ts","../src/hooks/useDebounce.ts","../src/utils/cn.ts"],"names":["useState","useCallback","useEffect"],"mappings":";;;;;AAUO,SAAS,UAAA,CAAW,eAAe,KAAA,EAAyB;AACjE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,YAAY,CAAA;AAE/C,EAAA,MAAM,UAAUC,iBAAA,CAAY,MAAM,SAAS,IAAI,CAAA,EAAG,EAAE,CAAA;AACpD,EAAA,MAAM,WAAWA,iBAAA,CAAY,MAAM,SAAS,KAAK,CAAA,EAAG,EAAE,CAAA;AACtD,EAAA,MAAM,MAAA,GAASA,iBAAA,CAAY,MAAM,QAAA,CAAS,CAAC,MAAM,CAAC,CAAC,CAAA,EAAG,EAAE,CAAA;AAExD,EAAA,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,QAAQ,QAAA,EAAS;AACtD;AChBO,SAAS,WAAA,CAAe,KAAA,EAAU,KAAA,GAAQ,GAAA,EAAQ;AACvD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAID,eAAY,KAAK,CAAA;AAE7D,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAQ,UAAA,CAAW,MAAM,iBAAA,CAAkB,KAAK,GAAG,KAAK,CAAA;AAC9D,IAAA,OAAO,MAAM,aAAa,KAAK,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,OAAO,cAAA;AACT;;;ACTO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,MAAA,CACJ,KAAK,QAAa,CAAA,CAClB,OAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACb","file":"index.js","sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport interface UseBooleanReturn {\n  value: boolean;\n  setTrue: () => void;\n  setFalse: () => void;\n  toggle: () => void;\n  setValue: (value: boolean) => void;\n}\n\nexport function useBoolean(initialValue = false): UseBooleanReturn {\n  const [value, setValue] = useState(initialValue);\n\n  const setTrue = useCallback(() => setValue(true), []);\n  const setFalse = useCallback(() => setValue(false), []);\n  const toggle = useCallback(() => setValue((v) => !v), []);\n\n  return { value, setTrue, setFalse, toggle, setValue };\n}\n","import { useEffect, useState } from \"react\";\n\nexport function useDebounce<T>(value: T, delay = 300): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n","type ClassValue = string | undefined | null | false | ClassValue[];\n\nexport function cn(...inputs: ClassValue[]): string {\n  return inputs\n    .flat(Infinity as 1)\n    .filter(Boolean)\n    .join(\" \");\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,27 @@
+import { useState, useCallback, useEffect } from 'react';
+
+// src/hooks/useBoolean.ts
+function useBoolean(initialValue = false) {
+  const [value, setValue] = useState(initialValue);
+  const setTrue = useCallback(() => setValue(true), []);
+  const setFalse = useCallback(() => setValue(false), []);
+  const toggle = useCallback(() => setValue((v) => !v), []);
+  return { value, setTrue, setFalse, toggle, setValue };
+}
+function useDebounce(value, delay = 300) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return inputs.flat(Infinity).filter(Boolean).join(" ");
+}
+
+export { cn, useBoolean, useDebounce };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useBoolean.ts","../src/hooks/useDebounce.ts","../src/utils/cn.ts"],"names":["useState"],"mappings":";;;AAUO,SAAS,UAAA,CAAW,eAAe,KAAA,EAAyB;AACjE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,YAAY,CAAA;AAE/C,EAAA,MAAM,UAAU,WAAA,CAAY,MAAM,SAAS,IAAI,CAAA,EAAG,EAAE,CAAA;AACpD,EAAA,MAAM,WAAW,WAAA,CAAY,MAAM,SAAS,KAAK,CAAA,EAAG,EAAE,CAAA;AACtD,EAAA,MAAM,MAAA,GAAS,WAAA,CAAY,MAAM,QAAA,CAAS,CAAC,MAAM,CAAC,CAAC,CAAA,EAAG,EAAE,CAAA;AAExD,EAAA,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,QAAQ,QAAA,EAAS;AACtD;AChBO,SAAS,WAAA,CAAe,KAAA,EAAU,KAAA,GAAQ,GAAA,EAAQ;AACvD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,SAAY,KAAK,CAAA;AAE7D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAQ,UAAA,CAAW,MAAM,iBAAA,CAAkB,KAAK,GAAG,KAAK,CAAA;AAC9D,IAAA,OAAO,MAAM,aAAa,KAAK,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,OAAO,cAAA;AACT;;;ACTO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,MAAA,CACJ,KAAK,QAAa,CAAA,CAClB,OAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACb","file":"index.mjs","sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport interface UseBooleanReturn {\n  value: boolean;\n  setTrue: () => void;\n  setFalse: () => void;\n  toggle: () => void;\n  setValue: (value: boolean) => void;\n}\n\nexport function useBoolean(initialValue = false): UseBooleanReturn {\n  const [value, setValue] = useState(initialValue);\n\n  const setTrue = useCallback(() => setValue(true), []);\n  const setFalse = useCallback(() => setValue(false), []);\n  const toggle = useCallback(() => setValue((v) => !v), []);\n\n  return { value, setTrue, setFalse, toggle, setValue };\n}\n","import { useEffect, useState } from \"react\";\n\nexport function useDebounce<T>(value: T, delay = 300): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n","type ClassValue = string | undefined | null | false | ClassValue[];\n\nexport function cn(...inputs: ClassValue[]): string {\n  return inputs\n    .flat(Infinity as 1)\n    .filter(Boolean)\n    .join(\" \");\n}\n"]}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@spelyco/react-lib",
+  "version": "0.0.1-alpha",
+  "description": "Shared React hooks and utilities for Spelyco UI packages",
+  "keywords": [
+    "react",
+    "hooks",
+    "utilities",
+    "spelyco"
+  ],
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "biome check src/",
+    "lint:fix": "biome check --write src/",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@spelyco/tsconfig": "*",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.2.14",
+    "jsdom": "^29.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tsup": "^8.3.5",
+    "vitest": "^4.1.1"
+  }
+}