@vadimcomanescu/nadicode-design-system 2.0.0

package/dist/components/animate-ui/primitives/effects/highlight.d.ts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { type Transition } from 'motion/react';
+type HighlightMode = 'children' | 'parent';
+type Bounds = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+type HighlightContextType<T extends string> = {
+    as?: keyof HTMLElementTagNameMap;
+    mode: HighlightMode;
+    activeValue: T | null;
+    setActiveValue: (value: T | null) => void;
+    setBounds: (bounds: DOMRect) => void;
+    clearBounds: () => void;
+    id: string;
+    hover: boolean;
+    click: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    activeClassName?: string;
+    setActiveClassName: (className: string) => void;
+    transition?: Transition;
+    disabled?: boolean;
+    enabled?: boolean;
+    exitDelay?: number;
+    forceUpdateBounds?: boolean;
+};
+declare function useHighlight<T extends string>(): HighlightContextType<T>;
+type BaseHighlightProps<T extends React.ElementType = 'div'> = {
+    as?: T;
+    ref?: React.Ref<HTMLDivElement>;
+    mode?: HighlightMode;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    transition?: Transition;
+    hover?: boolean;
+    click?: boolean;
+    disabled?: boolean;
+    enabled?: boolean;
+    exitDelay?: number;
+};
+type ParentModeHighlightProps = {
+    boundsOffset?: Partial<Bounds>;
+    containerClassName?: string;
+    forceUpdateBounds?: boolean;
+};
+type ControlledParentModeHighlightProps<T extends React.ElementType = 'div'> = BaseHighlightProps<T> & ParentModeHighlightProps & {
+    mode: 'parent';
+    controlledItems: true;
+    children: React.ReactNode;
+};
+type ControlledChildrenModeHighlightProps<T extends React.ElementType = 'div'> = BaseHighlightProps<T> & {
+    mode?: 'children' | undefined;
+    controlledItems: true;
+    children: React.ReactNode;
+};
+type UncontrolledParentModeHighlightProps<T extends React.ElementType = 'div'> = BaseHighlightProps<T> & ParentModeHighlightProps & {
+    mode: 'parent';
+    controlledItems?: false;
+    itemsClassName?: string;
+    children: React.ReactElement | React.ReactElement[];
+};
+type UncontrolledChildrenModeHighlightProps<T extends React.ElementType = 'div'> = BaseHighlightProps<T> & {
+    mode?: 'children';
+    controlledItems?: false;
+    itemsClassName?: string;
+    children: React.ReactElement | React.ReactElement[];
+};
+type HighlightProps<T extends React.ElementType = 'div'> = ControlledParentModeHighlightProps<T> | ControlledChildrenModeHighlightProps<T> | UncontrolledParentModeHighlightProps<T> | UncontrolledChildrenModeHighlightProps<T>;
+declare function Highlight<T extends React.ElementType = 'div'>({ ref, ...props }: HighlightProps<T>): import("react/jsx-runtime").JSX.Element;
+type HighlightItemProps<T extends React.ElementType = 'div'> = React.ComponentProps<T> & {
+    as?: T;
+    children: React.ReactElement;
+    id?: string;
+    value?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    transition?: Transition;
+    activeClassName?: string;
+    disabled?: boolean;
+    exitDelay?: number;
+    asChild?: boolean;
+    forceUpdateBounds?: boolean;
+};
+declare function HighlightItem<T extends React.ElementType>({ ref, as, children, id, value, className, style, transition, disabled, activeClassName, exitDelay, asChild, forceUpdateBounds, ...props }: HighlightItemProps<T>): any;
+export { Highlight, HighlightItem, useHighlight, type HighlightProps, type HighlightItemProps, };

package/dist/components/animate-ui/primitives/effects/highlight.js

