@mihcm/ui 0.14.1

package/src/Skeleton.native.tsx

@@ -0,0 +1,47 @@
+/**
+ * Skeleton (React Native variant).
+ *
+ * Pulsing placeholder for loading states. Uses RN's Animated for a
+ * universal opacity loop (no Reanimated dependency) so the primitive
+ * is drop-in for Expo apps without extra config.
+ *
+ * Wiki: docs/components/Skeleton.md
+ */
+import { forwardRef, useEffect, useRef, type ComponentRef } from 'react';
+import { Animated, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export interface SkeletonProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+}
+
+type AnimatedViewRef = ComponentRef<typeof Animated.View>;
+
+export const Skeleton = forwardRef<AnimatedViewRef, SkeletonProps>(function Skeleton(
+  { className, ...props },
+  ref,
+) {
+  const opacity = useRef(new Animated.Value(0.5)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 1, duration: 700, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 0.5, duration: 700, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      ref={ref}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={{ opacity }}
+      className={cn('rounded-md bg-muted', className)}
+      {...props}
+    />
+  );
+});

package/src/Skeleton.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+/**
+ * Skeleton (web variant — React DOM).
+ *
+ * A pulsing placeholder block for loading states. Always use a
+ * skeleton over a spinner where you can — it preserves layout and
+ * communicates structure to the user.
+ *
+ * Wiki: docs/components/Skeleton.md
+ */
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from './internal/cn.js';
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      aria-hidden
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  );
+});

package/src/Slider.native.tsx

