@modlin/ui 0.0.241 → 0.0.243

package/package.json

@@ -2,7 +2,7 @@
 	"$schema": "https://json.schemastore.org/package",
 	"name": "@modlin/ui",
 	"description": "A lightweight UI library built on the Suffix design system for consistent, fast, and elegant interfaces.",
-	"version": "0.0.241",
+	"version": "0.0.243",
 	"main": "src/index.ts",
 	"type": "module",
 	"exports": {

package/src/avatar.tsx

@@ -5,7 +5,7 @@ export interface AvatarProps extends ImageProps {
 	fallback: string
 }
 export default function Avatar({ fallback, ...props }: Readonly<AvatarProps>) {
-	const show = true
+	const show = false
 
 	return (
 		<span

package/src/button.tsx

@@ -5,121 +5,101 @@ import React from "react"
 import type { Variant, Variants } from "./global"
 
 const sizeMap = {
-    sm: cn("h-8 px-4 gap-x-1 text-sm rounded-full font-medium"),
-    md: cn("h-9 px-4.5 gap-x-1 text-sm rounded-full font-medium"),
-    lg: cn(
-        "h-11 px-5 gap-x-1 text-base rounded-full font-medium",
-        "[&>svg]:size-4",
-    ),
-    xl: cn(
-        "h-12 px-6 gap-x-1 text-base rounded-full font-semibold",
-        "[&>svg]:size-4",
-    ),
-    sm_: "h-8 px-2.5 rounded-lg text-sm font-medium [&>svg]:size-4",
-    md_: cn(
-        "h-9 px-3.5 gap-x-1 text-sm rounded-xl font-medium",
-        "[&>svg]:size-4",
-    ),
-    lg_: cn(
-        "h-11 px-4 gap-x-2 text-base rounded-2xl font-medium",
-        "[&>svg]:size-5",
-    ),
-    xl_: cn(
-        "h-12 px-4 gap-x-2 text-base rounded-2xl font-medium",
-        "[&>svg]:size-4 [&>svg]:scale-125",
-    ),
-    icon: cn("p-2 rounded-full text-sm font-medium"),
-    iconr: cn("p-2 rounded-2xl text-sm font-medium"),
-    none: cn("overflow-visible"),
+	sm: cn("h-8 px-4 gap-x-1 text-sm rounded-full font-medium"),
+	md: cn("h-9 px-4.5 gap-x-1 text-sm rounded-full font-medium"),
+	lg: cn("h-11 px-5 gap-x-1 text-base rounded-full font-medium", "[&>svg]:size-4"),
+	xl: cn("h-12 px-6 gap-x-1 text-base rounded-full font-semibold", "[&>svg]:size-4"),
+	sm_: "h-8 px-2.5 rounded-lg text-sm font-medium [&>svg]:size-4",
+	md_: cn("h-9 px-3.5 gap-x-1 text-sm rounded-xl font-medium", "[&>svg]:size-4"),
+	lg_: cn("h-11 px-4 gap-x-2 text-base rounded-2xl font-medium", "[&>svg]:size-5"),
+	xl_: cn("h-12 px-4 gap-x-2 text-base rounded-2xl font-medium", "[&>svg]:size-4 [&>svg]:scale-125"),
+	icon: cn("p-2 rounded-full text-sm font-medium"),
+	iconr: cn("p-2 rounded-2xl text-sm font-medium"),
+	none: cn("overflow-visible"),
 }
 const variant: Variants = {
-    primary:
-        "bg-primary disabled:bg-primary/60 hover:bg-primary/85 text-background",
-    secondary: "bg-secondary hover:bg-secondary/75",
-    destructive: "bg-(--red) hover:bg-(--red)/85 text-white",
-    outline: cn(
-        "bg-background inset-ring inset-ring-outline",
-        "hover:bg-secondary active:bg-secondary focus-visible:inset-ring-description disabled:bg-background disabled:text-description",
-    ),
-    ghost: "hover:bg-black/5 dark:hover:bg-white/10",
-    link: "text-primary hover:underline",
-    none: cn(),
-    // jnsa: "bg-(--purple) hover:bg-(--purple)/90 text-white",
-    // outline_red: "inset-ring inset-ring-(--red)/50 hover:bg-(--red)/5 text-(--red)",
-    // shadcn: "rounded-xl bg-(--primary) hover:bg-(--primary)/85 text-white dark:text-black",
+	primary: "bg-primary disabled:bg-primary/60 hover:bg-primary/85 active:bg-primary/85 text-background",
+	secondary: "bg-secondary hover:bg-secondary/75",
+	destructive: "bg-red hover:bg-red/85 text-white",
+	outline: cn(
+		"bg-background inset-ring inset-ring-border",
+		"hover:bg-secondary active:bg-secondary focus-visible:inset-ring-muted-foreground disabled:bg-background disabled:text-muted-foreground",
+	),
+	ghost: "hover:bg-secondary",
+	link: "text-primary hover:underline",
+	none: cn(),
+	// jnsa: "bg-(--purple) hover:bg-(--purple)/90 text-white",
+	// outline_red: "inset-ring inset-ring-(--red)/50 hover:bg-(--red)/5 text-(--red)",
+	// shadcn: "rounded-xl bg-(--primary) hover:bg-(--primary)/85 text-white dark:text-black",
 } as const
 const shapes = {
-    square: "rounded-none",
-    rounded: "",
-    pill: "rounded-full",
+	square: "rounded-none",
+	rounded: "",
+	pill: "rounded-full",
 }
 export interface ButtonProps {
-    variant?: Variant
-    size?: keyof typeof sizeMap
-    shape?: "square" | "rounded" | "pill"
-    // tone?: "default" | "success" | "error" | "warning"
-    // elevation?: "none" | "xs" | "sm" | "md" | "lg" | "xl"
+	variant?: Variant
+	size?: keyof typeof sizeMap
+	shape?: "square" | "rounded" | "pill"
+	// tone?: "default" | "success" | "error" | "warning"
+	// elevation?: "none" | "xs" | "sm" | "md" | "lg" | "xl"
 
-    disabled?: boolean
-    loading?: boolean
+	disabled?: boolean
+	loading?: boolean
 
-    label?: string
-    // haptics?: boolean
+	label?: string
+	// haptics?: boolean
 
-    children: ReactNode
-    onPress?: (event: MouseEvent) => void | Promise<void>
-    onHover?: (event: MouseEvent) => void | Promise<void> // Web
-    onFocus?: (event: FocusEvent) => void | Promise<void> // web
-    onBlur?: (event: FocusEvent) => void | Promise<void> // web
+	children?: ReactNode
+	onPress?: (event: MouseEvent) => void | Promise<void>
+	onHover?: (event: MouseEvent) => void | Promise<void> // Web
+	onFocus?: (event: FocusEvent) => void | Promise<void> // web
+	onBlur?: (event: FocusEvent) => void | Promise<void> // web
 
-    type?: "button" | "reset" | "submit"
-    id?: string
-    className?: string
+	type?: "button" | "reset" | "submit"
+	id?: string
+	className?: string
 
-    asChild?: boolean
+	asChild?: boolean
 }
 export default function Button(props: Readonly<ButtonProps>) {
-    const className = cn(
-        "flex items-center justify-center leading-none truncate",
-        "select-none hover:cursor-pointer disabled:hover:cursor-not-allowed",
-        "transition transition-[background-color] transition-duration-250 ease",
-        variant[props.variant ?? "primary"],
-        sizeMap[props.size ?? "xl"],
-        props.className,
-    )
+	const className = cn(
+		"line-clamp-1 flex items-center justify-center leading-none text-center",
+		"select-none hover:cursor-pointer disabled:hover:cursor-not-allowed",
+		"transition-[background-color] transition-duration-250 ease",
+		variant[props.variant ?? "primary"],
+		sizeMap[props.size ?? "xl"],
+		props.className,
+	)
 
-    if (props.asChild) {
-        const children = props.children as ReactHTMLElement<HTMLElement>
-        return React.cloneElement(children, {
-            type: props.type,
-            role: "button",
-            disabled: props.disabled,
-            "aria-label": props.label,
-            onClick: props.onPress,
-            onMouseOver: props.onHover,
-            onFocus: props.onFocus,
-            id: props.id,
-            className: cn(className, children.props.className),
-        })
-    }
+	if (props.asChild) {
+		const children = props.children as ReactHTMLElement<HTMLElement>
+		return React.cloneElement(children, {
+			type: props.type,
+			role: "button",
+			disabled: props.disabled,
+			"aria-label": props.label,
+			onClick: props.onPress,
+			onMouseOver: props.onHover,
+			onFocus: props.onFocus,
+			id: props.id,
+			className: cn(className, children.props.className),
+		})
+	}
 
-    return (
-        <button
-            type={props.type ?? "button"}
-            disabled={props.loading ? true : props.disabled}
-            aria-label={props.label}
-            onClick={props.onPress}
-            onMouseOver={props.onHover}
-            onFocus={props.onFocus}
-            onBlur={props.onBlur}
-            id={props.id}
-            className={className}
-        >
-            {props.loading ? (
-                <IconLoader2 className="animate-spin" />
-            ) : (
-                props.children
-            )}
-        </button>
-    )
+	return (
+		<button
+			type={props.type ?? "button"}
+			disabled={props.loading ? true : props.disabled}
+			aria-label={props.label}
+			onClick={props.onPress}
+			onMouseOver={props.onHover}
+			onFocus={props.onFocus}
+			onBlur={props.onBlur}
+			id={props.id}
+			className={className}
+		>
+			{props.loading ? <IconLoader2 className="animate-spin" /> : props.children}
+		</button>
+	)
 }

package/src/card.tsx

@@ -73,7 +73,7 @@ export const Card: React.FC<CardProps> = props => {
 				"flex flex-col",
 				size[props.size ?? "md"],
 				"bg-background",
-				"sm:inset-ring inset-ring-outline",
+				"sm:inset-ring inset-ring-border",
 				props.className,
 			)}
 		>

package/src/checkbox.tsx

@@ -1,58 +1,75 @@
 "use client"
-import { useEffect, useState } from "react"
-import Image from "next/image"
+import { useEffect, useRef, useState, type ChangeEventHandler, type ReactElement, type ReactNode } from "react"
 import { cn } from "./utils"
+import { setConfig } from "next/config"
+
+export interface ViewProps {
+	children?: ReactNode
+	className?: string
+}
 
 export interface CheckboxProps {
-	checked?: boolean
-	onChange?(checked: boolean): void
 	disabled?: boolean
+	onChange?: ChangeEventHandler<HTMLInputElement> // web
+	onValueChange?(checked: boolean): void | Promise<void> // web
+	checked?: boolean
+	defaultChecked?: boolean
 	// loading?: boolean
 	label?: string
 
 	required?: boolean // web
 	name?: string // web
-	value?: string // web
 	id?: string // web
+	value?: string
 }
-export default function Checkbox(props: Readonly<CheckboxProps>) {
-	const [checked, setChecked] = useState<boolean>(props.checked ?? false)
-
-	const onChange = props.onChange
-	useEffect(() => {
-		if (onChange) onChange(checked)
-	}, [checked, onChange])
+export default function Checkbox(props: Readonly<CheckboxProps>): ReactElement<CheckboxProps> {
+	const input = useRef<HTMLInputElement>(null)
+	const button = useRef<HTMLInputElement>(null)
+	let checked = props.checked || props.defaultChecked || false
 
 	return (
 		<>
 			<input
+				ref={input}
 				type="checkbox"
-				checked={checked}
-				onChange={() => setChecked(v => !v)}
 				disabled={props.disabled}
-				aria-label={props.label}
+				onChange={e => {
+					checked = !checked
+					e.target.checked = checked
+					if (button.current) {
+						button.current.ariaChecked = checked ? "true" : "false"
+						button.current.setAttribute("data-state", checked ? "checked" : "unchecked")
+					}
+				}}
+				checked={checked}
+				defaultChecked={props.defaultChecked}
 				required={props.required}
+				aria-label={props.label}
 				name={props.name}
 				value={props.value}
 				id={props.id}
 				className="peer hidden"
 			/>
 			<button
+				ref={button}
 				type="button"
 				role="checkbox"
 				data-state={checked ? "checked" : "unchecked"}
 				aria-checked={checked}
-				onClick={() => setChecked(v => !v)}
+				onClick={async e => {
+					checked = !checked
+					if (input.current) input.current.checked = checked
+					e.currentTarget.ariaChecked = checked ? "true" : "false"
+					e.currentTarget.setAttribute("data-state", checked ? "checked" : "unchecked")
+				}}
 				disabled={props.disabled}
 				className={cn(
 					"w-4 h-4 rounded-sm hover:cursor-pointer text-background",
-					"transition transition-all transition-duration-150 ease",
-					"data-[state=unchecked]:bg-white data-[state=unchecked]:dark:bg-black",
-					"data-[state=checked]:bg-black data-[state=checked]:dark:bg-white",
-					"data-[state=checked]:disabled:bg-black/50 dark:data-[state=checked]:disabled:bg-white/50",
 					"data-[state=unchecked]:inset-ring",
-					"data-[state=unchecked]:inset-ring-black/50 data-[state=unchecked]:dark:inset-ring-white/50",
-					"data-[state=unchecked]:disabled:inset-ring-black/25 data-[state=unchecked]:dark:disabled:inset-ring-white/25",
+					"data-[state=unchecked]:bg-background data-[state=unchecked]:inset-ring-muted-foreground",
+					"data-[state=unchecked]:disabled:inset-ring-border",
+					"data-[state=checked]:bg-primary data-[state=checked]:disabled:bg-primary/50",
+					"transition transition-all transition-duration-150 ease",
 				)}
 			>
 				<svg width={16} height={16} viewBox="0 0 16 16" fill="none">

package/src/divider.tsx

@@ -6,10 +6,10 @@ export interface DividerProps {
 }
 export default function Divider(props: DividerProps) {
 	return (
-		<hr
+		<div
+			data-orientation={props.orientation ?? "horizontal"}
 			className={cn(
-				"border-(--outline)",
-				props.orientation === "vertical" ? "h-full border-r" : undefined,
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
 				props.className,
 			)}
 		/>

package/src/global.ts

@@ -14,19 +14,21 @@ export const input_variant: Variants = {
 	primary: cn(
 		"bg-background",
 		"placeholder:text-description disabled:text-disabled",
-		// "inset-ring inset-ring-disabled disabled:inset-ring-outline focus:inset-ring-primary",
-		"border border-disabled disabled:border-outline focus:border-primary/75",
+		"inset-ring inset-ring-border disabled:inset-ring-disabled focus:inset-ring-primary/75",
+		// "border border-border disabled:border-disabled focus:border-primary/75",
 		"focus:ring-4 focus:ring-primary/10",
 		"invalid:inset-ring-red",
-		"data-[invalid=true]:border data-[invalid=true]:border-red/50 data-[invalid=true]:focus:border-red",
+		// "data-[invalid=true]:border data-[invalid=true]:border-red/50 data-[invalid=true]:focus:border-red",
+		"data-[invalid=true]:inset-ring-red/50 data-[invalid=true]:focus:inset-ring-red/75",
 		"data-[invalid=true]:focus:ring-4 data-[invalid=true]:focus:ring-red/10",
 	),
 	secondary: cn(),
 	destructive: cn(
 		"bg-background",
 		"placeholder:text-description disabled:text-disabled",
-		// "inset-ring inset-ring-(--red)/50 disabled:inset-ring-(--red)/25 focus:inset-ring-(--red)",
-		"border border-red/50 disabled:border-red/25 focus:border-red",
+		"inset-ring inset-ring-red/50 disabled:inset-ring-red/25 focus:inset-ring-red/75",
+		"focus:ring-4 focus:ring-red/10",
+		// "border border-red/50 disabled:border-red/25 focus:border-red",
 		"focus:ring-4 focus:ring-red/5",
 	),
 	outline: cn(),

package/src/heading.tsx

@@ -31,26 +31,26 @@ Heading.H1 = (props: Readonly<HeadingProps>) => {
 }
 Heading.H2 = (props: Readonly<HeadingProps>) => {
 	return (
-		<h1
+		<h2
 			className={cn(
 				"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
 				props.className,
 			)}
 		>
 			{props.children}
-		</h1>
+		</h2>
 	)
 }
 Heading.H3 = (props: Readonly<HeadingProps>) => {
 	return (
-		<h1
+		<h3
 			className={cn(
 				"scroll-m-20 text-2xl font-semibold tracking-tight",
 				props.className,
 			)}
 		>
 			{props.children}
-		</h1>
+		</h3>
 	)
 }
 Heading.H4 = (props: Readonly<HeadingProps>) => {
@@ -67,14 +67,14 @@ Heading.H4 = (props: Readonly<HeadingProps>) => {
 }
 Heading.H5 = (props: Readonly<HeadingProps>) => {
 	return (
-		<h4
+		<h5
 			className={cn(
 				"scroll-m-20 text-lg font-medium",
 				props.className,
 			)}
 		>
 			{props.children}
-		</h4>
+		</h5>
 	)
 }
 Heading.H6 = (props: Readonly<HeadingProps>) => {

package/src/input.tsx

@@ -1,10 +1,4 @@
-import {
-	type ChangeEventHandler,
-	type FocusEventHandler,
-	type HTMLInputAutoCompleteAttribute,
-	type InputEventHandler,
-	forwardRef,
-} from "react"
+import { type ChangeEvent, type FocusEvent, type InputEvent, type HTMLInputAutoCompleteAttribute, forwardRef } from "react"
 import { input_variant, type Variant } from "./global"
 import { cn } from "./utils"
 
@@ -12,15 +6,7 @@ export interface InputProps {
 	variant?: Variant
 
 	type?: "text" | "password" | "email" | "number" | "tel" | "url" | "file"
-	inputMode?:
-		| "search"
-		| "text"
-		| "email"
-		| "tel"
-		| "url"
-		| "none"
-		| "numeric"
-		| "decimal"
+	inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal"
 	placeholder?: string
 	defaultValue?: string
 
@@ -36,54 +22,52 @@ export interface InputProps {
 	disabled?: boolean
 
 	value?: string
-	onChange?: ChangeEventHandler<HTMLInputElement>
-	onInput?: InputEventHandler<HTMLInputElement>
-	onBlur?: FocusEventHandler<HTMLInputElement>
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void
+	onBlur?: (event: FocusEvent<HTMLInputElement>) => void
+	onInput?: (event: InputEvent<HTMLInputElement>) => void
 
 	id?: string
 	autoComplete?: HTMLInputAutoCompleteAttribute
 	// onChange?: (value: string) => void
 	className?: string
 	invalid?: boolean
-    describedby?: string
+	describedby?: string
 }
-const Input = forwardRef<HTMLInputElement, Readonly<InputProps>>(
-	(props, ref) => {
-		const { onChange } = props
+const Input = forwardRef<HTMLInputElement, Readonly<InputProps>>((props, ref) => {
+	const { onChange } = props
 
-		return (
-			<input
-				ref={ref}
-				type={props.type ?? "text"}
-				inputMode={props.inputMode}
-				placeholder={props.placeholder}
-				defaultValue={props.defaultValue}
-				value={props.value}
-				name={props.name}
-				min={props.min}
-				max={props.max}
-				minLength={props.minLength}
-				maxLength={props.maxLength}
-				pattern={props.pattern}
-				required={props.required}
-				readOnly={props.readOnly}
-				disabled={props.disabled}
-				onChange={onChange}
-				onBlur={props.onBlur}
-				onInvalid={e => e.preventDefault()}
-				id={props.id}
-				autoComplete={props.autoComplete}
-				data-invalid={props.invalid}
-                aria-describedby={props.describedby}
-				className={cn(
-					"flex items-center w-full h-12 px-4",
-					"peer rounded-2xl",
-					"transition transition-duration-150 transition-[border,box-shadow] ease-in",
-					input_variant[props.variant ?? "primary"],
-					props.className,
-				)}
-			/>
-		)
-	},
-)
+	return (
+		<input
+			ref={ref}
+			type={props.type ?? "text"}
+			inputMode={props.inputMode}
+			placeholder={props.placeholder}
+			defaultValue={props.defaultValue}
+			value={props.value}
+			name={props.name}
+			min={props.min}
+			max={props.max}
+			minLength={props.minLength}
+			maxLength={props.maxLength}
+			pattern={props.pattern}
+			required={props.required}
+			readOnly={props.readOnly}
+			disabled={props.disabled}
+			onChange={onChange}
+			onBlur={props.onBlur}
+			onInvalid={e => e.preventDefault()}
+			id={props.id}
+			autoComplete={props.autoComplete}
+			data-invalid={props.invalid}
+			aria-describedby={props.describedby}
+			className={cn(
+				"flex items-center w-full h-12 px-4",
+				"transition transition-duration-150 transition-[box-shadow] ease-in",
+				"peer rounded-2xl",
+				input_variant[props.variant ?? "primary"],
+				props.className,
+			)}
+		/>
+	)
+})
 export default Input

package/src/label.tsx

@@ -23,12 +23,7 @@ export default function Label(props: LabelProps) {
 		<label
 			htmlFor={props.htmlFor}
 			aria-label={props.label}
-			className={cn(
-				"flex items-center gap-2",
-				"peer-disabled:text-(--disabled) invalid:text-(--red) text-sm font-medium leading-4",
-				"select-none",
-				props.className,
-			)}
+			className={cn("flex items-center gap-2", "peer-disabled:text-disabled invalid:text-red text-sm/4 font-medium", "select-none", props.className)}
 		>
 			{props.children}
 		</label>

package/src/select.tsx

@@ -1,172 +1,171 @@
 "use client"
-import { IconChevronDown } from "@tabler/icons-react"
+import { IconChevronDown, IconSelector } from "@tabler/icons-react"
 import Button from "./button"
 import Text from "./text"
 import { cn } from "./utils"
 import React, { type ReactElement, type ReactNode, useState } from "react"
 
 export interface SelectTriggerProps {
-	placeholder?: string
-	id?: string
-	children?: string
+    placeholder?: string
+    id?: string
+    children?: string
 }
 export function SelectTrigger(props: SelectTriggerProps) {
-	return (
-		<button type="button" className={cn("flex items-center", "bg-(--background)")}>
-			{props.placeholder}
-		</button>
-	)
+    return (
+        <button type="button" className={cn("flex items-center", "bg-(--background)")}>
+            {props.placeholder}
+        </button>
+    )
 }
 
 export function Dropdown() {
-	return (
-		<div className="grid">
-			<SelectTrigger placeholder="Select a gender" />
-			<Button variant="outline" size="xl" className="text-(--description)">
-				<Text className="flex grow-1">Country</Text>
-				<IconChevronDown />
-			</Button>
-		</div>
-	)
+    return (
+        <div className="grid">
+            <SelectTrigger placeholder="Select a gender" />
+            <Button variant="outline" size="xl" className="text-(--description)">
+                <Text className="flex grow-1">Country</Text>
+                <IconChevronDown />
+            </Button>
+        </div>
+    )
 }
 
 export interface SelectItemProps {
-	value: string
-	children: ReactNode
-	className?: string
-	onPress?: () => void
+    value: string
+    children: ReactNode
+    className?: string
+    onPress?: () => void
 }
 export function SelectItem(props: Readonly<SelectItemProps>): ReactElement<SelectItemProps> {
-	return (
-		<button
-			type="button"
-			role="option"
-			value={props.value}
-			onClick={props.onPress}
-			className={cn(
-				"flex items-center min-h-12 px-4 gap-4",
-				"select-none hover:bg-secondary",
-				// "[&>svg]:size-4 [&>svg]:scale-125",
-				props.className,
-			)}
-		>
-			{props.children}
-		</button>
-	)
+    return (
+        <button
+            type="button"
+            role="option"
+            value={props.value}
+            onClick={props.onPress}
+            className={cn(
+                "flex items-center min-h-12 px-4 gap-4",
+                "select-none hover:bg-secondary",
+                // "[&>svg]:size-4 [&>svg]:scale-125",
+                props.className,
+            )}
+        >
+            {props.children}
+        </button>
+    )
 }
 export interface SelectContentProps {
-	defaultValue: string
-	children?: ReactNode
+    defaultValue: string
+    children?: ReactNode
 }
 export function SelectContent(props: SelectContentProps) {
-	const [value, setValue] = useState<string>(props.defaultValue)
-	const [expanded, setExpanded] = useState(false)
-	const enhanced = React.Children.map(props.children, child => {
-		// We don't use Radix
-		const children = child as ReactElement<SelectItemProps>
-		if (!React.isValidElement(children)) return children
+    const [value, setValue] = useState<string>(props.defaultValue)
+    const [expanded, setExpanded] = useState(false)
+    const enhanced = React.Children.map(props.children, child => {
+        // We don't use Radix
+        const children = child as ReactElement<SelectItemProps>
+        if (!React.isValidElement(children)) return children
 
-		// Add/override props here
-		return React.cloneElement(children, {
-			onPress() {
-				setValue(children.props.value)
-				setExpanded(false)
-			},
-		})
-	})
+        // Add/override props here
+        return React.cloneElement(children, {
+            onPress() {
+                setValue(children.props.value)
+                setExpanded(false)
+            },
+        })
+    })
 
-	return (
-		<div className="relative flex">
-			<button
-				type="button"
-				role="combobox"
-				aria-expanded={expanded}
-				aria-autocomplete="none"
-				aria-haspopup="listbox"
-				value={value}
-				id="country"
-				onClick={() => setExpanded(!expanded)}
-				// onBlur={() => setExpanded(false)}
-				{...register("country")}
-				className={cn("absolute flex items-center justify-center gap-1 px-4 h-12")}
-			>
-				<p className="font-medium w-6 h-6">{value}</p>
-				<IconSelector size={16} className="text-muted-foreground" />
-			</button>
-			<ul
-				className={cn(
-					"absolute top-[100%] flex flex-col mt-2 w-full max-h-72 overflow-auto",
-					"rounded-2xl",
-					"bg-background shadow-[0_0_16px_0_var(--shadow)]",
-					"animate-popup origin-top-left",
-				)}
-			>
-				{enhanced}
-			</ul>
-		</div>
-	)
+    return (
+        <div className="relative flex">
+            <button
+                type="button"
+                role="combobox"
+                aria-expanded={expanded}
+                aria-autocomplete="none"
+                aria-haspopup="listbox"
+                value={value}
+                id="country"
+                onClick={() => setExpanded(!expanded)}
+                // onBlur={() => setExpanded(false)}
+                className={cn("absolute flex items-center justify-center gap-1 px-4 h-12")}
+            >
+                <p className="font-medium w-6 h-6">{value}</p>
+                <IconSelector size={16} className="text-muted-foreground" />
+            </button>
+            <ul
+                className={cn(
+                    "absolute top-[100%] flex flex-col mt-2 w-full max-h-72 overflow-auto",
+                    "rounded-2xl",
+                    "bg-background shadow-[0_0_16px_0_var(--shadow)]",
+                    "animate-popup origin-top-left",
+                )}
+            >
+                {enhanced}
+            </ul>
+        </div>
+    )
 }
 
 export interface SelectProps {
-	defaultValue?: string
-	placeholder: string
-	value?: string
-	name?: string
-	id?: string
-	children: ReactElement<SelectItemProps>[]
+    defaultValue?: string
+    placeholder: string
+    value?: string
+    name?: string
+    id?: string
+    children: ReactElement<SelectItemProps>[]
 }
 export function Select(props: SelectProps) {
-	const [expanded, setExpanded] = useState(false)
-	const [value, setValue] = useState(props.defaultValue)
-	const [selected, setSelected] = useState<ReactNode>(props.placeholder)
+    const [expanded, setExpanded] = useState(false)
+    const [value, setValue] = useState(props.defaultValue)
+    const [selected, setSelected] = useState<ReactNode>(props.placeholder)
 
-	const children: ReactElement[] = []
-	for (let i = 0; i < props.children.length; i++) {
-		const child = props.children[i]
-		if (React.isValidElement<SelectItemProps>(child)) {
-			children.push(
-				React.cloneElement(child, {
-					onClick() {
-						setValue(child.props.value)
-						setSelected(child.props.children)
-						setExpanded(false)
-					},
-				}),
-			)
-		}
-	}
+    const children: ReactElement[] = []
+    for (let i = 0; i < props.children.length; i++) {
+        const child = props.children[i]
+        if (React.isValidElement<SelectItemProps>(child)) {
+            children.push(
+                React.cloneElement(child as ReactElement<SelectItemProps>, {
+                    onPress() {
+                        setValue(child.props.value)
+                        setSelected(child.props.children)
+                        setExpanded(false)
+                    },
+                }),
+            )
+        }
+    }
 
-	return (
-		<div className="relative flex flex-col w-full max-w-56">
-			<button
-				type="button"
-				role="combobox"
-				aria-expanded={expanded}
-				aria-autocomplete="none"
-				aria-haspopup="listbox"
-				value={value}
-				name={props.name}
-				id={props.id}
-				onClick={() => setExpanded(!expanded)}
-				// onBlur={() => setExpanded(false)}
-				className={cn("flex items-center gap-x-4", "[&>svg]:size-4 [&>svg]:scale-125", "focus:underline")}
-			>
-				{selected}
-				<IconChevronDown size={16} />
-			</button>
-			{expanded ? (
-				<ul
-					id={props.id}
-					className={cn(
-						"absolute flex flex-col w-full top-[100%] overflow-hidden",
-						"rounded-2xl",
-						"bg-(--background) shadow-[0_0_16px_0_var(--shadow)]",
-						"animate-appear-tc",
-					)}
-				>
-					{children}
-				</ul>
-			) : null}
-		</div>
-	)
+    return (
+        <div className="relative flex flex-col w-full max-w-56">
+            <button
+                type="button"
+                role="combobox"
+                aria-expanded={expanded}
+                aria-autocomplete="none"
+                aria-haspopup="listbox"
+                value={value}
+                name={props.name}
+                id={props.id}
+                onClick={() => setExpanded(!expanded)}
+                // onBlur={() => setExpanded(false)}
+                className={cn("flex items-center gap-x-4", "[&>svg]:size-4 [&>svg]:scale-125", "focus:underline")}
+            >
+                {selected}
+                <IconChevronDown size={16} />
+            </button>
+            {expanded ? (
+                <ul
+                    id={props.id}
+                    className={cn(
+                        "absolute flex flex-col w-full top-[100%] overflow-hidden",
+                        "rounded-2xl",
+                        "bg-(--background) shadow-[0_0_16px_0_var(--shadow)]",
+                        "animate-appear-tc",
+                    )}
+                >
+                    {children}
+                </ul>
+            ) : null}
+        </div>
+    )
 }

package/src/toast.tsx

@@ -1,7 +1,7 @@
 export interface ToastOptions {
 	description?: string
 }
-export function toast(title: string, options?: ToastOptions) {
+export function toast(title: string, _options?: ToastOptions) {
 	const toast = document.createElement("div")
 	toast.className =
 		"transition transition-all transition-duration-250 ease-out absolute top-[-64px] p-4 rounded-2xl text-bold bg-white dark:bg-black inset-ring inset-ring-black/25"

package/tsconfig.json

@@ -1,23 +1,26 @@
 {
-	"$schema": "https://json.schemastore.org/tsconfig",
-	"compileroptions": {
+	"compilerOptions": {
+		"allowJs": true,
+		"allowImportingTsExtensions": true,
 		"declaration": true,
 		"declarationMap": true,
 		"esModuleInterop": true,
 		"incremental": false,
 		"isolatedModules": true,
-		"lib": ["es2022", "DOM", "DOM.Iterable"],
-		"module": "NodeNext",
+		"jsx": "react-jsx",
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
+		"module": "Preserve",
 		"moduleDetection": "force",
-		"moduleResolution": "NodeNext",
+		"moduleResolution": "bundler",
+		"noEmit": true,
 		"noUncheckedIndexedAccess": true,
+		"outdir": "dist",
 		"resolveJsonModule": true,
+		"rootDir": "src",
 		"skipLibCheck": true,
 		"strict": true,
-		"target": "ES2022",
-		"jsx": "react-jsx",
-		"outdir": "dist",
-		"rootDir": "src"
+		"target": "ESNext",
+		"verbatimModuleSyntax": true
 	},
 	"include": ["src"],
 	"exclude": ["node_modules", "dist"]