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

package/src/components/time-ago.tsx

@@ -1,77 +1,79 @@
-import { DateTime } from "effect";
-import type * as React from "react";
-import { useState, useEffect } from 'react';
+import { DateTime } from 'effect'
+import type * as React from 'react'
+import { useState, useEffect } from 'react'
 
-const MS_PER_SECOND = 1000;
-const SECONDS_PER_MINUTE = 60;
-const SECONDS_PER_HOUR = 3600;
-const SECONDS_PER_DAY = 86400;
-const SECONDS_PER_WEEK = 604800;
-const SECONDS_PER_MONTH = 2592000;
-const MONTHS_PER_YEAR = 12;
-const REFRESH_INTERVAL_MS = 60_000;
+const MS_PER_SECOND = 1000
+const SECONDS_PER_MINUTE = 60
+const SECONDS_PER_HOUR = 3600
+const SECONDS_PER_DAY = 86400
+const SECONDS_PER_WEEK = 604800
+const SECONDS_PER_MONTH = 2592000
+const MONTHS_PER_YEAR = 12
+const REFRESH_INTERVAL_MS = 60_000
 
 function timeAgo(date: string | Date): string {
-	const now = DateTime.unsafeNow();
-	const then = DateTime.unsafeMake(date);
-	const seconds = Math.floor((DateTime.toEpochMillis(now) - DateTime.toEpochMillis(then)) / MS_PER_SECOND);
+  const now = DateTime.unsafeNow()
+  const then = DateTime.unsafeMake(date)
+  const seconds = Math.floor(
+    (DateTime.toEpochMillis(now) - DateTime.toEpochMillis(then)) / MS_PER_SECOND,
+  )
 
-	if (seconds < SECONDS_PER_MINUTE) {
-		return 'just now';
-	}
-	if (seconds < SECONDS_PER_HOUR) {
-		return `${Math.floor(seconds / SECONDS_PER_MINUTE)}m ago`;
-	}
-	if (seconds < SECONDS_PER_DAY) {
-		return `${Math.floor(seconds / SECONDS_PER_HOUR)}h ago`;
-	}
-	if (seconds < SECONDS_PER_WEEK) {
-		return `${Math.floor(seconds / SECONDS_PER_DAY)}d ago`;
-	}
-	if (seconds < SECONDS_PER_MONTH) {
-		return `${Math.floor(seconds / SECONDS_PER_WEEK)}w ago`;
-	}
+  if (seconds < SECONDS_PER_MINUTE) {
+    return 'just now'
+  }
+  if (seconds < SECONDS_PER_HOUR) {
+    return `${Math.floor(seconds / SECONDS_PER_MINUTE)}m ago`
+  }
+  if (seconds < SECONDS_PER_DAY) {
+    return `${Math.floor(seconds / SECONDS_PER_HOUR)}h ago`
+  }
+  if (seconds < SECONDS_PER_WEEK) {
+    return `${Math.floor(seconds / SECONDS_PER_DAY)}d ago`
+  }
+  if (seconds < SECONDS_PER_MONTH) {
+    return `${Math.floor(seconds / SECONDS_PER_WEEK)}w ago`
+  }
 
-	const months = Math.floor(seconds / SECONDS_PER_MONTH);
-	if (months < MONTHS_PER_YEAR) {
-		return `${months}mo ago`;
-	}
+  const months = Math.floor(seconds / SECONDS_PER_MONTH)
+  if (months < MONTHS_PER_YEAR) {
+    return `${months}mo ago`
+  }
 
-	const thenDate = DateTime.toDate(then);
-	const sameYear = thenDate.getFullYear() === DateTime.toDate(now).getFullYear();
-	if (sameYear) {
-		return thenDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-	}
-	return thenDate.toLocaleDateString('en-US', {
-		month: 'short',
-		day: 'numeric',
-		year: 'numeric',
-	});
+  const thenDate = DateTime.toDate(then)
+  const sameYear = thenDate.getFullYear() === DateTime.toDate(now).getFullYear()
+  if (sameYear) {
+    return thenDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+  }
+  return thenDate.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
 }
 
 interface TimeAgoPropsExternalApi {
-	date: string | Date;
-	className?: string;
+  date: string | Date
+  className?: string
 }
 
 export function TimeAgo({ date, className }: TimeAgoPropsExternalApi): React.JSX.Element {
-	const [text, setText] = useState(() => timeAgo(date));
+  const [text, setText] = useState(() => timeAgo(date))
 
-	useEffect(() => {
-		setText(timeAgo(date));
-		// oxlint-disable-next-line reform-rules/no-set-timeout-interval -- browser-timer seam: periodic relative-time refresh for React, no Effect runtime here
-		const interval = setInterval(() => setText(timeAgo(date)), REFRESH_INTERVAL_MS);
-		return () => clearInterval(interval);
-	}, [date]);
+  useEffect(() => {
+    setText(timeAgo(date))
+    // oxlint-disable-next-line reform-rules/no-set-timeout-interval -- browser-timer seam: periodic relative-time refresh for React, no Effect runtime here
+    const interval = setInterval(() => setText(timeAgo(date)), REFRESH_INTERVAL_MS)
+    return () => clearInterval(interval)
+  }, [date])
 
-	return (
-		<time
-			dateTime={typeof date === 'string' ? date : date.toISOString()}
-			title={DateTime.toDate(DateTime.unsafeMake(date)).toLocaleString()}
-			className={className}
-			suppressHydrationWarning
-		>
-			{text}
-		</time>
-	);
+  return (
+    <time
+      dateTime={typeof date === 'string' ? date : date.toISOString()}
+      title={DateTime.toDate(DateTime.unsafeMake(date)).toLocaleString()}
+      className={className}
+      suppressHydrationWarning
+    >
+      {text}
+    </time>
+  )
 }

