@udixio/ui-react 2.10.12 → 2.10.14

package/dist/scrollDriven-AP2yWhzi.js

@@ -1,121 +0,0 @@
-let y = !1, h = null;
-function C() {
-  if (typeof window > "u") return !1;
-  try {
-    if (window.CSS && typeof window.CSS.supports == "function")
-      return CSS.supports("animation-timeline: view()") || CSS.supports("animation-timeline: scroll()") || CSS.supports("view-timeline-name: --a");
-  } catch {
-  }
-  return !1;
-}
-function F() {
-  return typeof window > "u" || !("matchMedia" in window) ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function V(n, t) {
-  return getComputedStyle(n).getPropertyValue(t).trim() || null;
-}
-function b(n) {
-  if (!n) return null;
-  const t = n.split(/\s+/), e = t[t.length - 1];
-  if (!e) return null;
-  if (e.endsWith("%")) {
-    const r = parseFloat(e);
-    if (!isNaN(r)) return Math.max(0, Math.min(100, r)) / 100;
-  }
-  return null;
-}
-function L(n) {
-  const t = V(n, "--udx-range-start"), e = V(n, "--udx-range-end"), r = b(t) ?? 0.2, a = b(e) ?? 0.5, o = Math.max(0, Math.min(1, r)), l = Math.max(o + 1e-3, Math.min(1, a));
-  return { start: o, end: l };
-}
-function i(n, t) {
-  if (!n) return null;
-  const e = n.trim(), r = parseFloat(e);
-  return isNaN(r) ? null : r;
-}
-function p(n, t, e) {
-  return n + (t - n) * e;
-}
-function N(n, t, e, r) {
-  const a = t.opacity != null ? Number(t.opacity) : 1, o = e.opacity != null ? Number(e.opacity) : 1, l = p(a, o, r);
-  n.style.opacity = String(l);
-  const v = i(t["--tw-enter-translate-x"]) ?? i(t["--tw-exit-translate-x"]) ?? 0, g = i(t["--tw-enter-translate-y"]) ?? i(t["--tw-exit-translate-y"]) ?? 0, c = i(e["--tw-enter-translate-x"]) ?? i(e["--tw-exit-translate-x"]) ?? 0, u = i(e["--tw-enter-translate-y"]) ?? i(e["--tw-exit-translate-y"]) ?? 0, S = i(t["--tw-enter-scale"]) ?? i(t["--tw-exit-scale"]) ?? 1, M = i(e["--tw-enter-scale"]) ?? i(e["--tw-exit-scale"]) ?? 1, P = i(t["--tw-enter-rotate"]) ?? i(t["--tw-exit-rotate"]) ?? 0, f = i(e["--tw-enter-rotate"]) ?? i(e["--tw-exit-rotate"]) ?? 0, x = p(v, c, r), s = p(g, u, r), d = p(S, M, r), m = p(P, f, r), w = [];
-  (x !== 0 || s !== 0) && w.push(`translate3d(${x}px, ${s}px, 0)`), d !== 1 && w.push(`scale(${d})`), m !== 0 && w.push(`rotate(${m}deg)`), n.style.transform = w.length ? w.join(" ") : "none";
-}
-function T(n) {
-  const t = n.classList, e = t.contains("animate-in"), r = t.contains("animate-out");
-  if (!e && !r) return null;
-  const a = getComputedStyle(n), o = {
-    opacity: i(a.getPropertyValue("--tw-enter-opacity")) ?? void 0,
-    "--tw-enter-translate-x": a.getPropertyValue("--tw-enter-translate-x") || void 0,
-    "--tw-enter-translate-y": a.getPropertyValue("--tw-enter-translate-y") || void 0,
-    "--tw-enter-scale": a.getPropertyValue("--tw-enter-scale") || void 0,
-    "--tw-enter-rotate": a.getPropertyValue("--tw-enter-rotate") || void 0
-  }, l = {
-    opacity: i(a.getPropertyValue("--tw-exit-opacity")) ?? void 0,
-    "--tw-exit-translate-x": a.getPropertyValue("--tw-exit-translate-x") || void 0,
-    "--tw-exit-translate-y": a.getPropertyValue("--tw-exit-translate-y") || void 0,
-    "--tw-exit-scale": a.getPropertyValue("--tw-exit-scale") || void 0,
-    "--tw-exit-rotate": a.getPropertyValue("--tw-exit-rotate") || void 0
-  };
-  return e ? {
-    from: o,
-    to: { opacity: 1, "--tw-enter-translate-x": "0", "--tw-enter-translate-y": "0", "--tw-enter-scale": "1", "--tw-enter-rotate": "0" }
-  } : r ? {
-    from: { opacity: 1, "--tw-exit-translate-x": "0", "--tw-exit-translate-y": "0", "--tw-exit-scale": "1", "--tw-exit-rotate": "0" },
-    to: l
-  } : null;
-}
-function $() {
-  const n = [
-    ".udx-view",
-    ".udx-view-x",
-    ".udx-view-y",
-    ".udx-view-inline",
-    ".udx-view-block",
-    "[data-udx-view]"
-  ].map((t) => `${t}.animate-in, ${t}.animate-out`).join(", ");
-  return Array.from(document.querySelectorAll(n));
-}
-function k(n = {}) {
-  if (y) return h || (() => {
-  });
-  if (typeof window > "u") return () => {
-  };
-  if (C() || F())
-    return y = !0, () => {
-    };
-  y = !0;
-  const t = n.once ?? !0, e = /* @__PURE__ */ new WeakSet();
-  let r = null;
-  const a = () => {
-    const v = $(), g = window.innerHeight || 0;
-    for (const c of v) {
-      const u = c.getBoundingClientRect(), S = Math.min(u.bottom, g) - Math.max(u.top, 0), M = Math.max(0, Math.min(S, u.height)), P = u.height > 0 ? M / u.height : 0, { start: f, end: x } = L(c);
-      let s = (P - f) / (x - f);
-      s = Math.max(0, Math.min(1, s)), t && e.has(c) && s < 1 && (s = 1);
-      const d = T(c);
-      if (!d) continue;
-      const { from: m, to: w } = d;
-      N(c, m, w, s), s >= 1 && t && e.add(c);
-    }
-  }, o = () => {
-    r == null && (r = window.requestAnimationFrame(() => {
-      r = null, a();
-    }));
-  };
-  a(), window.addEventListener("scroll", o, { passive: !0 }), window.addEventListener("resize", o);
-  const l = new MutationObserver(() => {
-    o();
-  });
-  return l.observe(document.documentElement, {
-    childList: !0,
-    subtree: !0,
-    attributes: !0
-  }), h = () => {
-    window.removeEventListener("scroll", o), window.removeEventListener("resize", o), r != null && cancelAnimationFrame(r), l.disconnect(), y = !1, h = null;
-  }, h;
-}
-export {
-  k as initScrollViewFallback
-};

package/postcss.config.mjs

@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-};

