@jameskabz/nextcraft-ui 0.6.16 → 0.7.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/README.md +37 -3
- package/dist/components/craft-button.cjs +64 -4
- package/dist/components/craft-button.cjs.map +1 -1
- package/dist/components/craft-button.d.cts +5 -2
- package/dist/components/craft-button.d.ts +5 -2
- package/dist/components/craft-button.js +65 -5
- package/dist/components/craft-button.js.map +1 -1
- package/dist/components/craft-checkbox.cjs +2 -2
- package/dist/components/craft-checkbox.cjs.map +1 -1
- package/dist/components/craft-checkbox.js +2 -2
- package/dist/components/craft-checkbox.js.map +1 -1
- package/dist/components/craft-create-edit-drawer.cjs +5 -3
- package/dist/components/craft-create-edit-drawer.cjs.map +1 -1
- package/dist/components/craft-create-edit-drawer.js +5 -3
- package/dist/components/craft-create-edit-drawer.js.map +1 -1
- package/dist/components/craft-data-table-header.cjs +74 -0
- package/dist/components/craft-data-table-header.cjs.map +1 -0
- package/dist/components/craft-data-table-header.d.cts +17 -0
- package/dist/components/craft-data-table-header.d.ts +17 -0
- package/dist/components/craft-data-table-header.js +50 -0
- package/dist/components/craft-data-table-header.js.map +1 -0
- package/dist/components/craft-data-table-pagination.cjs +107 -0
- package/dist/components/craft-data-table-pagination.cjs.map +1 -0
- package/dist/components/craft-data-table-pagination.d.cts +25 -0
- package/dist/components/craft-data-table-pagination.d.ts +25 -0
- package/dist/components/craft-data-table-pagination.js +83 -0
- package/dist/components/craft-data-table-pagination.js.map +1 -0
- package/dist/components/craft-data-table.cjs +424 -192
- package/dist/components/craft-data-table.cjs.map +1 -1
- package/dist/components/craft-data-table.d.cts +61 -9
- package/dist/components/craft-data-table.d.ts +61 -9
- package/dist/components/craft-data-table.js +424 -192
- package/dist/components/craft-data-table.js.map +1 -1
- package/dist/components/craft-form-field.cjs +67 -11
- package/dist/components/craft-form-field.cjs.map +1 -1
- package/dist/components/craft-form-field.d.cts +4 -1
- package/dist/components/craft-form-field.d.ts +4 -1
- package/dist/components/craft-form-field.js +57 -11
- package/dist/components/craft-form-field.js.map +1 -1
- package/dist/components/craft-form-modal.cjs +29 -28
- package/dist/components/craft-form-modal.cjs.map +1 -1
- package/dist/components/craft-form-modal.js +29 -28
- package/dist/components/craft-form-modal.js.map +1 -1
- package/dist/components/craft-form.cjs +5 -3
- package/dist/components/craft-form.cjs.map +1 -1
- package/dist/components/craft-form.js +5 -3
- package/dist/components/craft-form.js.map +1 -1
- package/dist/components/craft-icon.cjs +26 -32
- package/dist/components/craft-icon.cjs.map +1 -1
- package/dist/components/craft-icon.d.cts +1 -2
- package/dist/components/craft-icon.d.ts +1 -2
- package/dist/components/craft-icon.js +36 -32
- package/dist/components/craft-icon.js.map +1 -1
- package/dist/components/craft-loader.cjs +195 -0
- package/dist/components/craft-loader.cjs.map +1 -0
- package/dist/components/craft-loader.d.cts +21 -0
- package/dist/components/craft-loader.d.ts +21 -0
- package/dist/components/craft-loader.js +171 -0
- package/dist/components/craft-loader.js.map +1 -0
- package/dist/components/layout/app-template.cjs +2 -3
- package/dist/components/layout/app-template.cjs.map +1 -1
- package/dist/components/layout/app-template.d.cts +1 -2
- package/dist/components/layout/app-template.d.ts +1 -2
- package/dist/components/layout/app-template.js +2 -3
- package/dist/components/layout/app-template.js.map +1 -1
- package/dist/index.cjs +9 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +6 -2
- package/dist/index.js.map +1 -1
- package/dist/styles.css +164 -12
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -146,13 +146,47 @@ Notes:
|
|
|
146
146
|
|
|
147
147
|
## CraftIcon
|
|
148
148
|
|
|
149
|
-
CraftIcon
|
|
149
|
+
CraftIcon uses Font Awesome (solid icons) by default. You can also register your own icons once and use them by name anywhere.
|
|
150
|
+
|
|
151
|
+
### 1) Install Font Awesome (required in your app)
|
|
152
|
+
|
|
153
|
+
```bash
|
|
154
|
+
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
### 2) Use built-in icon names
|
|
158
|
+
|
|
159
|
+
These names are supported out of the box:
|
|
160
|
+
|
|
161
|
+
- `layout-dashboard`, `dashboard`
|
|
162
|
+
- `folder`, `folder-open`
|
|
163
|
+
- `users`
|
|
164
|
+
- `credit-card`
|
|
165
|
+
- `pen`, `edit`
|
|
166
|
+
- `trash`, `delete`
|
|
167
|
+
- `archive`
|
|
168
|
+
- `search`
|
|
169
|
+
|
|
170
|
+
```tsx
|
|
171
|
+
import { CraftIcon } from "@jameskabz/nextcraft-ui";
|
|
172
|
+
|
|
173
|
+
export function App() {
|
|
174
|
+
return <CraftIcon name="pen" className="text-white" />;
|
|
175
|
+
}
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
### 3) Register your own icons (optional)
|
|
150
179
|
|
|
151
180
|
```tsx
|
|
152
181
|
import { CraftIcon, CraftIconProvider } from "@jameskabz/nextcraft-ui";
|
|
153
|
-
import { Home } from "lucide-react";
|
|
154
182
|
|
|
155
|
-
const icons = {
|
|
183
|
+
const icons = {
|
|
184
|
+
home: (
|
|
185
|
+
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor">
|
|
186
|
+
<path d="M3 12l9-9 9 9v9a1 1 0 01-1 1h-5v-6H9v6H4a1 1 0 01-1-1z" />
|
|
187
|
+
</svg>
|
|
188
|
+
),
|
|
189
|
+
};
|
|
156
190
|
|
|
157
191
|
export function App() {
|
|
158
192
|
return (
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
"use client";
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
@@ -23,6 +24,7 @@ __export(craft_button_exports, {
|
|
|
23
24
|
module.exports = __toCommonJS(craft_button_exports);
|
|
24
25
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
26
|
var import_cn = require("../utils/cn");
|
|
27
|
+
var import_craft_icon = require("../components/craft-icon");
|
|
26
28
|
const sizeClasses = {
|
|
27
29
|
sm: "h-9 px-4 text-xs",
|
|
28
30
|
md: "h-11 px-6 text-sm",
|
|
@@ -34,16 +36,34 @@ const variantClasses = {
|
|
|
34
36
|
outline: "bg-transparent text-[color:rgb(var(--nc-accent-1))] border-2 border-[color:rgb(var(--nc-accent-1)/0.5)] hover:border-[color:rgb(var(--nc-accent-1))] hover:bg-[color:rgb(var(--nc-accent-1)/0.1)]",
|
|
35
37
|
gradient: "bg-gradient-to-r from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-2)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-2)/0.6)] hover:scale-[1.02] active:scale-[0.98]"
|
|
36
38
|
};
|
|
39
|
+
const iconSizeClasses = {
|
|
40
|
+
sm: "h-4 w-4",
|
|
41
|
+
md: "h-4 w-4",
|
|
42
|
+
lg: "h-5 w-5"
|
|
43
|
+
};
|
|
44
|
+
const spinnerSizeClasses = {
|
|
45
|
+
sm: "h-4 w-4",
|
|
46
|
+
md: "h-4 w-4",
|
|
47
|
+
lg: "h-5 w-5"
|
|
48
|
+
};
|
|
37
49
|
function CraftButton({
|
|
38
50
|
className,
|
|
39
51
|
variant = "solid",
|
|
40
52
|
size = "md",
|
|
41
|
-
glow = true,
|
|
42
53
|
tone,
|
|
43
54
|
disabled,
|
|
55
|
+
glow = true,
|
|
56
|
+
loading = false,
|
|
57
|
+
loadingText,
|
|
58
|
+
icon,
|
|
59
|
+
children,
|
|
44
60
|
...props
|
|
45
61
|
}) {
|
|
46
|
-
|
|
62
|
+
const isDisabled = disabled || loading;
|
|
63
|
+
const iconClassName = iconSizeClasses[size];
|
|
64
|
+
const spinnerClassName = spinnerSizeClasses[size];
|
|
65
|
+
const iconNode = typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_icon.CraftIcon, { name: icon, className: iconClassName }) : icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)("inline-flex", iconClassName), children: icon }) : null;
|
|
66
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
47
67
|
"button",
|
|
48
68
|
{
|
|
49
69
|
className: (0, import_cn.cn)(
|
|
@@ -54,8 +74,48 @@ function CraftButton({
|
|
|
54
74
|
className
|
|
55
75
|
),
|
|
56
76
|
"data-nc-theme": tone,
|
|
57
|
-
disabled,
|
|
58
|
-
|
|
77
|
+
disabled: isDisabled,
|
|
78
|
+
"aria-disabled": isDisabled,
|
|
79
|
+
"aria-busy": loading,
|
|
80
|
+
...props,
|
|
81
|
+
children: [
|
|
82
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
83
|
+
"svg",
|
|
84
|
+
{
|
|
85
|
+
className: (0, import_cn.cn)("mr-2 animate-spin text-current", spinnerClassName),
|
|
86
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
87
|
+
fill: "none",
|
|
88
|
+
viewBox: "0 0 24 24",
|
|
89
|
+
"aria-hidden": "true",
|
|
90
|
+
children: [
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
"circle",
|
|
93
|
+
{
|
|
94
|
+
className: "opacity-25",
|
|
95
|
+
cx: "12",
|
|
96
|
+
cy: "12",
|
|
97
|
+
r: "10",
|
|
98
|
+
stroke: "currentColor",
|
|
99
|
+
strokeWidth: "4"
|
|
100
|
+
}
|
|
101
|
+
),
|
|
102
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
103
|
+
"path",
|
|
104
|
+
{
|
|
105
|
+
className: "opacity-75",
|
|
106
|
+
fill: "none",
|
|
107
|
+
stroke: "currentColor",
|
|
108
|
+
strokeLinecap: "round",
|
|
109
|
+
strokeWidth: "4",
|
|
110
|
+
d: "M4 12a8 8 0 018-8"
|
|
111
|
+
}
|
|
112
|
+
)
|
|
113
|
+
]
|
|
114
|
+
}
|
|
115
|
+
),
|
|
116
|
+
!loading && iconNode,
|
|
117
|
+
loading && loadingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: loadingText }) : children
|
|
118
|
+
]
|
|
59
119
|
}
|
|
60
120
|
);
|
|
61
121
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/craft-button.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftIcon } from \"@/components/craft-icon\";\n\ntype CraftButtonVariant = \"solid\" | \"ghost\" | \"outline\" | \"gradient\";\ntype CraftButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport type CraftButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n variant?: CraftButtonVariant;\n size?: CraftButtonSize;\n tone?: ThemeName;\n glow?: boolean;\n loading?: boolean;\n loadingText?: React.ReactNode;\n icon?: string | React.ReactNode;\n};\n\nconst sizeClasses: Record<CraftButtonSize, string> = {\n sm: \"h-9 px-4 text-xs\",\n md: \"h-11 px-6 text-sm\",\n lg: \"h-13 px-8 text-base\",\n};\n\nconst variantClasses: Record<CraftButtonVariant, string> = {\n solid:\n \"bg-gradient-to-br from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-1)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-1)/0.6)] hover:scale-[1.02] active:scale-[0.98]\",\n ghost:\n \"bg-[color:rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg))] hover:bg-[color:rgb(var(--nc-surface)/0.18)] backdrop-blur-sm border border-[rgb(var(--nc-border)/0.35)] hover:border-[color:rgb(var(--nc-border)/0.5)]\",\n outline:\n \"bg-transparent text-[color:rgb(var(--nc-accent-1))] border-2 border-[color:rgb(var(--nc-accent-1)/0.5)] hover:border-[color:rgb(var(--nc-accent-1))] hover:bg-[color:rgb(var(--nc-accent-1)/0.1)]\",\n gradient:\n \"bg-gradient-to-r from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-2)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-2)/0.6)] hover:scale-[1.02] active:scale-[0.98]\",\n};\n\nconst iconSizeClasses: Record<CraftButtonSize, string> = {\n sm: \"h-4 w-4\",\n md: \"h-4 w-4\",\n lg: \"h-5 w-5\",\n};\n\nconst spinnerSizeClasses: Record<CraftButtonSize, string> = {\n sm: \"h-4 w-4\",\n md: \"h-4 w-4\",\n lg: \"h-5 w-5\",\n};\n\nexport function CraftButton({\n className,\n variant = \"solid\",\n size = \"md\",\n tone,\n disabled,\n glow = true,\n loading = false,\n loadingText,\n icon,\n children,\n ...props\n}: CraftButtonProps) {\n const isDisabled = disabled || loading;\n const iconClassName = iconSizeClasses[size];\n const spinnerClassName = spinnerSizeClasses[size];\n const iconNode =\n typeof icon === \"string\" ? (\n <CraftIcon name={icon} className={iconClassName} />\n ) : icon ? (\n <span className={cn(\"inline-flex\", iconClassName)}>{icon}</span>\n ) : null;\n\n return (\n <button\n className={cn(\n \"relative inline-flex items-center justify-center gap-2 rounded-xl font-semibold tracking-wide transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--nc-accent-1)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100\",\n sizeClasses[size],\n variantClasses[variant],\n glow && (variant === \"solid\" || variant === \"gradient\")\n ? \"before:absolute before:-inset-1 before:rounded-xl before:bg-linear-to-r before:from-[rgb(var(--nc-accent-1)/0.2)] before:via-[rgb(var(--nc-accent-2)/0.2)] before:to-[rgb(var(--nc-accent-3)/0.2)] before:blur-xl before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity\"\n : \"\",\n className\n )}\n data-nc-theme={tone}\n disabled={isDisabled}\n aria-disabled={isDisabled}\n aria-busy={loading}\n {...props}\n >\n {loading && (\n <svg\n className={cn(\"mr-2 animate-spin text-current\", spinnerClassName)}\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeWidth=\"4\"\n d=\"M4 12a8 8 0 018-8\"\n />\n </svg>\n )}\n {!loading && iconNode}\n {loading && loadingText ? <span>{loadingText}</span> : children}\n </button>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoEM;AAhEN,gBAAmB;AAEnB,wBAA0B;AAe1B,MAAM,cAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,iBAAqD;AAAA,EACzD,OACE;AAAA,EACF,OACE;AAAA,EACF,SACE;AAAA,EACF,UACE;AACJ;AAEA,MAAM,kBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAsD;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,aAAa,YAAY;AAC/B,QAAM,gBAAgB,gBAAgB,IAAI;AAC1C,QAAM,mBAAmB,mBAAmB,IAAI;AAChD,QAAM,WACJ,OAAO,SAAS,WACd,4CAAC,+BAAU,MAAM,MAAM,WAAW,eAAe,IAC/C,OACF,4CAAC,UAAK,eAAW,cAAG,eAAe,aAAa,GAAI,gBAAK,IACvD;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB,eAAe,OAAO;AAAA,QACtB,SAAS,YAAY,WAAW,YAAY,cACxC,uSACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MACf,UAAU;AAAA,MACV,iBAAe;AAAA,MACf,aAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,cAAG,kCAAkC,gBAAgB;AAAA,YAChE,OAAM;AAAA,YACN,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,eAAY;AAAA,YAEZ;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,QAAO;AAAA,kBACP,aAAY;AAAA;AAAA,cACd;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,eAAc;AAAA,kBACd,aAAY;AAAA,kBACZ,GAAE;AAAA;AAAA,cACJ;AAAA;AAAA;AAAA,QACF;AAAA,QAED,CAAC,WAAW;AAAA,QACZ,WAAW,cAAc,4CAAC,UAAM,uBAAY,IAAU;AAAA;AAAA;AAAA,EACzD;AAEJ;","names":[]}
|
|
@@ -7,9 +7,12 @@ type CraftButtonSize = "sm" | "md" | "lg";
|
|
|
7
7
|
type CraftButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
8
8
|
variant?: CraftButtonVariant;
|
|
9
9
|
size?: CraftButtonSize;
|
|
10
|
-
glow?: boolean;
|
|
11
10
|
tone?: ThemeName;
|
|
11
|
+
glow?: boolean;
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
loadingText?: React.ReactNode;
|
|
14
|
+
icon?: string | React.ReactNode;
|
|
12
15
|
};
|
|
13
|
-
declare function CraftButton({ className, variant, size, glow,
|
|
16
|
+
declare function CraftButton({ className, variant, size, tone, disabled, glow, loading, loadingText, icon, children, ...props }: CraftButtonProps): react_jsx_runtime.JSX.Element;
|
|
14
17
|
|
|
15
18
|
export { CraftButton, type CraftButtonProps };
|
|
@@ -7,9 +7,12 @@ type CraftButtonSize = "sm" | "md" | "lg";
|
|
|
7
7
|
type CraftButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
8
8
|
variant?: CraftButtonVariant;
|
|
9
9
|
size?: CraftButtonSize;
|
|
10
|
-
glow?: boolean;
|
|
11
10
|
tone?: ThemeName;
|
|
11
|
+
glow?: boolean;
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
loadingText?: React.ReactNode;
|
|
14
|
+
icon?: string | React.ReactNode;
|
|
12
15
|
};
|
|
13
|
-
declare function CraftButton({ className, variant, size, glow,
|
|
16
|
+
declare function CraftButton({ className, variant, size, tone, disabled, glow, loading, loadingText, icon, children, ...props }: CraftButtonProps): react_jsx_runtime.JSX.Element;
|
|
14
17
|
|
|
15
18
|
export { CraftButton, type CraftButtonProps };
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { cn } from "../utils/cn";
|
|
4
|
+
import { CraftIcon } from "../components/craft-icon";
|
|
3
5
|
const sizeClasses = {
|
|
4
6
|
sm: "h-9 px-4 text-xs",
|
|
5
7
|
md: "h-11 px-6 text-sm",
|
|
@@ -11,16 +13,34 @@ const variantClasses = {
|
|
|
11
13
|
outline: "bg-transparent text-[color:rgb(var(--nc-accent-1))] border-2 border-[color:rgb(var(--nc-accent-1)/0.5)] hover:border-[color:rgb(var(--nc-accent-1))] hover:bg-[color:rgb(var(--nc-accent-1)/0.1)]",
|
|
12
14
|
gradient: "bg-gradient-to-r from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-2)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-2)/0.6)] hover:scale-[1.02] active:scale-[0.98]"
|
|
13
15
|
};
|
|
16
|
+
const iconSizeClasses = {
|
|
17
|
+
sm: "h-4 w-4",
|
|
18
|
+
md: "h-4 w-4",
|
|
19
|
+
lg: "h-5 w-5"
|
|
20
|
+
};
|
|
21
|
+
const spinnerSizeClasses = {
|
|
22
|
+
sm: "h-4 w-4",
|
|
23
|
+
md: "h-4 w-4",
|
|
24
|
+
lg: "h-5 w-5"
|
|
25
|
+
};
|
|
14
26
|
function CraftButton({
|
|
15
27
|
className,
|
|
16
28
|
variant = "solid",
|
|
17
29
|
size = "md",
|
|
18
|
-
glow = true,
|
|
19
30
|
tone,
|
|
20
31
|
disabled,
|
|
32
|
+
glow = true,
|
|
33
|
+
loading = false,
|
|
34
|
+
loadingText,
|
|
35
|
+
icon,
|
|
36
|
+
children,
|
|
21
37
|
...props
|
|
22
38
|
}) {
|
|
23
|
-
|
|
39
|
+
const isDisabled = disabled || loading;
|
|
40
|
+
const iconClassName = iconSizeClasses[size];
|
|
41
|
+
const spinnerClassName = spinnerSizeClasses[size];
|
|
42
|
+
const iconNode = typeof icon === "string" ? /* @__PURE__ */ jsx(CraftIcon, { name: icon, className: iconClassName }) : icon ? /* @__PURE__ */ jsx("span", { className: cn("inline-flex", iconClassName), children: icon }) : null;
|
|
43
|
+
return /* @__PURE__ */ jsxs(
|
|
24
44
|
"button",
|
|
25
45
|
{
|
|
26
46
|
className: cn(
|
|
@@ -31,8 +51,48 @@ function CraftButton({
|
|
|
31
51
|
className
|
|
32
52
|
),
|
|
33
53
|
"data-nc-theme": tone,
|
|
34
|
-
disabled,
|
|
35
|
-
|
|
54
|
+
disabled: isDisabled,
|
|
55
|
+
"aria-disabled": isDisabled,
|
|
56
|
+
"aria-busy": loading,
|
|
57
|
+
...props,
|
|
58
|
+
children: [
|
|
59
|
+
loading && /* @__PURE__ */ jsxs(
|
|
60
|
+
"svg",
|
|
61
|
+
{
|
|
62
|
+
className: cn("mr-2 animate-spin text-current", spinnerClassName),
|
|
63
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
64
|
+
fill: "none",
|
|
65
|
+
viewBox: "0 0 24 24",
|
|
66
|
+
"aria-hidden": "true",
|
|
67
|
+
children: [
|
|
68
|
+
/* @__PURE__ */ jsx(
|
|
69
|
+
"circle",
|
|
70
|
+
{
|
|
71
|
+
className: "opacity-25",
|
|
72
|
+
cx: "12",
|
|
73
|
+
cy: "12",
|
|
74
|
+
r: "10",
|
|
75
|
+
stroke: "currentColor",
|
|
76
|
+
strokeWidth: "4"
|
|
77
|
+
}
|
|
78
|
+
),
|
|
79
|
+
/* @__PURE__ */ jsx(
|
|
80
|
+
"path",
|
|
81
|
+
{
|
|
82
|
+
className: "opacity-75",
|
|
83
|
+
fill: "none",
|
|
84
|
+
stroke: "currentColor",
|
|
85
|
+
strokeLinecap: "round",
|
|
86
|
+
strokeWidth: "4",
|
|
87
|
+
d: "M4 12a8 8 0 018-8"
|
|
88
|
+
}
|
|
89
|
+
)
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
!loading && iconNode,
|
|
94
|
+
loading && loadingText ? /* @__PURE__ */ jsx("span", { children: loadingText }) : children
|
|
95
|
+
]
|
|
36
96
|
}
|
|
37
97
|
);
|
|
38
98
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/craft-button.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftIcon } from \"@/components/craft-icon\";\n\ntype CraftButtonVariant = \"solid\" | \"ghost\" | \"outline\" | \"gradient\";\ntype CraftButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport type CraftButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n variant?: CraftButtonVariant;\n size?: CraftButtonSize;\n tone?: ThemeName;\n glow?: boolean;\n loading?: boolean;\n loadingText?: React.ReactNode;\n icon?: string | React.ReactNode;\n};\n\nconst sizeClasses: Record<CraftButtonSize, string> = {\n sm: \"h-9 px-4 text-xs\",\n md: \"h-11 px-6 text-sm\",\n lg: \"h-13 px-8 text-base\",\n};\n\nconst variantClasses: Record<CraftButtonVariant, string> = {\n solid:\n \"bg-gradient-to-br from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-1)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-1)/0.6)] hover:scale-[1.02] active:scale-[0.98]\",\n ghost:\n \"bg-[color:rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg))] hover:bg-[color:rgb(var(--nc-surface)/0.18)] backdrop-blur-sm border border-[rgb(var(--nc-border)/0.35)] hover:border-[color:rgb(var(--nc-border)/0.5)]\",\n outline:\n \"bg-transparent text-[color:rgb(var(--nc-accent-1))] border-2 border-[color:rgb(var(--nc-accent-1)/0.5)] hover:border-[color:rgb(var(--nc-accent-1))] hover:bg-[color:rgb(var(--nc-accent-1)/0.1)]\",\n gradient:\n \"bg-gradient-to-r from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-2)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-2)/0.6)] hover:scale-[1.02] active:scale-[0.98]\",\n};\n\nconst iconSizeClasses: Record<CraftButtonSize, string> = {\n sm: \"h-4 w-4\",\n md: \"h-4 w-4\",\n lg: \"h-5 w-5\",\n};\n\nconst spinnerSizeClasses: Record<CraftButtonSize, string> = {\n sm: \"h-4 w-4\",\n md: \"h-4 w-4\",\n lg: \"h-5 w-5\",\n};\n\nexport function CraftButton({\n className,\n variant = \"solid\",\n size = \"md\",\n tone,\n disabled,\n glow = true,\n loading = false,\n loadingText,\n icon,\n children,\n ...props\n}: CraftButtonProps) {\n const isDisabled = disabled || loading;\n const iconClassName = iconSizeClasses[size];\n const spinnerClassName = spinnerSizeClasses[size];\n const iconNode =\n typeof icon === \"string\" ? (\n <CraftIcon name={icon} className={iconClassName} />\n ) : icon ? (\n <span className={cn(\"inline-flex\", iconClassName)}>{icon}</span>\n ) : null;\n\n return (\n <button\n className={cn(\n \"relative inline-flex items-center justify-center gap-2 rounded-xl font-semibold tracking-wide transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--nc-accent-1)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100\",\n sizeClasses[size],\n variantClasses[variant],\n glow && (variant === \"solid\" || variant === \"gradient\")\n ? \"before:absolute before:-inset-1 before:rounded-xl before:bg-linear-to-r before:from-[rgb(var(--nc-accent-1)/0.2)] before:via-[rgb(var(--nc-accent-2)/0.2)] before:to-[rgb(var(--nc-accent-3)/0.2)] before:blur-xl before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity\"\n : \"\",\n className\n )}\n data-nc-theme={tone}\n disabled={isDisabled}\n aria-disabled={isDisabled}\n aria-busy={loading}\n {...props}\n >\n {loading && (\n <svg\n className={cn(\"mr-2 animate-spin text-current\", spinnerClassName)}\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeWidth=\"4\"\n d=\"M4 12a8 8 0 018-8\"\n />\n </svg>\n )}\n {!loading && iconNode}\n {loading && loadingText ? <span>{loadingText}</span> : children}\n </button>\n );\n}\n"],"mappings":";AAoEM,cAuBE,YAvBF;AAhEN,SAAS,UAAU;AAEnB,SAAS,iBAAiB;AAe1B,MAAM,cAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,iBAAqD;AAAA,EACzD,OACE;AAAA,EACF,OACE;AAAA,EACF,SACE;AAAA,EACF,UACE;AACJ;AAEA,MAAM,kBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAsD;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,aAAa,YAAY;AAC/B,QAAM,gBAAgB,gBAAgB,IAAI;AAC1C,QAAM,mBAAmB,mBAAmB,IAAI;AAChD,QAAM,WACJ,OAAO,SAAS,WACd,oBAAC,aAAU,MAAM,MAAM,WAAW,eAAe,IAC/C,OACF,oBAAC,UAAK,WAAW,GAAG,eAAe,aAAa,GAAI,gBAAK,IACvD;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB,eAAe,OAAO;AAAA,QACtB,SAAS,YAAY,WAAW,YAAY,cACxC,uSACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MACf,UAAU;AAAA,MACV,iBAAe;AAAA,MACf,aAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,kCAAkC,gBAAgB;AAAA,YAChE,OAAM;AAAA,YACN,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,eAAY;AAAA,YAEZ;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,QAAO;AAAA,kBACP,aAAY;AAAA;AAAA,cACd;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,eAAc;AAAA,kBACd,aAAY;AAAA,kBACZ,GAAE;AAAA;AAAA,cACJ;AAAA;AAAA;AAAA,QACF;AAAA,QAED,CAAC,WAAW;AAAA,QACZ,WAAW,cAAc,oBAAC,UAAM,uBAAY,IAAU;AAAA;AAAA;AAAA,EACzD;AAEJ;","names":[]}
|
|
@@ -63,13 +63,13 @@ const CraftCheckbox = React.forwardRef(
|
|
|
63
63
|
"flex h-5 w-5 items-center justify-center rounded-md border-2",
|
|
64
64
|
"border-[rgb(var(--nc-border)/0.45)] bg-[rgb(var(--nc-surface)/0.08)]",
|
|
65
65
|
"transition-all duration-200",
|
|
66
|
-
"peer-checked:border-[rgb(var(--nc-accent-1))]
|
|
66
|
+
"peer-checked:border-[rgb(var(--nc-accent-1))]",
|
|
67
67
|
"peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]"
|
|
68
68
|
),
|
|
69
69
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
70
|
"svg",
|
|
71
71
|
{
|
|
72
|
-
className: "h-3 w-3 text-[rgb(var(--nc-
|
|
72
|
+
className: "h-3 w-3 text-[rgb(var(--nc-accent-1))] opacity-0 transition-opacity peer-checked:opacity-100",
|
|
73
73
|
viewBox: "0 0 20 20",
|
|
74
74
|
fill: "currentColor",
|
|
75
75
|
"aria-hidden": "true",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/craft-checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftCheckboxProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"type\"\n> & {\n tone?: ThemeName;\n label?: React.ReactNode;\n description?: React.ReactNode;\n};\n\nexport const CraftCheckbox = React.forwardRef<HTMLInputElement, CraftCheckboxProps>(\n ({ className, tone, label, description, ...props }, ref) => {\n return (\n <label\n className={cn(\n \"flex items-start gap-3 text-sm text-[rgb(var(--nc-fg))]\",\n props.disabled ? \"opacity-60\" : \"cursor-pointer\",\n className\n )}\n data-nc-theme={tone}\n >\n <span className=\"relative mt-0.5\">\n <input\n ref={ref}\n type=\"checkbox\"\n className=\"peer sr-only\"\n {...props}\n />\n <span\n className={cn(\n \"flex h-5 w-5 items-center justify-center rounded-md border-2\",\n \"border-[rgb(var(--nc-border)/0.45)] bg-[rgb(var(--nc-surface)/0.08)]\",\n \"transition-all duration-200\",\n \"peer-checked:border-[rgb(var(--nc-accent-1))]\",\n \"peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]\"\n )}\n >\n <svg\n className=\"h-3 w-3 text-[rgb(var(--nc-accent-1))] opacity-0 transition-opacity peer-checked:opacity-100\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M16.704 5.29a1 1 0 010 1.415l-7.2 7.2a1 1 0 01-1.415 0l-3.2-3.2a1 1 0 111.415-1.415l2.492 2.493 6.493-6.493a1 1 0 011.415 0z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </span>\n </span>\n <span className=\"space-y-1\">\n {label && <span className=\"block font-medium text-[rgb(var(--nc-fg))]\">{label}</span>}\n {description && (\n <span className=\"block text-xs text-[rgb(var(--nc-fg-muted))]\">{description}</span>\n )}\n </span>\n </label>\n );\n }\n);\n\nCraftCheckbox.displayName = \"CraftCheckbox\";"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBQ;AAxBR,YAAuB;AACvB,gBAAmB;AAYZ,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,EAAE,WAAW,MAAM,OAAO,aAAa,GAAG,MAAM,GAAG,QAAQ;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,MAAM,WAAW,eAAe;AAAA,UAChC;AAAA,QACF;AAAA,QACA,iBAAe;AAAA,QAEf;AAAA,uDAAC,UAAK,WAAU,mBACd;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,MAAK;AAAA,gBACL,WAAU;AAAA,gBACT,GAAG;AAAA;AAAA,YACN;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBACF;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,eAAY;AAAA,oBAEZ;AAAA,sBAAC;AAAA;AAAA,wBACC,UAAS;AAAA,wBACT,GAAE;AAAA,wBACF,UAAS;AAAA;AAAA,oBACX;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UACA,6CAAC,UAAK,WAAU,aACb;AAAA,qBAAS,4CAAC,UAAK,WAAU,8CAA8C,iBAAM;AAAA,YAC7E,eACC,4CAAC,UAAK,WAAU,gDAAgD,uBAAY;AAAA,aAEhF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;","names":[]}
|
|
@@ -30,13 +30,13 @@ const CraftCheckbox = React.forwardRef(
|
|
|
30
30
|
"flex h-5 w-5 items-center justify-center rounded-md border-2",
|
|
31
31
|
"border-[rgb(var(--nc-border)/0.45)] bg-[rgb(var(--nc-surface)/0.08)]",
|
|
32
32
|
"transition-all duration-200",
|
|
33
|
-
"peer-checked:border-[rgb(var(--nc-accent-1))]
|
|
33
|
+
"peer-checked:border-[rgb(var(--nc-accent-1))]",
|
|
34
34
|
"peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]"
|
|
35
35
|
),
|
|
36
36
|
children: /* @__PURE__ */ jsx(
|
|
37
37
|
"svg",
|
|
38
38
|
{
|
|
39
|
-
className: "h-3 w-3 text-[rgb(var(--nc-
|
|
39
|
+
className: "h-3 w-3 text-[rgb(var(--nc-accent-1))] opacity-0 transition-opacity peer-checked:opacity-100",
|
|
40
40
|
viewBox: "0 0 20 20",
|
|
41
41
|
fill: "currentColor",
|
|
42
42
|
"aria-hidden": "true",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/craft-checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftCheckboxProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"type\"\n> & {\n tone?: ThemeName;\n label?: React.ReactNode;\n description?: React.ReactNode;\n};\n\nexport const CraftCheckbox = React.forwardRef<HTMLInputElement, CraftCheckboxProps>(\n ({ className, tone, label, description, ...props }, ref) => {\n return (\n <label\n className={cn(\n \"flex items-start gap-3 text-sm text-[rgb(var(--nc-fg))]\",\n props.disabled ? \"opacity-60\" : \"cursor-pointer\",\n className\n )}\n data-nc-theme={tone}\n >\n <span className=\"relative mt-0.5\">\n <input\n ref={ref}\n type=\"checkbox\"\n className=\"peer sr-only\"\n {...props}\n />\n <span\n className={cn(\n \"flex h-5 w-5 items-center justify-center rounded-md border-2\",\n \"border-[rgb(var(--nc-border)/0.45)] bg-[rgb(var(--nc-surface)/0.08)]\",\n \"transition-all duration-200\",\n \"peer-checked:border-[rgb(var(--nc-accent-1))]\",\n \"peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]\"\n )}\n >\n <svg\n className=\"h-3 w-3 text-[rgb(var(--nc-accent-1))] opacity-0 transition-opacity peer-checked:opacity-100\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M16.704 5.29a1 1 0 010 1.415l-7.2 7.2a1 1 0 01-1.415 0l-3.2-3.2a1 1 0 111.415-1.415l2.492 2.493 6.493-6.493a1 1 0 011.415 0z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </span>\n </span>\n <span className=\"space-y-1\">\n {label && <span className=\"block font-medium text-[rgb(var(--nc-fg))]\">{label}</span>}\n {description && (\n <span className=\"block text-xs text-[rgb(var(--nc-fg-muted))]\">{description}</span>\n )}\n </span>\n </label>\n );\n }\n);\n\nCraftCheckbox.displayName = \"CraftCheckbox\";"],"mappings":"AAwBQ,SACE,KADF;AAxBR,YAAY,WAAW;AACvB,SAAS,UAAU;AAYZ,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,EAAE,WAAW,MAAM,OAAO,aAAa,GAAG,MAAM,GAAG,QAAQ;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,MAAM,WAAW,eAAe;AAAA,UAChC;AAAA,QACF;AAAA,QACA,iBAAe;AAAA,QAEf;AAAA,+BAAC,UAAK,WAAU,mBACd;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,MAAK;AAAA,gBACL,WAAU;AAAA,gBACT,GAAG;AAAA;AAAA,YACN;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBACF;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,eAAY;AAAA,oBAEZ;AAAA,sBAAC;AAAA;AAAA,wBACC,UAAS;AAAA,wBACT,GAAE;AAAA,wBACF,UAAS;AAAA;AAAA,oBACX;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UACA,qBAAC,UAAK,WAAU,aACb;AAAA,qBAAS,oBAAC,UAAK,WAAU,8CAA8C,iBAAM;AAAA,YAC7E,eACC,oBAAC,UAAK,WAAU,gDAAgD,uBAAY;AAAA,aAEhF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;","names":[]}
|
|
@@ -38,7 +38,6 @@ var import_react_hook_form = require("react-hook-form");
|
|
|
38
38
|
var import_cn = require("../utils/cn");
|
|
39
39
|
var import_craft_drawer = require("../components/craft-drawer");
|
|
40
40
|
var import_craft_button = require("../components/craft-button");
|
|
41
|
-
var import_craft_submit_button = require("../components/craft-submit-button");
|
|
42
41
|
function CraftCreateEditDrawer({
|
|
43
42
|
mode = "create",
|
|
44
43
|
form,
|
|
@@ -70,6 +69,7 @@ function CraftCreateEditDrawer({
|
|
|
70
69
|
[isControlled, onOpenChange]
|
|
71
70
|
);
|
|
72
71
|
const formId = React.useId();
|
|
72
|
+
const isSubmitDisabled = disableSubmitWhenInvalid && !form.formState.isValid;
|
|
73
73
|
const handleSubmit = form.handleSubmit(async (values) => {
|
|
74
74
|
await onSubmit(values);
|
|
75
75
|
if (closeOnSubmit) setOpen(false);
|
|
@@ -79,10 +79,12 @@ function CraftCreateEditDrawer({
|
|
|
79
79
|
const footerContent = footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-3", children: [
|
|
80
80
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_button.CraftButton, { type: "button", variant: "ghost", onClick: () => setOpen(false), children: cancelLabel }),
|
|
81
81
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
82
|
-
|
|
82
|
+
import_craft_button.CraftButton,
|
|
83
83
|
{
|
|
84
|
+
type: "submit",
|
|
85
|
+
variant: "solid",
|
|
84
86
|
form: formId,
|
|
85
|
-
|
|
87
|
+
disabled: isSubmitDisabled,
|
|
86
88
|
children: resolvedSubmitLabel
|
|
87
89
|
}
|
|
88
90
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/craft-create-edit-drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { FormProvider, type FieldValues, type UseFormReturn } from \"react-hook-form\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftDrawer } from \"@/components/craft-drawer\";\nimport { CraftButton } from \"@/components/craft-button\";\
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-create-edit-drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { FormProvider, type FieldValues, type UseFormReturn } from \"react-hook-form\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftDrawer } from \"@/components/craft-drawer\";\nimport { CraftButton } from \"@/components/craft-button\";\n\nexport type CraftCreateEditDrawerProps<TValues extends FieldValues> = {\n mode?: \"create\" | \"edit\";\n form: UseFormReturn<TValues>;\n onSubmit: (values: TValues) => void | Promise<void>;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n trigger?: React.ReactNode;\n title?: React.ReactNode;\n description?: React.ReactNode;\n submitLabel?: React.ReactNode;\n cancelLabel?: React.ReactNode;\n tone?: ThemeName;\n className?: string;\n children?: React.ReactNode;\n footer?: React.ReactNode;\n disableSubmitWhenInvalid?: boolean;\n closeOnSubmit?: boolean;\n side?: \"left\" | \"right\";\n};\n\nexport function CraftCreateEditDrawer<TValues extends FieldValues>({\n mode = \"create\",\n form,\n onSubmit,\n open,\n defaultOpen = false,\n onOpenChange,\n trigger,\n title,\n description,\n submitLabel,\n cancelLabel = \"Cancel\",\n tone,\n className,\n children,\n footer,\n disableSubmitWhenInvalid = true,\n closeOnSubmit = true,\n side = \"right\",\n}: CraftCreateEditDrawerProps<TValues>) {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n const isControlled = typeof open === \"boolean\";\n const isOpen = isControlled ? open : uncontrolledOpen;\n\n const setOpen = React.useCallback(\n (next: boolean) => {\n if (!isControlled) setUncontrolledOpen(next);\n onOpenChange?.(next);\n },\n [isControlled, onOpenChange]\n );\n\n const formId = React.useId();\n const isSubmitDisabled =\n disableSubmitWhenInvalid && !form.formState.isValid;\n\n const handleSubmit = form.handleSubmit(async (values) => {\n await onSubmit(values);\n if (closeOnSubmit) setOpen(false);\n });\n\n const resolvedTitle = title ?? (mode === \"create\" ? \"Create item\" : \"Edit item\");\n const resolvedSubmitLabel =\n submitLabel ?? (mode === \"create\" ? \"Create\" : \"Save changes\");\n\n const footerContent = footer ?? (\n <div className=\"flex flex-wrap items-center justify-end gap-3\">\n <CraftButton type=\"button\" variant=\"ghost\" onClick={() => setOpen(false)}>\n {cancelLabel}\n </CraftButton>\n <CraftButton\n type=\"submit\"\n variant=\"solid\"\n form={formId}\n disabled={isSubmitDisabled}\n >\n {resolvedSubmitLabel}\n </CraftButton>\n </div>\n );\n\n return (\n <FormProvider {...form}>\n <CraftDrawer\n open={isOpen}\n onOpenChange={setOpen}\n trigger={trigger}\n title={resolvedTitle}\n tone={tone}\n side={side}\n className={cn(\"flex flex-col\", className)}\n footer={footerContent}\n >\n <form id={formId} onSubmit={handleSubmit} className=\"space-y-5\">\n {description && (\n <p className=\"text-sm text-[rgb(var(--nc-fg-muted))]\">\n {description}\n </p>\n )}\n {children}\n </form>\n </CraftDrawer>\n </FormProvider>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6EI;AA3EJ,YAAuB;AACvB,6BAAmE;AAEnE,gBAAmB;AAEnB,0BAA4B;AAC5B,0BAA4B;AAuBrB,SAAS,sBAAmD;AAAA,EACjE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,OAAO;AACT,GAAwC;AACtC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,MAAM,SAAS,WAAW;AAC1E,QAAM,eAAe,OAAO,SAAS;AACrC,QAAM,SAAS,eAAe,OAAO;AAErC,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,SAAkB;AACjB,UAAI,CAAC,aAAc,qBAAoB,IAAI;AAC3C,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,cAAc,YAAY;AAAA,EAC7B;AAEA,QAAM,SAAS,MAAM,MAAM;AAC3B,QAAM,mBACJ,4BAA4B,CAAC,KAAK,UAAU;AAE9C,QAAM,eAAe,KAAK,aAAa,OAAO,WAAW;AACvD,UAAM,SAAS,MAAM;AACrB,QAAI,cAAe,SAAQ,KAAK;AAAA,EAClC,CAAC;AAED,QAAM,gBAAgB,wBAAU,SAAS,WAAW,gBAAgB;AACpE,QAAM,sBACJ,oCAAgB,SAAS,WAAW,WAAW;AAEjD,QAAM,gBAAgB,0BACpB,6CAAC,SAAI,WAAU,iDACb;AAAA,gDAAC,mCAAY,MAAK,UAAS,SAAQ,SAAQ,SAAS,MAAM,QAAQ,KAAK,GACpE,uBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAGF,SACE,4CAAC,uCAAc,GAAG,MAChB;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,cAAc;AAAA,MACd;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,eAAW,cAAG,iBAAiB,SAAS;AAAA,MACxC,QAAQ;AAAA,MAER,uDAAC,UAAK,IAAI,QAAQ,UAAU,cAAc,WAAU,aACjD;AAAA,uBACC,4CAAC,OAAE,WAAU,0CACV,uBACH;AAAA,QAED;AAAA,SACH;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
|
|
@@ -5,7 +5,6 @@ import { FormProvider } from "react-hook-form";
|
|
|
5
5
|
import { cn } from "../utils/cn";
|
|
6
6
|
import { CraftDrawer } from "../components/craft-drawer";
|
|
7
7
|
import { CraftButton } from "../components/craft-button";
|
|
8
|
-
import { CraftSubmitButton } from "../components/craft-submit-button";
|
|
9
8
|
function CraftCreateEditDrawer({
|
|
10
9
|
mode = "create",
|
|
11
10
|
form,
|
|
@@ -37,6 +36,7 @@ function CraftCreateEditDrawer({
|
|
|
37
36
|
[isControlled, onOpenChange]
|
|
38
37
|
);
|
|
39
38
|
const formId = React.useId();
|
|
39
|
+
const isSubmitDisabled = disableSubmitWhenInvalid && !form.formState.isValid;
|
|
40
40
|
const handleSubmit = form.handleSubmit(async (values) => {
|
|
41
41
|
await onSubmit(values);
|
|
42
42
|
if (closeOnSubmit) setOpen(false);
|
|
@@ -46,10 +46,12 @@ function CraftCreateEditDrawer({
|
|
|
46
46
|
const footerContent = footer != null ? footer : /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-3", children: [
|
|
47
47
|
/* @__PURE__ */ jsx(CraftButton, { type: "button", variant: "ghost", onClick: () => setOpen(false), children: cancelLabel }),
|
|
48
48
|
/* @__PURE__ */ jsx(
|
|
49
|
-
|
|
49
|
+
CraftButton,
|
|
50
50
|
{
|
|
51
|
+
type: "submit",
|
|
52
|
+
variant: "solid",
|
|
51
53
|
form: formId,
|
|
52
|
-
|
|
54
|
+
disabled: isSubmitDisabled,
|
|
53
55
|
children: resolvedSubmitLabel
|
|
54
56
|
}
|
|
55
57
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/craft-create-edit-drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { FormProvider, type FieldValues, type UseFormReturn } from \"react-hook-form\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftDrawer } from \"@/components/craft-drawer\";\nimport { CraftButton } from \"@/components/craft-button\";\
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-create-edit-drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { FormProvider, type FieldValues, type UseFormReturn } from \"react-hook-form\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftDrawer } from \"@/components/craft-drawer\";\nimport { CraftButton } from \"@/components/craft-button\";\n\nexport type CraftCreateEditDrawerProps<TValues extends FieldValues> = {\n mode?: \"create\" | \"edit\";\n form: UseFormReturn<TValues>;\n onSubmit: (values: TValues) => void | Promise<void>;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n trigger?: React.ReactNode;\n title?: React.ReactNode;\n description?: React.ReactNode;\n submitLabel?: React.ReactNode;\n cancelLabel?: React.ReactNode;\n tone?: ThemeName;\n className?: string;\n children?: React.ReactNode;\n footer?: React.ReactNode;\n disableSubmitWhenInvalid?: boolean;\n closeOnSubmit?: boolean;\n side?: \"left\" | \"right\";\n};\n\nexport function CraftCreateEditDrawer<TValues extends FieldValues>({\n mode = \"create\",\n form,\n onSubmit,\n open,\n defaultOpen = false,\n onOpenChange,\n trigger,\n title,\n description,\n submitLabel,\n cancelLabel = \"Cancel\",\n tone,\n className,\n children,\n footer,\n disableSubmitWhenInvalid = true,\n closeOnSubmit = true,\n side = \"right\",\n}: CraftCreateEditDrawerProps<TValues>) {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n const isControlled = typeof open === \"boolean\";\n const isOpen = isControlled ? open : uncontrolledOpen;\n\n const setOpen = React.useCallback(\n (next: boolean) => {\n if (!isControlled) setUncontrolledOpen(next);\n onOpenChange?.(next);\n },\n [isControlled, onOpenChange]\n );\n\n const formId = React.useId();\n const isSubmitDisabled =\n disableSubmitWhenInvalid && !form.formState.isValid;\n\n const handleSubmit = form.handleSubmit(async (values) => {\n await onSubmit(values);\n if (closeOnSubmit) setOpen(false);\n });\n\n const resolvedTitle = title ?? (mode === \"create\" ? \"Create item\" : \"Edit item\");\n const resolvedSubmitLabel =\n submitLabel ?? (mode === \"create\" ? \"Create\" : \"Save changes\");\n\n const footerContent = footer ?? (\n <div className=\"flex flex-wrap items-center justify-end gap-3\">\n <CraftButton type=\"button\" variant=\"ghost\" onClick={() => setOpen(false)}>\n {cancelLabel}\n </CraftButton>\n <CraftButton\n type=\"submit\"\n variant=\"solid\"\n form={formId}\n disabled={isSubmitDisabled}\n >\n {resolvedSubmitLabel}\n </CraftButton>\n </div>\n );\n\n return (\n <FormProvider {...form}>\n <CraftDrawer\n open={isOpen}\n onOpenChange={setOpen}\n trigger={trigger}\n title={resolvedTitle}\n tone={tone}\n side={side}\n className={cn(\"flex flex-col\", className)}\n footer={footerContent}\n >\n <form id={formId} onSubmit={handleSubmit} className=\"space-y-5\">\n {description && (\n <p className=\"text-sm text-[rgb(var(--nc-fg-muted))]\">\n {description}\n </p>\n )}\n {children}\n </form>\n </CraftDrawer>\n </FormProvider>\n );\n}\n"],"mappings":";AA6EI,SACE,KADF;AA3EJ,YAAY,WAAW;AACvB,SAAS,oBAA0D;AAEnE,SAAS,UAAU;AAEnB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAuBrB,SAAS,sBAAmD;AAAA,EACjE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,OAAO;AACT,GAAwC;AACtC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,MAAM,SAAS,WAAW;AAC1E,QAAM,eAAe,OAAO,SAAS;AACrC,QAAM,SAAS,eAAe,OAAO;AAErC,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,SAAkB;AACjB,UAAI,CAAC,aAAc,qBAAoB,IAAI;AAC3C,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,cAAc,YAAY;AAAA,EAC7B;AAEA,QAAM,SAAS,MAAM,MAAM;AAC3B,QAAM,mBACJ,4BAA4B,CAAC,KAAK,UAAU;AAE9C,QAAM,eAAe,KAAK,aAAa,OAAO,WAAW;AACvD,UAAM,SAAS,MAAM;AACrB,QAAI,cAAe,SAAQ,KAAK;AAAA,EAClC,CAAC;AAED,QAAM,gBAAgB,wBAAU,SAAS,WAAW,gBAAgB;AACpE,QAAM,sBACJ,oCAAgB,SAAS,WAAW,WAAW;AAEjD,QAAM,gBAAgB,0BACpB,qBAAC,SAAI,WAAU,iDACb;AAAA,wBAAC,eAAY,MAAK,UAAS,SAAQ,SAAQ,SAAS,MAAM,QAAQ,KAAK,GACpE,uBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAGF,SACE,oBAAC,gBAAc,GAAG,MAChB;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,cAAc;AAAA,MACd;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACxC,QAAQ;AAAA,MAER,+BAAC,UAAK,IAAI,QAAQ,UAAU,cAAc,WAAU,aACjD;AAAA,uBACC,oBAAC,OAAE,WAAU,0CACV,uBACH;AAAA,QAED;AAAA,SACH;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
var craft_data_table_header_exports = {};
|
|
21
|
+
__export(craft_data_table_header_exports, {
|
|
22
|
+
CraftDataTableHeader: () => CraftDataTableHeader
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(craft_data_table_header_exports);
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
var import_cn = require("../utils/cn");
|
|
27
|
+
const paddingClasses = {
|
|
28
|
+
compact: "px-4 py-3",
|
|
29
|
+
normal: "px-6 py-4",
|
|
30
|
+
comfortable: "px-8 py-5"
|
|
31
|
+
};
|
|
32
|
+
const variantClasses = {
|
|
33
|
+
default: "border-b border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.12)]",
|
|
34
|
+
minimal: "border-b border-[rgb(var(--nc-border)/0.25)] bg-transparent"
|
|
35
|
+
};
|
|
36
|
+
function CraftDataTableHeader({
|
|
37
|
+
title,
|
|
38
|
+
description,
|
|
39
|
+
actions,
|
|
40
|
+
filters,
|
|
41
|
+
tone,
|
|
42
|
+
variant = "default",
|
|
43
|
+
padding = "normal",
|
|
44
|
+
className
|
|
45
|
+
}) {
|
|
46
|
+
if (!title && !description && !actions && !filters) return null;
|
|
47
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
48
|
+
"div",
|
|
49
|
+
{
|
|
50
|
+
className: (0, import_cn.cn)(
|
|
51
|
+
"flex flex-wrap items-start justify-between gap-4",
|
|
52
|
+
paddingClasses[padding],
|
|
53
|
+
variantClasses[variant],
|
|
54
|
+
className
|
|
55
|
+
),
|
|
56
|
+
"data-nc-theme": tone,
|
|
57
|
+
children: [
|
|
58
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1", children: [
|
|
59
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-semibold", children: title }) : null,
|
|
60
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description }) : null
|
|
61
|
+
] }),
|
|
62
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
|
|
63
|
+
filters,
|
|
64
|
+
actions
|
|
65
|
+
] })
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
71
|
+
0 && (module.exports = {
|
|
72
|
+
CraftDataTableHeader
|
|
73
|
+
});
|
|
74
|
+
//# sourceMappingURL=craft-data-table-header.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-data-table-header.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftDataTableHeaderProps = {\n title?: React.ReactNode;\n description?: React.ReactNode;\n actions?: React.ReactNode;\n filters?: React.ReactNode;\n tone?: ThemeName;\n variant?: \"default\" | \"minimal\";\n padding?: \"compact\" | \"normal\" | \"comfortable\";\n className?: string;\n};\n\nconst paddingClasses: Record<NonNullable<CraftDataTableHeaderProps[\"padding\"]>, string> = {\n compact: \"px-4 py-3\",\n normal: \"px-6 py-4\",\n comfortable: \"px-8 py-5\",\n};\n\nconst variantClasses: Record<NonNullable<CraftDataTableHeaderProps[\"variant\"]>, string> = {\n default:\n \"border-b border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.12)]\",\n minimal: \"border-b border-[rgb(var(--nc-border)/0.25)] bg-transparent\",\n};\n\nexport function CraftDataTableHeader({\n title,\n description,\n actions,\n filters,\n tone,\n variant = \"default\",\n padding = \"normal\",\n className,\n}: CraftDataTableHeaderProps) {\n if (!title && !description && !actions && !filters) return null;\n\n return (\n <div\n className={cn(\n \"flex flex-wrap items-start justify-between gap-4\",\n paddingClasses[padding],\n variantClasses[variant],\n className\n )}\n data-nc-theme={tone}\n >\n <div className=\"space-y-1\">\n {title ? <h3 className=\"text-lg font-semibold\">{title}</h3> : null}\n {description ? (\n <p className=\"text-sm text-[rgb(var(--nc-fg-muted))]\">{description}</p>\n ) : null}\n </div>\n <div className=\"flex flex-wrap items-center gap-3\">\n {filters}\n {actions}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoDM;AAhDN,gBAAmB;AAcnB,MAAM,iBAAoF;AAAA,EACxF,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEA,MAAM,iBAAoF;AAAA,EACxF,SACE;AAAA,EACF,SAAS;AACX;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AACF,GAA8B;AAC5B,MAAI,CAAC,SAAS,CAAC,eAAe,CAAC,WAAW,CAAC,QAAS,QAAO;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,eAAe,OAAO;AAAA,QACtB,eAAe,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MAEf;AAAA,qDAAC,SAAI,WAAU,aACZ;AAAA,kBAAQ,4CAAC,QAAG,WAAU,yBAAyB,iBAAM,IAAQ;AAAA,UAC7D,cACC,4CAAC,OAAE,WAAU,0CAA0C,uBAAY,IACjE;AAAA,WACN;AAAA,QACA,6CAAC,SAAI,WAAU,qCACZ;AAAA;AAAA,UACA;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { ThemeName } from '../theme/theme-context.cjs';
|
|
4
|
+
|
|
5
|
+
type CraftDataTableHeaderProps = {
|
|
6
|
+
title?: React.ReactNode;
|
|
7
|
+
description?: React.ReactNode;
|
|
8
|
+
actions?: React.ReactNode;
|
|
9
|
+
filters?: React.ReactNode;
|
|
10
|
+
tone?: ThemeName;
|
|
11
|
+
variant?: "default" | "minimal";
|
|
12
|
+
padding?: "compact" | "normal" | "comfortable";
|
|
13
|
+
className?: string;
|
|
14
|
+
};
|
|
15
|
+
declare function CraftDataTableHeader({ title, description, actions, filters, tone, variant, padding, className, }: CraftDataTableHeaderProps): react_jsx_runtime.JSX.Element | null;
|
|
16
|
+
|
|
17
|
+
export { CraftDataTableHeader, type CraftDataTableHeaderProps };
|