@playfast/reform-better-hub-ui-primitives 0.2.2 → 0.3.0

package/src/components/popover.tsx

@@ -1,82 +1,80 @@
-import type * as React from "react";
-import type { ComponentProps } from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import type * as React from 'react'
+import type { ComponentProps } from 'react'
+import { Popover as PopoverPrimitive } from 'radix-ui'
 
-import { cn } from "../foundation/cn";
+import { cn } from '../foundation/cn'
 
 function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element {
-	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
 }
 
-function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element {
-	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+function PopoverTrigger({
+  ...props
+}: ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
 }
 
 function PopoverContent({
-	className,
-	align = "center",
-	sideOffset = 4,
-	...props
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
 }: ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element {
-	return (
-		<PopoverPrimitive.Portal>
-			<PopoverPrimitive.Content
-				data-slot="popover-content"
-				align={align}
-				sideOffset={sideOffset}
-				className={cn(
-					// NOTE: `--popover` is not defined in this design system (only --background/--card/…),
-					// so `bg-popover` rendered transparent. Use the defined `bg-background`/`text-foreground`
-					// (exactly what DropdownMenuContent uses) so a portaled popover is opaque.
-					"z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-background p-4 text-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-					className,
-				)}
-				{...props}
-			/>
-		</PopoverPrimitive.Portal>
-	);
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          // NOTE: `--popover` is not defined in this design system (only --background/--card/…),
+          // so `bg-popover` rendered transparent. Use the defined `bg-background`/`text-foreground`
+          // (exactly what DropdownMenuContent uses) so a portaled popover is opaque.
+          'z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-background p-4 text-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
 }
 
-function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element {
-	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+function PopoverAnchor({
+  ...props
+}: ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
 }
 
-function PopoverHeader({ className, ...props }: ComponentProps<"div">): React.JSX.Element {
-	return (
-		<div
-			data-slot="popover-header"
-			className={cn("flex flex-col gap-1 text-sm", className)}
-			{...props}
-		/>
-	);
+function PopoverHeader({ className, ...props }: ComponentProps<'div'>): React.JSX.Element {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn('flex flex-col gap-1 text-sm', className)}
+      {...props}
+    />
+  )
 }
 
-function PopoverTitle({ className, ...props }: ComponentProps<"h2">): React.JSX.Element {
-	return (
-		<div
-			data-slot="popover-title"
-			className={cn("font-medium", className)}
-			{...props}
-		/>
-	);
+function PopoverTitle({ className, ...props }: ComponentProps<'h2'>): React.JSX.Element {
+  return <div data-slot="popover-title" className={cn('font-medium', className)} {...props} />
 }
 
-function PopoverDescription({ className, ...props }: ComponentProps<"p">): React.JSX.Element {
-	return (
-		<p
-			data-slot="popover-description"
-			className={cn("text-muted-foreground", className)}
-			{...props}
-		/>
-	);
+function PopoverDescription({ className, ...props }: ComponentProps<'p'>): React.JSX.Element {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn('text-muted-foreground', className)}
+      {...props}
+    />
+  )
 }
 
 export {
-	Popover,
-	PopoverTrigger,
-	PopoverContent,
-	PopoverAnchor,
-	PopoverHeader,
-	PopoverTitle,
-	PopoverDescription,
-};
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}

package/src/components/resize-handle.tsx

@@ -1,89 +1,87 @@
-import type * as React from "react";
-import { useCallback, useEffect, useState } from "react";
-import type { MouseEvent as ReactMouseEvent } from "react";
-import { cn } from "../foundation/cn";
+import type * as React from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import type { MouseEvent as ReactMouseEvent } from 'react'
+import { cn } from '../foundation/cn'
 
 interface ResizeHandlePropsExternalApi {
-	onResize: (clientPos: number) => void;
-	onDragStart?: () => void;
-	onDragEnd?: () => void;
-	onDoubleClick?: () => void;
-	axis?: "x" | "y";
-	className?: string;
+  onResize: (clientPos: number) => void
+  onDragStart?: () => void
+  onDragEnd?: () => void
+  onDoubleClick?: () => void
+  axis?: 'x' | 'y'
+  className?: string
 }
 
 export function ResizeHandle({
-	onResize,
-	onDragStart,
-	onDragEnd,
-	onDoubleClick,
-	axis = "x",
-	className,
+  onResize,
+  onDragStart,
+  onDragEnd,
+  onDoubleClick,
+  axis = 'x',
+  className,
 }: ResizeHandlePropsExternalApi): React.JSX.Element {
-	const [isDragging, setIsDragging] = useState(false);
-	const vertical = axis === "y";
+  const [isDragging, setIsDragging] = useState(false)
+  const vertical = axis === 'y'
 
-	const handleMouseDown = useCallback(
-		(event: ReactMouseEvent) => {
-			event.preventDefault();
-			setIsDragging(true);
-			onDragStart?.();
-		},
-		[onDragStart],
-	);
+  const handleMouseDown = useCallback(
+    (event: ReactMouseEvent) => {
+      event.preventDefault()
+      setIsDragging(true)
+      onDragStart?.()
+    },
+    [onDragStart],
+  )
 
-	useEffect(() => {
-		if (!isDragging) {
-			return;
-		}
+  useEffect(() => {
+    if (!isDragging) {
+      return
+    }
 
-		const handleMouseMove = (event: MouseEvent) => {
-			onResize(vertical ? event.clientY : event.clientX);
-		};
+    const handleMouseMove = (event: MouseEvent) => {
+      onResize(vertical ? event.clientY : event.clientX)
+    }
 
-		const handleMouseUp = () => {
-			setIsDragging(false);
-			onDragEnd?.();
-		};
+    const handleMouseUp = () => {
+      setIsDragging(false)
+      onDragEnd?.()
+    }
 
-		document.addEventListener("mousemove", handleMouseMove);
-		document.addEventListener("mouseup", handleMouseUp);
-		document.body.style.userSelect = "none";
-		document.body.style.cursor = vertical ? "row-resize" : "col-resize";
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = vertical ? 'row-resize' : 'col-resize'
 
-		return () => {
-			document.removeEventListener("mousemove", handleMouseMove);
-			document.removeEventListener("mouseup", handleMouseUp);
-			document.body.style.userSelect = "";
-			document.body.style.cursor = "";
-		};
-	}, [isDragging, onResize, onDragEnd, vertical]);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+      document.body.style.userSelect = ''
+      document.body.style.cursor = ''
+    }
+  }, [isDragging, onResize, onDragEnd, vertical])
 
-	return (
-		<div
-			onMouseDown={handleMouseDown}
-			onDoubleClick={onDoubleClick}
-			className={cn(
-				"relative shrink-0 group/resize z-10",
-				vertical ? "h-0 cursor-row-resize" : "w-0 cursor-col-resize",
-				className,
-			)}
-		>
-			<div
-				className={cn(
-					"absolute",
-					vertical ? "inset-x-0 -top-[5px] h-[11px]" : "inset-y-0 -left-[5px] w-[11px]",
-				)}
-			/>
-			<div
-				className={cn(
-					"absolute transition-all duration-150",
-					vertical ? "inset-x-0 -top-px h-[2px]" : "inset-y-0 -left-px w-[2px]",
-					isDragging
-						? "bg-foreground/25"
-						: "bg-transparent group-hover/resize:bg-foreground/15",
-				)}
-			/>
-		</div>
-	);
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      onDoubleClick={onDoubleClick}
+      className={cn(
+        'relative shrink-0 group/resize z-10',
+        vertical ? 'h-0 cursor-row-resize' : 'w-0 cursor-col-resize',
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          'absolute',
+          vertical ? 'inset-x-0 -top-[5px] h-[11px]' : 'inset-y-0 -left-[5px] w-[11px]',
+        )}
+      />
+      <div
+        className={cn(
+          'absolute transition-all duration-150',
+          vertical ? 'inset-x-0 -top-px h-[2px]' : 'inset-y-0 -left-px w-[2px]',
+          isDragging ? 'bg-foreground/25' : 'bg-transparent group-hover/resize:bg-foreground/15',
+        )}
+      />
+    </div>
+  )
 }

