@ansh-ui/react 0.2.0

package/dist/use-observers-B9qtimrk.d.cts

@@ -0,0 +1,99 @@
+import { RefObject } from 'react';
+import { BudgetReport, PointerState, ScrollTrackOptions, ScrollProgress, FrameState } from '@ansh-ui/core';
+
+/**
+ * Subscribe to the shared ticker.
+ *
+ * The callback is held in a ref and never re-subscribes, so a component that closes over changing
+ * props doesn't tear down and rebuild its subscription on every render. That matters: resubscribing
+ * changes execution order within the phase, which can visibly reorder dependent animations.
+ */
+declare function useTicker(callback: (state: FrameState) => void, options?: {
+    phase?: 'read' | 'compute' | 'write' | 'post';
+    priority?: number;
+    enabled?: boolean;
+}): void;
+interface InViewOptions {
+    /** Fraction visible before triggering, in `[0, 1]`. Default `0`. */
+    threshold?: number;
+    /** Extra margin around the root. Default `'0px'`. */
+    rootMargin?: string;
+    /** Stop observing after the first intersection. Default `false`. */
+    once?: boolean;
+    root?: Element | null;
+}
+/**
+ * Is the element in the viewport?
+ *
+ * Uses the pooled observer, so a page with 200 scroll-revealed elements creates one
+ * `IntersectionObserver` rather than 200.
+ */
+declare function useInView<El extends Element = HTMLDivElement>(options?: InViewOptions): [RefObject<El | null>, boolean];
+/**
+ * Track an element's size.
+ *
+ * Returns state rather than a MotionValue because size changes at interaction rate, not frame
+ * rate, so a re-render per change is appropriate and far more ergonomic.
+ */
+declare function useElementSize<El extends Element = HTMLDivElement>(): [
+    RefObject<El | null>,
+    {
+        width: number;
+        height: number;
+    }
+];
+/**
+ * Track an element's scroll progress through the viewport.
+ *
+ * The returned progress is a **ref**, not state, deliberately — scroll progress changes every
+ * frame, and rendering on each change would make scrolling janky. Read `progress.current` inside a
+ * `useTicker` callback, or pass the `onChange` callback and write to the DOM directly.
+ */
+declare function useScrollProgress<El extends HTMLElement = HTMLDivElement>(options?: ScrollTrackOptions & {
+    onChange?: (progress: ScrollProgress) => void;
+}): [RefObject<El | null>, RefObject<ScrollProgress>];
+/** Track the window's (or a container's) overall scroll progress. */
+declare function useWindowScroll(onChange?: (info: {
+    progress: number;
+    scroll: number;
+    velocity: number;
+    max: number;
+}) => void, options?: {
+    axis?: 'y' | 'x';
+    container?: HTMLElement | null;
+}): RefObject<{
+    progress: number;
+    scroll: number;
+    velocity: number;
+    max: number;
+}>;
+/**
+ * Track pointer position over an element.
+ *
+ * Returns a ref to the live state object, which is mutated in place by the tracker. Reading it
+ * inside a `useTicker` callback is the intended use; it deliberately does not trigger renders.
+ */
+declare function usePointer<El extends HTMLElement = HTMLDivElement>(options?: {
+    smoothing?: number;
+    trackOutside?: boolean;
+    enabled?: boolean;
+}): [RefObject<El | null>, RefObject<Readonly<PointerState> | null>];
+/**
+ * Does the user prefer reduced motion?
+ *
+ * Returns `false` during SSR and on the first client render, then updates. That ordering is
+ * deliberate: returning the real value during SSR is impossible (the server cannot know), and
+ * returning it on the first client render would be a hydration mismatch.
+ */
+declare function useReducedMotion(): boolean;
+/**
+ * Live frame-budget telemetry — FPS, frame cost percentiles, and the adaptive quality scalar.
+ *
+ * Intended for a development overlay. Subscribing causes a re-render every frame, so this must not
+ * ship in production render paths; the `enabled` flag exists so it can be gated on `NODE_ENV`.
+ */
+declare function useFrameBudget(enabled?: boolean): BudgetReport | null;
+/** Merge several refs into one callback ref, for components that both forward and use a ref. */
+declare function useMergedRef<T>(...refs: Array<React.Ref<T> | undefined | null>): (node: T | null) => void;
+
+export { type InViewOptions as I, useFrameBudget as a, useInView as b, useMergedRef as c, usePointer as d, useReducedMotion as e, useScrollProgress as f, useTicker as g, useWindowScroll as h, useElementSize as u };

package/dist/use-observers-B9qtimrk.d.ts

