naria-ui 0.1.0 → 0.1.1

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.
package/app/globals.css CHANGED
@@ -1,42 +0,0 @@
1
- :root {
2
- --background: #ffffff;
3
- --foreground: #171717;
4
- }
5
-
6
- @media (prefers-color-scheme: dark) {
7
- :root {
8
- --background: #0a0a0a;
9
- --foreground: #ededed;
10
- }
11
- }
12
-
13
- html,
14
- body {
15
- max-width: 100vw;
16
- overflow-x: hidden;
17
- }
18
-
19
- body {
20
- color: var(--foreground);
21
- background: var(--background);
22
- font-family: Arial, Helvetica, sans-serif;
23
- -webkit-font-smoothing: antialiased;
24
- -moz-osx-font-smoothing: grayscale;
25
- }
26
-
27
- * {
28
- box-sizing: border-box;
29
- padding: 0;
30
- margin: 0;
31
- }
32
-
33
- a {
34
- color: inherit;
35
- text-decoration: none;
36
- }
37
-
38
- @media (prefers-color-scheme: dark) {
39
- html {
40
- color-scheme: dark;
41
- }
42
- }
@@ -1,167 +0,0 @@
1
- .page {
2
- --gray-rgb: 0, 0, 0;
3
- --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
4
- --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
5
-
6
- --button-primary-hover: #383838;
7
- --button-secondary-hover: #f2f2f2;
8
-
9
- display: grid;
10
- grid-template-rows: 20px 1fr 20px;
11
- align-items: center;
12
- justify-items: center;
13
- min-height: 100svh;
14
- padding: 80px;
15
- gap: 64px;
16
- font-family: var(--font-geist-sans);
17
- }
18
-
19
- @media (prefers-color-scheme: dark) {
20
- .page {
21
- --gray-rgb: 255, 255, 255;
22
- --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
23
- --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
24
-
25
- --button-primary-hover: #ccc;
26
- --button-secondary-hover: #1a1a1a;
27
- }
28
- }
29
-
30
- .main {
31
- display: flex;
32
- flex-direction: column;
33
- gap: 32px;
34
- grid-row-start: 2;
35
- }
36
-
37
- .main ol {
38
- font-family: var(--font-geist-mono);
39
- padding-left: 0;
40
- margin: 0;
41
- font-size: 14px;
42
- line-height: 24px;
43
- letter-spacing: -0.01em;
44
- list-style-position: inside;
45
- }
46
-
47
- .main li:not(:last-of-type) {
48
- margin-bottom: 8px;
49
- }
50
-
51
- .main code {
52
- font-family: inherit;
53
- background: var(--gray-alpha-100);
54
- padding: 2px 4px;
55
- border-radius: 4px;
56
- font-weight: 600;
57
- }
58
-
59
- .ctas {
60
- display: flex;
61
- gap: 16px;
62
- }
63
-
64
- .ctas a {
65
- appearance: none;
66
- border-radius: 128px;
67
- height: 48px;
68
- padding: 0 20px;
69
- border: 1px solid transparent;
70
- transition:
71
- background 0.2s,
72
- color 0.2s,
73
- border-color 0.2s;
74
- cursor: pointer;
75
- display: flex;
76
- align-items: center;
77
- justify-content: center;
78
- font-size: 16px;
79
- line-height: 20px;
80
- font-weight: 500;
81
- }
82
-
83
- a.primary {
84
- background: var(--foreground);
85
- color: var(--background);
86
- gap: 8px;
87
- }
88
-
89
- a.secondary {
90
- border-color: var(--gray-alpha-200);
91
- min-width: 158px;
92
- }
93
-
94
- .footer {
95
- grid-row-start: 3;
96
- display: flex;
97
- gap: 24px;
98
- }
99
-
100
- .footer a {
101
- display: flex;
102
- align-items: center;
103
- gap: 8px;
104
- }
105
-
106
- .footer img {
107
- flex-shrink: 0;
108
- }
109
-
110
- /* Enable hover only on non-touch devices */
111
- @media (hover: hover) and (pointer: fine) {
112
- a.primary:hover {
113
- background: var(--button-primary-hover);
114
- border-color: transparent;
115
- }
116
-
117
- a.secondary:hover {
118
- background: var(--button-secondary-hover);
119
- border-color: transparent;
120
- }
121
-
122
- .footer a:hover {
123
- text-decoration: underline;
124
- text-underline-offset: 4px;
125
- }
126
- }
127
-
128
- @media (max-width: 600px) {
129
- .page {
130
- padding: 32px;
131
- padding-bottom: 80px;
132
- }
133
-
134
- .main {
135
- align-items: center;
136
- }
137
-
138
- .main ol {
139
- text-align: center;
140
- }
141
-
142
- .ctas {
143
- flex-direction: column;
144
- }
145
-
146
- .ctas a {
147
- font-size: 14px;
148
- height: 40px;
149
- padding: 0 16px;
150
- }
151
-
152
- a.secondary {
153
- min-width: auto;
154
- }
155
-
156
- .footer {
157
- flex-wrap: wrap;
158
- align-items: center;
159
- justify-content: center;
160
- }
161
- }
162
-
163
- @media (prefers-color-scheme: dark) {
164
- .logo {
165
- filter: invert();
166
- }
167
- }
package/app/page.tsx CHANGED
@@ -1,95 +1,6 @@
1
- import Image from "next/image";
2
- import styles from "./page.module.css";
3
1
 
