@modlin/ui 0.0.244 → 0.0.246

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

package/src/button.tsx

@@ -19,13 +19,13 @@ const size: Record<Size, string> = {
 }
 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",
+	secondary: "bg-secondary hover:bg-secondary/75 backdrop-blur-sm",
 	destructive: "bg-red hover:bg-red/85 text-white",
 	outline: cn(
-		"bg-background inset-ring inset-ring-border",
+		"bg-background/25 backdrop-blur-sm 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",
+	ghost: "hover:bg-secondary backdrop-blur-sm",
 	link: "text-primary hover:underline",
 	none: cn(),
 	// jnsa: "bg-(--purple) hover:bg-(--purple)/90 text-white",

package/src/checkbox.tsx

@@ -34,7 +34,7 @@ export interface CheckboxProps {
 }
 export default function Checkbox(props: Readonly<CheckboxProps>): ReactElement<CheckboxProps> {
 	const input = useRef<HTMLInputElement>(null)
-	const button = useRef<HTMLInputElement>(null)
+	const button = useRef<HTMLButtonElement>(null)
 	let checked = props.checked || props.defaultChecked || false
 
 	return (

package/src/input.tsx

@@ -1,4 +1,4 @@
-import { type ChangeEvent, type FocusEvent, type HTMLInputAutoCompleteAttribute, forwardRef } from "react"
+import type { ChangeEvent, FocusEvent, HTMLInputAutoCompleteAttribute, InvalidEvent } from "react"
 import type { Variant } from "./globals"
 import { cn } from "./utils"
 
@@ -16,7 +16,7 @@ export const input_variant: Record<Variant, string> = {
 	),
 	secondary: cn(),
 	destructive: cn(
-		"bg-background",
+		"bg-background/25 backdrop-blur-sm",
 		"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",
@@ -34,63 +34,62 @@ type InputMode = "search" | "text" | "email" | "tel" | "url" | "none" | "numeric
 type BlurEvent = FocusEvent<HTMLInputElement, Element>
 
 export interface InputProps {
-    /** @android @ios @web */
+	/** @android @ios @web */
 	placeholder?: string
-    /** @android @ios @web */
+	/** @android @ios @web */
 	defaultValue?: string
-    /** @android @ios @web */
+	/** @android @ios @web */
 	inputMode?: InputMode
-    /** @android @ios @web */
+	/** @android @ios @web */
 	value?: string
-    /** @android @ios @web */
+	/** @android @ios @web */
 	readOnly?: boolean
-    /** @android @ios @web */
+	/** @android @ios @web */
 	maxLength?: number
-    /** @android @ios @web */
+	/** @android @ios @web */
 	autoCapitalize?: "none" | "sentences" | "words" | "characters"
-    /** @android @ios @web */
+	/** @android @ios @web */
 	autoComplete?: HTMLInputAutoCompleteAttribute
-    /** @android @ios @web */
+	/** @android @ios @web */
 	autoCorrect?: boolean
-    /** @android @ios @web */
+	/** @android @ios @web */
 	variant?: Variant
-    /** @web */
+	/** @web */
 	id?: string
-    /** @web */
+	/** @web */
 	type?: InputType
-    /** @web */
+	/** @web */
 	name?: string
-    /** @web */
+	/** @web */
 	required?: boolean // validation
-    /** @web */
+	/** @web */
 	disabled?: boolean
-    /** @web */
+	/** @web */
 	pattern?: string // validation
-    /** @web */
+	/** @web */
 	min?: number | string // validation
-    /** @web */
+	/** @web */
 	max?: number | string // validation
-    /** @web */
+	/** @web */
 	minLength?: number // validation
-    /** @web */
+	/** @web */
 	invalid?: boolean
-    /** @web */
+	/** @web */
 	describedby?: string
-    /** @web */
+	/** @web */
 	className?: string
-    /** @android @ios @web */
-	onChange?(event: ChangeEvent): void
-    /** @android @ios @web */
-	onFocus?(event: FocusEvent): void
-    /** @android @ios @web */
+	/** @android @ios @web */
+	onChange?(event: ChangeEvent<HTMLInputElement>): void
+	/** @android @ios @web */
+	onFocus?(event: FocusEvent<HTMLInputElement>): void
+	/** @android @ios @web */
 	onBlur?(event: BlurEvent): void
+	/** @web */
+	onInvalid?(event: InvalidEvent<HTMLInputElement>): void
 }
-const Input = forwardRef<HTMLInputElement, Readonly<InputProps>>((props, ref) => {
-	const { onChange } = props
-
+const Input = (props: Readonly<InputProps>) => {
 	return (
 		<input
-			ref={ref}
 			type={props.type ?? "text"}
 			inputMode={props.inputMode}
 			placeholder={props.placeholder}
@@ -105,16 +104,16 @@ const Input = forwardRef<HTMLInputElement, Readonly<InputProps>>((props, ref) =>
 			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}
+			autoCapitalize={props.autoCapitalize}
 			autoComplete={props.autoComplete}
-            autoCorrect={props.autoCorrect ? "on" : "off"}
+			autoCorrect={props.autoCorrect ? "on" : "off"}
 			aria-describedby={props.describedby}
 			data-invalid={props.invalid}
+			onChange={props.onChange}
+			onFocus={props.onFocus}
+			onBlur={props.onBlur}
+			onInvalid={props.onInvalid}
 			className={cn(
 				"flex items-center w-full h-12 px-4",
 				"transition transition-duration-150 transition-[box-shadow] ease-in",
@@ -124,5 +123,5 @@ const Input = forwardRef<HTMLInputElement, Readonly<InputProps>>((props, ref) =>
 			)}
 		/>
 	)
-})
+}
 export default Input

package/src/select.native.tsx

@@ -1,15 +1,17 @@
-import type { ChangeEvent, ReactNode } from "react"
+import { useRef, type ChangeEvent, type ReactNode } from "react"
 import { cn } from "./utils"
 
 export interface SelectProps {
-	children?: ReactNode
+	defaultValue?: string
 	name?: string
 	id?: string
+	children?: ReactNode
 	onChange?: (event: ChangeEvent<HTMLSelectElement>) => void
 }
 export function Select(props: SelectProps) {
 	return (
 		<select
+			defaultValue={props.defaultValue}
 			name={props.name}
 			id={props.id}
 			onChange={props.onChange}
@@ -25,6 +27,9 @@ export function Select(props: SelectProps) {
 }
 
 export interface SelectItemProps {
+	disabled?: boolean
+	selected?: boolean
+	hidden?: boolean
 	value: string
 	children?: ReactNode
 	className?: string
@@ -38,6 +43,9 @@ export function SelectItem(props: SelectItemProps) {
 				props.className,
 			)}
 			value={props.value}
+			disabled={props.disabled}
+			selected={props.selected}
+			hidden={props.hidden}
 		>
 			{props.children}
 		</option>

package/src/utils.ts

@@ -1,5 +1,4 @@
-import clsx from "clsx"
-import type { ClassValue } from "clsx"
+import clsx, { type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...classList: ClassValue[]) {

package/src/example.tsx

@@ -1,30 +0,0 @@
-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>
-	)
-}