setContent(e.target.value)}
        placeholder="Start typing..."
      />
      <div>
        Auto-save: {active ? "Active" : "Inactive"}
        {lastSaved && ` - Last saved: ${lastSaved.toLocaleTimeString()}`}
      </div>
    </div>
  );
}
```

### Lazy Loading with Intersection Observer

```tsx
import { useInViewport } from "@versini/ui-hooks/use-in-viewport";

function LazyImage({ src, alt, placeholder }) {
  const { ref, inViewport } = useInViewport();
  const [loaded, setLoaded] = useState(false);

return (
    <div ref={ref}>
      {inViewport && !loaded && (
        <img src={placeholder} alt={alt} style={{ filter: "blur(5px)" }} />
      )}
      {inViewport && (
        <img
          src={src}
          alt={alt}
          onLoad={() => setLoaded(true)}
          style={{ display: loaded ? "block" : "none" }}
        />
      )}
    </div>
  );
}
```

### Resizable Panel with Size Tracking

```tsx
import { useResizeObserver } from "@versini/ui-hooks/use-resize-observer";

function ResizablePanel({ children }) {
  const [ref, rect] = useResizeObserver();

return (
    <div
      ref={ref}
      style={{
        resize: "both",
        overflow: "auto",
        border: "1px solid #ccc",
        minWidth: 200,
        minHeight: 100
      }}
    >
      <div>
        Size: {Math.round(rect.width)}x{Math.round(rect.height)}
      </div>
      {children}
    </div>
  );
}
```

### Haptic Feedback for Interactive UI

```tsx
import { useHaptic } from "@versini/ui-hooks/use-haptic";

function InteractiveCounter() {
  const [count, setCount] = useState(0);
  const { haptic } = useHaptic();

const increment = () => {
    setCount((c) => c + 1);
    haptic(1); // Single pulse
  };

const decrement = () => {
    setCount((c) => c - 1);
    haptic(1); // Single pulse
  };

const reset = () => {
    setCount(0);
    haptic(2); // Double pulse for emphasis
  };

const celebrate = () => {
    haptic(3); // Triple pulse for celebration
  };

return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
      {count >= 10 && <button onClick={celebrate}>🎉 Celebrate!</button>}
    </div>
  );
}
```

### Advanced Controlled/Uncontrolled Input

```tsx
import { useUncontrolled } from "@versini/ui-hooks/use-uncontrolled";
import { useUniqueId } from "@versini/ui-hooks/use-unique-id";

function AdvancedInput({ value, defaultValue, onChange, label, ...props }) {
  const [inputValue, setInputValue, isControlled] = useUncontrolled({
    value,
    defaultValue,
    finalValue: "",
    onChange
  });

const inputId = useUniqueId("input");

return (
    <div>
      <label htmlFor={inputId}>
        {label} {isControlled ? "(Controlled)" : "(Uncontrolled)"}
      </label>
      <input
        id={inputId}
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        {...props}
      />
    </div>
  );
}
```

## License

MIT