@modlin/ui 0.0.1 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/README.md +3 -0
  2. package/components/button.tsx +6 -16
  3. package/components/global.ts +11 -9
  4. package/components/globals.css +72 -0
  5. package/components/select.tsx +7 -7
  6. package/components/typography.tsx +3 -3
  7. package/package.json +12 -9
  8. package/tsconfig.json +32 -20
  9. package/next.config.ts +0 -8
  10. package/pages/_app.tsx +0 -6
  11. package/pages/_document.tsx +0 -13
  12. package/pages/api/hello.ts +0 -10
  13. package/pages/index.tsx +0 -3
  14. package/postcss.config.mjs +0 -7
  15. package/public/favicon.ico +0 -0
  16. package/public/file.svg +0 -1
  17. package/public/globe.svg +0 -1
  18. package/public/next.svg +0 -1
  19. package/public/vercel.svg +0 -1
  20. package/public/window.svg +0 -1
  21. package/styles/globals.css +0 -26
  22. package/tailwind.config.js +0 -4
package/README.md CHANGED
@@ -1 +1,4 @@
1
1
  # Suffix UI Library for React
2
+ Lightweight UI Library built on top of the Suffix Design System by Modlin.
3
+ This package is used in React development.
4
+ In the future we might implement a better way
package/components/button.tsx CHANGED
@@ -30,19 +30,19 @@ const sizeMap = {
30
30
  ),
31
31
  icon: cn("p-2 rounded-full text-sm font-medium"),
32
32
  iconr: cn("p-2 rounded-2xl text-sm font-medium"),
33
- none: cn(),
33
+ none: cn("overflow-visible"),
34
34
  }
