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

package/src/components/input-group.tsx

@@ -1,173 +1,175 @@
-import type * as React from "react";
-import type { ComponentProps } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import type { ClassProp } from "class-variance-authority/types";
+import type * as React from 'react'
+import type { ComponentProps } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import type { ClassProp } from 'class-variance-authority/types'
 
-import { cn } from "../foundation/cn";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Textarea } from "./textarea";
+import { cn } from '../foundation/cn'
+import { Button } from './button'
+import { Input } from './input'
+import { Textarea } from './textarea'
 
-function InputGroup({ className, ...props }: ComponentProps<"div">): React.JSX.Element {
-	return (
-		<div
-			data-slot="input-group"
-			role="group"
-			className={cn(
-				"group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
-				"h-9 min-w-0 has-[>textarea]:h-auto",
-				"has-[>[data-align=inline-start]]:[&>input]:pl-2",
-				"has-[>[data-align=inline-end]]:[&>input]:pr-2",
-				"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-				"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-				"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
-				"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+function InputGroup({ className, ...props }: ComponentProps<'div'>): React.JSX.Element {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        'group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30',
+        'h-9 min-w-0 has-[>textarea]:h-auto',
+        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50',
+        'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
 
-				className,
-			)}
-			{...props}
-		/>
-	);
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
 type InputGroupAddonVariantsExternalApi = (
-	props?:
-		| ({
-				align?: "inline-start" | "inline-end" | "block-start" | "block-end" | undefined;
-		  } & ClassProp)
-		| undefined,
-) => string;
+  props?:
+    | ({
+        align?: 'inline-start' | 'inline-end' | 'block-start' | 'block-end' | undefined
+      } & ClassProp)
+    | undefined,
+) => string
 
 const inputGroupAddonVariants: InputGroupAddonVariantsExternalApi = cva(
-	"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
-	{
-		variants: {
-			align: {
-				"inline-start":
-					"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-				"inline-end":
-					"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
-				"block-start":
-					"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
-				"block-end":
-					"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
-			},
-		},
-		defaultVariants: {
-			align: "inline-start",
-		},
-	},
-);
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+        'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+        'block-start':
+          'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
+        'block-end':
+          'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+)
 
 function InputGroupAddon({
-	className,
-	align = "inline-start",
-	...props
-}: ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element {
-	return (
-		<div
-			role="group"
-			data-slot="input-group-addon"
-			data-align={align}
-			className={cn(inputGroupAddonVariants({ align }), className)}
-			onClick={(event) => {
-				const target = event.target;
-				if (target instanceof HTMLElement && target.closest("button")) {
-					return;
-				}
-				event.currentTarget.parentElement?.querySelector("input")?.focus();
-			}}
-			{...props}
-		/>
-	);
+  className,
+  align = 'inline-start',
+  ...props
+}: ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(event) => {
+        const target = event.target
+        if (target instanceof HTMLElement && target.closest('button')) {
+          return
+        }
+        event.currentTarget.parentElement?.querySelector('input')?.focus()
+      }}
+      {...props}
+    />
+  )
 }
 
 type InputGroupButtonVariantsExternalApi = (
-	props?:
-		| ({
-				size?: "xs" | "sm" | "icon-xs" | "icon-sm" | undefined;
-		  } & ClassProp)
-		| undefined,
-) => string;
+  props?:
+    | ({
+        size?: 'xs' | 'sm' | 'icon-xs' | 'icon-sm' | undefined
+      } & ClassProp)
+    | undefined,
+) => string
 
 const inputGroupButtonVariants: InputGroupButtonVariantsExternalApi = cva(
-	"flex items-center gap-2 text-sm shadow-none",
-	{
-	variants: {
-		size: {
-			xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-			sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-			"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-			"icon-sm": "size-8 p-0 has-[>svg]:p-0",
-		},
-	},
-	defaultVariants: {
-		size: "xs",
-	},
-});
+  'flex items-center gap-2 text-sm shadow-none',
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
+        'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+      },
+    },
+    defaultVariants: {
+      size: 'xs',
+    },
+  },
+)
 
 function InputGroupButton({
-	className,
-	type = "button",
-	variant = "ghost",
-	size = "xs",
-	...props
-}: Omit<ComponentProps<typeof Button>, "size"> &
-	VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element {
-	return (
-		<Button
-			type={type}
-			data-size={size}
-			variant={variant}
-			className={cn(inputGroupButtonVariants({ size }), className)}
-			{...props}
-		/>
-	);
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}: Omit<ComponentProps<typeof Button>, 'size'> &
+  VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
 }
 
