@luxfi/ui 5.6.0 → 6.0.0

package/src/radio.tsx

@@ -1,175 +0,0 @@
-import * as RadixRadioGroup from '@radix-ui/react-radio-group';
-// chakra() HOC removed — pure Radix + Tailwind
-import * as React from 'react';
-
-import { cn } from './utils';
-
-// ─── Size classes ───────────────────────────────────────────────────
-const SIZE_CLASSES = {
-  xs: {
-    root: 'gap-1.5',
-    control: 'h-3 w-3',
-    indicator: 'h-1.5 w-1.5',
-    label: 'text-xs',
-  },
-  sm: {
-    root: 'gap-1.5',
-    control: 'h-3.5 w-3.5',
-    indicator: 'h-1.5 w-1.5',
-    label: 'text-xs',
-  },
-  md: {
-    root: 'gap-2',
-    control: 'h-4 w-4',
-    indicator: 'h-2 w-2',
-    label: 'text-sm',
-  },
-  lg: {
-    root: 'gap-2.5',
-    control: 'h-5 w-5',
-    indicator: 'h-2.5 w-2.5',
-    label: 'text-base',
-  },
-} as const;
-
-type RadioSize = keyof typeof SIZE_CLASSES;
-
-// ─── Size context ───────────────────────────────────────────────────
-const RadioSizeContext = React.createContext<RadioSize>('md');
-
-// ─── RadioGroup ─────────────────────────────────────────────────────
-export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'dir'> {
-  name?: string;
-  required?: boolean;
-  disabled?: boolean;
-  readOnly?: boolean;
-  orientation?: 'horizontal' | 'vertical';
-  loop?: boolean;
-  defaultValue?: string;
-  value?: string | null;
-  onValueChange?: (details: { value: string | null }) => void;
-  size?: RadioSize;
-}
-
-const RadioGroupBase = React.forwardRef<HTMLDivElement, RadioGroupProps>(
-  function RadioGroup(props, ref) {
-    const {
-      children,
-      name,
-      required,
-      disabled = false,
-      readOnly = false,
-      orientation = 'vertical',
-      loop = true,
-      defaultValue,
-      value,
-      onValueChange,
-      size = 'md',
-      className,
-      ...rest
-    } = props;
-
-    const handleValueChange = React.useCallback(
-      (nextValue: string) => {
-        if (readOnly) return;
-        onValueChange?.({ value: nextValue });
-      },
-      [ readOnly, onValueChange ],
-    );
-
-    return (
-      <RadioSizeContext.Provider value={ size }>
-        <RadixRadioGroup.Root
-          ref={ ref }
-          name={ name }
-          required={ required }
-          disabled={ disabled || readOnly }
-          orientation={ orientation }
-          loop={ loop }
-          defaultValue={ defaultValue }
-          value={ value ?? undefined }
-          onValueChange={ handleValueChange }
-          className={ cn(
-            'flex',
-            orientation === 'vertical' ? 'flex-col gap-3' : 'flex-row gap-6',
-            className,
-          ) }
-          { ...rest }
-        >
-          { children }
-        </RadixRadioGroup.Root>
-      </RadioSizeContext.Provider>
-    );
-  },
-);
-
-export const RadioGroup = RadioGroupBase;
-
-const NOOP = () => { /* noop */ };
-
-// ─── Radio ──────────────────────────────────────────────────────────
-export interface RadioProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
-  rootRef?: React.Ref<HTMLLabelElement>;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-  value: string;
-  disabled?: boolean;
-}
-
-const RadioBase = React.forwardRef<HTMLInputElement, RadioProps>(
-  function Radio(props, ref) {
-    const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
-    const size = React.useContext(RadioSizeContext);
-    const sizeClasses = SIZE_CLASSES[size];
-
-    return (
-      <label
-        ref={ rootRef }
-        className={ cn(
-          'inline-flex items-center cursor-pointer select-none',
-          sizeClasses.root,
-          disabled && 'opacity-50 cursor-not-allowed',
-          className,
-        ) }
-        data-disabled={ disabled || undefined }
-        { ...rest }
-      >
-        <RadixRadioGroup.Item
-          value={ value }
-          disabled={ disabled }
-          className={ cn(
-            'inline-flex items-center justify-center shrink-0 rounded-full',
-            'border-2 border-current/30',
-            'data-[state=checked]:border-gray-800 dark:border-white',
-            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500',
-            'transition-colors duration-150',
-            sizeClasses.control,
-          ) }
-        >
-          <RadixRadioGroup.Indicator
-            className={ cn(
-              'block rounded-full bg-gray-800 dark:bg-white',
-              sizeClasses.indicator,
-            ) }
-          />
-        </RadixRadioGroup.Item>
-        { /* Hidden native input for form compatibility and ref forwarding */ }
-        <input
-          ref={ ref }
-          type="radio"
-          className="sr-only"
-          value={ value }
-          disabled={ disabled }
-          tabIndex={ -1 }
-          aria-hidden
-          onChange={ NOOP }
-          { ...inputProps }
-        />
-        { children != null && (
-          <span className={ sizeClasses.label }>{ children }</span>
-        ) }
-      </label>
-    );
-  },
-);
-
-export const Radio = RadioBase;