@@ -0,0 +1,99 @@
+import { RefObject } from 'react';
+import { BudgetReport, PointerState, ScrollTrackOptions, ScrollProgress, FrameState } from '@ansh-ui/core';
+
+/**
+ * Subscribe to the shared ticker.
+ *
+ * The callback is held in a ref and never re-subscribes, so a component that closes over changing
+ * props doesn't tear down and rebuild its subscription on every render. That matters: resubscribing
+ * changes execution order within the phase, which can visibly reorder dependent animations.
+ */
+declare function useTicker(callback: (state: FrameState) => void, options?: {
+    phase?: 'read' | 'compute' | 'write' | 'post';
+    priority?: number;
+    enabled?: boolean;
+}): void;
+interface InViewOptions {
+    /** Fraction visible before triggering, in `[0, 1]`. Default `0`. */
+    threshold?: number;
+    /** Extra margin around the root. Default `'0px'`. */
+    rootMargin?: string;
+    /** Stop observing after the first intersection. Default `false`. */
+    once?: boolean;
+    root?: Element | null;
+}
+/**
+ * Is the element in the viewport?
+ *
+ * Uses the pooled observer, so a page with 200 scroll-revealed elements creates one
+ * `IntersectionObserver` rather than 200.
+ */
+declare function useInView<El extends Element = HTMLDivElement>(options?: InViewOptions): [RefObject<El | null>, boolean];
+/**
+ * Track an element's size.
+ *
+ * Returns state rather than a MotionValue because size changes at interaction rate, not frame
+ * rate, so a re-render per change is appropriate and far more ergonomic.
+ */
+declare function useElementSize<El extends Element = HTMLDivElement>(): [
+    RefObject<El | null>,
+    {
+        width: number;
+        height: number;
+    }
+];
+/**
+ * Track an element's scroll progress through the viewport.
+ *
+ * The returned progress is a **ref**, not state, deliberately — scroll progress changes every
+ * frame, and rendering on each change would make scrolling janky. Read `progress.current` inside a
+ * `useTicker` callback, or pass the `onChange` callback and write to the DOM directly.
+ */
+declare function useScrollProgress<El extends HTMLElement = HTMLDivElement>(options?: ScrollTrackOptions & {
+    onChange?: (progress: ScrollProgress) => void;
+}): [RefObject<El | null>, RefObject<ScrollProgress>];
+/** Track the window's (or a container's) overall scroll progress. */
+declare function useWindowScroll(onChange?: (info: {
+    progress: number;
+    scroll: number;
+    velocity: number;
+    max: number;
+}) => void, options?: {
+    axis?: 'y' | 'x';
+    container?: HTMLElement | null;
+}): RefObject<{
+    progress: number;
+    scroll: number;
+    velocity: number;
+    max: number;
+}>;
+/**
+ * Track pointer position over an element.
+ *
+ * Returns a ref to the live state object, which is mutated in place by the tracker. Reading it
+ * inside a `useTicker` callback is the intended use; it deliberately does not trigger renders.
+ */
+declare function usePointer<El extends HTMLElement = HTMLDivElement>(options?: {
+    smoothing?: number;
+    trackOutside?: boolean;
+    enabled?: boolean;
+}): [RefObject<El | null>, RefObject<Readonly<PointerState> | null>];
+/**
+ * Does the user prefer reduced motion?
+ *
+ * Returns `false` during SSR and on the first client render, then updates. That ordering is
+ * deliberate: returning the real value during SSR is impossible (the server cannot know), and
+ * returning it on the first client render would be a hydration mismatch.
+ */
+declare function useReducedMotion(): boolean;
+/**
+ * Live frame-budget telemetry — FPS, frame cost percentiles, and the adaptive quality scalar.
+ *
+ * Intended for a development overlay. Subscribing causes a re-render every frame, so this must not
+ * ship in production render paths; the `enabled` flag exists so it can be gated on `NODE_ENV`.
+ */
+declare function useFrameBudget(enabled?: boolean): BudgetReport | null;
+/** Merge several refs into one callback ref, for components that both forward and use a ref. */
+declare function useMergedRef<T>(...refs: Array<React.Ref<T> | undefined | null>): (node: T | null) => void;
+
+export { type InViewOptions as I, useFrameBudget as a, useInView as b, useMergedRef as c, usePointer as d, useReducedMotion as e, useScrollProgress as f, useTicker as g, useWindowScroll as h, useElementSize as u };

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@ansh-ui/react",
+  "version": "0.2.0",
+  "description": "Ansh for React and Next.js — premium animated components and motion hooks.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "keywords": [
+    "react",
+    "nextjs",
+    "animation",
+    "motion",
+    "components",
+    "ui",
+    "canvas",
+    "particles"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jithin003/ui-library.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/jithin003/ui-library",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./primitives": {
+      "types": "./dist/primitives.d.ts",
+      "import": "./dist/primitives.js",
+      "require": "./dist/primitives.cjs"
+    },
+    "./layout": {
+      "types": "./dist/layout.d.ts",
+      "import": "./dist/layout.js",
+      "require": "./dist/layout.cjs"
+    },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "import": "./dist/form.js",
+      "require": "./dist/form.cjs"
+    },
+    "./overlay": {
+      "types": "./dist/overlay.d.ts",
+      "import": "./dist/overlay.js",
+      "require": "./dist/overlay.cjs"
+    },
+    "./data": {
+      "types": "./dist/data.d.ts",
+      "import": "./dist/data.js",
+      "require": "./dist/data.cjs"
+    },
+    "./navigation": {
+      "types": "./dist/navigation.d.ts",
+      "import": "./dist/navigation.js",
+      "require": "./dist/navigation.cjs"
+    },
+    "./motion": {
+      "types": "./dist/motion.d.ts",
+      "import": "./dist/motion.js",
+      "require": "./dist/motion.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@ansh-ui/tokens": "0.2.0",
+    "@ansh-ui/core": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && node ./scripts/add-use-client.mjs && node ./scripts/build-css.mjs",
+    "dev": "tsup --watch",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}