-function InputGroupText({ className, ...props }: ComponentProps<"span">): React.JSX.Element {
-	return (
-		<span
-			className={cn(
-				"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function InputGroupText({ className, ...props }: ComponentProps<'span'>): React.JSX.Element {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
-function InputGroupInput({ className, ...props }: ComponentProps<"input">): React.JSX.Element {
-	return (
-		<Input
-			data-slot="input-group-control"
-			className={cn(
-				"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function InputGroupInput({ className, ...props }: ComponentProps<'input'>): React.JSX.Element {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
-function InputGroupTextarea({ className, ...props }: ComponentProps<"textarea">): React.JSX.Element {
-	return (
-		<Textarea
-			data-slot="input-group-control"
-			className={cn(
-				"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function InputGroupTextarea({
+  className,
+  ...props
+}: ComponentProps<'textarea'>): React.JSX.Element {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
 export {
-	InputGroup,
-	InputGroupAddon,
-	InputGroupButton,
-	InputGroupText,
-	InputGroupInput,
-	InputGroupTextarea,
-};
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

package/src/components/input.tsx

@@ -1,22 +1,22 @@
-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 Input({ className, type, ...props }: ComponentProps<'input'>): React.JSX.Element {
-	return (
-		<input
-			type={type}
-			data-slot="input"
-			className={cn(
-				"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
-				"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-				"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
+        'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+        'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
-export { Input };
+export { Input }

package/src/components/live-duration.tsx

@@ -1,86 +1,92 @@
-import { DateTime, Option } from "effect";
-import type * as React from "react";
-import { useState, useEffect } from "react";
+import { DateTime, Option } from 'effect'
+import type * as React from 'react'
+import { useState, useEffect } from 'react'
 
-const MS_PER_SECOND = 1000;
-const SECONDS_PER_HOUR = 3600;
-const SECONDS_PER_MINUTE = 60;
-const TICK_INTERVAL_MS = 1000;
+const MS_PER_SECOND = 1000
+const SECONDS_PER_HOUR = 3600
+const SECONDS_PER_MINUTE = 60
+const TICK_INTERVAL_MS = 1000
 
 interface FormatDurationInputExternalApi {
-	startedAt: string | null;
-	completedAt: string | null;
+  startedAt: string | null
+  completedAt: string | null
 }
 
 function formatDuration({ startedAt, completedAt }: FormatDurationInputExternalApi): string {
-	if (!startedAt) {
-		return "";
-	}
-	const start = DateTime.unsafeMake(startedAt);
-	const end = completedAt ? DateTime.unsafeMake(completedAt) : DateTime.unsafeNow();
-	const elapsedMs = DateTime.toEpochMillis(end) - DateTime.toEpochMillis(start);
-	const totalSeconds = Math.max(0, Math.floor(elapsedMs / MS_PER_SECOND));
-	const hours = Math.floor(totalSeconds / SECONDS_PER_HOUR);
-	const minutes = Math.floor((totalSeconds % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE);
-	const seconds = totalSeconds % SECONDS_PER_MINUTE;
-	if (hours > 0) {
-		return `${hours}h ${minutes}m`;
-	}
-	if (minutes > 0) {
-		return `${minutes}m ${seconds}s`;
-	}
-	return `${seconds}s`;
+  if (!startedAt) {
+    return ''
+  }
+  const start = DateTime.unsafeMake(startedAt)
+  const end = completedAt ? DateTime.unsafeMake(completedAt) : DateTime.unsafeNow()
+  const elapsedMs = DateTime.toEpochMillis(end) - DateTime.toEpochMillis(start)
+  const totalSeconds = Math.max(0, Math.floor(elapsedMs / MS_PER_SECOND))
+  const hours = Math.floor(totalSeconds / SECONDS_PER_HOUR)
+  const minutes = Math.floor((totalSeconds % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE)
+  const seconds = totalSeconds % SECONDS_PER_MINUTE
+  if (hours > 0) {
+    return `${hours}h ${minutes}m`
+  }
+  if (minutes > 0) {
+    return `${minutes}m ${seconds}s`
+  }
+  return `${seconds}s`
 }
 
 // shared tick: one interval drives all LiveDuration subscribers
-const callbacks = new Set<() => void>();
+const callbacks = new Set<() => void>()
 const tickState: { intervalId: Option.Option<ReturnType<typeof setInterval>> } = {
-	intervalId: Option.none(),
-};
+  intervalId: Option.none(),
+}
 
 function subscribeLiveTick(callback: () => void): () => void {
-	callbacks.add(callback);
-	if (Option.isNone(tickState.intervalId)) {
-		// oxlint-disable-next-line reform-rules/no-set-timeout-interval -- browser-timer seam: shared render ticker for React, no Effect runtime here
-		tickState.intervalId = Option.some(setInterval(() => {
-			callbacks.forEach((cb) => cb());
-		}, TICK_INTERVAL_MS));
-	}
-	return () => {
-		callbacks.delete(callback);
-		if (callbacks.size === 0 && Option.isSome(tickState.intervalId)) {
-			clearInterval(tickState.intervalId.value);
-			tickState.intervalId = Option.none();
-		}
-	};
+  callbacks.add(callback)
+  if (Option.isNone(tickState.intervalId)) {
+    tickState.intervalId = Option.some(
+      // oxlint-disable-next-line reform-rules/no-set-timeout-interval -- browser-timer seam: shared render ticker for React, no Effect runtime here
+      setInterval(() => {
+        callbacks.forEach((cb) => cb())
+      }, TICK_INTERVAL_MS),
+    )
+  }
+  return () => {
+    callbacks.delete(callback)
+    if (callbacks.size === 0 && Option.isSome(tickState.intervalId)) {
+      clearInterval(tickState.intervalId.value)
+      tickState.intervalId = Option.none()
+    }
+  }
 }
 
 interface LiveDurationPropsExternalApi {
-	startedAt: string | null;
-	completedAt?: string | null;
-	className?: string;
+  startedAt: string | null
+  completedAt?: string | null
+  className?: string
 }
 
-export function LiveDuration({ startedAt, completedAt, className }: LiveDurationPropsExternalApi): React.ReactNode {
-	const [, setTick] = useState(0);
+export function LiveDuration({
+  startedAt,
+  completedAt,
+  className,
+}: LiveDurationPropsExternalApi): React.ReactNode {
+  const [, setTick] = useState(0)
 
-	useEffect(() => {
-		if (!startedAt || completedAt != null) {
-			return;
-		}
-		setTick(0);
-		return subscribeLiveTick(() => setTick((prev) => prev + 1));
-	}, [startedAt, completedAt]);
+  useEffect(() => {
+    if (!startedAt || completedAt != null) {
+      return
+    }
+    setTick(0)
+    return subscribeLiveTick(() => setTick((prev) => prev + 1))
+  }, [startedAt, completedAt])
 
-	if (!startedAt) {
-		return null;
-	}
+  if (!startedAt) {
+    return null
+  }
 
-	const formatted = formatDuration({ startedAt, completedAt: completedAt ?? null });
+  const formatted = formatDuration({ startedAt, completedAt: completedAt ?? null })
 
-	return (
-		<span className={className} suppressHydrationWarning>
-			{formatted}
-		</span>
-	);
+  return (
+    <span className={className} suppressHydrationWarning>
+      {formatted}
+    </span>
+  )
 }

package/src/components/logo.tsx

@@ -1,22 +1,18 @@
-import type * as React from "react";
-import { cn } from '../foundation/cn';
+import type * as React from 'react'
+import { cn } from '../foundation/cn'
 
 interface LogoPropsExternalApi {
-	className?: string;
+  className?: string
 }
 
 export function Logo({ className }: LogoPropsExternalApi): React.JSX.Element {
-	return (
-		<span className={cn("font-mono text-sm font-medium tracking-tight", className)}>
-			BETTER-HUB.
-		</span>
-	);
+  return (
+    <span className={cn('font-mono text-sm font-medium tracking-tight', className)}>
+      BETTER-HUB.
+    </span>
+  )
 }
 
 export function LogoMark({ className }: LogoPropsExternalApi): React.JSX.Element {
-	return (
-		<span className={cn("font-mono text-sm font-bold tracking-tight", className)}>
-			b.
-		</span>
-	);
+  return <span className={cn('font-mono text-sm font-bold tracking-tight', className)}>b.</span>
 }