@gmook9/pristine-ui 0.2.0
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/dist/index.d.mts +34 -0
- package/dist/index.d.ts +34 -0
- package/dist/index.js +147 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +104 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +52 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
import { ClassValue } from 'clsx';
|
|
6
|
+
|
|
7
|
+
declare const buttonVariants: (props?: ({
|
|
8
|
+
variant?: "default" | "primary" | "subtle" | "ghost" | "danger" | null | undefined;
|
|
9
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
10
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
12
|
+
}
|
|
13
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
|
+
|
|
15
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
16
|
+
}
|
|
17
|
+
declare function Card({ className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
18
|
+
interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
}
|
|
20
|
+
declare function CardHeader({ className, ...props }: CardHeaderProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
22
|
+
}
|
|
23
|
+
declare function CardContent({ className, ...props }: CardContentProps): react_jsx_runtime.JSX.Element;
|
|
24
|
+
interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
25
|
+
}
|
|
26
|
+
declare function CardFooter({ className, ...props }: CardFooterProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
29
|
+
}
|
|
30
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
31
|
+
|
|
32
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
33
|
+
|
|
34
|
+
export { Button, type ButtonProps, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Input, type InputProps, cn };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
import { ClassValue } from 'clsx';
|
|
6
|
+
|
|
7
|
+
declare const buttonVariants: (props?: ({
|
|
8
|
+
variant?: "default" | "primary" | "subtle" | "ghost" | "danger" | null | undefined;
|
|
9
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
10
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
12
|
+
}
|
|
13
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
|
+
|
|
15
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
16
|
+
}
|
|
17
|
+
declare function Card({ className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
18
|
+
interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
}
|
|
20
|
+
declare function CardHeader({ className, ...props }: CardHeaderProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
22
|
+
}
|
|
23
|
+
declare function CardContent({ className, ...props }: CardContentProps): react_jsx_runtime.JSX.Element;
|
|
24
|
+
interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
25
|
+
}
|
|
26
|
+
declare function CardFooter({ className, ...props }: CardFooterProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
29
|
+
}
|
|
30
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
31
|
+
|
|
32
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
33
|
+
|
|
34
|
+
export { Button, type ButtonProps, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Input, type InputProps, cn };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/index.ts
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
|
+
Button: () => Button,
|
|
34
|
+
Card: () => Card,
|
|
35
|
+
CardContent: () => CardContent,
|
|
36
|
+
CardFooter: () => CardFooter,
|
|
37
|
+
CardHeader: () => CardHeader,
|
|
38
|
+
Input: () => Input,
|
|
39
|
+
cn: () => cn
|
|
40
|
+
});
|
|
41
|
+
module.exports = __toCommonJS(index_exports);
|
|
42
|
+
|
|
43
|
+
// src/components/button.tsx
|
|
44
|
+
var React = __toESM(require("react"));
|
|
45
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
46
|
+
|
|
47
|
+
// src/utils/cn.ts
|
|
48
|
+
var import_clsx = require("clsx");
|
|
49
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
50
|
+
function cn(...inputs) {
|
|
51
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// src/components/button.tsx
|
|
55
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
56
|
+
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
57
|
+
"inline-flex items-center justify-center rounded-xl font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background",
|
|
58
|
+
{
|
|
59
|
+
variants: {
|
|
60
|
+
variant: {
|
|
61
|
+
default: "bg-slate-900 text-white hover:bg-slate-800",
|
|
62
|
+
primary: "bg-blue-600 text-white hover:bg-blue-500",
|
|
63
|
+
subtle: "bg-white/10 text-white hover:bg-white/15",
|
|
64
|
+
ghost: "bg-transparent hover:bg-white/10",
|
|
65
|
+
danger: "bg-rose-600 text-white hover:bg-rose-500"
|
|
66
|
+
},
|
|
67
|
+
size: {
|
|
68
|
+
sm: "h-9 px-3 text-sm",
|
|
69
|
+
md: "h-10 px-4 text-sm",
|
|
70
|
+
lg: "h-11 px-5 text-base"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
defaultVariants: {
|
|
74
|
+
variant: "default",
|
|
75
|
+
size: "md"
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
var Button = React.forwardRef(
|
|
80
|
+
({ className, variant, size, ...props }, ref) => {
|
|
81
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
82
|
+
"button",
|
|
83
|
+
{
|
|
84
|
+
ref,
|
|
85
|
+
className: cn(buttonVariants({ variant, size }), className),
|
|
86
|
+
...props
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
Button.displayName = "Button";
|
|
92
|
+
|
|
93
|
+
// src/components/card.tsx
|
|
94
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
95
|
+
function Card({ className, ...props }) {
|
|
96
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
97
|
+
"div",
|
|
98
|
+
{
|
|
99
|
+
className: cn(
|
|
100
|
+
"rounded-2xl border border-white/10 bg-white/5 shadow-sm backdrop-blur",
|
|
101
|
+
className
|
|
102
|
+
),
|
|
103
|
+
...props
|
|
104
|
+
}
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
function CardHeader({ className, ...props }) {
|
|
108
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("p-6 pb-0", className), ...props });
|
|
109
|
+
}
|
|
110
|
+
function CardContent({ className, ...props }) {
|
|
111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("p-6", className), ...props });
|
|
112
|
+
}
|
|
113
|
+
function CardFooter({ className, ...props }) {
|
|
114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("p-6 pt-0", className), ...props });
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// src/components/input.tsx
|
|
118
|
+
var React2 = __toESM(require("react"));
|
|
119
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
120
|
+
var Input = React2.forwardRef(
|
|
121
|
+
({ className, type = "text", ...props }, ref) => {
|
|
122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
123
|
+
"input",
|
|
124
|
+
{
|
|
125
|
+
ref,
|
|
126
|
+
type,
|
|
127
|
+
className: cn(
|
|
128
|
+
"flex h-10 w-full rounded-xl border border-white/10 bg-white/5 px-3 text-sm text-white placeholder:text-white/40 shadow-sm outline-none transition focus:border-white/20 focus:ring-2 focus:ring-blue-500/40 disabled:cursor-not-allowed disabled:opacity-50",
|
|
129
|
+
className
|
|
130
|
+
),
|
|
131
|
+
...props
|
|
132
|
+
}
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
Input.displayName = "Input";
|
|
137
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
138
|
+
0 && (module.exports = {
|
|
139
|
+
Button,
|
|
140
|
+
Card,
|
|
141
|
+
CardContent,
|
|
142
|
+
CardFooter,
|
|
143
|
+
CardHeader,
|
|
144
|
+
Input,
|
|
145
|
+
cn
|
|
146
|
+
});
|
|
147
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/button.tsx","../src/utils/cn.ts","../src/components/card.tsx","../src/components/input.tsx"],"sourcesContent":["export * from \"./components\";\r\nexport { cn } from \"./utils/cn\";\r\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../utils/cn\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-xl font-medium transition \" +\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 \" +\n \"disabled:pointer-events-none disabled:opacity-50 ring-offset-background\",\n {\n variants: {\n variant: {\n default: \"bg-slate-900 text-white hover:bg-slate-800\",\n primary: \"bg-blue-600 text-white hover:bg-blue-500\",\n subtle: \"bg-white/10 text-white hover:bg-white/15\",\n ghost: \"bg-transparent hover:bg-white/10\",\n danger: \"bg-rose-600 text-white hover:bg-rose-500\",\n },\n size: {\n sm: \"h-9 px-3 text-sm\",\n md: \"h-10 px-4 text-sm\",\n lg: \"h-11 px-5 text-base\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, ...props }, ref) => {\n return (\n <button\n ref={ref}\n className={cn(buttonVariants({ variant, size }), className)}\n {...props}\n />\n );\n }\n);\n\nButton.displayName = \"Button\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nexport function Card({ className, ...props }: CardProps) {\r\n return (\r\n <div\r\n className={cn(\r\n \"rounded-2xl border border-white/10 bg-white/5 shadow-sm backdrop-blur\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nexport function CardHeader({ className, ...props }: CardHeaderProps) {\r\n return <div className={cn(\"p-6 pb-0\", className)} {...props} />;\r\n}\r\n\r\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nexport function CardContent({ className, ...props }: CardContentProps) {\r\n return <div className={cn(\"p-6\", className)} {...props} />;\r\n}\r\n\r\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nexport function CardFooter({ className, ...props }: CardFooterProps) {\r\n return <div className={cn(\"p-6 pt-0\", className)} {...props} />;\r\n}\r\n","import * as React from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nexport interface InputProps\r\n extends React.InputHTMLAttributes<HTMLInputElement> {}\r\n\r\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\r\n ({ className, type = \"text\", ...props }, ref) => {\r\n return (\r\n <input\r\n ref={ref}\r\n type={type}\r\n className={cn(\r\n \"flex h-10 w-full rounded-xl border border-white/10 bg-white/5 px-3 text-sm text-white \" +\r\n \"placeholder:text-white/40 shadow-sm outline-none transition \" +\r\n \"focus:border-white/20 focus:ring-2 focus:ring-blue-500/40 \" +\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n );\r\n }\r\n);\r\n\r\nInput.displayName = \"Input\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,sCAAuC;;;ACDvC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADgCM;AAjCN,IAAM,qBAAiB;AAAA,EACrB;AAAA,EAGA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAMO,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,WAAW,SAAS,MAAM,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,QACzD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;;;AEvCjB,IAAAA,sBAAA;AAFG,SAAS,KAAK,EAAE,WAAW,GAAG,MAAM,GAAc;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAIO,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AACnE,SAAO,6CAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAAO;AAC/D;AAIO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAqB;AACrE,SAAO,6CAAC,SAAI,WAAW,GAAG,OAAO,SAAS,GAAI,GAAG,OAAO;AAC1D;AAIO,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AACnE,SAAO,6CAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAAO;AAC/D;;;ACjCA,IAAAC,SAAuB;AASjB,IAAAC,sBAAA;AAHC,IAAM,QAAc;AAAA,EACzB,CAAC,EAAE,WAAW,OAAO,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UAIA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;","names":["import_jsx_runtime","React","import_jsx_runtime"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
// src/components/button.tsx
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
|
|
5
|
+
// src/utils/cn.ts
|
|
6
|
+
import { clsx } from "clsx";
|
|
7
|
+
import { twMerge } from "tailwind-merge";
|
|
8
|
+
function cn(...inputs) {
|
|
9
|
+
return twMerge(clsx(inputs));
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// src/components/button.tsx
|
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
|
14
|
+
var buttonVariants = cva(
|
|
15
|
+
"inline-flex items-center justify-center rounded-xl font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background",
|
|
16
|
+
{
|
|
17
|
+
variants: {
|
|
18
|
+
variant: {
|
|
19
|
+
default: "bg-slate-900 text-white hover:bg-slate-800",
|
|
20
|
+
primary: "bg-blue-600 text-white hover:bg-blue-500",
|
|
21
|
+
subtle: "bg-white/10 text-white hover:bg-white/15",
|
|
22
|
+
ghost: "bg-transparent hover:bg-white/10",
|
|
23
|
+
danger: "bg-rose-600 text-white hover:bg-rose-500"
|
|
24
|
+
},
|
|
25
|
+
size: {
|
|
26
|
+
sm: "h-9 px-3 text-sm",
|
|
27
|
+
md: "h-10 px-4 text-sm",
|
|
28
|
+
lg: "h-11 px-5 text-base"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
defaultVariants: {
|
|
32
|
+
variant: "default",
|
|
33
|
+
size: "md"
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
var Button = React.forwardRef(
|
|
38
|
+
({ className, variant, size, ...props }, ref) => {
|
|
39
|
+
return /* @__PURE__ */ jsx(
|
|
40
|
+
"button",
|
|
41
|
+
{
|
|
42
|
+
ref,
|
|
43
|
+
className: cn(buttonVariants({ variant, size }), className),
|
|
44
|
+
...props
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
Button.displayName = "Button";
|
|
50
|
+
|
|
51
|
+
// src/components/card.tsx
|
|
52
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
53
|
+
function Card({ className, ...props }) {
|
|
54
|
+
return /* @__PURE__ */ jsx2(
|
|
55
|
+
"div",
|
|
56
|
+
{
|
|
57
|
+
className: cn(
|
|
58
|
+
"rounded-2xl border border-white/10 bg-white/5 shadow-sm backdrop-blur",
|
|
59
|
+
className
|
|
60
|
+
),
|
|
61
|
+
...props
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
function CardHeader({ className, ...props }) {
|
|
66
|
+
return /* @__PURE__ */ jsx2("div", { className: cn("p-6 pb-0", className), ...props });
|
|
67
|
+
}
|
|
68
|
+
function CardContent({ className, ...props }) {
|
|
69
|
+
return /* @__PURE__ */ jsx2("div", { className: cn("p-6", className), ...props });
|
|
70
|
+
}
|
|
71
|
+
function CardFooter({ className, ...props }) {
|
|
72
|
+
return /* @__PURE__ */ jsx2("div", { className: cn("p-6 pt-0", className), ...props });
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// src/components/input.tsx
|
|
76
|
+
import * as React2 from "react";
|
|
77
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
78
|
+
var Input = React2.forwardRef(
|
|
79
|
+
({ className, type = "text", ...props }, ref) => {
|
|
80
|
+
return /* @__PURE__ */ jsx3(
|
|
81
|
+
"input",
|
|
82
|
+
{
|
|
83
|
+
ref,
|
|
84
|
+
type,
|
|
85
|
+
className: cn(
|
|
86
|
+
"flex h-10 w-full rounded-xl border border-white/10 bg-white/5 px-3 text-sm text-white placeholder:text-white/40 shadow-sm outline-none transition focus:border-white/20 focus:ring-2 focus:ring-blue-500/40 disabled:cursor-not-allowed disabled:opacity-50",
|
|
87
|
+
className
|
|
88
|
+
),
|
|
89
|
+
...props
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
Input.displayName = "Input";
|
|
95
|
+
export {
|
|
96
|
+
Button,
|
|
97
|
+
Card,
|
|
98
|
+
CardContent,
|
|
99
|
+
CardFooter,
|
|
100
|
+
CardHeader,
|
|
101
|
+
Input,
|
|
102
|
+
cn
|
|
103
|
+
};
|
|
104
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/button.tsx","../src/utils/cn.ts","../src/components/card.tsx","../src/components/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../utils/cn\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-xl font-medium transition \" +\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 \" +\n \"disabled:pointer-events-none disabled:opacity-50 ring-offset-background\",\n {\n variants: {\n variant: {\n default: \"bg-slate-900 text-white hover:bg-slate-800\",\n primary: \"bg-blue-600 text-white hover:bg-blue-500\",\n subtle: \"bg-white/10 text-white hover:bg-white/15\",\n ghost: \"bg-transparent hover:bg-white/10\",\n danger: \"bg-rose-600 text-white hover:bg-rose-500\",\n },\n size: {\n sm: \"h-9 px-3 text-sm\",\n md: \"h-10 px-4 text-sm\",\n lg: \"h-11 px-5 text-base\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, ...props }, ref) => {\n return (\n <button\n ref={ref}\n className={cn(buttonVariants({ variant, size }), className)}\n {...props}\n />\n );\n }\n);\n\nButton.displayName = \"Button\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nexport function Card({ className, ...props }: CardProps) {\r\n return (\r\n <div\r\n className={cn(\r\n \"rounded-2xl border border-white/10 bg-white/5 shadow-sm backdrop-blur\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nexport function CardHeader({ className, ...props }: CardHeaderProps) {\r\n return <div className={cn(\"p-6 pb-0\", className)} {...props} />;\r\n}\r\n\r\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nexport function CardContent({ className, ...props }: CardContentProps) {\r\n return <div className={cn(\"p-6\", className)} {...props} />;\r\n}\r\n\r\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nexport function CardFooter({ className, ...props }: CardFooterProps) {\r\n return <div className={cn(\"p-6 pt-0\", className)} {...props} />;\r\n}\r\n","import * as React from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nexport interface InputProps\r\n extends React.InputHTMLAttributes<HTMLInputElement> {}\r\n\r\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\r\n ({ className, type = \"text\", ...props }, ref) => {\r\n return (\r\n <input\r\n ref={ref}\r\n type={type}\r\n className={cn(\r\n \"flex h-10 w-full rounded-xl border border-white/10 bg-white/5 px-3 text-sm text-white \" +\r\n \"placeholder:text-white/40 shadow-sm outline-none transition \" +\r\n \"focus:border-white/20 focus:ring-2 focus:ring-blue-500/40 \" +\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n );\r\n }\r\n);\r\n\r\nInput.displayName = \"Input\";\r\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,WAA8B;;;ACDvC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADgCM;AAjCN,IAAM,iBAAiB;AAAA,EACrB;AAAA,EAGA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAMO,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,WAAW,SAAS,MAAM,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,QACzD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;;;AEvCjB,gBAAAA,YAAA;AAFG,SAAS,KAAK,EAAE,WAAW,GAAG,MAAM,GAAc;AACvD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAIO,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AACnE,SAAO,gBAAAA,KAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAAO;AAC/D;AAIO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAqB;AACrE,SAAO,gBAAAA,KAAC,SAAI,WAAW,GAAG,OAAO,SAAS,GAAI,GAAG,OAAO;AAC1D;AAIO,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AACnE,SAAO,gBAAAA,KAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAAO;AAC/D;;;ACjCA,YAAYC,YAAW;AASjB,gBAAAC,YAAA;AAHC,IAAM,QAAc;AAAA,EACzB,CAAC,EAAE,WAAW,OAAO,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UAIA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;","names":["jsx","React","jsx"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@gmook9/pristine-ui",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "PristineUI – React components built with Tailwind.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"main": "./dist/index.cjs",
|
|
7
|
+
"module": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"require": "./dist/index.cjs"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"sideEffects": false,
|
|
20
|
+
"scripts": {
|
|
21
|
+
"dev": "tsup --watch",
|
|
22
|
+
"build": "tsup",
|
|
23
|
+
"lint": "eslint .",
|
|
24
|
+
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
25
|
+
"storybook": "storybook dev -p 6006 -c .storybook",
|
|
26
|
+
"build-storybook": "storybook build -c .storybook"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"react": ">=18",
|
|
30
|
+
"react-dom": ">=18"
|
|
31
|
+
},
|
|
32
|
+
"dependencies": {
|
|
33
|
+
"class-variance-authority": "^0.7.1",
|
|
34
|
+
"clsx": "^2.1.1",
|
|
35
|
+
"tailwind-merge": "^2.5.2"
|
|
36
|
+
},
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@eslint/js": "^9.8.0",
|
|
39
|
+
"@storybook/react": "^10.1.11",
|
|
40
|
+
"@storybook/react-vite": "^10.1.11",
|
|
41
|
+
"@types/react": "^18.3.3",
|
|
42
|
+
"@types/react-dom": "^18.3.0",
|
|
43
|
+
"autoprefixer": "^10.4.20",
|
|
44
|
+
"eslint": "^9.8.0",
|
|
45
|
+
"postcss": "^8.4.41",
|
|
46
|
+
"storybook": "^10.1.11",
|
|
47
|
+
"tailwindcss": "^3.4.10",
|
|
48
|
+
"tsup": "^8.2.4",
|
|
49
|
+
"typescript": "^5.5.4",
|
|
50
|
+
"typescript-eslint": "^8.0.1"
|
|
51
|
+
}
|
|
52
|
+
}
|