package/src/rating.tsx

@@ -1,79 +0,0 @@
-import * as React from 'react';
-
-import { cn } from './utils';
-
-// Inline star icons
-const StarFilledIcon = ({ className }: { readonly className?: string }) => (
-  <svg className={ className } viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
-  </svg>
-);
-const StarOutlineIcon = ({ className }: { readonly className?: string }) => (
-  <svg className={ className } viewBox="0 0 20 20" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" strokeWidth="1.5"/>
-  </svg>
-);
-
-export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
-  count?: number;
-  label?: string | Array<string>;
-  defaultValue?: number;
-  onValueChange?: ({ value }: { value: number }) => void;
-  readOnly?: boolean;
-}
-
-export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
-  function Rating(props, ref) {
-    const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
-
-    const [ value, setValue ] = React.useState(defaultValue);
-    const [ hoveredIndex, setHoveredIndex ] = React.useState(-1);
-
-    const highlightedIndex = hoveredIndex >= 0 && !readOnly ? hoveredIndex + 1 : value;
-    const label = Array.isArray(labelProp) ? labelProp[highlightedIndex - 1] : labelProp;
-
-    const handleClick = React.useCallback((index: number) => () => {
-      if (readOnly) return;
-      setValue(index);
-      onValueChange?.({ value: index });
-    }, [ readOnly, onValueChange ]);
-
-    const handleMouseEnter = React.useCallback((index: number) => () => {
-      if (readOnly) return;
-      setHoveredIndex(index);
-    }, [ readOnly ]);
-
-    const handleMouseLeave = React.useCallback(() => {
-      setHoveredIndex(-1);
-    }, []);
-
-    return (
-      <div ref={ ref } className={ cn('inline-flex items-center gap-1', className) } { ...rest }>
-        <div className="inline-flex items-center" onMouseLeave={ handleMouseLeave }>
-          { Array.from({ length: count }).map((_, index) => {
-            const filled = index < highlightedIndex;
-            const starIndex = index + 1;
-
-            return (
-              <button
-                key={ index }
-                type="button"
-                tabIndex={ readOnly ? -1 : 0 }
-                aria-label={ `Rate ${ starIndex } of ${ count }` }
-                className={ cn(
-                  'inline-flex items-center justify-center w-5 h-5 text-current',
-                  readOnly ? 'cursor-default' : 'cursor-pointer',
-                ) }
-                onClick={ handleClick(starIndex) }
-                onMouseEnter={ handleMouseEnter(index) }
-              >
-                { filled ? <StarFilledIcon className="w-5 h-5"/> : <StarOutlineIcon className="w-5 h-5"/> }
-              </button>
-            );
-          }) }
-        </div>
-        { label && <span className="text-sm">{ label }</span> }
-      </div>
-    );
-  },
-);