@modlin/ui 0.0.1

package/README.md

@@ -0,0 +1 @@
+# Suffix UI Library for React

package/biome.json

@@ -0,0 +1,36 @@
+{
+    "$schema": "https://biomejs.dev/schemas/2.1.2/schema.json",
+    "vcs": {
+        "enabled": false,
+        "clientKind": "git",
+        "useIgnoreFile": false
+    },
+    "files": {
+        "ignoreUnknown": false
+    },
+    "formatter": {
+        "enabled": true,
+        "indentStyle": "tab"
+    },
+    "linter": {
+        "enabled": true,
+        "rules": {
+            "recommended": true
+        }
+    },
+    "javascript": {
+        "formatter": {
+            "quoteStyle": "double",
+            "semicolons": "asNeeded",
+            "arrowParentheses": "asNeeded"
+        }
+    },
+    "assist": {
+        "enabled": true,
+        "actions": {
+            "source": {
+                "organizeImports": "off"
+            }
+        }
+    }
+}

package/components/alert.tsx

@@ -0,0 +1,79 @@
+import { cn } from "@/lib/utils"
+import type { ReactElement, ReactNode } from "react"
+
+export interface AlertTitleProps {
+	children: ReactNode
+	className?: string
+}
+export function AlertTitle(props: Readonly<AlertTitleProps>) {
+	return (
+		<div
+			className={cn(
+				"flex flex-1 items-center h-4 font-medium",
+				"text-sm overflow-hidden whitespace-nowrap text-ellipsis",
+				props.className,
+			)}
+		>
+			{props.children}
+		</div>
+	)
+}
+
+export interface AlertDescriptionProps {
+	children: ReactNode
+	className?: string
+}
+export function AlertDescription(props: Readonly<AlertDescriptionProps>) {
+	return (
+		<div
+			className={cn(
+				"grid flex flex-1 gap-1 col-start-2",
+				"text-sm",
+				props.className,
+			)}
+		>
+			{props.children}
+		</div>
+	)
+}
+
+export interface AlertProps {
+	dismissible?: boolean
+	children:
+		| [
+				ReactElement,
+				ReactElement<AlertTitleProps>,
+				ReactElement<AlertDescriptionProps> | undefined,
+		  ]
+		| [ReactElement, ReactElement<AlertTitleProps>]
+	className?: string
+}
+export function Alert(props: Readonly<AlertProps>) {
+	return (
+		<div
+			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",
+				props.className,
+			)}
+		>
+			{props.children}
+		</div>
+	)
+}
+Alert.Destructive = (props: Readonly<AlertProps>) => {
+	return (
+		<div
+			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",
+				"text-red-600 dark:text-red-400",
+				props.className,
+			)}
+		>
+			{props.children}
+		</div>
+	)
+}

package/components/avatar.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils"
+import Image, { type ImageProps } from "next/image"
+
+export interface AvatarProps extends ImageProps {
+	fallback: string
+}
+export default function Avatar({ fallback, ...props }: Readonly<AvatarProps>) {
+	const show = true
+
+	return (
+		<span
+			className={cn(
+				"relative flex shrink-0 size-8 overflow-hidden rounded-full ring ring-(--outline)",
+				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>
+			)}
+		</span>
+	)
+}

package/components/badge.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils"
+import type { ReactNode } from "react"
+
+const variants = {
+	primary: "",
+	secondary: "",
+	destructive: "",
+	outline: "",
+}
+
+export interface BadgeProps {
+	variant?: keyof typeof variants
+	children: ReactNode | number
+	className?: string
+}
+export default function Badge(props: Readonly<BadgeProps>) {
+	return (
+		<span
+			className={cn(
+				"flex items-center justify-center gap-1",
+				"h-5 px-2 rounded-full [&>svg]:size-3",
+				"text-xs font-medium leading-none whitespace-nowrap",
+				"bg-black dark:bg-white text-white dark:text-black",
+				typeof props.children === "number" ? "w-5" : "w-fit",
+				props.className,
+			)}
+		>
+			{props.children}
+		</span>
+	)
+}

package/components/button.tsx

@@ -0,0 +1,135 @@
+import { cn } from "@/lib/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"
+
+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(),
+}
+const variant: Variants = {
+    primary:
+        "bg-(--primary) disabled:bg-(--priority) hover:bg-(--primary)/85 text-white dark:text-black",
+    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",
+} as const
+const shapes = {
+    square: "rounded-none",
+    rounded: "",
+    pill: "rounded-full",
+}
+const acyrlic = {
+    primary: "",
+    secondary: "",
+    destructive: "",
+    outline:
+        "inset-ring inset-ring-gray-300 dark:inset-ring-white/25 backdrop-blur-xl hover:bg-black/5 dark:hover:bg-white/10 dark:text-white",
+    ghost: "",
+    link: "",
+    shadcn: "",
+}
+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
+}
+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-all 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),
+        })
+    }
+
+    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/components/card.tsx

@@ -0,0 +1,85 @@
+import { cn } from "@/lib/utils"
+import type * as React from "react"
+
+export interface CardHeaderProps {
+	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)}
+		>
+			{props.children}
+		</header>
+	)
+}
+
+export interface CardContentProps {
+	className?: string
+	children: React.ReactNode
+}
+export const CardContent: React.FC<CardContentProps> = props => {
+	return (
+		<div data-slot="card-content" className={cn("flex", props.className)}>
+			{props.children}
+		</div>
+	)
+}
+
+export interface CardFooterProps {
+	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)}
+		>
+			{props.children}
+		</footer>
+	)
+}
+
+export interface CardAction {
+	children: React.ReactNode
+	className?: string
+}
+export function CardAction(props: Readonly<CardAction>) {
+	return (
+		<div data-slot="card-action" className={cn(props.className)}>
+			{props.children}
+		</div>
+	)
+}
+
+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",
+}
+
+export interface CardProps {
+	className?: string
+	size?: "lg" | "xl"
+	children: React.ReactNode
+}
+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>
+	)
+}
+
+export default Card

