remove remaining forwardRef

design-system/src/autocomplete/autocomplete.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useCombobox } from 'downshift';
 import IconChevronDown from 'lucide-static/icons/chevron-down.svg?react';
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { Dropdown } from '../dropdown/dropdown';
 import { useDropdown } from '../dropdown/use-dropdown';
@@ -10,6 +10,7 @@ import { InputBox } from '../input/input';
 import { useId } from '../utils/use-id';
 
 type AutocompleteProps<Item> = {
+  ref?: React.Ref<HTMLInputElement>;
   open?: boolean;
   size?: 1 | 2 | 3;
   label?: React.ReactNode;
@@ -36,35 +37,33 @@ type AutocompleteProps<Item> = {
   renderNoItems?: () => React.ReactNode;
 };
 
-export const Autocomplete = forwardRef(function Autocomplete<Item>(
-  {
-    open,
-    size,
-    label,
-    helpTooltip,
-    helperText,
-    placeholder,
-    error,
-    invalid = Boolean(error),
-    required,
-    disabled,
-    className,
-    id: idProp,
-    name,
-    items,
-    selectedItem,
-    onSelectedItemChange,
-    inputValue,
-    onInputValueChange,
-    resetOnBlur = true,
-    onBlur,
-    getKey,
-    itemToString,
-    renderItem,
-    renderNoItems,
-  }: AutocompleteProps<Item>,
-  ref: React.ForwardedRef<HTMLInputElement>,
-) {
+export function Autocomplete<Item>({
+  ref,
+  open,
+  size,
+  label,
+  helpTooltip,
+  helperText,
+  placeholder,
+  error,
+  invalid = Boolean(error),
+  required,
+  disabled,
+  className,
+  id: idProp,
+  name,
+  items,
+  selectedItem,
+  onSelectedItemChange,
+  inputValue,
+  onInputValueChange,
+  resetOnBlur = true,
+  onBlur,
+  getKey,
+  itemToString,
+  renderItem,
+  renderNoItems,
+}: AutocompleteProps<Item>) {
   const id = useId(idProp);
   const helperTextId = `${id}-helper-text`;
 
@@ -154,6 +153,8 @@ export const Autocomplete = forwardRef(function Autocomplete<Item>(
         className="peer"
         aria-invalid={invalid}
         aria-errormessage={helperTextId}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         {...getInputProps({ ref, id, onBlur, required })}
       />
 
@@ -169,4 +170,4 @@ export const Autocomplete = forwardRef(function Autocomplete<Item>(
       />
     </Field>
   );
-});
+}

design-system/src/code/code.stories.tsx

@@ -16,7 +16,7 @@ export default meta;
 export const Default: StoryObj<typeof Code> = {
   render: (args) => <Code {...args} />,
   args: {
-    lang: 'typescript',
+    lang: 'javascript',
     value:
       "import type { Meta } from '@storybook/react';\n\nexport default {\n  title: 'MyStory',\n} satisfies Meta;",
   },

design-system/src/dialog/dialog.tsx

@@ -140,7 +140,7 @@ export function Dialog({
   );
 }
 
-const MotionFloatingOverlay = motion(FloatingOverlay);
+const MotionFloatingOverlay = motion.create(FloatingOverlay);
 
 type Dialog2Props = {
   open: boolean;

design-system/src/floating/floating.stories.tsx

@@ -18,9 +18,9 @@ const meta = {
     setOpen: action('setOpen'),
     offset: 8,
     placement: 'bottom',
-    renderReference: (ref, props) => <div ref={ref} {...props} className="size-8 bg-muted/20" />,
-    renderFloating: (ref, props) => (
-      <div ref={ref} {...props} className="w-fit rounded border bg-neutral p-2 shadow">
+    renderReference: (props) => <div {...props} className="size-8 bg-muted/20" />,
+    renderFloating: (props) => (
+      <div {...props} className="w-fit rounded border bg-neutral p-2 shadow">
         Floating
       </div>
     ),

design-system/src/index.ts

@@ -1,5 +1,3 @@
-import './react.d';
-
 export * from './accordion/accordion';
 export * from './alert/alert';
 export * from './autocomplete/autocomplete';

design-system/src/menu/menu.tsx

@@ -5,6 +5,8 @@ import { Extend } from '../utils/types';
 
 export function Menu({ className, ...props }: React.ComponentProps<'div'>) {
   return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     <div
       className={clsx(
         'col z-30 items-stretch rounded-md border bg-popover p-1 text-contrast-popover shadow-lg',

design-system/src/select/select.tsx

@@ -1,14 +1,16 @@
 import clsx from 'clsx';
 import { useSelect, UseSelectProps, UseSelectState, UseSelectStateChangeOptions } from 'downshift';
 import IconChevronDown from 'lucide-static/icons/chevron-down.svg?react';
-import { forwardRef, useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { Dropdown, DropdownGroup } from '../dropdown/dropdown';
 import { useDropdown } from '../dropdown/use-dropdown';
 import { Field, FieldHelperText, FieldLabel } from '../field/field';
+import { Extend } from '../utils/types';
 import { useId } from '../utils/use-id';
 
 type SelectProps<Item> = {
+  ref?: React.Ref<HTMLDivElement>;
   open?: boolean;
   size?: 1 | 2 | 3;
   label?: React.ReactNode;
@@ -36,36 +38,34 @@ type SelectProps<Item> = {
   stateReducer?: UseSelectProps<Item>['stateReducer'];
 };
 
-export const Select = forwardRef(function Select<Item>(
-  {
-    open,
-    size = 2,
-    label,
-    helpTooltip,
-    helperText,
-    error,
-    invalid = Boolean(error),
-    disabled,
-    readOnly,
-    placeholder,
-    className,
-    id: idProp,
-    items,
-    groups,
-    selectedItem: selectedItemProp,
-    onSelectedItemChange,
-    onItemClick,
-    onBlur,
-    getKey,
-    itemToString,
-    renderItem,
-    renderNoItems,
-    renderSelectedItem,
-    canSelectItem,
-    stateReducer,
-  }: SelectProps<Item>,
-  forwardedRef: React.ForwardedRef<HTMLElement>,
-) {
+export function Select<Item>({
+  ref: forwardedRef,
+  open,
+  size = 2,
+  label,
+  helpTooltip,
+  helperText,
+  error,
+  invalid = Boolean(error),
+  disabled,
+  readOnly,
+  placeholder,
+  className,
+  id: idProp,
+  items,
+  groups,
+  selectedItem: selectedItemProp,
+  onSelectedItemChange,
+  onItemClick,
+  onBlur,
+  getKey,
+  itemToString,
+  renderItem,
+  renderNoItems,
+  renderSelectedItem,
+  canSelectItem,
+  stateReducer,
+}: SelectProps<Item>) {
   const id = useId(idProp);
   const helperTextId = `${id}-helper-text`;
 
@@ -105,7 +105,7 @@ export const Select = forwardRef(function Select<Item>(
 
       if (typeof forwardedRef === 'function') {
         forwardedRef(ref);
-      } else if (forwardedRef) {
+      } else if (forwardedRef != null) {
         forwardedRef.current = ref;
       }
     },
@@ -173,33 +173,29 @@ export const Select = forwardRef(function Select<Item>(
       />
     </Field>
   );
-});
+}
 
-type MultiSelectProps<Item> = Omit<
+type MultiSelectProps<Item> = Extend<
   SelectProps<Item>,
-  'selectedItem' | 'onSelectedItemChange' | 'renderItem' | 'renderSelectedItem'
-> & {
-  selectedItems?: Item[];
-  onItemsSelected?: (item: Item) => void;
-  onItemsUnselected?: (item: Item) => void;
-  renderItem: (item: Item, selected: boolean, index?: number) => React.ReactNode;
-  renderSelectedItems: (items: Item[]) => React.ReactNode;
-};
-
-export const MultiSelect = forwardRef(function MultiSelect<Item>(
   {
-    selectedItems = [],
-    onItemsSelected,
-    onItemsUnselected,
-    renderItem,
-    renderSelectedItems,
-    ...props
-  }: MultiSelectProps<Item>,
-  ref: React.ForwardedRef<HTMLElement>,
-) {
+    selectedItems?: Item[];
+    onItemsSelected?: (item: Item) => void;
+    onItemsUnselected?: (item: Item) => void;
+    renderItem: (item: Item, selected: boolean, index?: number) => React.ReactNode;
+    renderSelectedItems: (items: Item[]) => React.ReactNode;
+  }
+>;
+
+export function MultiSelect<Item>({
+  selectedItems = [],
+  onItemsSelected,
+  onItemsUnselected,
+  renderItem,
+  renderSelectedItems,
+  ...props
+}: MultiSelectProps<Item>) {
   return (
     <Select
-      ref={ref}
       selectedItem={null}
       onItemClick={(item) => {
         if (selectedItems.includes(item)) {
@@ -214,7 +210,7 @@ export const MultiSelect = forwardRef(function MultiSelect<Item>(
       {...props}
     />
   );
-});
+}
 
 function multiSelectStateReducer<Item>(
   state: UseSelectState<Item>,

design-system/src/slider/slider.stories.tsx

@@ -14,7 +14,6 @@ const meta = {
   args: {
     className: 'max-w-sm',
     disabled: false,
-    ticks: true,
     min: 0,
     max: 8,
     step: 1,

design-system/src/slider/slider.tsx

@@ -1,12 +1,13 @@
 import { useRanger } from '@tanstack/react-ranger';
 import clsx from 'clsx';
-import { forwardRef, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 
 import { Field, FieldHelperText, FieldLabel } from '../field/field';
 import { mergeRefs } from '../utils/merge-refs';
 import { useId } from '../utils/use-id';
 
 type SliderProps = {
+  ref?: React.Ref<HTMLDivElement>;
   value?: number[];
   onChange?: (values: number[]) => void;
   disabled?: boolean;
@@ -24,25 +25,24 @@ type SliderProps = {
   className?: string;
 };
 
-export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(props, ref) {
-  const {
-    value,
-    onChange,
-    disabled,
-    label,
-    helpTooltip,
-    helperText,
-    invalid,
-    error,
-    min = 0,
-    max = 100,
-    step = 1,
-    tickSize = step,
-    renderTick,
-    id: idProp,
-    className,
-  } = props;
-
+export function Slider({
+  ref,
+  value,
+  onChange,
+  disabled,
+  label,
+  helpTooltip,
+  helperText,
+  invalid,
+  error,
+  min = 0,
+  max = 100,
+  step = 1,
+  tickSize = step,
+  renderTick,
+  id: idProp,
+  className,
+}: SliderProps) {
   const id = useId(idProp);
   const helperTextId = `${id}-helper-text`;
 
@@ -104,7 +104,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(pr
       {renderTick && <Ticks ticks={ranger.getTicks()} renderTick={renderTick} />}
     </Field>
   );
-});
+}
 
 type ConnectorProps = {
   steps: Array<{ left: number; width: number }>;