@udixio/ui-react 2.10.13 → 2.10.14

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>
-  );
-};