@mks2508/mks-ui 0.5.7 → 0.6.0

package/src/react-ui/components/MorphingPopover/index.tsx

@@ -1,186 +0,0 @@
-'use client';
-
-/**
- * MorphingPopover — a popover that animates from a trigger button to a target position.
- *
- * Uses CSS Anchor Positioning + Popover API + @starting-style for smooth morphing animations.
- *
- * @example
- * ```tsx
- * <MorphingPopover
- *   trigger="..."
- *   content={<div>Expanded content</div>}
- *   targetSize={{ width: 320, height: 200 }}
- * />
- * ```
- */
-
-import {
-  forwardRef,
-  type CSSProperties,
-} from 'react';
-import { cn } from '@/react-ui/lib/utils';
-import styles from './morphing-popover.module.css';
-import type {
-  IMorphingPopoverProps,
-  IMorphingButtonProps,
-  IMorphingPopoverWithTargetProps,
-} from './MorphingPopover.types';
-
-/**
- * MorphingPopover — animates from a circular trigger to an expanded popover.
- *
- * @param content - Content to display in the expanded popover
- * @param trigger - Trigger button content (default: "...")
- * @param targetSize - Expanded dimensions { width, height }
- * @param onOpen - Callback when popover opens
- * @param onClose - Callback when popover closes
- *
- * @example
- * ```tsx
- * <MorphingPopover
- *   trigger="+"
- *   content={<div>Expanded content</div>}
- *   targetSize={{ width: 320, height: 200 }}
- * />
- * ```
- */
-const MorphingPopover = forwardRef<HTMLButtonElement, IMorphingPopoverProps>(
-  (
-    {
-      content,
-      trigger = '\u22EF',
-      triggerClassName,
-      popoverClassName,
-      targetSize = { width: 220, height: 120 },
-      onOpen,
-      onClose,
-      popoverId = 'morphing-popover',
-    },
-    ref,
-  ) => {
-    const containerStyle: CSSProperties = {
-      '--target-width': `${targetSize.width}px`,
-      '--target-height': `${targetSize.height}px`,
-    } as CSSProperties;
-
-    const handleToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
-      const isOpen = (e.target as HTMLButtonElement).matches(':popover-open');
-      if (isOpen) {
-        onOpen?.();
-      } else {
-        onClose?.();
-      }
-    };
-
-    return (
-      <div
-        className={styles.morphingPopoverContainer}
-        style={containerStyle}
-      >
-        <button
-          ref={ref}
-          {...({
-            popovertarget: popoverId,
-            popoverTargetAction: 'toggle',
-          } as IMorphingButtonProps)}
-          className={cn(styles.morphingTrigger, triggerClassName)}
-          onClick={handleToggle}
-        >
-          {trigger}
-        </button>
-
-        <div
-          id={popoverId}
-          popover="auto"
-          className={cn(styles.morphingPopover, popoverClassName)}
-        >
-          {content}
-        </div>
-      </div>
-    );
-  },
-);
-
-MorphingPopover.displayName = 'MorphingPopover';
-
-/**
- * MorphingPopoverWithTarget — variant that animates to a specific target element.
- *
- * The target element must have CSS `anchor-name: --target-anchor` set on it.
- *
- * @param targetRef - Reference to the target element to anchor to
- * @param content - Content to display in the expanded popover
- *
- * @example
- * ```tsx
- * const targetRef = useRef<HTMLDivElement>(null);
- *
- * <div ref={targetRef} style={{ anchorName: '--target-anchor' }}>
- *   Drag me around
- * </div>
- *
- * <MorphingPopoverWithTarget
- *   targetRef={targetRef}
- *   content={<div>Content</div>}
- * />
- * ```
- */
-const MorphingPopoverWithTarget = forwardRef<
-  HTMLButtonElement,
-  IMorphingPopoverWithTargetProps
->(
-  (
-    {
-      content,
-      trigger = '\u22EF',
-      triggerClassName,
-      popoverClassName,
-      onOpen,
-      onClose,
-      popoverId = 'morphing-popover-target',
-    },
-    ref,
-  ) => {
-    const handleToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
-      const isOpen = (e.target as HTMLButtonElement).matches(':popover-open');
-      if (isOpen) {
-        onOpen?.();
-      } else {
-        onClose?.();
-      }
-    };
-
-    return (
-      <div className={styles.morphingPopoverTargetContainer}>
-        <button
-          ref={ref}
-          {...({
-            popovertarget: popoverId,
-            popoverTargetAction: 'toggle',
-          } as IMorphingButtonProps)}
-          className={cn(styles.morphingTrigger, triggerClassName)}
-          onClick={handleToggle}
-        >
-          {trigger}
-        </button>
-
-        <div
-          id={popoverId}
-          popover="auto"
-          className={cn(styles.morphingPopoverTarget, popoverClassName)}
-        >
-          {content}
-        </div>
-      </div>
-    );
-  },
-);
-
-MorphingPopoverWithTarget.displayName = 'MorphingPopoverWithTarget';
-
-export { MorphingPopover, MorphingPopoverWithTarget };
-export type {
-  IMorphingPopoverProps,
-  IMorphingPopoverWithTargetProps,
-} from './MorphingPopover.types';

