@modlin/ui 0.0.243 → 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.243",
+	"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 = false
-
+	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,22 +2,22 @@ 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"),
+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 = {
+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",
@@ -32,43 +32,65 @@ const variant: Variants = {
 	// 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 = {
+const shape: Record<Shape, string> = {
 	square: "rounded-none",
-	rounded: "",
+	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
-
+    /** @android @ios @web */
+	disabled?: boolean // state
+    /** @android @ios @web */
+	loading?: boolean // state
+    /** @android @ios @web */
 	label?: string
-	// haptics?: boolean
-
+	/** @android @ios @web */
+	title?: string
+    /** @android @ios @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"
+    /** @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
-
-	asChild?: boolean
+    /** @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(
 		"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",
+		"transition-[background-color] duration-250 ease",
+		size[props.size ?? "xl"],
 		variant[props.variant ?? "primary"],
-		sizeMap[props.size ?? "xl"],
+        shape[props.shape ?? "pill"],
 		props.className,
 	)
 
@@ -80,6 +102,8 @@ export default function Button(props: Readonly<ButtonProps>) {
 			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,
@@ -93,13 +117,15 @@ export default function Button(props: Readonly<ButtonProps>) {
 			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.children}
+			{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-border",
-				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,7 +1,6 @@
 "use client"
-import { useEffect, useRef, useState, type ChangeEventHandler, type ReactElement, type ReactNode } from "react"
+import { useRef, type ChangeEvent, type ReactElement, type ReactNode } from "react"
 import { cn } from "./utils"
-import { setConfig } from "next/config"
 
 export interface ViewProps {
 	children?: ReactNode
@@ -9,18 +8,29 @@ export interface ViewProps {
 }
 
 export interface CheckboxProps {
+    /** @android @ios @web */
 	disabled?: boolean
-	onChange?: ChangeEventHandler<HTMLInputElement> // web
-	onValueChange?(checked: boolean): void | Promise<void> // web
-	checked?: boolean
-	defaultChecked?: boolean
-	// loading?: boolean
+    /** @android @ios @web */
+    defaultChecked?: boolean
+    /** @android @ios @web */
+    checked?: boolean
+    /** @android @ios @web */
 	label?: string
-
-	required?: boolean // web
-	name?: string // web
-	id?: string // web
-	value?: string
+    /** @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>): ReactElement<CheckboxProps> {
 	const input = useRef<HTMLInputElement>(null)

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,7 +29,7 @@ Heading.H1 = (props: Readonly<HeadingProps>) => {
 		</h1>
 	)
 }
-Heading.H2 = (props: Readonly<HeadingProps>) => {
+export function Heading2(props: Readonly<HeadingProps>) {
 	return (
 		<h2
 			className={cn(
@@ -41,7 +41,7 @@ Heading.H2 = (props: Readonly<HeadingProps>) => {
 		</h2>
 	)
 }
-Heading.H3 = (props: Readonly<HeadingProps>) => {
+export function Heading3(props: Readonly<HeadingProps>) {
 	return (
 		<h3
 			className={cn(
@@ -53,7 +53,7 @@ Heading.H3 = (props: Readonly<HeadingProps>) => {
 		</h3>
 	)
 }
-Heading.H4 = (props: Readonly<HeadingProps>) => {
+export function Heading4(props: Readonly<HeadingProps>) {
 	return (
 		<h4
 			className={cn(
@@ -65,7 +65,7 @@ Heading.H4 = (props: Readonly<HeadingProps>) => {
 		</h4>
 	)
 }
-Heading.H5 = (props: Readonly<HeadingProps>) => {
+export function Heading5(props: Readonly<HeadingProps>) {
 	return (
 		<h5
 			className={cn(
@@ -77,7 +77,7 @@ Heading.H5 = (props: Readonly<HeadingProps>) => {
 		</h5>
 	)
 }
-Heading.H6 = (props: Readonly<HeadingProps>) => {
+export function Heading6(props: Readonly<HeadingProps>) {
 	return (
 		<h6
 			className={cn(

package/src/input.tsx

@@ -1,37 +1,89 @@
-import { type ChangeEvent, type FocusEvent, type InputEvent, type HTMLInputAutoCompleteAttribute, 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 InputType = "text" | "password" | "email" | "number" | "tel" | "url" | "file"
+type InputMode = "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal"
+type BlurEvent = FocusEvent<HTMLInputElement, Element>
 
-	type?: "text" | "password" | "email" | "number" | "tel" | "url" | "file"
-	inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal"
+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?: (event: ChangeEvent<HTMLInputElement>) => void
-	onBlur?: (event: FocusEvent<HTMLInputElement>) => void
-	onInput?: (event: InputEvent<HTMLInputElement>) => void
-
-	id?: string
-	autoComplete?: HTMLInputAutoCompleteAttribute
-	// onChange?: (value: string) => void
-	className?: string
+    /** @web */
 	invalid?: boolean
+    /** @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
@@ -54,12 +106,15 @@ const Input = forwardRef<HTMLInputElement, Readonly<InputProps>>((props, ref) =>
 			readOnly={props.readOnly}
 			disabled={props.disabled}
 			onChange={onChange}
-			onBlur={props.onBlur}
+            onFocus={props.onFocus}
+            onBlur={props.onBlur}
 			onInvalid={e => e.preventDefault()}
 			id={props.id}
+            autoCapitalize={props.autoCapitalize}
 			autoComplete={props.autoComplete}
-			data-invalid={props.invalid}
+            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",

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,38 +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-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]: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/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-()"),
-}