@@ -0,0 +1,64 @@
+/**
+ * Slider (React Native variant).
+ *
+ * Minimal API-parity wrapper. On native, use the community
+ * slider or the platform slider. This stub provides the type
+ * surface so consuming code compiles cross-platform.
+ *
+ * Wiki: docs/components/Slider.md
+ */
+import { View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export type SliderTone = 'primary' | 'accent' | 'success' | 'warning' | 'danger';
+
+export interface SliderSegment {
+  from: number;
+  to: number;
+  tone: SliderTone;
+}
+
+export type SliderValueLabelPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+export interface SliderProps extends ViewProps {
+  defaultValue?: number[];
+  value?: number[];
+  onValueChange?: (value: number[]) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  tone?: SliderTone | 'segmented';
+  segmented?: boolean;
+  segments?: SliderSegment[];
+  rangeClassName?: string;
+  showValue?: boolean;
+  valueLabelPosition?: SliderValueLabelPosition;
+  valueLabel?: string;
+  valueFormatter?: (value: number[], percentage: number, max: number) => string;
+  className?: string;
+}
+
+export function Slider({
+  className,
+  tone: _tone = 'primary',
+  segmented: _segmented,
+  segments: _segments,
+  rangeClassName: _rangeClassName,
+  showValue: _showValue,
+  valueLabelPosition: _valueLabelPosition,
+  valueLabel: _valueLabel,
+  valueFormatter: _valueFormatter,
+  ...props
+}: SliderProps) {
+  // Native slider requires @react-native-community/slider or a custom impl.
+  // This stub maintains type parity for cross-platform column definitions.
+  return <View className={cn('h-5 w-full', className)} {...props} />;
+}

package/src/Slider.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+/**
+ * Slider (web variant — React DOM).
+ *
+ * Range input powered by Radix Slider. Supports single value
+ * and dual-thumb range mode.
+ *
+ *   <Slider defaultValue={[50]} max={100} step={1} />
+ *   <Slider defaultValue={[25, 75]} max={100} step={5} />
+ *
+ * Wiki: docs/components/Slider.md
+ */
+import { forwardRef, useState, type ComponentPropsWithoutRef, type ElementRef } from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cn } from './internal/cn.js';
+
+export type SliderTone = 'primary' | 'accent' | 'success' | 'warning' | 'danger';
+
+export interface SliderSegment {
+  /** Inclusive lower percentage bound. */
+  from: number;
+  /** Exclusive upper percentage bound, except the last segment may include 100. */
+  to: number;
+  /** Semantic tone used while the value is inside this segment. */
+  tone: SliderTone;
+}
+
+export type SliderValueLabelPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+export type SliderTrackLabelPosition = 'none' | 'top' | 'bottom' | 'inline';
+export type SliderLabelGap = 'none' | 'xs' | 'sm' | 'md';
+
+export interface SliderProps extends ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+  /** Visual size variant. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Fixed range tone or value-based threshold tone. */
+  tone?: SliderTone | 'segmented';
+  /** Use value-based semantic color thresholds instead of one fixed tone. Prefer this over `tone="segmented"`. */
+  segmented?: boolean;
+  /** Custom percentage thresholds for `segmented` mode. */
+  segments?: SliderSegment[];
+  /** Additional className for the active range. */
+  rangeClassName?: string;
+  /** Show the current value label above or below the bar. */
+  showValue?: boolean;
+  /** Position for the visible value label. */
+  valueLabelPosition?: SliderValueLabelPosition;
+  /** Override the visible value label. */
+  valueLabel?: string;
+  /** Format the visible value label from the current values. */
+  valueFormatter?: (value: number[], percentage: number, max: number) => string;
+  /** Show min/max scale labels around the slider. */
+  showTrackLabels?: boolean;
+  /** Position for min/max scale labels. */
+  trackLabelPosition?: SliderTrackLabelPosition;
+  /** Override the visible minimum scale label. */
+  minLabel?: string;
+  /** Override the visible maximum scale label. */
+  maxLabel?: string;
+  /** Format min/max scale labels from the current numeric bounds. */
+  trackLabelFormatter?: (value: number, position: 'min' | 'max') => string;
+  /** Vertical gap between the track and top/bottom label rows. */
+  labelGap?: SliderLabelGap;
+  /** Gap between a left/right value label and the adjacent min/max scale label. */
+  labelGroupGap?: SliderLabelGap;
+  /** Additional className for value and min/max labels. */
+  labelClassName?: string;
+}
+
+const TRACK_SIZE: Record<string, string> = {
+  sm: 'h-1',
+  md: 'h-2',
+  lg: 'h-3',
+};
+
+const THUMB_SIZE: Record<string, string> = {
+  sm: 'h-3.5 w-3.5',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+};
+
+const RANGE_TONE: Record<SliderTone, string> = {
+  primary: 'bg-primary',
+  accent: 'bg-accent',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  danger: 'bg-destructive',
+};
+
+const DEFAULT_SEGMENTS: SliderSegment[] = [
+  { from: 0, to: 25, tone: 'danger' },
+  { from: 25, to: 50, tone: 'warning' },
+  { from: 50, to: 75, tone: 'primary' },
+  { from: 75, to: 100, tone: 'success' },
+];
+
+const LABEL_ROW_GAP: Record<SliderLabelGap, string> = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-3',
+};
+
+const LABEL_GROUP_GAP: Record<SliderLabelGap, string> = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-1.5',
+  md: 'gap-2',
+};
+
+function getPercentage(value: number, min: number, max: number) {
+  const range = max - min;
+  if (range <= 0) return 0;
+  return Math.min(100, Math.max(0, ((value - min) / range) * 100));
+}
+
+function getSegmentedTone(percentage: number, segments: SliderSegment[], fallback: SliderTone) {
+  return segments.find((segment) => percentage >= segment.from && percentage < segment.to)?.tone ??
+    segments.at(-1)?.tone ??
+    fallback;
+}
+
+export const Slider = forwardRef<ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
+  function Slider(
+    {
+      className,
+      size = 'md',
+      value,
+      defaultValue,
+      tone = 'primary',
+      segmented = false,
+      segments = DEFAULT_SEGMENTS,
+      rangeClassName,
+      showValue = false,
+      valueLabelPosition = 'bottom-center',
+      valueLabel,
+      valueFormatter,
+      showTrackLabels = false,
+      trackLabelPosition = 'none',
+      minLabel,
+      maxLabel,
+      trackLabelFormatter,
+      labelGap = 'xs',
+      labelGroupGap = 'xs',
+      labelClassName,
+      onValueChange,
+      ...props
+    },
+    ref,
+  ) {
+    const [internalValue, setInternalValue] = useState<number[]>(defaultValue ?? [props.min ?? 0]);
+    const currentValue = value ?? internalValue;
+    const thumbCount = currentValue.length;
+    const safeMin = props.min ?? 0;
+    const safeMax = props.max ?? 100;
+    const primaryValue = currentValue[0] ?? safeMin;
+    const percentage = getPercentage(primaryValue, safeMin, safeMax);
+    const fixedTone = tone === 'segmented' ? 'primary' : tone;
+    const resolvedTone = segmented || tone === 'segmented'
+      ? getSegmentedTone(percentage, segments, fixedTone)
+      : fixedTone;
+    const rangeTone = RANGE_TONE[resolvedTone];
+    const formattedValue = valueLabel ?? valueFormatter?.(currentValue, percentage, safeMax) ?? `${primaryValue}`;
+    const formattedMin = minLabel ?? trackLabelFormatter?.(safeMin, 'min') ?? `${safeMin}`;
+    const formattedMax = maxLabel ?? trackLabelFormatter?.(safeMax, 'max') ?? `${safeMax}`;
+    const renderScaleLabels = showTrackLabels && trackLabelPosition !== 'none';
+    const valueSide = valueLabelPosition.startsWith('top') ? 'top' : 'bottom';
+    const valueAlign = valueLabelPosition.endsWith('left')
+      ? 'left'
+      : valueLabelPosition.endsWith('right')
+        ? 'right'
+        : 'center';
+    const valueNode = (
+      <span className={cn('text-xs font-medium text-muted-foreground tabular-nums transition-colors duration-300', labelClassName)}>
+        {formattedValue}
+      </span>
+    );
+    const minNode = (
+      <span className={cn('text-xs font-medium text-muted-foreground tabular-nums', labelClassName)}>
+        {formattedMin}
+      </span>
+    );
+    const maxNode = (
+      <span className={cn('text-xs font-medium text-muted-foreground tabular-nums', labelClassName)}>
+        {formattedMax}
+      </span>
+    );
+
+    function renderLabelRow(side: 'top' | 'bottom') {
+      const hasScaleLabels = renderScaleLabels && trackLabelPosition === side;
+      const hasValue = showValue && valueSide === side;
+
+      if (!hasScaleLabels && !hasValue) return null;
+
+      const leftContent = hasScaleLabels ? minNode : null;
+      const centerContent = hasValue && valueAlign === 'center' ? valueNode : null;
+      const rightContent = hasScaleLabels ? maxNode : null;
+
+      return (
+        <div className="grid w-full grid-cols-[1fr_auto_1fr] items-center">
+          <div className={cn('flex min-w-0 items-center justify-start', LABEL_GROUP_GAP[labelGroupGap])}>
+            {leftContent}
+            {hasValue && valueAlign === 'left' ? valueNode : null}
+          </div>
+          <div className="flex min-w-0 justify-center">{centerContent}</div>
+          <div className={cn('flex min-w-0 items-center justify-end', LABEL_GROUP_GAP[labelGroupGap])}>
+            {hasValue && valueAlign === 'right' ? valueNode : null}
+            {rightContent}
+          </div>
+        </div>
+      );
+    }
+
+    const sliderRoot = (
+      <SliderPrimitive.Root
+        ref={ref}
+        className={cn(
+          'relative flex w-full touch-none select-none items-center',
+          className,
+        )}
+        {...(value !== undefined && { value })}
+        {...(defaultValue !== undefined && { defaultValue })}
+        onValueChange={(nextValue) => {
+          if (value === undefined) setInternalValue(nextValue);
+          onValueChange?.(nextValue);
+        }}
+        {...props}
+      >
+        <SliderPrimitive.Track
+          className={cn(
+            'relative w-full grow overflow-hidden rounded-full bg-muted',
+            TRACK_SIZE[size],
+          )}
+        >
+          <SliderPrimitive.Range
+            className={cn(
+              'absolute h-full transition-colors duration-300 ease-out',
+              rangeTone,
+              rangeClassName,
+            )}
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: thumbCount }).map((_, i) => (
+          <SliderPrimitive.Thumb
+            key={i}
+            className={cn(
+              'block rounded-full border-2 border-primary bg-background shadow-sm',
+              'ring-offset-background transition-colors duration-150',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+              'disabled:pointer-events-none disabled:opacity-50',
+              'hover:bg-accent-100 dark:hover:bg-accent-900',
+              'active:bg-accent-500 active:border-accent-500',
+              THUMB_SIZE[size],
+            )}
+          />
+        ))}
+      </SliderPrimitive.Root>
+    );
+
+    if (trackLabelPosition === 'inline' && renderScaleLabels) {
+      return (
+        <div className={cn('flex w-full items-center', LABEL_GROUP_GAP[labelGroupGap])}>
+          {minNode}
+          {sliderRoot}
+          {maxNode}
+        </div>
+      );
+    }
+
+    return (
+      <div className={cn('flex w-full flex-col', LABEL_ROW_GAP[labelGap])}>
+        {renderLabelRow('top')}
+        {sliderRoot}
+        {renderLabelRow('bottom')}
+      </div>
+    );
+  },
+);

