@modlin/ui 0.0.23 → 0.0.24

package/package.json

@@ -1,24 +1,17 @@
 {
+    "$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.23",
+    "version": "0.0.24",
     "main": "src/index.ts",
     "type": "module",
     "exports": {
-        "./*": "./components/*.tsx",
-        "./globals.css": "./globals.css"
-    },
-    "scripts": {
-        "dev": "next dev --turbopack",
-        "build": "next build --turbopack",
-        "start": "next start",
-        "lint": "biome check",
-        "format": "biome format --write"
+        "./*": "./src/*.tsx"
     },
     "dependencies": {
-        "@tabler/icons-react": "^3.35.0",
-        "clsx": "^2.1.1",
-        "tailwind-merge": "^3.3.1"
+        "@tabler/icons-react": "latest",
+        "clsx": "latest",
+        "tailwind-merge": "latest"
     },
     "peerDependencies": {
         "next": "latest",
@@ -26,10 +19,10 @@
         "react-dom": "latest"
     },
     "devDependencies": {
-        "@types/bun": "^1.2.22",
-        "typescript": "^5.9.2",
-        "@types/react": "^19.1.13",
-        "@types/react-dom": "^19.1.9",
-        "@biomejs/biome": "^2.2.4"
+        "@types/bun": "latest",
+        "typescript": "latest",
+        "@repo/typescript-config": "0.0.0",
+        "@types/react": "latest",
+        "@types/react-dom": "latest"
     }
 }

