feat: initial share dialog impl

apps/drive-web/src/components/crossfade-icon.tsx

@@ -0,0 +1,84 @@
+import {
+	type ReactNode,
+	type Ref,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react"
+import { cn } from "@/lib/utils"
+
+type CrossfadeIconProps = {
+	from: ReactNode
+	to: ReactNode
+	active?: boolean
+	className?: string
+	ref?: Ref<CrossfadeIconHandle>
+}
+
+export type CrossfadeIconHandle = {
+	trigger: () => void
+}
+
+export function CrossfadeIcon({
+	from,
+	to,
+	active = false,
+	className,
+	ref,
+}: CrossfadeIconProps) {
+	const [forcedActive, setForcedActive] = useState(false)
+	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+	const clearTimer = useCallback(() => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current)
+			timeoutRef.current = null
+		}
+	}, [])
+
+	useImperativeHandle(
+		ref,
+		() => ({
+			trigger: () => {
+				setForcedActive(true)
+				clearTimer()
+				timeoutRef.current = setTimeout(() => {
+					setForcedActive(false)
+					timeoutRef.current = null
+				}, 3000)
+			},
+		}),
+		[clearTimer],
+	)
+
+	useEffect(() => clearTimer, [clearTimer])
+
+	const isActive = active || forcedActive
+
+	return (
+		<div className={cn("relative grid place-items-center", className)}>
+			<span
+				className={cn(
+					"col-start-1 row-start-1 grid place-items-center transition-all duration-200 ease-out",
+					isActive
+						? "opacity-0 scale-50 blur-sm"
+						: "opacity-100 scale-100 blur-0",
+				)}
+			>
+				{from}
+			</span>
+			<span
+				className={cn(
+					"col-start-1 row-start-1 grid place-items-center transition-all duration-200 ease-out",
+					isActive
+						? "opacity-100 scale-100 blur-0"
+						: "opacity-0 scale-0 blur-sm",
+				)}
+			>
+				{to}
+			</span>
+		</div>
+	)
+}

apps/drive-web/src/components/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}