@modlin/ui 0.0.242 → 0.0.244

package/LICENSE

@@ -0,0 +1,27 @@
+The Modlin Distributable License (MDL)
+
+Copyright (c) 2025 Modlin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+Any use, distribution, modification, integration, or implementation of the
+Software in another project must include clear and visible credit to the
+Software and to its original author. This credit must be placed in all public
+distributions, documentation, and any “About” or “Credits” section of the
+implementing project.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

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.242",
+	"version": "0.0.244",
 	"main": "src/index.ts",
 	"type": "module",
 	"exports": {

package/src/alert.tsx

@@ -54,7 +54,7 @@ export function Alert(props: Readonly<AlertProps>) {
 			className={cn(
 				"grid grid-cols-[16px_1fr] auto-rows-auto gap-x-4 gap-y-1 items-center justify-center",
 				"p-4 rounded-2xl",
-				"inset-ring inset-ring-black/15 dark:inset-ring-white/10",
+				"inset-ring inset-ring-border",
 				props.className,
 			)}
 		>
@@ -68,7 +68,7 @@ Alert.Destructive = (props: Readonly<AlertProps>) => {
 			className={cn(
 				"grid grid-cols-[16px_1fr] auto-rows-auto gap-x-4 gap-y-1 items-center justify-center",
 				"p-4 rounded-2xl",
-				"inset-ring inset-ring-black/15 dark:inset-ring-white/10",
+				"inset-ring inset-ring-border",
 				"text-red-600 dark:text-red-400",
 				props.className,
 			)}

package/src/avatar.tsx

@@ -1,3 +1,5 @@
+"use client"
+import { useState } from "react"
 import { cn } from "./utils"
 import Image, { type ImageProps } from "next/image"
 
@@ -5,22 +7,27 @@ export interface AvatarProps extends ImageProps {
 	fallback: string
 }
 export default function Avatar({ fallback, ...props }: Readonly<AvatarProps>) {
-	const show = true
-
+	const [error, setError] = useState(false)
+	if (error) {
+		return (
+			<span
+				className={cn(
+					"relative flex shrink-0 size-8 overflow-hidden rounded-full bg-background inset-ring inset-ring-border text-sm font-medium leading-none",
+					props.className,
+				)}
+			>
+				<span className="flex items-center justify-center w-full font-mono text-sm">{fallback.slice(0, 3).toUpperCase()}</span>
+			</span>
+		)
+	}
 	return (
 		<span
 			className={cn(
-				"relative flex shrink-0 size-8 overflow-hidden rounded-full ring ring-(--outline)",
+				"relative flex shrink-0 size-8 overflow-hidden rounded-full bg-background border border-border text-sm font-medium leading-none",
 				props.className,
 			)}
 		>
-			{show ? (
-				<Image {...props} className="aspect-square size-full" />
-			) : (
-				<span className="flex items-center justify-center w-full text-sm font-medium leading-none">
-					{fallback.slice(0, 3).toUpperCase()}
-				</span>
-			)}
+			<Image width={32} height={32} onError={() => setError(true)} {...props} className={cn("aspect-square size-full", props.className)} />
 		</span>
 	)
 }

package/src/button.tsx

@@ -2,124 +2,130 @@ import { cn } from "./utils"
 import { IconLoader2 } from "@tabler/icons-react"
 import type { MouseEvent, FocusEvent, ReactNode, ReactHTMLElement } from "react"
 import React from "react"
-import type { Variant, Variants } from "./global"
+import type { Variant, Size, Shape } from "./globals"
 
-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"),
+const size: Record<Size, string> = {
+	sm: cn("h-8 px-4 gap-x-1 text-sm font-medium"),
+	md: cn("h-9 px-4.5 gap-x-1 text-sm font-medium"),
+	lg: cn("h-11 px-5 gap-x-1 text-base font-medium", "[&>svg]:size-4"),
+	xl: cn("h-12 px-6 gap-x-1 text-base 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 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",
+const variant: Record<Variant, string> = {
+	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",
+const shape: Record<Shape, string> = {
+	square: "rounded-none",
+	rounded: "rounded-2xl",
+	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"
-
-    disabled?: boolean
-    loading?: 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
-
-    type?: "button" | "reset" | "submit"
-    id?: string
-    className?: string
-
-    asChild?: boolean
+    /** @android @ios @web */
+	disabled?: boolean // state
+    /** @android @ios @web */
+	loading?: boolean // state
+    /** @android @ios @web */
+	label?: string
+	/** @android @ios @web */
+	title?: string
+    /** @android @ios @web */
+	children?: ReactNode
+    /** @android @ios @web */
+	asChild?: boolean
+    /** @android @ios @web */
+	variant?: Variant
+    /** @android @ios @web */
+	size?: Size
+    /** @android @ios @web */
+	shape?: Shape
+    /** @android @ios */
+	haptics?: boolean
+	/** @android @ios */
+	full?: boolean // utility
+	/** @android @ios */
+	rounded?: number // utility
+    /** @web */
+	id?: string
+    /** @web */
+	type?: "button" | "reset" | "submit"
+    /** @web */
+	className?: string
+    /** @android @ios @web */
+	onPress?(event: MouseEvent): void | Promise<void>
+    /** @android @ios @web */
+	onPressIn?(event: MouseEvent): void | Promise<void>
+    /** @android @ios @web */
+	onPressOut?(event: MouseEvent): void | Promise<void>
+    /** @web */
+	onHover?(event: MouseEvent): void | Promise<void>
+    /** @web */
+	onFocus?(event: FocusEvent): void | Promise<void>
+    /** @web */
+	onBlur?(event: FocusEvent): void | Promise<void>
+	// tone?: "default" | "success" | "error" | "warning"
+	// elevation?: "none" | "xs" | "sm" | "md" | "lg" | "xl"
 }
 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] duration-250 ease",
+		size[props.size ?? "xl"],
+		variant[props.variant ?? "primary"],
+        shape[props.shape ?? "pill"],
+		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,
+            onMouseDown: props.onPressIn,
+            onMouseUp: props.onPressOut,
+			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}
+            onMouseDown={props.onPressIn}
+            onMouseUp={props.onPressOut}
+			onMouseOver={props.onHover}
+			onFocus={props.onFocus}
+			onBlur={props.onBlur}
+			id={props.id}
+			className={className}
+		>
+			{props.loading ? <IconLoader2 className="animate-spin" /> : (props.title || props.children)}
+		</button>
+	)
 }

package/src/card.tsx

@@ -2,23 +2,20 @@ import { cn } from "./utils"
 import type * as React from "react"
 
 export interface CardHeaderProps {
+	children?: React.ReactNode
 	className?: string
-	children: React.ReactNode
 }
 export const CardHeader: React.FC<CardHeaderProps> = props => {
 	return (
-		<header
-			data-slot="card-header"
-			className={cn("flex flex-col gap-4", props.className)}
-		>
+		<header data-slot="card-header" className={cn("flex flex-col gap-4", props.className)}>
 			{props.children}
 		</header>
 	)
 }
 
 export interface CardContentProps {
+	children?: React.ReactNode
 	className?: string
-	children: React.ReactNode
 }
 export const CardContent: React.FC<CardContentProps> = props => {
 	return (
@@ -29,22 +26,19 @@ export const CardContent: React.FC<CardContentProps> = props => {
 }
 
 export interface CardFooterProps {
+	children?: React.ReactNode
 	className?: string
-	children: React.ReactNode
 }
 export const CardFooter: React.FC<CardFooterProps> = props => {
 	return (
-		<footer
-			data-slot="card-footer"
-			className={cn("flex [.border-t]:pt-4", props.className)}
-		>
+		<footer data-slot="card-footer" className={cn("flex [.border-t]:pt-4", props.className)}>
 			{props.children}
 		</footer>
 	)
 }
 
 export interface CardAction {
-	children: React.ReactNode
+	children?: React.ReactNode
 	className?: string
 }
 export function CardAction(props: Readonly<CardAction>) {
@@ -56,29 +50,19 @@ export function CardAction(props: Readonly<CardAction>) {
 }
 
 const size = {
-	md: "p-4 gap-4 sm:rounded-2xl",
-	lg: "p-6 gap-6 sm:rounded-2xl",
-	xl: "p-8 gap-8 sm:rounded-4xl",
+	md: "p-4 gap-4 rounded-2xl",
+	lg: "p-6 gap-6 rounded-2xl",
+	xl: "p-8 gap-8 rounded-4xl",
 }
 
 export interface CardProps {
-	className?: string
 	size?: "lg" | "xl"
-	children: React.ReactNode
+	children?: React.ReactNode
+	className?: string
 }
 export const Card: React.FC<CardProps> = props => {
 	return (
-		<div
-			className={cn(
-				"flex flex-col",
-				size[props.size ?? "md"],
-				"bg-background",
-				"sm:inset-ring inset-ring-outline",
-				props.className,
-			)}
-		>
-			{props.children}
-		</div>
+		<div className={cn("flex flex-col", size[props.size ?? "md"], "bg-background", "inset-ring inset-ring-border", props.className)}>{props.children}</div>
 	)
 }
 

package/src/checkbox.tsx

@@ -1,57 +1,85 @@
 "use client"
-import { useEffect, useState } from "react"
+import { useRef, type ChangeEvent, type ReactElement, type ReactNode } from "react"
 import { cn } from "./utils"
 
+export interface ViewProps {
+	children?: ReactNode
+	className?: string
+}
+
 export interface CheckboxProps {
-	checked?: boolean
-	onChange?(checked: boolean): void
+    /** @android @ios @web */
 	disabled?: boolean
-	// loading?: boolean
+    /** @android @ios @web */
+    defaultChecked?: boolean
+    /** @android @ios @web */
+    checked?: boolean
+    /** @android @ios @web */
 	label?: string
-
-	required?: boolean // web
-	name?: string // web
-	value?: string // web
-	id?: string // web
+    /** @web */
+	required?: boolean
+    /** @web */
+	name?: string
+    /** @web */
+	id?: string
+    /** @web */
+    asChild?: boolean
+    /** @android @ios @web */
+	onChange?(checked: boolean): void
+    // note: dropped support for RHF to add native support
+    /** @deprecated @use checked */
+    value?: string
+    /** @deprecated @use onChange */
+    onValueChange?(event: ChangeEvent<HTMLInputElement>): void
 }
-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/example.tsx

@@ -0,0 +1,30 @@
+import { Heading4 } from "./heading"
+import Button from "./button"
+import Input from "./input"
+import Label from "./label"
+import { Muted } from "./typography"
+
+export function Example() {
+	return (
+		<div className="flex flex-1 flex-col gap-8 p-8 bg-background">
+			<header>
+				<Heading4 className="h-8">Login to your account</Heading4>
+				<Muted>Enter your email address below to login to your account</Muted>
+			</header>
+			<div className="flex flex-col gap-4">
+				<div className="flex flex-col gap-2">
+					<Label htmlFor="email">Email address</Label>
+					<Input placeholder="m@example.com" id="email" type="email" inputMode="email" autoComplete="email" autoCapitalize="none" />
+				</div>
+				<div className="flex flex-col gap-2">
+					<Label htmlFor="password">Password</Label>
+					<Input id="password" type="password" autoComplete="password" autoCapitalize="none" />
+				</div>
+			</div>
+			<div className="flex flex-col gap-4">
+				<Button title="Login" haptics />
+				<Button variant="outline" title="Login with Google" haptics />
+			</div>
+		</div>
+	)
+}

package/src/globals.ts

@@ -0,0 +1,3 @@
+export type Variant = "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "none"
+export type Size = "sm" | "md" | "lg" | "xl" | "icon" | "none"
+export type Shape = "square" | "rounded" | "pill"

package/src/heading.tsx

@@ -17,7 +17,7 @@ export default function Heading(props: Readonly<HeadingProps>) {
 	)
 }
 
-Heading.H1 = (props: Readonly<HeadingProps>) => {
+export function Heading1(props: Readonly<HeadingProps>) {
 	return (
 		<h1
 			className={cn(
@@ -29,31 +29,31 @@ Heading.H1 = (props: Readonly<HeadingProps>) => {
 		</h1>
 	)
 }
-Heading.H2 = (props: Readonly<HeadingProps>) => {
+export function Heading2(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>) => {
+export function Heading3(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>) => {
+export function Heading4(props: Readonly<HeadingProps>) {
 	return (
 		<h4
 			className={cn(
@@ -65,19 +65,19 @@ Heading.H4 = (props: Readonly<HeadingProps>) => {
 		</h4>
 	)
 }
-Heading.H5 = (props: Readonly<HeadingProps>) => {
+export function Heading5(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>) => {
+export function Heading6(props: Readonly<HeadingProps>) {
 	return (
 		<h6
 			className={cn(

package/src/input.tsx

@@ -1,89 +1,128 @@
-import {
-	type ChangeEventHandler,
-	type FocusEventHandler,
-	type HTMLInputAutoCompleteAttribute,
-	type InputEventHandler,
-	forwardRef,
-} from "react"
-import { input_variant, type Variant } from "./global"
+import { type ChangeEvent, type FocusEvent, type HTMLInputAutoCompleteAttribute, forwardRef } from "react"
+import type { Variant } from "./globals"
 import { cn } from "./utils"
 
-export interface InputProps {
-	variant?: Variant
+export const input_variant: Record<Variant, string> = {
+	primary: cn(
+		"bg-background/25 backdrop-blur-sm",
+		"placeholder:text-muted-foreground disabled:text-disabled",
+		"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 dark:focus:ring-primary/15",
+		"invalid:inset-ring-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-muted-foreground disabled:text-disabled",
+		"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(),
+	ghost: cn(),
+	link: cn(),
+	none: cn("text-()"),
+}
 
-	type?: "text" | "password" | "email" | "number" | "tel" | "url" | "file"
-	inputMode?:
-		| "search"
-		| "text"
-		| "email"
-		| "tel"
-		| "url"
-		| "none"
-		| "numeric"
-		| "decimal"
+type InputType = "text" | "password" | "email" | "number" | "tel" | "url" | "file"
+type InputMode = "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal"
+type BlurEvent = FocusEvent<HTMLInputElement, Element>
+
+export interface InputProps {
+    /** @android @ios @web */
 	placeholder?: string
+    /** @android @ios @web */
 	defaultValue?: string
-
+    /** @android @ios @web */
+	inputMode?: InputMode
+    /** @android @ios @web */
+	value?: string
+    /** @android @ios @web */
+	readOnly?: boolean
+    /** @android @ios @web */
+	maxLength?: number
+    /** @android @ios @web */
+	autoCapitalize?: "none" | "sentences" | "words" | "characters"
+    /** @android @ios @web */
+	autoComplete?: HTMLInputAutoCompleteAttribute
+    /** @android @ios @web */
+	autoCorrect?: boolean
+    /** @android @ios @web */
+	variant?: Variant
+    /** @web */
+	id?: string
+    /** @web */
+	type?: InputType
+    /** @web */
 	name?: string
+    /** @web */
+	required?: boolean // validation
+    /** @web */
+	disabled?: boolean
+    /** @web */
 	pattern?: string // validation
+    /** @web */
 	min?: number | string // validation
+    /** @web */
 	max?: number | string // validation
-	maxLength?: number // validation
+    /** @web */
 	minLength?: number // validation
-	required?: boolean // validation
-
-	readOnly?: boolean
-	disabled?: boolean
-
-	value?: string
-	onChange?: ChangeEventHandler<HTMLInputElement>
-	onInput?: InputEventHandler<HTMLInputElement>
-	onBlur?: FocusEventHandler<HTMLInputElement>
-
-	id?: string
-	autoComplete?: HTMLInputAutoCompleteAttribute
-	// onChange?: (value: string) => void
-	className?: string
+    /** @web */
 	invalid?: boolean
-    describedby?: string
+    /** @web */
+	describedby?: string
+    /** @web */
+	className?: string
+    /** @android @ios @web */
+	onChange?(event: ChangeEvent): void
+    /** @android @ios @web */
+	onFocus?(event: FocusEvent): void
+    /** @android @ios @web */
+	onBlur?(event: BlurEvent): void
 }
-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}
+            onFocus={props.onFocus}
+            onBlur={props.onBlur}
+			onInvalid={e => e.preventDefault()}
+			id={props.id}
+            autoCapitalize={props.autoCapitalize}
+			autoComplete={props.autoComplete}
+            autoCorrect={props.autoCorrect ? "on" : "off"}
+			aria-describedby={props.describedby}
+			data-invalid={props.invalid}
+			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.native.tsx

@@ -0,0 +1,45 @@
+import type { ChangeEvent, ReactNode } from "react"
+import { cn } from "./utils"
+
+export interface SelectProps {
+	children?: ReactNode
+	name?: string
+	id?: string
+	onChange?: (event: ChangeEvent<HTMLSelectElement>) => void
+}
+export function Select(props: SelectProps) {
+	return (
+		<select
+			name={props.name}
+			id={props.id}
+			onChange={props.onChange}
+			className={cn(
+				"flex items-center h-12 px-4 rounded-2xl bg-background/25 backdrop-blur-sm inset-ring inset-ring-border",
+				"open:inset-ring-primary/75 open:ring-4 open:ring-primary/10 dark:open:ring-primary/15 focus:inset-ring-primary/75 focus:ring-4 focus:ring-primary/10 dark:focus:ring-primary/15",
+				"transition duration-150 ease-in",
+			)}
+		>
+			{props.children}
+		</select>
+	)
+}
+
+export interface SelectItemProps {
+	value: string
+	children?: ReactNode
+	className?: string
+}
+export function SelectItem(props: SelectItemProps) {
+	return (
+		<option
+			className={cn(
+				"gap-4 h-9 min-h-9 px-3 rounded-lg text-foreground hover:bg-secondary focus:bg-secondary checked:bg-secondary",
+				"transition duration-150 ease-out",
+				props.className,
+			)}
+			value={props.value}
+		>
+			{props.children}
+		</option>
+	)
+}

package/src/global.ts

@@ -1,36 +0,0 @@
-import { cn } from "./utils"
-
-export type Variant =
-	| "primary"
-	| "secondary"
-	| "destructive"
-	| "outline"
-	| "ghost"
-	| "link"
-	| "none"
-export type Variants = Record<Variant, string>
-
-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",
-		"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]: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",
-		"focus:ring-4 focus:ring-red/5",
-	),
-	outline: cn(),
-	ghost: cn(),
-	link: cn(),
-	none: cn("text-()"),
-}