package/src/index.css

@@ -1,4 +0,0 @@
-@import 'tailwindcss';
-@import "./udixio.css";
-
-

package/src/index.ts

@@ -1 +0,0 @@
-export * from './lib/index';

package/src/lib/components/AnchorPositioner.tsx

@@ -1,185 +0,0 @@
-import React, {
-  CSSProperties,
-  RefObject,
-  useId,
-  useLayoutEffect,
-  useState,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { SyncedFixedWrapper } from '../effects';
-import IntrinsicElements = React.JSX.IntrinsicElements;
-
-export type PositionKeyword =
-  | 'left'
-  | 'center'
-  | 'right'
-  | 'span-left'
-  | 'span-right'
-  | 'x-start'
-  | 'x-end'
-  | 'span-x-start'
-  | 'span-x-end'
-  | 'self-x-start'
-  | 'self-x-end'
-  | 'span-self-x-start'
-  | 'span-self-x-end'
-  | 'top'
-  | 'bottom'
-  | 'span-top'
-  | 'span-bottom'
-  | 'y-start'
-  | 'y-end'
-  | 'span-y-start'
-  | 'span-y-end'
-  | 'self-y-start'
-  | 'self-y-end'
-  | 'span-self-y-start'
-  | 'span-self-y-end'
-  | 'block-start'
-  | 'block-end'
-  | 'span-block-start'
-  | 'span-block-end'
-  | 'inline-start'
-  | 'inline-end'
-  | 'span-inline-start'
-  | 'span-inline-end'
-  | 'self-block-start'
-  | 'self-block-end'
-  | 'span-self-block-start'
-  | 'span-self-block-end'
-  | 'self-inline-start'
-  | 'self-inline-end'
-  | 'span-self-inline-start'
-  | 'span-self-inline-end'
-  | 'start'
-  | 'end'
-  | 'span-start'
-  | 'span-end'
-  | 'self-start'
-  | 'self-end'
-  | 'span-self-start'
-  | 'span-self-end'
-  | 'span-all';
-
-export type Position =
-  | PositionKeyword
-  | `${PositionKeyword} ${PositionKeyword}`
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'right-start'
-  | 'right-end'
-  | 'left-start'
-  | 'left-end';
-
-export interface AnchorPositionerProps {
-  anchorRef: RefObject<HTMLElement | null>;
-  position?: Position;
-  children: React.ReactNode;
-  style?: CSSProperties;
-  className?: string; // Optional if we want to wrap in a class
-}
-
-export const AnchorPositioner = ({
-  anchorRef,
-  position = 'bottom',
-  children,
-  style,
-  ...restProps
-}: AnchorPositionerProps & IntrinsicElements['div']) => {
-  const uniqueId = useId();
-  const anchorName = `--anchor-${uniqueId.replace(/:/g, '')}`;
-  const [supportsAnchor, setSupportsAnchor] = useState(false);
-
-  useLayoutEffect(() => {
-    if (typeof CSS !== 'undefined' && CSS.supports('anchor-name', '--a')) {
-      setSupportsAnchor(true);
-    }
-  }, []);
-
-  useLayoutEffect(() => {
-    if (supportsAnchor && anchorRef.current) {
-      const el = anchorRef.current;
-      // Apply anchor name to the reference element
-      (el.style as any).anchorName = anchorName;
-      return () => {
-        if (anchorRef.current) {
-          (anchorRef.current.style as any).anchorName = '';
-        }
-      };
-    }
-  }, [supportsAnchor, anchorRef, anchorName]);
-
-  if (supportsAnchor) {
-    const floatingStyles: CSSProperties = {
-      position: 'fixed',
-      margin: 0,
-      zIndex: 9999,
-      positionAnchor: anchorName,
-      positionArea: position,
-      positionTryFallbacks: 'flip-block, flip-inline', // Correct CSS prop
-      ...style,
-    } as any;
-
-    return createPortal(
-      <div style={floatingStyles} {...restProps}>
-        {children}
-      </div>,
-      document.body,
-    );
-  }
-
-  const fallbackStyles: CSSProperties = {
-    position: 'absolute',
-    pointerEvents: 'auto',
-    ...style,
-  };
-
-  switch (position) {
-    case 'top':
-      fallbackStyles.bottom = '100%';
-      fallbackStyles.left = '50%';
-      fallbackStyles.transform = 'translateX(-50%)';
-      break;
-    case 'top-left':
-      fallbackStyles.bottom = '100%';
-      fallbackStyles.left = 0;
-      break;
-    case 'top-right':
-      fallbackStyles.bottom = '100%';
-      fallbackStyles.right = 0;
-      break;
-    case 'bottom':
-      fallbackStyles.top = '100%';
-      fallbackStyles.left = '50%';
-      fallbackStyles.transform = 'translateX(-50%)';
-      break;
-    case 'bottom-left':
-      fallbackStyles.top = '100%';
-      fallbackStyles.left = 0;
-      break;
-    case 'bottom-right':
-      fallbackStyles.top = '100%';
-      fallbackStyles.right = 0;
-      break;
-    case 'left':
-      fallbackStyles.right = '100%';
-      fallbackStyles.top = '50%';
-      fallbackStyles.transform = 'translateY(-50%)';
-      break;
-    case 'right':
-      fallbackStyles.left = '100%';
-      fallbackStyles.top = '50%';
-      fallbackStyles.transform = 'translateY(-50%)';
-      break;
-  }
-
-  return (
-    <SyncedFixedWrapper targetRef={anchorRef}>
-      <div style={fallbackStyles} {...restProps}>
-        {children}
-      </div>
-    </SyncedFixedWrapper>
-  );
-};

package/src/lib/components/Button.tsx

@@ -1,208 +0,0 @@
-
-import { classNames, ReactProps } from '../utils';
-import { ButtonInterface } from '../interfaces';
-import { useButtonStyle } from '../styles';
-import { Icon } from '../icon';
-import { ProgressIndicator } from './ProgressIndicator';
-import { State } from '../effects';
-import React, { useEffect, useRef } from 'react';
-
-/**
- * Resolves variant aliases to their actual variant values
- */
-function resolveVariantAlias(
-  variant?:
-    | 'filled'
-    | 'elevated'
-    | 'tonal'
-    | 'outlined'
-    | 'text'
-    | 'primary'
-    | 'secondary',
-): 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text' {
-  const aliasMap = {
-    primary: 'filled',
-    secondary: 'tonal',
-  } as const;
-
-  if (variant && variant in aliasMap) {
-    return aliasMap[variant as keyof typeof aliasMap];
-  }
-
-  return (
-    (variant as 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text') ||
-    'filled'
-  );
-}
-
-/**
- * Buttons prompt most actions in a UI
- * @status beta
- * @category Action
- * @devx
- * - Requires `label` or children; used for visible text and a11y.
- * - `onToggle` uses internal state; pair with `activated` for controlled usage.
- * @limitations
- * - No explicit `type` prop; HTML button defaults may submit in forms.
- * - When `href` is set, `disabled` is visual only (no `aria-disabled`).
- */
-export const Button = ({
-  variant = 'filled',
-  disabled = false,
-  icon,
-  href,
-  label,
-  disableTextMargins,
-  className,
-  iconPosition = 'left',
-  loading = false,
-  shape = 'rounded',
-  onClick,
-  onToggle,
-  activated,
-  ref,
-  size = 'medium',
-  allowShapeTransformation = true,
-  transition,
-  children,
-  ...restProps
-}: ReactProps<ButtonInterface>) => {
-  if (children) label = children;
-  if (!label) {
-    throw new Error(
-      'Button component requires either a label prop or children content',
-    );
-  }
-  variant = resolveVariantAlias(variant);
-
-  const ElementType = href ? 'a' : 'button';
-
-  const defaultRef = useRef<HTMLDivElement>(null);
-  const resolvedRef = ref || defaultRef;
-
-  const [isActive, setIsActive] = React.useState(activated);
-  useEffect(() => {
-    setIsActive(activated);
-  }, [activated]);
-
-  transition = { duration: 0.3, ...transition };
-
-  const handleClick = (e: React.MouseEvent<any, MouseEvent>) => {
-    if (disabled) {
-      e.preventDefault();
-    }
-    if (onToggle) {
-      setIsActive(!isActive);
-      onToggle(!isActive);
-    } else if (onClick) {
-      onClick(e);
-    }
-  };
-
-  const styles = useButtonStyle({
-    allowShapeTransformation,
-    size,
-    disableTextMargins,
-    shape,
-    href,
-    disabled,
-    icon,
-    iconPosition,
-    loading,
-    variant,
-    transition,
-    className,
-    isActive: isActive ?? false,
-    onToggle,
-    activated: isActive,
-    label,
-    children: label,
-  });
-  const iconElement = icon ? (
-    <Icon icon={icon} className={styles.icon} />
-  ) : (
-    <></>
-  );
-
-  return (
-    <ElementType
-      ref={resolvedRef}
-      href={href}
-      className={styles.button}
-      {...(restProps as any)}
-      onClick={handleClick}
-      disabled={disabled}
-      aria-pressed={onToggle ? isActive : undefined}
-      style={{ transition: transition.duration + 's' }}
-    >
-      <div className={styles.touchTarget}></div>
-      <State
-        style={{ transition: transition.duration + 's' }}
-        className={styles.stateLayer}
-        colorName={classNames(
-          variant === 'filled' && {
-            'on-surface-variant': !isActive && Boolean(onToggle),
-            'on-primary': isActive || !onToggle,
-          },
-          variant === 'elevated' && {
-            'on-primary': isActive && Boolean(onToggle),
-            primary: !isActive || !onToggle,
-          },
-          variant === 'tonal' && {
-            'on-secondary': isActive && Boolean(onToggle),
-            'on-secondary-container': !isActive || !onToggle,
-          },
-          variant === 'outlined' && {
-            'inverse-on-surface': isActive && Boolean(onToggle),
-            'on-surface-variant': !isActive || !onToggle,
-          },
-          variant === 'text' && 'primary',
-        )}
-        stateClassName={'state-ripple-group-[button]'}
-      />
-
-      {iconPosition === 'left' && iconElement}
-      {loading && (
-        <div
-          className={
-            '!absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2'
-          }
-        >
-          <ProgressIndicator
-            className={() => ({
-              progressIndicator: 'h-6 w-6',
-              activeIndicator: classNames(
-                {
-                  '!stroke-primary': variant === 'elevated' && !disabled,
-                  '!stroke-on-surface/[38%]':
-                    variant === 'elevated' && disabled,
-                },
-                {
-                  '!stroke-on-primary': variant === 'filled' && !disabled,
-                  '!stroke-on-surface/[38%]': variant === 'filled' && disabled,
-                },
-                {
-                  '!stroke-on-secondary-container':
-                    variant === 'tonal' && !disabled,
-                  '!stroke-on-surface/[38%]': variant === 'tonal' && disabled,
-                },
-                {
-                  '!stroke-primary': variant === 'outlined' && !disabled,
-                  '!stroke-on-surface/[38%]':
-                    variant === 'outlined' && disabled,
-                },
-                {
-                  '!stroke-primary': variant === 'text' && !disabled,
-                  '!stroke-on-surface/[38%]': variant === 'text' && disabled,
-                },
-              ),
-            })}
-            variant={'circular-indeterminate'}
-          />
-        </div>
-      )}
-      <span className={styles.label}>{label}</span>
-      {iconPosition === 'right' && iconElement}
-    </ElementType>
-  );
-};

package/src/lib/components/Card.tsx

@@ -1,47 +0,0 @@
-import { useRef } from 'react';
-import { CardInterface } from '../interfaces';
-import { useCardStyle } from '../styles';
-import { ReactProps } from '../utils';
-import { State } from '../effects';
-
-/**
- * Cards display content and actions about a single subject
- * @status beta
- * @category Layout
- * @devx
- * - `interactive` only adds a state layer; add your own click/role semantics.
- * @limitations
- * - No built-in header/actions slots; layout is fully custom via children.
- */
-export const Card = ({
-  variant = 'outlined',
-  className,
-  children,
-  interactive = false,
-  ref,
-  ...rest
-}: ReactProps<CardInterface>) => {
-  const styles = useCardStyle({
-    className,
-    interactive,
-    variant,
-    children,
-  });
-
-  const defaultRef = useRef<HTMLDivElement>(null);
-  const resolvedRef = ref || defaultRef;
-
-  return (
-    <div {...rest} ref={resolvedRef} className={styles.card}>
-      {interactive && (
-        <State
-          className={styles.stateLayer}
-          colorName={'on-surface'}
-          stateClassName={'state-ripple-group-[card]'}
-        />
-      )}
-
-      {children}
-    </div>
-  );
-};