package/src/components/tooltip.tsx

@@ -1,61 +1,67 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import type * as React from "react";
-import { cn } from "../foundation/cn";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import type * as React from 'react'
+import { cn } from '../foundation/cn'
 
 function TooltipProvider({
-	delayDuration = 300,
-	...props
+  delayDuration = 300,
+  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element {
-	return (
-		<TooltipPrimitive.Provider
-			data-slot="tooltip-provider"
-			delayDuration={delayDuration}
-			{...props}
-		/>
-	);
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
 }
 
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element {
-	return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
 }
 
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element {
-	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
-function TooltipPortal({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Portal>): React.JSX.Element {
-	return <TooltipPrimitive.Portal data-slot="tooltip-portal" {...props} />;
+function TooltipPortal({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Portal>): React.JSX.Element {
+  return <TooltipPrimitive.Portal data-slot="tooltip-portal" {...props} />
 }
 
 function TooltipContent({
-	className,
-	sideOffset = 4,
-	...props
+  className,
+  sideOffset = 4,
+  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element {
-	return (
-		<TooltipPrimitive.Content
-			data-slot="tooltip-content"
-			sideOffset={sideOffset}
-			className={cn(
-				"bg-background text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <TooltipPrimitive.Content
+      data-slot="tooltip-content"
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-background text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
 function TooltipArrow({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Arrow>): React.JSX.Element {
-	return (
-		<TooltipPrimitive.Arrow
-			data-slot="tooltip-arrow"
-			className={cn("fill-background", className)}
-			{...props}
-		/>
-	);
+  return (
+    <TooltipPrimitive.Arrow
+      data-slot="tooltip-arrow"
+      className={cn('fill-background', className)}
+      {...props}
+    />
+  )
 }
 
-export { Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger }

package/src/foundation/styles.css

@@ -82,10 +82,12 @@
 
 /* Default theme: Midnight (dark) */
 :root {
-  --font-geist-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
-    'Liberation Mono', monospace;
+  --font-geist-sans:
+    'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  --font-geist-mono:
+    'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
+    monospace;
   --radius-sm: 0.25rem;
   --radius-md: 0.5rem;
   --radius-lg: 0.75rem;

package/src/index.ts

@@ -1,22 +1,22 @@
-export * from './components/agent-icon';
-export * from './components/autocomplete';
-export * from './components/badge';
-export * from './components/button';
-export * from './components/combobox';
-export * from './components/command';
-export * from './components/dialog';
-export * from './components/dropdown-menu';
-export * from './components/github-background';
-export * from './components/halftone-background';
-export * from './components/input';
-export * from './components/input-group';
-export * from './components/live-duration';
-export * from './components/logo';
-export * from './components/popover';
-export * from './components/resize-handle';
-export * from './components/sheet';
-export * from './components/textarea';
-export * from './components/time-ago';
-export * from './components/tooltip';
+export * from './components/agent-icon'
+export * from './components/autocomplete'
+export * from './components/badge'
+export * from './components/button'
+export * from './components/combobox'
+export * from './components/command'
+export * from './components/dialog'
+export * from './components/dropdown-menu'
+export * from './components/github-background'
+export * from './components/halftone-background'
+export * from './components/input'
+export * from './components/input-group'
+export * from './components/live-duration'
+export * from './components/logo'
+export * from './components/popover'
+export * from './components/resize-handle'
+export * from './components/sheet'
+export * from './components/textarea'
+export * from './components/time-ago'
+export * from './components/tooltip'
 
-export { cn } from './foundation/cn';
+export { cn } from './foundation/cn'