4
2
  export default function Home() {
5
3
  return (
6
- <div className={styles.page}>
7
- <main className={styles.main}>
8
- <Image
9
- className={styles.logo}
10
- src="/next.svg"
11
- alt="Next.js logo"
12
- width={180}
13
- height={38}
14
- priority
15
- />
16
- <ol>
17
- <li>
18
- Get started by editing <code>app/page.tsx</code>.
19
- </li>
20
- <li>Save and see your changes instantly.</li>
21
- </ol>
22
-
23
- <div className={styles.ctas}>
24
- <a
25
- className={styles.primary}
26
- href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
27
- target="_blank"
28
- rel="noopener noreferrer"
29
- >
30
- <Image
31
- className={styles.logo}
32
- src="/vercel.svg"
33
- alt="Vercel logomark"
34
- width={20}
35
- height={20}
36
- />
37
- Deploy now
38
- </a>
39
- <a
40
- href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
41
- target="_blank"
42
- rel="noopener noreferrer"
43
- className={styles.secondary}
44
- >
45
- Read our docs
46
- </a>
47
- </div>
48
- </main>
49
- <footer className={styles.footer}>
50
- <a
51
- href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
52
- target="_blank"
53
- rel="noopener noreferrer"
54
- >
55
- <Image
56
- aria-hidden
57
- src="/file.svg"
58
- alt="File icon"
59
- width={16}
60
- height={16}
61
- />
62
- Learn
63
- </a>
64
- <a
65
- href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
66
- target="_blank"
67
- rel="noopener noreferrer"
68
- >
69
- <Image
70
- aria-hidden
71
- src="/window.svg"
72
- alt="Window icon"
73
- width={16}
74
- height={16}
75
- />
76
- Examples
77
- </a>
78
- <a
79
- href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
80
- target="_blank"
81
- rel="noopener noreferrer"
82
- >
83
- <Image
84
- aria-hidden
85
- src="/globe.svg"
86
- alt="Globe icon"
87
- width={16}
88
- height={16}
89
- />
90
- Go to nextjs.org →
91
- </a>
92
- </footer>
93
- </div>
4
+ <></>
94
5
  );
95
6
  }
@@ -2,7 +2,7 @@
2
2
  import React, {FC} from "react";
3
3
  import Loading from "@/components/shared/loading/Loading";
4
4
 
5
- export interface props extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
5
+ export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
6
6
  type?: "button" | "submit";
7
7
  classNames?: string;
8
8
  value: string;
@@ -13,7 +13,7 @@ export interface props extends React.DetailedHTMLProps<React.ButtonHTMLAttribute
13
13
  icon?: HTMLElement | undefined;
14
14
  }
15
15
 
16
- const Button: FC<props> = ({
16
+ const Button: FC<ButtonProps> = ({
17
17
  type = "button", classNames = "",
18
18
  value, theme = "btn-primary", size = "btn-md",
19
19
  icon = undefined,
@@ -0,0 +1,5 @@
1
+ import Button from './Button';
2
+
3
+ export type { ButtonProps } from './Button';
4
+
5
+ export default Button;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "naria-ui",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "next dev --turbopack",
package/app/favicon.ico DELETED
Binary file