CSS Utilities

type Transform = {
  x: number;
  y: number;
  scaleX: number;
  scaleY: number;
};

interface Transition {
  property: string;
  easing: string;
  duration: number;
}

const CSS: {
  Translate: {
    toString(transform: Transform | null): string | undefined;
  };
  Scale: {
    toString(transform: Transform | null): string | undefined;
  };
  Transform: {
    toString(transform: Transform | null): string | undefined;
  };
  Transition: {
    toString(transition: Transition): string;
  };
};

import { CSS, type Transform, type Transition } from "@dnd-kit/utilities";

// Transform utilities
const transform: Transform = {
  x: 100,
  y: 50,
  scaleX: 1.2,
  scaleY: 0.8
};

// Generate individual transform strings
const translateStr = CSS.Translate.toString(transform);
// Result: "translate3d(100px, 50px, 0)"

const scaleStr = CSS.Scale.toString(transform);
// Result: "scaleX(1.2) scaleY(0.8)"

// Generate complete transform string
const fullTransform = CSS.Transform.toString(transform);
// Result: "translate3d(100px, 50px, 0) scaleX(1.2) scaleY(0.8)"

// Apply to element styles
const element = document.getElementById("draggable");
if (element) {
  element.style.transform = CSS.Transform.toString(transform);
}

// Transition utilities
const transition: Transition = {
  property: "transform",
  duration: 200,
  easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
};

const transitionStr = CSS.Transition.toString(transition);
// Result: "transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)"

// Apply transition to element
if (element) {
  element.style.transition = CSS.Transition.toString(transition);
}

/**
 * Converts translation coordinates to CSS translate3d string
 * @param transform - Transform object with x,y coordinates
 * @returns CSS translate3d string or undefined if transform is null
 */
CSS.Translate.toString(transform: Transform | null): string | undefined;

import { CSS, type Transform } from "@dnd-kit/utilities";

// Basic translation
const position: Transform = { x: 25, y: -10, scaleX: 1, scaleY: 1 };
const translateCSS = CSS.Translate.toString(position);
// Result: "translate3d(25px, -10px, 0)"

// Null handling
const noTransform = CSS.Translate.toString(null);
// Result: undefined

// React component usage
import React from "react";

function MovableComponent({ position }: { position: Transform }) {
  const style = {
    transform: CSS.Translate.toString(position)
  };
  
  return <div style={style}>I move around!</div>;
}

/**
 * Converts scale factors to CSS scale string
 * @param transform - Transform object with scaleX,scaleY values
 * @returns CSS scale string or undefined if transform is null
 */
CSS.Scale.toString(transform: Transform | null): string | undefined;

import { CSS, type Transform } from "@dnd-kit/utilities";

// Scale transformation
const scaled: Transform = { x: 0, y: 0, scaleX: 1.5, scaleY: 0.8 };
const scaleCSS = CSS.Scale.toString(scaled);
// Result: "scaleX(1.5) scaleY(0.8)"

// Uniform scaling
const uniform: Transform = { x: 0, y: 0, scaleX: 2.0, scaleY: 2.0 };
const uniformCSS = CSS.Scale.toString(uniform);
// Result: "scaleX(2) scaleY(2)"

/**
 * Converts complete transform data to CSS transform string
 * @param transform - Transform object with position and scale data
 * @returns Combined CSS transform string or undefined if transform is null
 */
CSS.Transform.toString(transform: Transform | null): string | undefined;

import { CSS, type Transform } from "@dnd-kit/utilities";

// Complete transformation
const fullTransform: Transform = {
  x: 150,
  y: -25,
  scaleX: 1.1,
  scaleY: 0.9
};

const completeCSS = CSS.Transform.toString(fullTransform);
// Result: "translate3d(150px, -25px, 0) scaleX(1.1) scaleY(0.9)"

// React drag and drop example
import React, { useState } from "react";

function DraggableItem() {
  const [transform, setTransform] = useState<Transform>({
    x: 0, y: 0, scaleX: 1, scaleY: 1
  });
  
  const handleDrag = (deltaX: number, deltaY: number) => {
    setTransform(prev => ({
      ...prev,
      x: prev.x + deltaX,
      y: prev.y + deltaY
    }));
  };
  
  return (
    <div
      style={{
        transform: CSS.Transform.toString(transform),
        cursor: "grab"
      }}
      onMouseDown={/* drag handler */}
    >
      Drag me around!
    </div>
  );
}

/**
 * Converts transition configuration to CSS transition string
 * @param transition - Transition configuration object
 * @returns CSS transition string
 */
CSS.Transition.toString(transition: Transition): string;

import { CSS, type Transition } from "@dnd-kit/utilities";

// Basic transition
const fadeTransition: Transition = {
  property: "opacity",
  duration: 300,
  easing: "ease-in-out"
};

const fadeCSS = CSS.Transition.toString(fadeTransition);
// Result: "opacity 300ms ease-in-out"

// Transform transition with custom easing
const transformTransition: Transition = {
  property: "transform",
  duration: 150,
  easing: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
};

const transformCSS = CSS.Transition.toString(transformTransition);
// Result: "transform 150ms cubic-bezier(0.68, -0.55, 0.265, 1.55)"

// Multiple transitions
const transitions = [
  { property: "transform", duration: 200, easing: "ease-out" },
  { property: "opacity", duration: 150, easing: "ease-in" }
];

const combinedTransition = transitions
  .map(t => CSS.Transition.toString(t))
  .join(", ");
// Result: "transform 200ms ease-out, opacity 150ms ease-in"