@dinofront/design_system 0.1.4 → 1.1.0

package/dist/lib/FormContext.d.ts

@@ -0,0 +1,22 @@
+import { Control, FieldErrors, FieldValues, UseFormClearErrors, UseFormGetFieldState, UseFormGetValues, UseFormRegister, UseFormReset, UseFormSetError, UseFormSetValue, UseFormTrigger, UseFormUnregister, UseFormWatch } from 'react-hook-form';
+export interface FormContextValue {
+    control: Control<FieldValues>;
+    register: UseFormRegister<FieldValues>;
+    errors: FieldErrors<FieldValues>;
+    setValue: UseFormSetValue<FieldValues>;
+    getValues: UseFormGetValues<FieldValues>;
+    watch: UseFormWatch<FieldValues>;
+    reset: UseFormReset<FieldValues>;
+    trigger: UseFormTrigger<FieldValues>;
+    clearErrors: UseFormClearErrors<FieldValues>;
+    setError: UseFormSetError<FieldValues>;
+    getFieldState: UseFormGetFieldState<FieldValues>;
+    unregister: UseFormUnregister<FieldValues>;
+    isDirty: boolean;
+    isSubmitted: boolean;
+    isSubmitting: boolean;
+    isValid: boolean;
+    dirtyFields: Partial<Readonly<Record<string, boolean>>>;
+    submit: () => void;
+}
+export declare const FormContext: import('react').Context<FormContextValue | null>;

package/dist/lib/mergeRefs.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'react';
+/** Combines multiple refs (a forwarded consumer ref, an internal ref) into a
+ *  single callback ref so they all point at the same DOM node. */
+export declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): (node: T | null) => void;

package/dist/lib/motion.d.ts

@@ -0,0 +1,11 @@
+/** Durations in ms for JS-driven transition timing (mount/unmount
+ *  orchestration). Kept in sync by hand with the Tailwind `duration-*`
+ *  utilities used alongside them in component classes — same
+ *  two-parallel-representations discipline as the token pipeline. */
+export declare const MOTION_DURATION: {
+    readonly fast: 150;
+    readonly base: 200;
+    readonly slow: 300;
+};
+/** True when the user has asked for reduced motion. SSR-safe. */
+export declare function prefersReducedMotion(): boolean;

package/dist/lib/useAnchoredPosition.d.ts

@@ -0,0 +1,31 @@
+import { CSSProperties, RefObject } from 'react';
+export type AnchoredSide = 'bottom' | 'top';
+export type AnchoredAlign = 'start' | 'end';
+export interface UseAnchoredPositionOptions {
+    /** A ref pointing at the anchor element, read fresh on every recompute —
+     *  never dereferenced by the caller, so the caller never has to read
+     *  `.current` during render or copy it into its own state. */
+    anchor: RefObject<HTMLElement | null> | null | undefined;
+    panel: HTMLElement | null;
+    open: boolean;
+    /** Preferred side. Flips to the opposite side when there isn't room, unless `flip` is false. */
+    side?: AnchoredSide;
+    align?: AnchoredAlign;
+    offset?: number;
+    flip?: boolean;
+    /** Clamp the panel horizontally so it stays inside the viewport. */
+    shift?: boolean;
+    matchAnchorWidth?: boolean;
+}
+export interface AnchoredPosition {
+    style: CSSProperties;
+    /** The side actually used, after flipping — for `data-side` and animation origin. */
+    resolvedSide: AnchoredSide;
+}
+/** Computes `position: fixed` coordinates for a panel anchored to a trigger
+ *  element, so the panel can portal to `document.body` without being
+ *  clipped by an `overflow: hidden` ancestor. Recomputes on open, resize,
+ *  and any ancestor scroll (capture-phase, since `position: fixed`
+ *  coordinates are viewport-relative and unaffected by scroll offset
+ *  themselves — but the anchor's rect moves when something scrolls). */
+export declare function useAnchoredPosition({ anchor, panel, open, side, align, offset, flip, shift, matchAnchorWidth, }: UseAnchoredPositionOptions): AnchoredPosition;

package/dist/lib/useFloatingPosition.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties, RefObject } from 'react';
+export type FloatingSide = 'top' | 'bottom' | 'left' | 'right';
+export type FloatingAlign = 'start' | 'center' | 'end';
+export interface UseFloatingPositionOptions {
+    /** A ref pointing at the anchor element, read fresh on every recompute. */
+    anchor: RefObject<HTMLElement | null> | null | undefined;
+    panel: HTMLElement | null;
+    open: boolean;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    offset?: number;
+    /** Flips to the opposite side on the same axis (top<->bottom, left<->right) when there isn't room. */
+    flip?: boolean;
+    /** Clamps the cross-axis position so the panel stays inside the viewport. */
+    shift?: boolean;
+}
+export interface FloatingPosition {
+    style: CSSProperties;
+    /** Positions the arrow at the anchor's center on the cross axis, relative to the panel's own box — apply on top of the arrow's own border/rotation classes, which are keyed off `resolvedSide` by the caller. */
+    arrowStyle: CSSProperties;
+    /** The side actually used, after flipping. */
+    resolvedSide: FloatingSide;
+}
+/** Computes `position: fixed` coordinates (+ a matching arrow offset) for a
+ *  panel anchored to a trigger element on any of 4 sides x 3 alignments,
+ *  so the panel can portal to `document.body` without being clipped by an
+ *  `overflow: hidden` ancestor. Recomputes on open, resize, and any
+ *  ancestor scroll. */
+export declare function useFloatingPosition({ anchor, panel, open, side, align, offset, flip, shift, }: UseFloatingPositionOptions): FloatingPosition;

package/dist/lib/useMountTransition.d.ts

@@ -0,0 +1,21 @@
+export type TransitionState = 'closed' | 'entering' | 'entered' | 'exiting';
+/** Keeps a node mounted through its exit transition instead of unmounting
+ *  the instant `open` goes false.
+ *  - `open` false -> true: `mounted` becomes `true` immediately, `state`
+ *    is `'entering'`, then flips to `'entered'` after *two* animation
+ *    frames — a single `requestAnimationFrame` fires before the browser
+ *    has actually painted the `'entering'` styles (React's commit, this
+ *    effect, and that one callback can all still land inside the same
+ *    frame), so the flip to `'entered'` can end up coalesced into the
+ *    same paint and never visibly transition. Waiting a full frame first
+ *    guarantees the browser paints the from-state at least once before
+ *    the to-state is applied, which is what makes a CSS transition
+ *    actually animate instead of jumping straight to its end value.
+ *  - `open` true -> false: `state` becomes `'exiting'`; `mounted` stays
+ *    `true` for `durationMs`, then both flip to `'closed'`/`false`.
+ *  - Honors `prefers-reduced-motion` by collapsing `durationMs` to `0`, so
+ *    a reduced-motion user never waits on an invisible mounted node. */
+export declare function useMountTransition(open: boolean, durationMs: number): {
+    mounted: boolean;
+    state: TransitionState;
+};