package/components/checkbox.tsx

@@ -0,0 +1,68 @@
+"use client"
+import { useEffect, useState } from "react"
+import Image from "next/image"
+import { cn } from "@/lib/utils"
+
+export interface CheckboxProps {
+	checked?: boolean
+	onChange?(checked: boolean): void
+	disabled?: boolean
+	// loading?: boolean
+	label?: string
+
+	required?: boolean // web
+	name?: string // web
+	value?: string // web
+	id?: string // web
+}
+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])
+
+	return (
+		<>
+			<input
+				type="checkbox"
+				checked={checked}
+				onChange={() => setChecked(v => !v)}
+				disabled={props.disabled}
+				aria-label={props.label}
+				required={props.required}
+				name={props.name}
+				value={props.value}
+				id={props.id}
+				className="peer hidden"
+			/>
+			<button
+				type="button"
+				role="checkbox"
+				data-state={checked ? "checked" : "unchecked"}
+				aria-checked={checked}
+				onClick={() => setChecked(v => !v)}
+				disabled={props.disabled}
+				className={cn(
+					"w-4 h-4 rounded-sm hover:cursor-pointer",
+					"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",
+				)}
+			>
+				<Image
+					src={"/check.svg"}
+					alt="Check"
+					width={16}
+					height={16}
+					className="dark:invert select-none"
+				/>
+			</button>
+		</>
+	)
+}

package/components/content.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils"
+
+export interface ContentProps {
+	children: React.ReactNode
+}
+export default function Content(
+	props: Readonly<ContentProps> & React.HTMLAttributes<HTMLElement>,
+) {
+	return <div className={cn("flex", props.className)}>{props.children}</div>
+}

package/components/divider.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils"
+
+export interface DividerProps {
+	className?: string
+	orientation?: "vertical" | "horizontal"
+}
+export default function Divider(props: DividerProps) {
+	return (
+		<hr
+			className={cn(
+				"border-(--outline)",
+				props.orientation === "vertical" ? "h-full border-r" : undefined,
+				props.className,
+			)}
+		/>
+	)
+}

package/components/footer.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils"
+
+export interface FooterProps {
+	children: React.ReactNode
+}
+export default function Footer(
+	props: Readonly<FooterProps> & React.HTMLAttributes<HTMLElement>,
+) {
+	return <div className={cn("flex", props.className)}>{props.children}</div>
+}

package/components/global.ts

@@ -0,0 +1,34 @@
+import { cn } from "@/lib/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-(--description)",
+		"border border-(--disabled) disabled:border-(--outline) focus:border-(--description)",
+		"focus:ring-4 focus:ring-(--foreground)/5",
+		"invalid:inset-ring-(--red)",
+	),
+	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-()"),
+}

package/components/header.tsx

@@ -0,0 +1,22 @@
+import type { ReactElement } from "react"
+import type { HeadingProps } from "./heading"
+import type { TextProps } from "./text"
+import { cn } from "@/lib/utils"
+
+export interface HeaderProps {
+	gap?: number
+	children: [ReactElement<HeadingProps>, ReactElement<TextProps>]
+	className?: string
+}
+export default function Header(props: Readonly<HeaderProps>) {
+	return (
+		<header
+			style={{
+				gap: props.gap ?? 8,
+			}}
+			className={cn("flex flex-col", props.className)}
+		>
+			{props.children}
+		</header>
+	)
+}

package/components/heading.tsx

@@ -0,0 +1,91 @@
+import { cn } from "@/lib/utils"
+
+export interface HeadingProps {
+	children: React.ReactNode
+	className?: string
+}
+export default function Heading(props: Readonly<HeadingProps>) {
+	return (
+		<h1
+			className={cn(
+				"scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance",
+				props.className,
+			)}
+		>
+			{props.children}
+		</h1>
+	)
+}
+
+Heading.H1 = (props: Readonly<HeadingProps>) => {
+	return (
+		<h1
+			className={cn(
+				"scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance",
+				props.className,
+			)}
+		>
+			{props.children}
+		</h1>
+	)
+}
+Heading.H2 = (props: Readonly<HeadingProps>) => {
+	return (
+		<h1
+			className={cn(
+				"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+				props.className,
+			)}
+		>
+			{props.children}
+		</h1>
+	)
+}
+Heading.H3 = (props: Readonly<HeadingProps>) => {
+	return (
+		<h1
+			className={cn(
+				"scroll-m-20 text-2xl font-semibold tracking-tight",
+				props.className,
+			)}
+		>
+			{props.children}
+		</h1>
+	)
+}
+Heading.H4 = (props: Readonly<HeadingProps>) => {
+	return (
+		<h4
+			className={cn(
+				"scroll-m-20 text-xl font-semibold tracking-tight",
+				props.className,
+			)}
+		>
+			{props.children}
+		</h4>
+	)
+}
+Heading.H5 = (props: Readonly<HeadingProps>) => {
+	return (
+		<h4
+			className={cn(
+				"scroll-m-20 text-lg font-medium",
+				props.className,
+			)}
+		>
+			{props.children}
+		</h4>
+	)
+}
+Heading.H6 = (props: Readonly<HeadingProps>) => {
+	return (
+		<h6
+			className={cn(
+				"scroll-m-20 text-base font-medium",
+				props.className,
+			)}
+		>
+			{props.children}
+		</h6>
+	)
+}