@@ -0,0 +1,433 @@
+'use client';
+import { useMotionConfig, m } from '../../../../chunk-PD2YEH3H.js';
+import '../../../../chunk-CRY67BIF.js';
+import '../../../../chunk-HJC6U46F.js';
+import { cn } from '../../../../chunk-QYZT24TS.js';
+import * as React from 'react';
+import { use } from 'react';
+import { AnimatePresence } from 'motion/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_BOUNDS_OFFSET = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
+var HighlightContext = React.createContext(void 0);
+function useHighlight() {
+  const context = use(HighlightContext);
+  if (!context) {
+    throw new Error("useHighlight must be used within a HighlightProvider");
+  }
+  return context;
+}
+function Highlight({
+  ref,
+  ...props
+}) {
+  const {
+    as: Component = "div",
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    style,
+    transition = { type: "spring", stiffness: 350, damping: 35 },
+    hover = false,
+    click = true,
+    enabled = true,
+    controlledItems,
+    disabled = false,
+    exitDelay = 200,
+    mode = "children"
+  } = props;
+  const motionConfig = useMotionConfig();
+  const localRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => localRef.current);
+  const propsBoundsOffset = props?.boundsOffset;
+  const boundsOffset = propsBoundsOffset ?? DEFAULT_BOUNDS_OFFSET;
+  const boundsOffsetTop = boundsOffset.top ?? 0;
+  const boundsOffsetLeft = boundsOffset.left ?? 0;
+  const boundsOffsetWidth = boundsOffset.width ?? 0;
+  const boundsOffsetHeight = boundsOffset.height ?? 0;
+  const boundsOffsetRef = React.useRef({
+    top: boundsOffsetTop,
+    left: boundsOffsetLeft,
+    width: boundsOffsetWidth,
+    height: boundsOffsetHeight
+  });
+  React.useEffect(() => {
+    boundsOffsetRef.current = {
+      top: boundsOffsetTop,
+      left: boundsOffsetLeft,
+      width: boundsOffsetWidth,
+      height: boundsOffsetHeight
+    };
+  }, [
+    boundsOffsetTop,
+    boundsOffsetLeft,
+    boundsOffsetWidth,
+    boundsOffsetHeight
+  ]);
+  const [internalValue, setInternalValue] = React.useState(
+    value ?? defaultValue ?? null
+  );
+  const activeValue = value !== void 0 ? value : internalValue;
+  const [boundsState, setBoundsState] = React.useState(null);
+  const [activeClassNameState, setActiveClassNameState] = React.useState("");
+  const safeSetActiveValue = (id2) => {
+    if (activeValue !== id2) {
+      onValueChange?.(id2);
+    }
+    setInternalValue(id2);
+  };
+  const safeSetBoundsRef = React.useRef(void 0);
+  React.useEffect(() => {
+    safeSetBoundsRef.current = (bounds) => {
+      if (!localRef.current) return;
+      const containerRect = localRef.current.getBoundingClientRect();
+      const offset = boundsOffsetRef.current;
+      const newBounds = {
+        top: bounds.top - containerRect.top + offset.top,
+        left: bounds.left - containerRect.left + offset.left,
+        width: bounds.width + offset.width,
+        height: bounds.height + offset.height
+      };
+      setBoundsState((prev) => {
+        if (prev && prev.top === newBounds.top && prev.left === newBounds.left && prev.width === newBounds.width && prev.height === newBounds.height) {
+          return prev;
+        }
+        return newBounds;
+      });
+    };
+  });
+  const safeSetBounds = (bounds) => {
+    safeSetBoundsRef.current?.(bounds);
+  };
+  const clearBounds = React.useCallback(() => {
+    setBoundsState((prev) => prev === null ? prev : null);
+  }, []);
+  const id = React.useId();
+  React.useEffect(() => {
+    if (mode !== "parent") return;
+    const container = localRef.current;
+    if (!container) return;
+    const onScroll = () => {
+      if (!activeValue) return;
+      const activeEl = container.querySelector(
+        `[data-value="${activeValue}"][data-highlight="true"]`
+      );
+      if (activeEl)
+        safeSetBoundsRef.current?.(activeEl.getBoundingClientRect());
+    };
+    container.addEventListener("scroll", onScroll, { passive: true });
+    return () => container.removeEventListener("scroll", onScroll);
+  }, [mode, activeValue]);
+  const render = (children2) => {
+    if (mode === "parent") {
+      return /* @__PURE__ */ jsxs(
+        Component,
+        {
+          ref: localRef,
+          "data-slot": "motion-highlight-container",
+          style: { position: "relative", zIndex: 1 },
+          className: props?.containerClassName,
+          children: [
+            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !!boundsState && /* @__PURE__ */ jsx(
+              m.div,
+              {
+                "data-slot": "motion-highlight",
+                animate: {
+                  top: boundsState.top,
+                  left: boundsState.left,
+                  width: boundsState.width,
+                  height: boundsState.height,
+                  opacity: 1
+                },
+                initial: {
+                  top: boundsState.top,
+                  left: boundsState.left,
+                  width: boundsState.width,
+                  height: boundsState.height,
+                  opacity: 0
+                },
+                exit: {
+                  opacity: 0,
+                  transition: {
+                    ...transition,
+                    delay: (transition?.delay ?? 0) + (exitDelay ?? 0) / 1e3,
+                    ...motionConfig
+                  }
+                },
+                transition: { ...transition, ...motionConfig },
+                style: { position: "absolute", zIndex: 0, ...style },
+                className: cn(className, activeClassNameState)
+              }
+            ) }),
+            children2
+          ]
+        }
+      );
+    }
+    return children2;
+  };
+  return /* @__PURE__ */ jsx(
+    HighlightContext.Provider,
+    {
+      value: {
+        mode,
+        activeValue,
+        setActiveValue: safeSetActiveValue,
+        id,
+        hover,
+        click,
+        className,
+        style,
+        transition,
+        disabled,
+        enabled,
+        exitDelay,
+        setBounds: safeSetBounds,
+        clearBounds,
+        activeClassName: activeClassNameState,
+        setActiveClassName: setActiveClassNameState,
+        forceUpdateBounds: props?.forceUpdateBounds
+      },
+      children: enabled ? controlledItems ? render(children) : render(
+        React.Children.map(children, (child, index) => /* @__PURE__ */ jsx(HighlightItem, { className: props?.itemsClassName, children: child }, index))
+      ) : children
+    }
+  );
+}
+function getNonOverridingDataAttributes(element, dataAttributes) {
+  return Object.keys(dataAttributes).reduce(
+    (acc, key) => {
+      if (element.props[key] === void 0) {
+        acc[key] = dataAttributes[key];
+      }
+      return acc;
+    },
+    {}
+  );
+}
+function HighlightItem({
+  ref,
+  as,
+  children,
+  id,
+  value,
+  className,
+  style,
+  transition,
+  disabled = false,
+  activeClassName,
+  exitDelay,
+  asChild = false,
+  forceUpdateBounds,
+  ...props
+}) {
+  const motionConfig = useMotionConfig();
+  const itemId = React.useId();
+  const {
+    activeValue,
+    setActiveValue,
+    mode,
+    setBounds,
+    clearBounds,
+    hover,
+    click,
+    enabled,
+    className: contextClassName,
+    style: contextStyle,
+    transition: contextTransition,
+    id: contextId,
+    disabled: contextDisabled,
+    exitDelay: contextExitDelay,
+    forceUpdateBounds: contextForceUpdateBounds,
+    setActiveClassName
+  } = useHighlight();
+  const Component = as ?? "div";
+  const element = children;
+  const childValue = id ?? value ?? element.props?.["data-value"] ?? element.props?.id ?? itemId;
+  const isActive = activeValue === childValue;
+  const isDisabled = disabled === void 0 ? contextDisabled : disabled;
+  const itemTransition = transition ?? contextTransition;
+  const localRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => localRef.current);
+  const refCallback = React.useCallback((node) => {
+    localRef.current = node;
+  }, []);
+  React.useEffect(() => {
+    if (mode !== "parent") return;
+    let rafId;
+    let previousBounds = null;
+    const shouldUpdateBounds = forceUpdateBounds === true || contextForceUpdateBounds && forceUpdateBounds !== false;
+    const updateBounds = () => {
+      if (!localRef.current) return;
+      const bounds = localRef.current.getBoundingClientRect();
+      if (shouldUpdateBounds) {
+        if (previousBounds && previousBounds.top === bounds.top && previousBounds.left === bounds.left && previousBounds.width === bounds.width && previousBounds.height === bounds.height) {
+          rafId = requestAnimationFrame(updateBounds);
+          return;
+        }
+        previousBounds = bounds;
+        rafId = requestAnimationFrame(updateBounds);
+      }
+      setBounds(bounds);
+    };
+    if (isActive) {
+      updateBounds();
+      setActiveClassName(activeClassName ?? "");
+    } else if (!activeValue) clearBounds();
+    if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId);
+  }, [
+    mode,
+    isActive,
+    activeValue,
+    setBounds,
+    clearBounds,
+    activeClassName,
+    setActiveClassName,
+    forceUpdateBounds,
+    contextForceUpdateBounds
+  ]);
+  if (!React.isValidElement(children)) return children;
+  const dataAttributes = {
+    "data-active": isActive ? "true" : "false",
+    "aria-selected": isActive,
+    "data-disabled": isDisabled,
+    "data-value": childValue,
+    "data-highlight": true
+  };
+  const commonHandlers = hover ? {
+    onMouseEnter: (e) => {
+      setActiveValue(childValue);
+      element.props.onMouseEnter?.(e);
+    },
+    onMouseLeave: (e) => {
+      setActiveValue(null);
+      element.props.onMouseLeave?.(e);
+    }
+  } : click ? {
+    onClick: (e) => {
+      setActiveValue(childValue);
+      element.props.onClick?.(e);
+    }
+  } : {};
+  if (asChild) {
+    if (mode === "children") {
+      return React.cloneElement(
+        element,
+        {
+          key: childValue,
+          ref: refCallback,
+          className: cn("relative", element.props.className),
+          ...getNonOverridingDataAttributes(element, {
+            ...dataAttributes,
+            "data-slot": "motion-highlight-item-container"
+          }),
+          ...commonHandlers,
+          ...props
+        },
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: isActive && !isDisabled && /* @__PURE__ */ jsx(
+            m.div,
+            {
+              layoutId: `transition-background-${contextId}`,
+              "data-slot": "motion-highlight",
+              style: {
+                position: "absolute",
+                zIndex: 0,
+                ...contextStyle,
+                ...style
+              },
+              className: cn(contextClassName, activeClassName),
+              transition: { ...itemTransition, ...motionConfig },
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: {
+                opacity: 0,
+                transition: {
+                  ...itemTransition,
+                  delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3,
+                  ...motionConfig
+                }
+              },
+              ...dataAttributes
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Component,
+            {
+              "data-slot": "motion-highlight-item",
+              style: { position: "relative", zIndex: 1 },
+              className,
+              ...dataAttributes,
+              children
+            }
+          )
+        ] })
+      );
+    }
+    return React.cloneElement(element, {
+      ref: refCallback,
+      ...getNonOverridingDataAttributes(element, {
+        ...dataAttributes,
+        "data-slot": "motion-highlight-item"
+      }),
+      ...commonHandlers
+    });
+  }
+  return enabled ? /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ref: localRef,
+      "data-slot": "motion-highlight-item-container",
+      className: cn(mode === "children" && "relative", className),
+      ...dataAttributes,
+      ...props,
+      ...commonHandlers,
+      children: [
+        mode === "children" && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: isActive && !isDisabled && /* @__PURE__ */ jsx(
+          m.div,
+          {
+            layoutId: `transition-background-${contextId}`,
+            "data-slot": "motion-highlight",
+            style: {
+              position: "absolute",
+              zIndex: 0,
+              ...contextStyle,
+              ...style
+            },
+            className: cn(contextClassName, activeClassName),
+            transition: { ...itemTransition, ...motionConfig },
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: {
+              opacity: 0,
+              transition: {
+                ...itemTransition,
+                delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3,
+                ...motionConfig
+              }
+            },
+            ...dataAttributes
+          }
+        ) }),
+        React.cloneElement(element, {
+          style: { position: "relative", zIndex: 1 },
+          className: element.props.className,
+          ...getNonOverridingDataAttributes(element, {
+            ...dataAttributes,
+            "data-slot": "motion-highlight-item"
+          })
+        })
+      ]
+    },
+    childValue
+  ) : children;
+}
+
+export { Highlight, HighlightItem, useHighlight };