package/src/react-ui/components/MorphingPopover/morphing-popover.module.css

@@ -1,153 +0,0 @@
-/* CSS Variables for anchor positioning */
-.morphingPopoverContainer {
-  position: relative;
-  display: inline-block;
-  --anchor-name: morphing-trigger;
-  --target-width: 220px;
-  --target-height: 120px;
-  --transition-duration: 0.2s;
-}
-
-/* Trigger button styles */
-.morphingTrigger {
-  anchor-name: var(--anchor-name);
-  width: 44px;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  font-size: 24px;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  transition: background-color 0.2s;
-}
-
-.morphingTrigger:hover {
-  background-color: hsl(var(--muted) / 0.5);
-}
-
-/* Popover styles - anchored to trigger by default */
-.morphingPopover {
-  position-anchor: var(--anchor-name);
-  left: anchor(left);
-  top: anchor(top);
-  width: anchor-size(width);
-  min-height: 0;
-  border-radius: 50%;
-  overflow: hidden;
-  padding: 0;
-  height: anchor-size(height);
-  transition-behavior: allow-discrete;
-  transition-property: display, overlay, width, height, top,
-    border-radius, left, position-anchor, transform, opacity;
-  transition-duration: var(--transition-duration);
-  transition-timing-function: ease-out;
-  transform-origin: center center;
-  opacity: 0;
-}
-
-/* When popover is open - expand to target size */
-.morphingPopover:popover-open {
-  position-anchor: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: var(--target-width);
-  height: var(--target-height);
-  border-radius: 12px;
-  opacity: 1;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
-}
-
-/* Starting style for animation - browser support required */
-@starting-style {
-  .morphingPopover:popover-open {
-    position-anchor: var(--anchor-name);
-    left: anchor(left);
-    top: anchor(top);
-    transform: none;
-    border-radius: 50%;
-    width: anchor-size(width);
-    height: anchor-size(height);
-    opacity: 0;
-  }
-}
-
-/* Fallback for browsers without anchor positioning */
-@supports not (anchor-name: none) {
-  .morphingPopover {
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%) scale(0.8);
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .morphingPopover:popover-open {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  @starting-style {
-    .morphingPopover:popover-open {
-      transform: translate(-50%, -50%) scale(0.8);
-      opacity: 0;
-    }
-  }
-}
-
-/* Variant: Morphing to a specific target element */
-.morphingPopoverTargetContainer {
-  position: relative;
-  display: inline-block;
-  --anchor-name: morphing-trigger;
-  --target-anchor-name: morphing-target;
-  --transition-duration: 0.2s;
-}
-
-.morphingPopoverTarget {
-  position-anchor: var(--anchor-name);
-  left: anchor(left);
-  top: anchor(top);
-  width: anchor-size(width);
-  min-height: 0;
-  border-radius: 50%;
-  overflow: hidden;
-  padding: 0;
-  height: anchor-size(height);
-  transition-behavior: allow-discrete;
-  transition-property: display, overlay, width, height, top,
-    border-radius, left, position-anchor, transform, opacity;
-  transition-duration: var(--transition-duration);
-  transition-timing-function: ease-out;
-}
-
-.morphingPopoverTarget:popover-open {
-  position-anchor: var(--target-anchor-name);
-  left: anchor(left);
-  top: anchor(top);
-  border-radius: 12px;
-  min-width: 200px;
-  min-height: 120px;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
-  opacity: 1;
-}
-
-@starting-style {
-  .morphingPopoverTarget:popover-open {
-    position-anchor: var(--anchor-name);
-    left: anchor(left);
-    top: anchor(top);
-    border-radius: 50%;
-    width: anchor-size(width);
-    height: anchor-size(height);
-    opacity: 0;
-  }
-}

package/src/react-ui/components/index.ts

@@ -1,9 +0,0 @@
-/**
- * Complex components barrel export.
- *
- * Components that use CSS modules or have complex internal structure.
- *
- * @module @mks2508/mks-ui/react/components
- */
-
-export * from './MorphingPopover';

package/src/react-ui/hooks/Animation/UseAutoHeight.tsx

@@ -1,123 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-/**
- * Options for the useAutoHeight hook.
- */
-interface IAutoHeightOptions {
-  /** Include parent element box model (padding, border) in measurement. */
-  includeParentBox?: boolean;
-  /** Include self element box model in measurement. */
-  includeSelfBox?: boolean;
-}
-
-/**
- * Hook that measures and tracks the height of an element with ResizeObserver.
- * Returns a ref to attach and the current height value.
- *
- * @param deps - Dependency list to trigger re-measurement
- * @param options - Configuration for box model inclusion
- * @returns Object with ref and height
- *
- * @example
- * ```tsx
- * const { ref, height } = useAutoHeight<HTMLDivElement>([content]);
- * <div style={{ height }}><div ref={ref}>{content}</div></div>
- * ```
- */
-export function useAutoHeight<T extends HTMLElement = HTMLDivElement>(
-  deps: React.DependencyList = [],
-  options: IAutoHeightOptions = {
-    includeParentBox: true,
-    includeSelfBox: false,
-  },
-) {
-  const ref = React.useRef<T | null>(null);
-  const roRef = React.useRef<ResizeObserver | null>(null);
-  const [height, setHeight] = React.useState(0);
-
-  const measure = React.useCallback(() => {
-    const el = ref.current;
-    if (!el) return 0;
-
-    const base = el.getBoundingClientRect().height || 0;
-
-    let extra = 0;
-
-    if (options.includeParentBox && el.parentElement) {
-      const cs = getComputedStyle(el.parentElement);
-      const paddingY =
-        (parseFloat(cs.paddingTop || '0') || 0) +
-        (parseFloat(cs.paddingBottom || '0') || 0);
-      const borderY =
-        (parseFloat(cs.borderTopWidth || '0') || 0) +
-        (parseFloat(cs.borderBottomWidth || '0') || 0);
-      const isBorderBox = cs.boxSizing === 'border-box';
-      if (isBorderBox) {
-        extra += paddingY + borderY;
-      }
-    }
-
-    if (options.includeSelfBox) {
-      const cs = getComputedStyle(el);
-      const paddingY =
-        (parseFloat(cs.paddingTop || '0') || 0) +
-        (parseFloat(cs.paddingBottom || '0') || 0);
-      const borderY =
-        (parseFloat(cs.borderTopWidth || '0') || 0) +
-        (parseFloat(cs.borderBottomWidth || '0') || 0);
-      const isBorderBox = cs.boxSizing === 'border-box';
-      if (isBorderBox) {
-        extra += paddingY + borderY;
-      }
-    }
-
-    const dpr =
-      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
-    const total = Math.ceil((base + extra) * dpr) / dpr;
-
-    return total;
-  }, [options.includeParentBox, options.includeSelfBox]);
-
-  React.useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    setHeight(measure());
-
-    if (roRef.current) {
-      roRef.current.disconnect();
-      roRef.current = null;
-    }
-
-    const ro = new ResizeObserver(() => {
-      const next = measure();
-      requestAnimationFrame(() => setHeight(next));
-    });
-
-    ro.observe(el);
-    if (options.includeParentBox && el.parentElement) {
-      ro.observe(el.parentElement);
-    }
-
-    roRef.current = ro;
-
-    return () => {
-      ro.disconnect();
-      roRef.current = null;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-
-  React.useLayoutEffect(() => {
-    if (height === 0) {
-      const next = measure();
-      if (next !== 0) setHeight(next);
-    }
-  }, [height, measure]);
-
-  return { ref, height } as const;
-}
-
-export type { IAutoHeightOptions };

package/src/react-ui/hooks/DOM/UseIsInView.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { useInView, type UseInViewOptions } from 'motion/react';
-
-/**
- * Options for the useIsInView hook.
- */
-interface IUseIsInViewOptions {
-  /** Enable intersection observer tracking. */
-  inView?: boolean;
-  /** Only trigger once when element enters viewport. */
-  inViewOnce?: boolean;
-  /** Root margin for intersection observer. */
-  inViewMargin?: UseInViewOptions['margin'];
-}
-
-/**
- * Hook that tracks whether an element is visible in the viewport
- * using the Intersection Observer API via motion/react.
- *
- * @param ref - Forwarded ref to merge with local ref
- * @param options - InView configuration options
- * @returns Object with local ref and isInView boolean
- *
- * @example
- * ```tsx
- * const { ref, isInView } = useIsInView(forwardedRef, { inView: true, inViewOnce: true });
- * ```
- */
-function useIsInView<T extends HTMLElement = HTMLElement>(
-  ref: React.Ref<T>,
-  options: IUseIsInViewOptions = {},
-) {
-  const { inView, inViewOnce = false, inViewMargin = '0px' } = options;
-  const localRef = React.useRef<T>(null);
-  React.useImperativeHandle(ref, () => localRef.current as T);
-  const inViewResult = useInView(localRef, {
-    once: inViewOnce,
-    margin: inViewMargin,
-  });
-  const isInView = !inView || inViewResult;
-  return { ref: localRef, isInView };
-}
-
-export { useIsInView, type IUseIsInViewOptions };

package/src/react-ui/hooks/Formatting/UseListFormat.ts

@@ -1,134 +0,0 @@
-import { useMemo } from 'react';
-
-/** Intl.ListFormat conjunction/disjunction/unit type */
-export type ListFormatType = 'conjunction' | 'disjunction' | 'unit';
-
-/** Intl.ListFormat style: long, short, or narrow */
-export type ListFormatStyle = 'long' | 'short' | 'narrow';
-
-/** Options for useListFormat hook */
-export interface IUseListFormatOptions {
-  locale?: string;
-  type?: ListFormatType;
-  style?: ListFormatStyle;
-  separator?: string;
-  /** If true, format as if there's one more item (avoids "and" before overflow counter) */
-  hasOverflow?: boolean;
-}
-
-/** A single part of a formatted list (element or separator) */
-export interface IListPart {
-  type: 'element' | 'literal';
-  value: string;
-  index: number;
-}
-
-const getDefaultLocale = (): string => {
-  if (typeof navigator !== 'undefined' && navigator.language) {
-    return navigator.language;
-  }
-  return 'en';
-};
-
-/**
- * Hook for locale-aware list formatting using Intl.ListFormat.
- *
- * Provides parts that can be rendered individually with animations.
- * Uses the browser's Intl.ListFormat API for proper locale handling.
- *
- * @param items - Array of strings to format
- * @param options - Locale, type, style, separator override, overflow flag
- * @returns Array of list parts (elements and literals)
- *
- * @example
- * ```tsx
- * // Automatic locale detection
- * const parts = useListFormat(['Apple', 'Banana', 'Cherry']);
- * // en: [{ type: 'element', value: 'Apple' }, { type: 'literal', value: ', ' }, ...]
- *
- * // Spanish
- * const parts = useListFormat(['Apple', 'Banana'], { locale: 'es' });
- *
- * // Disjunction ("or")
- * const parts = useListFormat(['A', 'B', 'C'], { type: 'disjunction' });
- * // en: "A, B, or C"
- *
- * // Manual separator override
- * const parts = useListFormat(['A', 'B', 'C'], { separator: ' | ' });
- * // "A | B | C"
- * ```
- */
-export function useListFormat(
-  items: string[],
-  options: IUseListFormatOptions = {}
-): IListPart[] {
-  const {
-    locale,
-    type = 'conjunction',
-    style = 'long',
-    separator,
-    hasOverflow
-  } = options;
-
-  return useMemo(() => {
-    if (items.length === 0) return [];
-
-    // Manual override mode: use fixed separator
-    if (separator !== undefined) {
-      const parts: IListPart[] = [];
-      items.forEach((item, i) => {
-        parts.push({ type: 'element', value: item, index: i });
-        if (i < items.length - 1) {
-          parts.push({ type: 'literal', value: separator, index: i });
-        }
-      });
-      return parts;
-    }
-
-    // Use Intl.ListFormat for locale-aware formatting
-    const resolvedLocale = locale ?? getDefaultLocale();
-
-    try {
-      const formatter = new Intl.ListFormat(resolvedLocale, { type, style });
-
-      // If hasOverflow, add a placeholder to make Intl.ListFormat use commas
-      // instead of "and" before the overflow counter
-      const itemsToFormat = (hasOverflow && items.length > 1)
-        ? [...items, '']
-        : items;
-
-      const formatted = formatter.formatToParts(itemsToFormat);
-
-      // If hasOverflow, remove the last part (placeholder and its separator)
-      const partsToProcess = hasOverflow
-        ? formatted.slice(0, -2)
-        : formatted;
-
-      let elementIndex = 0;
-      return partsToProcess.map((part): IListPart => {
-        if (part.type === 'element') {
-          return {
-            type: 'element',
-            value: part.value,
-            index: elementIndex++
-          };
-        }
-        return {
-          type: 'literal',
-          value: part.value,
-          index: Math.max(0, elementIndex - 1)
-        };
-      });
-    } catch {
-      // Fallback if Intl.ListFormat fails
-      const parts: IListPart[] = [];
-      items.forEach((item, i) => {
-        parts.push({ type: 'element', value: item, index: i });
-        if (i < items.length - 1) {
-          parts.push({ type: 'literal', value: ', ', index: i });
-        }
-      });
-      return parts;
-    }
-  }, [items, locale, type, style, separator, hasOverflow]);
-}

package/src/react-ui/hooks/State/UseControlledState.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-
-/**
- * Props for useControlledState hook.
- */
-interface IControlledStateProps<T> {
-  /** Controlled value. */
-  value?: T;
-  /** Default value for uncontrolled usage. */
-  defaultValue?: T;
-}
-
-/**
- * Hook for controlled/uncontrolled state management.
- * Supports both patterns seamlessly — when `value` is provided, it's controlled;
- * otherwise uses internal state initialized from `defaultValue`.
- *
- * @param props - Value, defaultValue, and onChange callback
- * @returns Tuple of [currentValue, setValue]
- *
- * @example
- * ```tsx
- * const [open, setOpen] = useControlledState({
- *   value: props.open,
- *   defaultValue: false,
- *   onChange: props.onOpenChange,
- * });
- * ```
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useControlledState<T, Rest extends any[] = []>(
-  props: IControlledStateProps<T> & {
-    onChange?: (value: T, ...args: Rest) => void;
-  },
-): readonly [T, (next: T, ...args: Rest) => void] {
-  const { value, defaultValue, onChange } = props;
-
-  const [state, setInternalState] = React.useState<T>(
-    value !== undefined ? value : (defaultValue as T),
-  );
-
-  React.useEffect(() => {
-    if (value !== undefined) setInternalState(value);
-  }, [value]);
-
-  const setState = React.useCallback(
-    (next: T, ...args: Rest) => {
-      setInternalState(next);
-      onChange?.(next, ...args);
-    },
-    [onChange],
-  );
-
-  return [state, setState] as const;
-}
-
-export type { IControlledStateProps };