package/{components → src}/alert.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 import type { ReactElement, ReactNode } from "react"
 
 export interface AlertTitleProps {

package/{components → src}/avatar.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 import Image, { type ImageProps } from "next/image"
 
 export interface AvatarProps extends ImageProps {

package/{components → src}/badge.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 import type { ReactNode } from "react"
 
 const variants = {

package/{components → src}/button.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 import { IconLoader2 } from "@tabler/icons-react"
 import type { MouseEvent, FocusEvent, ReactNode, ReactHTMLElement } from "react"
 import React from "react"
@@ -34,7 +34,7 @@ const sizeMap = {
 }
 const variant: Variants = {
     primary:
-        "bg-primary disabled:bg-priority hover:bg-primary/85 text-background",
+        "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(
@@ -82,7 +82,7 @@ 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",
+        "transition transition-[background-color] transition-duration-250 ease",
         variant[props.variant ?? "primary"],
         sizeMap[props.size ?? "xl"],
         props.className,

package/{components → src}/card.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 import type * as React from "react"
 
 export interface CardHeaderProps {
@@ -72,8 +72,8 @@ export const Card: React.FC<CardProps> = props => {
 			className={cn(
 				"flex flex-col",
 				size[props.size ?? "md"],
-				"bg-(--background)",
-				"sm:inset-ring inset-ring-(--outline)",
+				"bg-background",
+				"sm:inset-ring inset-ring-outline",
 				props.className,
 			)}
 		>

package/{components → src}/checkbox.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useEffect, useState } from "react"
 import Image from "next/image"
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 export interface CheckboxProps {
 	checked?: boolean
@@ -45,7 +45,7 @@ export default function Checkbox(props: Readonly<CheckboxProps>) {
 				onClick={() => setChecked(v => !v)}
 				disabled={props.disabled}
 				className={cn(
-					"w-4 h-4 rounded-sm hover:cursor-pointer",
+					"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",
@@ -55,13 +55,10 @@ export default function Checkbox(props: Readonly<CheckboxProps>) {
 					"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"
-				/>
+				<svg width={16} height={16} viewBox="0 0 16 16" fill="none">
+					<title>Check</title>
+					<path d="M12 5L9 8L6.5 10.5L4 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+				</svg>
 			</button>
 		</>
 	)

package/{components → src}/content.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 export interface ContentProps {
 	children: React.ReactNode

package/{components → src}/divider.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 export interface DividerProps {
 	className?: string

package/{components → src}/footer.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 export interface FooterProps {
 	children: React.ReactNode

package/{components → src}/global.ts

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 export type Variant =
 	| "primary"
@@ -14,12 +14,12 @@ 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",
+		// "inset-ring inset-ring-disabled disabled:inset-ring-outline focus:inset-ring-primary",
+		"border border-disabled disabled:border-outline 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]:focus:ring-4 data-[invalid=true]:focus:ring-red/5",
+		"data-[invalid=true]:focus:ring-4 data-[invalid=true]:focus:ring-red/10",
 	),
 	secondary: cn(),
 	destructive: cn(

package/{components → src}/header.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react"
 import type { HeadingProps } from "./heading"
 import type { TextProps } from "./text"
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 export interface HeaderProps {
 	gap?: number

package/{components → src}/heading.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 export interface HeadingProps {
 	children: React.ReactNode

package/{components → src}/input.tsx

@@ -6,7 +6,7 @@ import {
 	forwardRef,
 } from "react"
 import { input_variant, type Variant } from "./global"
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 export interface InputProps {
 	variant?: Variant
@@ -45,6 +45,7 @@ export interface InputProps {
 	// onChange?: (value: string) => void
 	className?: string
 	invalid?: boolean
+    describedby?: string
 }
 const Input = forwardRef<HTMLInputElement, Readonly<InputProps>>(
 	(props, ref) => {
@@ -73,10 +74,11 @@ const Input = forwardRef<HTMLInputElement, Readonly<InputProps>>(
 				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-duration-150 transition-[box-shadow_color] ease-in",
+					"transition transition-duration-150 transition-[border,box-shadow] ease-in",
 					input_variant[props.variant ?? "primary"],
 					props.className,
 				)}

package/{components → src}/label.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 import type { ReactNode } from "react"
 
 export interface LabelProps {

package/{components → src}/select.tsx

@@ -2,7 +2,7 @@
 import { IconChevronDown } from "@tabler/icons-react"
 import Button from "./button"
 import Text from "./text"
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 import React, { type ReactElement, type ReactNode, useState } from "react"
 
 export interface SelectTriggerProps {
@@ -12,10 +12,7 @@ export interface SelectTriggerProps {
 }
 export function SelectTrigger(props: SelectTriggerProps) {
 	return (
-		<button
-			type="button"
-			className={cn("flex items-center", "bg-(--background)")}
-		>
+		<button type="button" className={cn("flex items-center", "bg-(--background)")}>
 			{props.placeholder}
 		</button>
 	)
@@ -37,28 +34,78 @@ export interface SelectItemProps {
 	value: string
 	children: ReactNode
 	className?: string
-	onClick?: () => void
+	onPress?: () => void
 }
-export function SelectItem(
-	props: Readonly<SelectItemProps>,
-): ReactElement<SelectItemProps> {
+export function SelectItem(props: Readonly<SelectItemProps>): ReactElement<SelectItemProps> {
 	return (
 		<button
 			type="button"
 			role="option"
 			value={props.value}
-			onClick={props.onClick}
+			onClick={props.onPress}
 			className={cn(
 				"flex items-center min-h-12 px-4 gap-4",
 				"select-none hover:bg-secondary",
 				// "[&>svg]:size-4 [&>svg]:scale-125",
-                props.className
+				props.className,
 			)}
 		>
 			{props.children}
 		</button>
 	)
 }
+export interface SelectContentProps {
+	defaultValue: string
+	children?: ReactNode
+}
+export function SelectContent(props: SelectContentProps) {
+	const [value, setValue] = useState<string>(props.defaultValue)
+	const [expanded, setExpanded] = useState(false)
+	const enhanced = React.Children.map(props.children, child => {
+		// We don't use Radix
+		const children = child as ReactElement<SelectItemProps>
+		if (!React.isValidElement(children)) return children
+
+		// Add/override props here
+		return React.cloneElement(children, {
+			onPress() {
+				setValue(children.props.value)
+				setExpanded(false)
+			},
+		})
+	})
+
+	return (
+		<div className="relative flex">
+			<button
+				type="button"
+				role="combobox"
+				aria-expanded={expanded}
+				aria-autocomplete="none"
+				aria-haspopup="listbox"
+				value={value}
+				id="country"
+				onClick={() => setExpanded(!expanded)}
+				// onBlur={() => setExpanded(false)}
+				{...register("country")}
+				className={cn("absolute flex items-center justify-center gap-1 px-4 h-12")}
+			>
+				<p className="font-medium w-6 h-6">{value}</p>
+				<IconSelector size={16} className="text-muted-foreground" />
+			</button>
+			<ul
+				className={cn(
+					"absolute top-[100%] flex flex-col mt-2 w-full max-h-72 overflow-auto",
+					"rounded-2xl",
+					"bg-background shadow-[0_0_16px_0_var(--shadow)]",
+					"animate-popup origin-top-left",
+				)}
+			>
+				{enhanced}
+			</ul>
+		</div>
+	)
+}
 
 export interface SelectProps {
 	defaultValue?: string
@@ -76,15 +123,17 @@ export function Select(props: SelectProps) {
 	const children: ReactElement[] = []
 	for (let i = 0; i < props.children.length; i++) {
 		const child = props.children[i]
-		children.push(
-			React.cloneElement(props.children[i], {
-				onClick() {
-					setValue(child.props.value)
-					setSelected(child.props.children)
-					setExpanded(false)
-				},
-			}),
-		)
+		if (React.isValidElement<SelectItemProps>(child)) {
+			children.push(
+				React.cloneElement(child, {
+					onClick() {
+						setValue(child.props.value)
+						setSelected(child.props.children)
+						setExpanded(false)
+					},
+				}),
+			)
+		}
 	}
 
 	return (
@@ -100,11 +149,7 @@ export function Select(props: SelectProps) {
 				id={props.id}
 				onClick={() => setExpanded(!expanded)}
 				// onBlur={() => setExpanded(false)}
-				className={cn(
-					"flex items-center gap-x-4",
-					"[&>svg]:size-4 [&>svg]:scale-125",
-					"focus:underline",
-				)}
+				className={cn("flex items-center gap-x-4", "[&>svg]:size-4 [&>svg]:scale-125", "focus:underline")}
 			>
 				{selected}
 				<IconChevronDown size={16} />

package/{components → src}/stack.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 interface StackProps {
 	align?: "start" | "center" | "end"

package/src/switch.tsx

@@ -0,0 +1,79 @@
+"use client"
+import { cn } from "./utils"
+import { useEffect, useState } from "react"
+
+const sizes = {
+    sm: "w-9 h-5 p-0.5",
+    lg: "w-14 h-8 p-1",
+}
+const thumb_sizes = {
+    sm: "w-4 h-4",
+    lg: "w-6 h-6",
+}
+
+export interface SwitchProps {
+    checked?: boolean
+    onChange?(checked: boolean): void
+    disabled?: boolean
+    // loading?: boolean
+
+    size?: "sm" | "lg"
+
+    label?: string
+
+    required?: boolean // web
+    name?: string // web
+    value?: string // web
+    id?: string // web
+}
+export default function Switch(props: Readonly<SwitchProps>) {
+    const [checked, setChecked] = useState(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.id}
+                value={props.value}
+                id={props.id}
+                className="peer hidden"
+            />
+            <button
+                type="button"
+                role="switch"
+                data-state={checked ? "checked" : "unchecked"}
+                aria-checked={checked}
+                onClick={() => setChecked(v => !v)}
+                disabled={props.disabled}
+                className={cn(
+                    sizes[props.size ?? "lg"],
+                    "rounded-full hover:cursor-pointer",
+                    "transition transition-all transition-duration-150 ease",
+                    "data-[state=checked]:bg-primary",
+                    "data-[state=unchecked]:bg-foreground/10",
+                )}
+            >
+                <div
+                    data-state={checked ? "checked" : "unchecked"}
+                    className={cn(
+                        thumb_sizes[props.size ?? "lg"],
+                        "rounded-full",
+                        "transition transition-all transition-duration-150 ease",
+                        "bg-background",
+                        "data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-[100%]",
+                    )}
+                ></div>
+            </button>
+        </>
+    )
+}

package/{components → src}/text.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 export interface TextProps {
 	className?: string

package/{components → src}/textarea.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 export interface TextareaProps {
 	type?: "text" | "password" | "email" | "number" | "tel" | "url" | "file"

package/{components → src}/typography.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, type ReactNode } from "react"
-import { cn } from "@/lib/utils"
+import { cn } from "./utils"
 
 export interface TypographyProps {
 	children?: ReactNode

package/tsconfig.json

@@ -1,34 +1,10 @@
 {
-    "compilerOptions": {
-        "target": "ES2017",
-        "lib": [
-            "dom",
-            "dom.iterable",
-            "esnext"
-        ],
-        "allowJs": true,
-        "skipLibCheck": true,
-        "strict": true,
-        "noEmit": true,
-        "esModuleInterop": true,
-        "module": "esnext",
-        "moduleResolution": "bundler",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "jsx": "preserve",
-        "incremental": true,
-        "paths": {
-            "@/*": [
-                "./*"
-            ]
-        }
-    },
-    "include": [
-        "next-env.d.ts",
-        "**/*.ts",
-        "**/*.tsx"
-    ],
-    "exclude": [
-        "node_modules"
-    ]
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"extends": "@repo/typescript-config/react-library.json",
+	"compileroptions": {
+		"outdir": "dist",
+		"rootDir": "src"
+	},
+	"include": ["src"],
+	"exclude": ["node_modules", "dist"]
 }

package/biome.json

@@ -1,36 +0,0 @@
-{
-    "$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/switch.tsx

@@ -1,79 +0,0 @@
-"use client"
-import { cn } from "@/lib/utils"
-import { useEffect, useState } from "react"
-
-const sizes = {
-	sm: "w-9 h-5 p-0.5",
-	lg: "w-14 h-8 p-1",
-}
-const thumb_sizes = {
-	sm: "w-4 h-4",
-	lg: "w-6 h-6",
-}
-
-export interface SwitchProps {
-	checked?: boolean
-	onChange?(checked: boolean): void
-	disabled?: boolean
-	// loading?: boolean
-
-	size?: "sm" | "lg"
-
-	label?: string
-
-	required?: boolean // web
-	name?: string // web
-	value?: string // web
-	id?: string // web
-}
-export default function Switch(props: Readonly<SwitchProps>) {
-	const [checked, setChecked] = useState(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.id}
-				value={props.value}
-				id={props.id}
-				className="peer hidden"
-			/>
-			<button
-				type="button"
-				role="switch"
-				data-state={checked ? "checked" : "unchecked"}
-				aria-checked={checked}
-				onClick={() => setChecked(v => !v)}
-				disabled={props.disabled}
-				className={cn(
-					sizes[props.size ?? "lg"],
-					"rounded-full hover:cursor-pointer",
-					"transition transition-all transition-duration-150 ease",
-					"data-[state=checked]:bg-black dark:data-[state=checked]:bg-white",
-					"data-[state=unchecked]:bg-black/10 dark:data-[state=unchecked]:bg-white/10",
-				)}
-			>
-				<div
-					data-state={checked ? "checked" : "unchecked"}
-					className={cn(
-						thumb_sizes[props.size ?? "lg"],
-						"rounded-full",
-						"transition transition-all transition-duration-150 ease",
-						"bg-white dark:bg-black",
-						"data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-[100%]",
-					)}
-				></div>
-			</button>
-		</>
-	)
-}

package/globals.css

@@ -1,72 +0,0 @@
-@import "tailwindcss";
-
-:root {
-    --background: hsl(0 0% 100%);
-    /* 100% white */
-    --foreground: hsl(0 0% 0%);
-    /* 100% black */
-    --muted: hsl(0 0% 75%);
-    --muted-foreground: hsl(0 0% 50%);
-    --outline: oklch(90% 0 0);
-    /* 15% black */
-    --priority: rgb(64, 64, 64);
-    /* 75% black */
-    --description: #7f7f7f;
-    /* 50% black */
-    --disabled: #bfbfbf;
-    /* 25% black */
-    --light: rgb(236, 236, 242);
-    /* 5% black */
-    --shadow: rgba(0, 0, 0, 0.1);
-    --primary: hsl(0 0% 0%);
-    --secondary: hsl(0 0% 95%);
-    --red: #f11c42;
-    --green: #00bc7a;
-    --blue: #4c52f4;
-    --purple: #7962f0;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background: #000000;
-        /* 100% black */
-        --foreground: #ffffff;
-        /* 100% white */
-        --muted: oklch(25% 0 0);
-        --muted-foreground: oklch(70% 0 0);
-
-        --outline: oklch(30% 0 0);
-        /* 25% white */
-        --priority: rgb(191, 191, 191);
-        /* 75% white */
-        --description: rgba(255, 255, 255, 0.5);
-        --disabled: rgba(255, 255, 255, 0.25);
-        --light: rgb(25, 25, 25);
-        /* 5% black */
-        --shadow: rgba(255, 255, 255, 0.25);
-        --primary: #ffffff;
-        --secondary: #1a1a1a;
-        --red: #f11c42;
-        --green: #33c995;
-        --blue: #7075f6;
-        --purple: #8366f4;
-    }
-}
-
-body {
-    background: var(--background);
-    color: var(--foreground);
-    font-size: 16px;
-}
-
-button:focus {
-    outline: none;
-}
-
-input:focus {
-    outline: none;
-}
-
-textarea:focus {
-    outline: none;
-}