package/dist/components/animate-ui/primitives/effects/shine.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+type ShineProps = React.ComponentProps<'div'> & {
+    color?: string;
+    opacity?: number;
+    delay?: number;
+    duration?: number;
+    loop?: boolean;
+    loopDelay?: number;
+    deg?: number;
+    enable?: boolean;
+    enableOnHover?: boolean;
+    enableOnTap?: boolean;
+    asChild?: boolean;
+    children?: React.ReactNode;
+};
+declare const Shine: ({ color, opacity, delay, duration, loop, loopDelay, deg, enable, enableOnHover, enableOnTap, asChild, style, children, onMouseEnter, onMouseLeave, onPointerDown, ...props }: ShineProps) => import("react/jsx-runtime").JSX.Element | null;
+export { Shine, type ShineProps };

package/dist/components/animate-ui/primitives/effects/shine.js

@@ -0,0 +1,5 @@
+'use client';
+export { Shine } from '../../../../chunk-DARC2ACH.js';
+import '../../../../chunk-PD2YEH3H.js';
+import '../../../../chunk-CRY67BIF.js';
+import '../../../../chunk-HJC6U46F.js';

package/dist/components/animate-ui/primitives/effects/slide.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { type HTMLMotionProps } from 'motion/react';
+import { type UseIsInViewOptions } from '../../../../hooks/use-is-in-view';
+import { type WithAsChild } from '../animate/slot';
+type SlideDirection = 'up' | 'down' | 'left' | 'right';
+type SlideProps = WithAsChild<{
+    children?: React.ReactNode;
+    delay?: number;
+    direction?: SlideDirection;
+    offset?: number;
+    ref?: React.Ref<HTMLElement>;
+} & UseIsInViewOptions & HTMLMotionProps<'div'>>;
+declare function Slide({ ref, transition, delay, inView, inViewMargin, inViewOnce, direction, offset, asChild, ...props }: SlideProps): import("react/jsx-runtime").JSX.Element;
+type SlideListProps = Omit<SlideProps, 'children'> & {
+    children: React.ReactElement | React.ReactElement[];
+    holdDelay?: number;
+};
+declare function Slides({ children, delay, holdDelay, ...props }: SlideListProps): import("react/jsx-runtime").JSX.Element;
+export { Slide, Slides, type SlideProps, type SlideListProps, type SlideDirection, };