package/src/SortableList.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+/**
+ * SortableList (web variant).
+ *
+ * Reorderable list powered by dnd-kit sortable primitives. It keeps the public
+ * API small while giving sibling rows measured layout transforms during drag.
+ *
+ * Wiki: docs/components/SortableList.md
+ */
+import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react';
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  horizontalListSortingStrategy,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from './internal/cn.js';
+
+export interface SortableListItem {
+  id: string;
+  disabled?: boolean;
+}
+
+export interface SortableListProps<TItem extends SortableListItem> extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> {
+  items: TItem[];
+  onItemsChange: (items: TItem[]) => void;
+  renderItem: (item: TItem, state: { isDragging: boolean; index: number }) => ReactNode;
+  orientation?: 'vertical' | 'horizontal';
+  itemClassName?: string;
+  disabled?: boolean;
+}
+
+function SortableRow<TItem extends SortableListItem>({
+  item,
+  index,
+  disabled,
+  className,
+  renderItem,
+}: {
+  item: TItem;
+  index: number;
+  disabled: boolean;
+  className?: string;
+  renderItem: SortableListProps<TItem>['renderItem'];
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging, isSorting } =
+    useSortable({
+      id: item.id,
+      disabled,
+    });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        willChange: isDragging || isSorting ? 'transform' : undefined,
+      }}
+      className={cn(
+        'touch-none select-none rounded-lg border border-border bg-card shadow-mi-card outline-none transform-gpu transition-[background-color,box-shadow] duration-200',
+        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+        isDragging && 'z-10 scale-[1.01] cursor-grabbing shadow-mi-popover',
+        !isDragging && 'cursor-grab',
+        disabled && 'opacity-60',
+        className,
+      )}
+      {...attributes}
+      {...listeners}
+    >
+      {renderItem(item, { isDragging, index })}
+    </div>
+  );
+}
+
+export const SortableList = forwardRef<HTMLDivElement, SortableListProps<SortableListItem>>(
+  function SortableList(
+    {
+      items,
+      onItemsChange,
+      renderItem,
+      orientation = 'vertical',
+      itemClassName,
+      disabled = false,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const listId = useId();
+    const sensors = useSensors(
+      useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+    );
+
+    function handleDragEnd(event: DragEndEvent) {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+
+      const fromIndex = items.findIndex((item) => item.id === active.id);
+      const toIndex = items.findIndex((item) => item.id === over.id);
+      if (fromIndex < 0 || toIndex < 0) return;
+      onItemsChange(arrayMove(items, fromIndex, toIndex));
+    }
+
+    const itemIds = items.map((item) => item.id);
+    const strategy =
+      orientation === 'horizontal' ? horizontalListSortingStrategy : verticalListSortingStrategy;
+
+    return (
+      <DndContext
+        id={listId}
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext items={itemIds} strategy={strategy}>
+          <div
+            ref={ref}
+            className={cn(
+              'grid gap-2',
+              orientation === 'horizontal' && 'grid-flow-col auto-cols-fr overflow-x-auto',
+              className,
+            )}
+            {...props}
+          >
+            {items.map((item, index) => (
+              <SortableRow
+                key={item.id}
+                item={item}
+                index={index}
+                disabled={disabled || Boolean(item.disabled)}
+                {...(itemClassName !== undefined ? { className: itemClassName } : {})}
+                renderItem={renderItem}
+              />
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
+    );
+  },
+);