colmtuite

I want you to migrate my Radix Select component to Base UI Select.

First, install @base-ui/react

Then read the guide for how composition and component replacement works in Base UI:
https://base-ui.com/react/handbook/composition.md

Then read the guide for how animation works in Base UI:
https://base-ui.com/react/handbook/animation.md

colmtuite

'use client';
import * as React from 'react';
import clsx from 'clsx';
import {
  dropTarget,
  monitorForElements,
  useDraggable,
  useIsDragging,
} from '@base-ui/plus/drag-engine';
import { useStableCallback } from '@base-ui/utils/useStableCallback';

colmtuite

'use client';
import * as React from 'react';
import clsx from 'clsx';
import {
  GripVertical,
  Lock,
  LockOpen,
  MoreHorizontal,
  Pin,
  PinOff,

colmtuite

const text = css({
  color: '$gray12',

  variants: {
    size: {
      // corrective letter-spacing and text-indent styles
      // should go here too, because they're determined by font-size.
      // You could also put line-height here too, if your devs prefer
      // a default line-height that works in some cases. But understand
      // that line-height is also a function of line-length, so the

colmtuite

import { sliderprimitive } from "@modulz/primitives";

const Slider = sliderprimitive();

const { Thumb, InnerTrack, Track } = Slider;
Slider.style({
  [Track]: {
    borderRadius: "3px",
    backgroundColor: "gainsboro",
  },

colmtuite

import React from "react";
import { cssReset, CssResetTagName } from "../utils/cssReset";
import { withInteropStyledSystem } from "@interop/styled-system";
​
const defaultRenderElement = "button";
​
type ButtonDOMProps = React.ComponentPropsWithRef<typeof defaultRenderElement>;
type ButtonOwnProps = {};
type ButtonProps = ButtonDOMProps &
  ButtonOwnProps & { as?: React.ElementType<any> };

colmtuite

const Text = styled.p`

  // Styles unique to this component
  
  color: ${theme.GRAY_900};
  
  // Props unique to this component
  
  ${p => p.size1 && css`
    font-size: ${theme.FONTSIZE_200};

colmtuite

def show
    @website = Website.find(params[:id])
    @page = Page.new

    unless @website.user_id == current_user.id
        flash[:error] = "Oi, stop snooping around!"
        redirect_to current_user
    end

    unless params[:id] == @website.to_param

colmtuite

<div class="Card">
  <div class="styleguide-example">
    <span class="Status green">Paid</span>
    <span class="Status yellow">Pending</span>
    <span class="Status red">Late Payment</span>
  </div>
```html
<span class="Status green">Complete</span>
<span class="Status yellow">Pending</span>
<span class="Status red">Late Payment</span>

colmtuite

<div class="Card">
    <div class="styleguide-example">
        <span class="Status Status-green">Paid</span>
        <span class="Status Status-yellow">Pending</span>
        <span class="Status Status-red">Late Payment</span>
    </div>

    ```html
    <span class="Status Status-green">Complete</span>
    <span class="Status Status-yellow">Pending</span>