@modlin/ui 0.0.242 → 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.242",
+	"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,57 +1,75 @@
 "use client"
-import { useEffect, useState } from "react"
+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>