package/dist/components/animate-ui/primitives/effects/slide.js

@@ -0,0 +1,74 @@
+'use client';
+import { Slot } from '../../../../chunk-XBBR4PLJ.js';
+import { useIsInView } from '../../../../chunk-4O6L5YWT.js';
+import { useMotionConfig, m } from '../../../../chunk-PD2YEH3H.js';
+import '../../../../chunk-CRY67BIF.js';
+import '../../../../chunk-HJC6U46F.js';
+import '../../../../chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_SLIDE_TRANSITION = { type: "spring", stiffness: 200, damping: 20 };
+function Slide({
+  ref,
+  transition = DEFAULT_SLIDE_TRANSITION,
+  delay = 0,
+  inView = false,
+  inViewMargin = "0px",
+  inViewOnce = true,
+  direction = "up",
+  offset = 100,
+  asChild = false,
+  ...props
+}) {
+  const motionConfig = useMotionConfig();
+  const { ref: localRef, isInView } = useIsInView(
+    ref,
+    {
+      inView,
+      inViewOnce,
+      inViewMargin
+    }
+  );
+  const axis = direction === "up" || direction === "down" ? "y" : "x";
+  const hidden = {
+    [axis]: direction === "right" || direction === "down" ? -offset : offset
+  };
+  const visible = { [axis]: 0 };
+  const Component = asChild ? Slot : m.div;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: localRef,
+      initial: "hidden",
+      animate: isInView ? "visible" : "hidden",
+      exit: "hidden",
+      variants: { hidden, visible },
+      transition: {
+        ...transition,
+        delay: (transition?.delay ?? 0) + delay / 1e3,
+        ...motionConfig
+      },
+      ...props
+    }
+  );
+}
+function Slides({
+  children,
+  delay = 0,
+  holdDelay = 0,
+  ...props
+}) {
+  const array = React.Children.toArray(children);
+  return /* @__PURE__ */ jsx(Fragment, { children: array.map((child, index) => /* @__PURE__ */ jsx(
+    Slide,
+    {
+      delay: delay + index * holdDelay,
+      ...props,
+      children: child
+    },
+    child.key ?? index
+  )) });
+}
+
+export { Slide, Slides };

package/dist/components/animate-ui/primitives/effects/zoom.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { type HTMLMotionProps } from 'motion/react';
+import { type UseIsInViewOptions } from '../../../../hooks/use-is-in-view';
+import { type WithAsChild } from '../animate/slot';
+type ZoomProps = WithAsChild<{
+    children?: React.ReactNode;
+    delay?: number;
+    initialScale?: number;
+    scale?: number;
+    ref?: React.Ref<HTMLElement>;
+} & UseIsInViewOptions & HTMLMotionProps<'div'>>;
+declare function Zoom({ ref, transition, delay, inView, inViewMargin, inViewOnce, initialScale, scale, asChild, ...props }: ZoomProps): import("react/jsx-runtime").JSX.Element;
+type ZoomListProps = Omit<ZoomProps, 'children'> & {
+    children: React.ReactElement | React.ReactElement[];
+    holdDelay?: number;
+};
+declare function Zooms({ children, delay, holdDelay, ...props }: ZoomListProps): import("react/jsx-runtime").JSX.Element;
+export { Zoom, Zooms, type ZoomProps, type ZoomListProps };