package/src/components/sheet.tsx

@@ -1,144 +1,152 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-import type * as React from "react";
-import { cn } from "../foundation/cn";
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+import type * as React from 'react'
+import { cn } from '../foundation/cn'
 
 function Sheet({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element {
-	return <DialogPrimitive.Root data-slot="sheet" {...props} />;
+  return <DialogPrimitive.Root data-slot="sheet" {...props} />
 }
 
-function SheetTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element {
-	return <DialogPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element {
+  return <DialogPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }
 
-function SheetPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element {
-	return <DialogPrimitive.Portal data-slot="sheet-portal" {...props} />;
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element {
+  return <DialogPrimitive.Portal data-slot="sheet-portal" {...props} />
 }
 
-function SheetClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element {
-	return <DialogPrimitive.Close data-slot="sheet-close" {...props} />;
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element {
+  return <DialogPrimitive.Close data-slot="sheet-close" {...props} />
 }
 
 function SheetOverlay({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element {
-	return (
-		<DialogPrimitive.Overlay
-			data-slot="sheet-overlay"
-			className={cn(
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/25 dark:bg-black/70 backdrop-blur-[2px]",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/25 dark:bg-black/70 backdrop-blur-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
-interface SheetContentPropsExternalApi extends React.ComponentProps<typeof DialogPrimitive.Content> {
-	side?: "left" | "right" | "top" | "bottom";
-	showCloseButton?: boolean;
+interface SheetContentPropsExternalApi extends React.ComponentProps<
+  typeof DialogPrimitive.Content
+> {
+  side?: 'left' | 'right' | 'top' | 'bottom'
+  showCloseButton?: boolean
 }
 
 function SheetContent({
-	className,
-	children,
-	side = "right",
-	showCloseButton = true,
-	...props
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  ...props
 }: SheetContentPropsExternalApi): React.JSX.Element {
-	const sideStyles = {
-		right: "inset-y-0 right-0 h-full w-3/4 sm:max-w-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
-		left: "inset-y-0 left-0 h-full w-3/4 sm:max-w-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
-		top: "inset-x-0 top-0 w-full data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-		bottom: "inset-x-0 bottom-0 w-full data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-	};
+  const sideStyles = {
+    right:
+      'inset-y-0 right-0 h-full w-3/4 sm:max-w-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+    left: 'inset-y-0 left-0 h-full w-3/4 sm:max-w-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
+    top: 'inset-x-0 top-0 w-full data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+    bottom:
+      'inset-x-0 bottom-0 w-full data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+  }
 
-	return (
-		<SheetPortal>
-			<SheetOverlay />
-			<DialogPrimitive.Content
-				data-slot="sheet-content"
-				className={cn(
-					"fixed z-50 flex flex-col bg-background border-l border-border shadow-lg duration-300",
-					sideStyles[side],
-					className,
-				)}
-				{...props}
-			>
-				<DialogPrimitive.Title className="hidden sr-only">
-					{props.title}
-				</DialogPrimitive.Title>
-				{children}
-				{showCloseButton && (
-					<DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary cursor-pointer">
-						<XIcon className="h-4 w-4" />
-						<span className="sr-only">Close</span>
-					</DialogPrimitive.Close>
-				)}
-			</DialogPrimitive.Content>
-		</SheetPortal>
-	);
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <DialogPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'fixed z-50 flex flex-col bg-background border-l border-border shadow-lg duration-300',
+          sideStyles[side],
+          className,
+        )}
+        {...props}
+      >
+        <DialogPrimitive.Title className="hidden sr-only">{props.title}</DialogPrimitive.Title>
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary cursor-pointer">
+            <XIcon className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </SheetPortal>
+  )
 }
 
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element {
-	return (
-		<div
-			data-slot="sheet-header"
-			className={cn(
-				"flex flex-col gap-2 px-6 py-4 border-b border-border",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-2 px-6 py-4 border-b border-border', className)}
+      {...props}
+    />
+  )
 }
 
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element {
-	return (
-		<div
-			data-slot="sheet-footer"
-			className={cn(
-				"flex flex-col-reverse gap-2 px-6 py-4 border-t border-border sm:flex-row sm:justify-end",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 px-6 py-4 border-t border-border sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
-function SheetTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element {
-	return (
-		<DialogPrimitive.Title
-			data-slot="sheet-title"
-			className={cn("text-lg font-semibold text-foreground", className)}
-			{...props}
-		/>
-	);
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element {
+  return (
+    <DialogPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-lg font-semibold text-foreground', className)}
+      {...props}
+    />
+  )
 }
 
 function SheetDescription({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element {
-	return (
-		<DialogPrimitive.Description
-			data-slot="sheet-description"
-			className={cn("text-sm text-muted-foreground", className)}
-			{...props}
-		/>
-	);
+  return (
+    <DialogPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
 }
 
 export {
-	Sheet,
-	SheetClose,
-	SheetContent,
-	SheetDescription,
-	SheetFooter,
-	SheetHeader,
-	SheetOverlay,
-	SheetPortal,
-	SheetTitle,
-	SheetTrigger,
-};
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+}

package/src/components/textarea.tsx

@@ -1,19 +1,19 @@
-import type * as React from "react";
-import type { ComponentProps } from "react";
+import type * as React from 'react'
+import type { ComponentProps } from 'react'
 
-import { cn } from "../foundation/cn";
+import { cn } from '../foundation/cn'
 
-function Textarea({ className, ...props }: ComponentProps<"textarea">): React.JSX.Element {
-	return (
-		<textarea
-			data-slot="textarea"
-			className={cn(
-				"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function Textarea({ className, ...props }: ComponentProps<'textarea'>): React.JSX.Element {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
-export { Textarea };
+export { Textarea }