35
35
  const variant: Variants = {
36
36
  primary:
37
- "bg-(--primary) disabled:bg-(--priority) hover:bg-(--primary)/85 text-white dark:text-black",
38
- secondary: "bg-(--secondary) hover:bg-(--secondary)/75",
37
+ "bg-primary disabled:bg-priority hover:bg-primary/85 text-background",
38
+ secondary: "bg-secondary hover:bg-secondary/75",
39
39
  destructive: "bg-(--red) hover:bg-(--red)/85 text-white",
40
40
  outline: cn(
41
- "bg-(--background) inset-ring inset-ring-(--outline)",
42
- "hover:bg-(--secondary) active:bg-(--secondary) focus-visible:inset-ring-(--description) disabled:bg-(--background) disabled:text-(--description)",
41
+ "bg-background inset-ring inset-ring-outline",
42
+ "hover:bg-secondary active:bg-secondary focus-visible:inset-ring-description disabled:bg-background disabled:text-description",
43
43
  ),
44
44
  ghost: "hover:bg-black/5 dark:hover:bg-white/10",
45
- link: "text-(--primary) hover:underline",
45
+ link: "text-primary hover:underline",
46
46
  none: cn(),
47
47
  // jnsa: "bg-(--purple) hover:bg-(--purple)/90 text-white",
48
48
  // outline_red: "inset-ring inset-ring-(--red)/50 hover:bg-(--red)/5 text-(--red)",
@@ -53,16 +53,6 @@ const shapes = {
53
53
  rounded: "",
54
54
  pill: "rounded-full",
55
55
  }
56
- const acyrlic = {
57
- primary: "",
58
- secondary: "",
59
- destructive: "",
60
- outline:
61
- "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",
62
- ghost: "",
63
- link: "",
64
- shadcn: "",
65
- }
66
56
  export interface ButtonProps {
67
57
  variant?: Variant
68
58
  size?: keyof typeof sizeMap
package/components/global.ts CHANGED
@@ -12,20 +12,22 @@ export type Variants = Record<Variant, string>
12
12
 
13
13
  export const input_variant: Variants = {
14
14
  primary: cn(
15
- "bg-(--background)",
16
- "placeholder:text-(--description) disabled:text-(--disabled)",
15
+ "bg-background",
16
+ "placeholder:text-description disabled:text-disabled",
17
17
  // "inset-ring inset-ring-(--disabled) disabled:inset-ring-(--outline) focus:inset-ring-(--description)",
18
- "border border-(--disabled) disabled:border-(--outline) focus:border-(--description)",
19
- "focus:ring-4 focus:ring-(--foreground)/5",
20
- "invalid:inset-ring-(--red)",
18
+ "border border-disabled disabled:border-outline focus:border-description",
19
+ "focus:ring-4 focus:ring-foreground/5",
20
+ "invalid:inset-ring-red",
21
+ "data-[invalid=true]:border data-[invalid=true]:border-red/50 data-[invalid=true]:focus:border-red",
22
+ "data-[invalid=true]:focus:ring-4 data-[invalid=true]:focus:ring-red/5",
21
23
  ),
22
24
  secondary: cn(),
23
25
  destructive: cn(
24
- "bg-(--background)",
25
- "placeholder:text-(--description) disabled:text-(--disabled)",
26
+ "bg-background",
27
+ "placeholder:text-description disabled:text-disabled",
26
28
  // "inset-ring inset-ring-(--red)/50 disabled:inset-ring-(--red)/25 focus:inset-ring-(--red)",
27
- "border border-(--red)/50 disabled:border-(--red)/25 focus:border-(--red)",
28
- "focus:ring-4 focus:ring-(--red)/5",
29
+ "border border-red/50 disabled:border-red/25 focus:border-red",
30
+ "focus:ring-4 focus:ring-red/5",
29
31
  ),
30
32
  outline: cn(),
31
33
  ghost: cn(),
package/components/globals.css ADDED
@@ -0,0 +1,72 @@
1
+ @import "tailwindcss";
2
+
3
+ :root {
4
+ --background: hsl(0 0% 100%);
5
+ /* 100% white */
6
+ --foreground: hsl(0 0% 0%);
7
+ /* 100% black */
8
+ --muted: hsl(0 0% 75%);
9
+ --muted-foreground: hsl(0 0% 50%);
10
+ --outline: oklch(90% 0 0);
11
+ /* 15% black */
12
+ --priority: rgb(64, 64, 64);
13
+ /* 75% black */
14
+ --description: #7f7f7f;
15
+ /* 50% black */
16
+ --disabled: #bfbfbf;
17
+ /* 25% black */
18
+ --light: rgb(236, 236, 242);
19
+ /* 5% black */
20
+ --shadow: rgba(0, 0, 0, 0.1);
21
+ --primary: hsl(0 0% 0%);
22
+ --secondary: hsl(0 0% 95%);
23
+ --red: #f11c42;
24
+ --green: #00bc7a;
25
+ --blue: #4c52f4;
26
+ --purple: #7962f0;
27
+ }
28
+
29
+ @media (prefers-color-scheme: dark) {
30
+ :root {
31
+ --background: #000000;
32
+ /* 100% black */
33
+ --foreground: #ffffff;
34
+ /* 100% white */
35
+ --muted: oklch(25% 0 0);
36
+ --muted-foreground: oklch(70% 0 0);
37
+
38
+ --outline: oklch(30% 0 0);
39
+ /* 25% white */
40
+ --priority: rgb(191, 191, 191);
41
+ /* 75% white */
42
+ --description: rgba(255, 255, 255, 0.5);
43
+ --disabled: rgba(255, 255, 255, 0.25);
44
+ --light: rgb(25, 25, 25);
45
+ /* 5% black */
46
+ --shadow: rgba(255, 255, 255, 0.25);
47
+ --primary: #ffffff;
48
+ --secondary: #1a1a1a;
49
+ --red: #f11c42;
50
+ --green: #33c995;
51
+ --blue: #7075f6;
52
+ --purple: #8366f4;
53
+ }
54
+ }
55
+
56
+ body {
57
+ background: var(--background);
58
+ color: var(--foreground);
59
+ font-size: 16px;
60
+ }
61
+
62
+ button:focus {
63
+ outline: none;
64
+ }
65
+
66
+ input:focus {
67
+ outline: none;
68
+ }
69
+
70
+ textarea:focus {
71
+ outline: none;
72
+ }
package/components/select.tsx CHANGED
@@ -33,15 +33,15 @@ export function Dropdown() {
33
33
  )
34
34
  }
35
35
 
36
- export interface SelectOptionProps {
36
+ export interface SelectItemProps {
37
37
  value: string
38
38
  children: ReactNode
39
39
  className?: string
40
40
  onClick?: () => void
41
41
  }
42
- export function SelectOption(
43
- props: Readonly<SelectOptionProps>,
44
- ): ReactElement<SelectOptionProps> {
42
+ export function SelectItem(
43
+ props: Readonly<SelectItemProps>,
44
+ ): ReactElement<SelectItemProps> {
45
45
  return (
46
46
  <button
47
47
  type="button"
@@ -49,8 +49,8 @@ export function SelectOption(
49
49
  value={props.value}
50
50
  onClick={props.onClick}
51
51
  className={cn(
52
- "flex items-center h-12 px-4 gap-4",
53
- "select-none hover:bg-(--secondary)",
52
+ "flex items-center min-h-12 px-4 gap-4",
53
+ "select-none hover:bg-secondary",
54
54
  // "[&>svg]:size-4 [&>svg]:scale-125",
55
55
  props.className
56
56
  )}
@@ -66,7 +66,7 @@ export interface SelectProps {
66
66
  value?: string
67
67
  name?: string
68
68
  id?: string
69
- children: ReactElement<SelectOptionProps>[]
69
+ children: ReactElement<SelectItemProps>[]
70
70
  }
71
71
  export function Select(props: SelectProps) {
72
72
  const [expanded, setExpanded] = useState(false)
package/components/typography.tsx CHANGED
@@ -12,7 +12,7 @@ export const InlineCode = forwardRef<HTMLElement, TypographyProps>(
12
12
  <code
13
13
  ref={ref}
14
14
  className={cn(
15
- "bg-(--muted) relative rounded px-[2px] leading-12 font-mono text-sm font-medium",
15
+ "bg-muted relative rounded px-[2px] leading-12 font-mono text-sm font-medium",
16
16
  props.className,
17
17
  )}
18
18
  >
@@ -27,7 +27,7 @@ export const Lead = forwardRef<HTMLParagraphElement, TypographyProps>(
27
27
  return (
28
28
  <p
29
29
  ref={ref}
30
- className={cn("text-(--muted-foreground) text-xl", props.className)}
30
+ className={cn("text-muted-foreground text-xl", props.className)}
31
31
  >
32
32
  {props.children}
33
33
  </p>
@@ -61,7 +61,7 @@ export const Muted = forwardRef<HTMLParagraphElement, TypographyProps>(
61
61
  return (
62
62
  <p
63
63
  ref={ref}
64
- className={cn("text-(--muted-foreground) text-sm", props.className)}
64
+ className={cn("text-muted-foreground text-sm", props.className)}
65
65
  >
66
66
  {props.children}
67
67
  </p>
package/package.json CHANGED
@@ -1,9 +1,12 @@
1
1
  {
2
2
  "name": "@modlin/ui",
3
- "version": "0.0.1",
3
+ "description": "A lightweight UI library built on the Suffix design system for consistent, fast, and elegant interfaces.",
4
+ "version": "0.0.21",
4
5
  "main": "src/index.ts",
6
+ "type": "module",
5
7
  "exports": {
6
- "./*": "./components/*.tsx"
8
+ "./*": "./components/*.tsx",
9
+ "./globals.css": "./components/globals.css"
7
10
  },
8
11
  "scripts": {
9
12
  "dev": "next dev --turbopack",
@@ -14,19 +17,19 @@
14
17
  },
15
18
  "dependencies": {
16
19
  "@tabler/icons-react": "^3.35.0",
17
- "@types/bun": "^1.2.22",
18
20
  "clsx": "^2.1.1",
19
- "next": "15.5.3",
20
- "react": "19.1.1",
21
- "react-dom": "19.1.1",
22
21
  "tailwind-merge": "^3.3.1"
23
22
  },
23
+ "peerDependencies": {
24
+ "next": "^15.5.3",
25
+ "react": "^19.1.1",
26
+ "react-dom": "^19.1.1"
27
+ },
24
28
  "devDependencies": {
29
+ "@types/bun": "^1.2.22",
25
30
  "typescript": "^5.9.2",
26
31
  "@types/react": "^19.1.13",
27
32
  "@types/react-dom": "^19.1.9",
28
- "@tailwindcss/postcss": "^4.1.13",
29
- "tailwindcss": "^4.1.13",
30
- "@biomejs/biome": "2.2.4"
33
+ "@biomejs/biome": "^2.2.4"
31
34
  }
32
35
  }
package/tsconfig.json CHANGED
@@ -1,22 +1,34 @@
1
1
  {
2
- "compilerOptions": {
3
- "target": "ES2017",
4
- "lib": ["dom", "dom.iterable", "esnext"],
5
- "allowJs": true,
6
- "skipLibCheck": true,
7
- "strict": true,
8
- "noEmit": true,
9
- "esModuleInterop": true,
10
- "module": "esnext",
11
- "moduleResolution": "bundler",
12
- "resolveJsonModule": true,
13
- "isolatedModules": true,
14
- "jsx": "preserve",
15
- "incremental": true,
16
- "paths": {
17
- "@/*": ["./*"]
18
- }
19
- },
20
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
21
- "exclude": ["node_modules"]
2
+ "compilerOptions": {
3
+ "target": "ES2017",
4
+ "lib": [
5
+ "dom",
6
+ "dom.iterable",
7
+ "esnext"
8
+ ],
9
+ "allowJs": true,
10
+ "skipLibCheck": true,
11
+ "strict": true,
12
+ "noEmit": true,
13
+ "esModuleInterop": true,
14
+ "module": "esnext",
15
+ "moduleResolution": "bundler",
16
+ "resolveJsonModule": true,
17
+ "isolatedModules": true,
18
+ "jsx": "preserve",
19
+ "incremental": true,
20
+ "paths": {
21
+ "@/*": [
22
+ "./*"
23
+ ]
24
+ }
25
+ },
26
+ "include": [
27
+ "next-env.d.ts",
28
+ "**/*.ts",
29
+ "**/*.tsx"
30
+ ],
31
+ "exclude": [
32
+ "node_modules"
33
+ ]
22
34
  }
package/next.config.ts DELETED
@@ -1,8 +0,0 @@
1
- import type { NextConfig } from "next";
2
-
3
- const nextConfig: NextConfig = {
4
- /* config options here */
5
- reactStrictMode: true,
6
- };
7
-
8
- export default nextConfig;
package/pages/_app.tsx DELETED
@@ -1,6 +0,0 @@
1
- import "@/styles/globals.css";
2
- import type { AppProps } from "next/app";
3
-
4
- export default function App({ Component, pageProps }: AppProps) {
5
- return <Component {...pageProps} />;
6
- }
package/pages/_document.tsx DELETED
@@ -1,13 +0,0 @@
1
- import { Html, Head, Main, NextScript } from "next/document";
2
-
3
- export default function Document() {
4
- return (
5
- <Html lang="en">
6
- <Head />
7
- <body className="antialiased">
8
- <Main />
9
- <NextScript />
10
- </body>
11
- </Html>
12
- );
13
- }
package/pages/api/hello.ts DELETED
@@ -1,10 +0,0 @@
1
- // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2
- import type { NextApiRequest, NextApiResponse } from "next"
3
-
4
- type Data = {
5
- name: string
6
- }
7
-
8
- export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
9
- res.status(200).json({ name: "John Doe" })
10
- }
package/pages/index.tsx DELETED
@@ -1,3 +0,0 @@
1
- export default function Home() {
2
- return <div>Hello, world!</div>;
3
- }
package/postcss.config.mjs DELETED
@@ -1,7 +0,0 @@
1
- const config = {
2
- plugins: {
3
- "@tailwindcss/postcss": {},
4
- },
5
- }
6
-
7
- export default config
package/public/favicon.ico DELETED
Binary file
package/public/file.svg DELETED
@@ -1 +0,0 @@
1
- <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
package/public/globe.svg DELETED
@@ -1 +0,0 @@
1
- <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
package/public/next.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
package/public/vercel.svg DELETED
@@ -1 +0,0 @@
1
- <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
package/public/window.svg DELETED
@@ -1 +0,0 @@
1
- <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
package/styles/globals.css DELETED
@@ -1,26 +0,0 @@
1
- @import "tailwindcss";
2
-
3
- :root {
4
- --background: #ffffff;
5
- --foreground: #171717;
6
- }
7
-
8
- @theme inline {
9
- --color-background: var(--background);
10
- --color-foreground: var(--foreground);
11
- --font-sans: var(--font-geist-sans);
12
- --font-mono: var(--font-geist-mono);
13
- }
14
-
15
- @media (prefers-color-scheme: dark) {
16
- :root {
17
- --background: #0a0a0a;
18
- --foreground: #ededed;
19
- }
20
- }
21
-
22
- body {
23
- background: var(--background);
24
- color: var(--foreground);
25
- font-family: Arial, Helvetica, sans-serif;
26
- }
package/tailwind.config.js DELETED
@@ -1,4 +0,0 @@
1
- /** @type {import('tailwindcss').Config} */
2
- module.exports = {
3
- content: ["./components/**/*.{js,ts,jsx,tsx}"],
4
- }