@luxfi/ui 6.1.2 → 7.0.0

package/src/radio.tsx

@@ -0,0 +1,175 @@
+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

@@ -0,0 +1,79 @@
+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>
+    );
+  },
+);