@modlin/ui 0.0.245 → 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.245",
+	"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/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",
@@ -84,13 +84,12 @@ export interface InputProps {
 	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}
 			autoComplete={props.autoComplete}
 			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/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>
-	)
-}