tembro 6.1.0 → 6.1.1

package/packages/cli/vendor/src/components/modern/image-cropper.tsx

@@ -1,226 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Cropper, { type Area, type Point } from "react-easy-crop"
-import { RotateCwIcon, ZoomInIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function degreesToRadians(degrees: number) {
-  return (degrees * Math.PI) / 180
-}
-
-function getRotatedSize(width: number, height: number, rotation: number) {
-  const radians = degreesToRadians(rotation)
-  return {
-    width: Math.abs(Math.cos(radians) * width) + Math.abs(Math.sin(radians) * height),
-    height: Math.abs(Math.sin(radians) * width) + Math.abs(Math.cos(radians) * height),
-  }
-}
-
-function loadImage(src: string, crossOrigin?: string) {
-  return new Promise<HTMLImageElement>((resolve, reject) => {
-    const image = new Image()
-    if (crossOrigin) image.crossOrigin = crossOrigin
-    image.onload = () => resolve(image)
-    image.onerror = () => reject(new Error("Crop source image could not be loaded"))
-    image.src = src
-  })
-}
-
-export async function createCroppedImageBlob({
-  src,
-  crop,
-  rotation = 0,
-  type = "image/png",
-  quality = 0.92,
-  crossOrigin = "anonymous",
-}: {
-  src: string
-  crop: Area
-  rotation?: number
-  type?: string
-  quality?: number
-  crossOrigin?: string
-}) {
-  const image = await loadImage(src, crossOrigin)
-  const rotatedSize = getRotatedSize(image.naturalWidth, image.naturalHeight, rotation)
-  const sourceCanvas = document.createElement("canvas")
-  sourceCanvas.width = Math.ceil(rotatedSize.width)
-  sourceCanvas.height = Math.ceil(rotatedSize.height)
-  const sourceContext = sourceCanvas.getContext("2d")
-  if (!sourceContext) throw new Error("Canvas 2D context is unavailable")
-
-  sourceContext.translate(sourceCanvas.width / 2, sourceCanvas.height / 2)
-  sourceContext.rotate(degreesToRadians(rotation))
-  sourceContext.translate(-image.naturalWidth / 2, -image.naturalHeight / 2)
-  sourceContext.drawImage(image, 0, 0)
-
-  const outputCanvas = document.createElement("canvas")
-  outputCanvas.width = Math.max(1, Math.round(crop.width))
-  outputCanvas.height = Math.max(1, Math.round(crop.height))
-  const outputContext = outputCanvas.getContext("2d")
-  if (!outputContext) throw new Error("Canvas 2D context is unavailable")
-  outputContext.drawImage(
-    sourceCanvas,
-    Math.round(crop.x),
-    Math.round(crop.y),
-    Math.round(crop.width),
-    Math.round(crop.height),
-    0,
-    0,
-    outputCanvas.width,
-    outputCanvas.height
-  )
-
-  return new Promise<Blob>((resolve, reject) => {
-    outputCanvas.toBlob(
-      (blob) => (blob ? resolve(blob) : reject(new Error("Cropped image could not be encoded"))),
-      type,
-      quality
-    )
-  })
-}
-
-export type ImageCropperProps = Omit<React.ComponentProps<"div">, "onChange"> & {
-  src: string
-  alt?: string
-  crop?: Point
-  defaultCrop?: Point
-  onCropChange?: (crop: Point) => void
-  zoom?: number
-  defaultZoom?: number
-  onZoomChange?: (zoom: number) => void
-  rotation?: number
-  defaultRotation?: number
-  onRotationChange?: (rotation: number) => void
-  onCropComplete?: (area: Area, areaPixels: Area) => void
-  aspect?: number
-  cropShape?: "rect" | "round"
-  objectFit?: "contain" | "cover" | "horizontal-cover" | "vertical-cover"
-  minZoom?: number
-  maxZoom?: number
-  zoomStep?: number
-  showGrid?: boolean
-  disabled?: boolean
-  labels?: {
-    cropper?: string
-    zoom?: string
-    rotation?: string
-  }
-}
-
-function ImageCropper({
-  src,
-  alt = "Image crop preview",
-  crop,
-  defaultCrop = { x: 0, y: 0 },
-  onCropChange,
-  zoom,
-  defaultZoom = 1,
-  onZoomChange,
-  rotation,
-  defaultRotation = 0,
-  onRotationChange,
-  onCropComplete,
-  aspect = 1,
-  cropShape = "rect",
-  objectFit = "contain",
-  minZoom = 1,
-  maxZoom = 3,
-  zoomStep = 0.1,
-  showGrid = true,
-  disabled = false,
-  labels,
-  className,
-  ...props
-}: ImageCropperProps) {
-  const [internalCrop, setInternalCrop] = React.useState(defaultCrop)
-  const [internalZoom, setInternalZoom] = React.useState(defaultZoom)
-  const [internalRotation, setInternalRotation] = React.useState(defaultRotation)
-  const currentCrop = crop ?? internalCrop
-  const currentZoom = zoom ?? internalZoom
-  const currentRotation = rotation ?? internalRotation
-
-  return (
-    <div data-slot="image-cropper" data-disabled={disabled || undefined} className={cn("grid gap-3 data-[disabled]:opacity-60", className)} {...props}>
-      <div
-        role="img"
-        aria-label={labels?.cropper ?? alt}
-        className={cn("relative min-h-64 overflow-hidden rounded-md bg-black", disabled && "pointer-events-none")}
-        style={{ aspectRatio: aspect }}
-      >
-        <Cropper
-          image={src}
-          crop={currentCrop}
-          zoom={currentZoom}
-          rotation={currentRotation}
-          aspect={aspect}
-          cropShape={cropShape}
-          objectFit={objectFit}
-          minZoom={minZoom}
-          maxZoom={maxZoom}
-          zoomSpeed={zoomStep}
-          showGrid={showGrid}
-          onCropChange={(nextCrop) => {
-            if (crop === undefined) setInternalCrop(nextCrop)
-            onCropChange?.(nextCrop)
-          }}
-          onZoomChange={(nextZoom) => {
-            if (zoom === undefined) setInternalZoom(nextZoom)
-            onZoomChange?.(nextZoom)
-          }}
-          onRotationChange={(nextRotation) => {
-            if (rotation === undefined) setInternalRotation(nextRotation)
-            onRotationChange?.(nextRotation)
-          }}
-          onCropComplete={onCropComplete}
-        />
-      </div>
-      <div className="grid gap-2 sm:grid-cols-2">
-        <label className="grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground">
-          <ZoomInIcon className="size-4" aria-hidden="true" />
-          <span className="sr-only">{labels?.zoom ?? "Zoom"}</span>
-          <input
-            type="range"
-            min={minZoom}
-            max={maxZoom}
-            step={zoomStep}
-            value={currentZoom}
-            disabled={disabled}
-            aria-label={labels?.zoom ?? "Zoom"}
-            className="w-full accent-foreground"
-            onChange={(event) => {
-              const nextZoom = Number(event.target.value)
-              if (zoom === undefined) setInternalZoom(nextZoom)
-              onZoomChange?.(nextZoom)
-            }}
-          />
-          <span className="w-9 text-right tabular-nums">{currentZoom.toFixed(1)}x</span>
-        </label>
-        <label className="grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground">
-          <RotateCwIcon className="size-4" aria-hidden="true" />
-          <span className="sr-only">{labels?.rotation ?? "Rotation"}</span>
-          <input
-            type="range"
-            min="-180"
-            max="180"
-            step="1"
-            value={currentRotation}
-            disabled={disabled}
-            aria-label={labels?.rotation ?? "Rotation"}
-            className="w-full accent-foreground"
-            onChange={(event) => {
-              const nextRotation = Number(event.target.value)
-              if (rotation === undefined) setInternalRotation(nextRotation)
-              onRotationChange?.(nextRotation)
-            }}
-          />
-          <span className="w-10 text-right tabular-nums">{Math.round(currentRotation)}°</span>
-        </label>
-      </div>
-    </div>
-  )
-}
-
-export { ImageCropper }

package/packages/cli/vendor/src/components/ui/number-field/index.tsx

@@ -1,89 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-export type NumberFieldProps = NumberFieldPrimitive.Root.Props
-export type NumberFieldGroupProps = NumberFieldPrimitive.Group.Props
-export type NumberFieldInputProps = NumberFieldPrimitive.Input.Props
-export type NumberFieldIncrementProps = NumberFieldPrimitive.Increment.Props
-export type NumberFieldDecrementProps = NumberFieldPrimitive.Decrement.Props
-export type NumberFieldScrubAreaProps = NumberFieldPrimitive.ScrubArea.Props
-export type NumberFieldScrubAreaCursorProps = NumberFieldPrimitive.ScrubAreaCursor.Props
-
-function NumberField({ className, ...props }: NumberFieldProps) {
-  return <NumberFieldPrimitive.Root data-slot="number-field" className={cn("grid gap-2", className)} {...props} />
-}
-
-function NumberFieldGroup({ className, ...props }: NumberFieldGroupProps) {
-  return (
-    <NumberFieldPrimitive.Group
-      data-slot="number-field-group"
-      className={cn(
-        "flex min-h-10 w-full overflow-hidden rounded-[var(--radius-md)] border border-input bg-background text-foreground shadow-xs transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/35 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NumberFieldInput({ className, ...props }: NumberFieldInputProps) {
-  return (
-    <NumberFieldPrimitive.Input
-      data-slot="number-field-input"
-      className={cn("min-w-0 flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed", className)}
-      {...props}
-    />
-  )
-}
-
-function NumberFieldIncrement({ className, children, ...props }: NumberFieldIncrementProps) {
-  return (
-    <NumberFieldPrimitive.Increment
-      data-slot="number-field-increment"
-      className={cn("flex h-5 w-8 items-center justify-center border-l border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40", className)}
-      {...props}
-    >
-      {children ?? <ChevronUpIcon aria-hidden="true" className="size-3.5" />}
-    </NumberFieldPrimitive.Increment>
-  )
-}
-
-function NumberFieldDecrement({ className, children, ...props }: NumberFieldDecrementProps) {
-  return (
-    <NumberFieldPrimitive.Decrement
-      data-slot="number-field-decrement"
-      className={cn("flex h-5 w-8 items-center justify-center border-l border-t border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40", className)}
-      {...props}
-    >
-      {children ?? <ChevronDownIcon aria-hidden="true" className="size-3.5" />}
-    </NumberFieldPrimitive.Decrement>
-  )
-}
-
-function NumberFieldStepper({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="number-field-stepper" className={cn("grid shrink-0 grid-rows-2", className)} {...props} />
-}
-
-function NumberFieldScrubArea({ className, ...props }: NumberFieldScrubAreaProps) {
-  return <NumberFieldPrimitive.ScrubArea data-slot="number-field-scrub-area" className={cn("cursor-ew-resize select-none", className)} {...props} />
-}
-
-function NumberFieldScrubAreaCursor({ className, ...props }: NumberFieldScrubAreaCursorProps) {
-  return <NumberFieldPrimitive.ScrubAreaCursor data-slot="number-field-scrub-area-cursor" className={cn("fixed z-50 rounded bg-foreground px-2 py-1 text-xs text-background shadow-lg", className)} {...props} />
-}
-
-export {
-  NumberField,
-  NumberFieldDecrement,
-  NumberFieldGroup,
-  NumberFieldIncrement,
-  NumberFieldInput,
-  NumberFieldScrubArea,
-  NumberFieldScrubAreaCursor,
-  NumberFieldStepper,
-}

package/packages/cli/vendor/src/components/ui/toolbar/index.tsx

@@ -1,67 +0,0 @@
-"use client"
-
-import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar"
-
-import { cn } from "@/lib/utils"
-
-export type ToolbarProps = ToolbarPrimitive.Root.Props
-export type ToolbarGroupProps = ToolbarPrimitive.Group.Props
-export type ToolbarButtonProps = ToolbarPrimitive.Button.Props
-export type ToolbarLinkProps = ToolbarPrimitive.Link.Props
-export type ToolbarInputProps = ToolbarPrimitive.Input.Props
-export type ToolbarSeparatorProps = ToolbarPrimitive.Separator.Props
-
-function Toolbar({ className, orientation = "horizontal", ...props }: ToolbarProps) {
-  return (
-    <ToolbarPrimitive.Root
-      data-slot="toolbar"
-      orientation={orientation}
-      className={cn(
-        "flex min-w-0 items-center gap-1 rounded-[var(--radius-lg)] border border-border bg-card p-1 text-card-foreground shadow-xs",
-        orientation === "vertical" && "w-max flex-col items-stretch",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ToolbarGroup({ className, ...props }: ToolbarGroupProps) {
-  return <ToolbarPrimitive.Group data-slot="toolbar-group" className={cn("flex min-w-0 items-center gap-1", className)} {...props} />
-}
-
-function ToolbarButton({ className, ...props }: ToolbarButtonProps) {
-  return (
-    <ToolbarPrimitive.Button
-      data-slot="toolbar-button"
-      className={cn("inline-flex h-8 min-w-8 items-center justify-center gap-1.5 rounded-[var(--radius-md)] px-2.5 text-sm font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-muted data-[pressed]:text-foreground [&_svg]:size-4 [&_svg]:shrink-0", className)}
-      {...props}
-    />
-  )
-}
-
-function ToolbarLink({ className, ...props }: ToolbarLinkProps) {
-  return (
-    <ToolbarPrimitive.Link
-      data-slot="toolbar-link"
-      className={cn("inline-flex h-8 items-center justify-center gap-1.5 rounded-[var(--radius-md)] px-2.5 text-sm font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", className)}
-      {...props}
-    />
-  )
-}
-
-function ToolbarInput({ className, ...props }: ToolbarInputProps) {
-  return (
-    <ToolbarPrimitive.Input
-      data-slot="toolbar-input"
-      className={cn("h-8 min-w-32 rounded-[var(--radius-md)] border border-input bg-background px-2.5 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring", className)}
-      {...props}
-    />
-  )
-}
-
-function ToolbarSeparator({ className, ...props }: ToolbarSeparatorProps) {
-  return <ToolbarPrimitive.Separator data-slot="toolbar-separator" className={cn("mx-1 h-5 w-px bg-border data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full", className)} {...props} />
-}
-
-export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator }