@schandlergarcia/sf-web-components 1.3.1 → 1.4.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/.a4drules/features/command-center-dashboard-rule.md +1 -1
- package/.a4drules/skills/command-center-project/SKILL.md +4 -4
- package/.a4drules/skills/component-library/SKILL.md +4 -1
- package/dist/components/library/ui/Avatar.d.ts +22 -10
- package/dist/components/library/ui/Avatar.js +40 -17
- package/dist/components/library/ui/Avatar.js.map +1 -1
- package/dist/components/library/ui/Card.d.ts +23 -37
- package/dist/components/library/ui/EmptyState.d.ts +34 -7
- package/dist/components/library/ui/EmptyState.js +5 -6
- package/dist/components/library/ui/EmptyState.js.map +1 -1
- package/dist/components/library/ui/Spinner.d.ts +21 -5
- package/dist/components/library/ui/UIInput.d.ts +4 -5
- package/dist/components/library/ui/UIInput.js +5 -6
- package/dist/components/library/ui/UIInput.js.map +1 -1
- package/dist/components/library/ui/alert.d.ts +23 -21
- package/dist/components/library/ui/alert.js +13 -14
- package/dist/components/library/ui/alert.js.map +1 -1
- package/dist/components/library/ui/card.js +24 -26
- package/dist/components/library/ui/card.js.map +1 -1
- package/dist/components/library/ui/checkbox.d.ts +4 -4
- package/dist/components/library/ui/checkbox.js +4 -5
- package/dist/components/library/ui/checkbox.js.map +1 -1
- package/dist/components/library/ui/label.d.ts +5 -7
- package/dist/components/library/ui/label.js +9 -10
- package/dist/components/library/ui/label.js.map +1 -1
- package/dist/components/library/ui/spinner.js +16 -17
- package/dist/components/library/ui/spinner.js.map +1 -1
- package/package.json +1 -1
- package/scripts/convert-to-typescript.sh +52 -0
- package/src/components/library/ui/{Alert.jsx → Alert.tsx} +17 -7
- package/src/components/library/ui/Avatar.tsx +68 -0
- package/src/components/library/ui/{Card.jsx → Card.tsx} +24 -10
- package/src/components/library/ui/{Checkbox.jsx → Checkbox.tsx} +4 -2
- package/src/components/library/ui/{EmptyState.jsx → EmptyState.tsx} +13 -10
- package/src/components/library/ui/{Label.jsx → Label.tsx} +9 -8
- package/src/components/library/ui/{Spinner.jsx → Spinner.tsx} +12 -10
- package/src/components/library/ui/{UIInput.jsx → UIInput.tsx} +5 -5
- package/src/components/library/ui/Avatar.jsx +0 -44
|
@@ -15,7 +15,7 @@ You MUST load the **command-center-builder** and **component-library** skills be
|
|
|
15
15
|
|
|
16
16
|
## Critical constraints
|
|
17
17
|
|
|
18
|
-
1. **File extension
|
|
18
|
+
1. **File extension should be `.tsx`** — TypeScript is preferred for type safety. Use `.jsx` only if types are not available.
|
|
19
19
|
|
|
20
20
|
2. **Use ONLY library components** from `@/components/library` for cards, charts, tables, lists. Never hand-roll HTML cards (`<div className="bg-white border rounded...">`).
|
|
21
21
|
|
|
@@ -32,10 +32,10 @@ src/
|
|
|
32
32
|
├── features/ # Feature modules (global-search)
|
|
33
33
|
│ └── global-search/ # Search API, components, hooks
|
|
34
34
|
├── components/
|
|
35
|
-
│ ├── library/ #
|
|
36
|
-
│ ├── workspace/ # ComponentRegistry
|
|
35
|
+
│ ├── library/ # Component library (.tsx/.jsx - TypeScript migration in progress)
|
|
36
|
+
│ ├── workspace/ # ComponentRegistry (schema renderer)
|
|
37
37
|
│ ├── pages/ # Dashboard pages (CommandCenter.tsx wraps active dashboard)
|
|
38
|
-
│ ├── ui/ # shadcn/ui components (button, card, dialog, etc.)
|
|
38
|
+
│ ├── ui/ # shadcn/ui components (button, card, dialog, etc.) - TypeScript
|
|
39
39
|
│ ├── alerts/ # StatusAlert (CVA + Lucide)
|
|
40
40
|
│ └── layouts/ # CardLayout (uses shadcn Card)
|
|
41
41
|
└── stubs/ # No-op stubs for standalone dev (sdk-data, webapp-experimental, agentforce)
|
|
@@ -81,7 +81,7 @@ Configured in both `vite.config.ts` and `tsconfig.json`:
|
|
|
81
81
|
|
|
82
82
|
- **Dashboard pages** go in `src/components/pages/`. Wire into `CommandCenter.tsx` by importing and rendering.
|
|
83
83
|
- **Outer app pages** go in `src/pages/` or `src/features/*/pages/`. Wire into `src/routes.tsx`.
|
|
84
|
-
- **TypeScript** for
|
|
84
|
+
- **TypeScript** preferred for all code (`.tsx`/`.ts`). Core UI components converted to TypeScript. Legacy `.jsx` files being migrated.
|
|
85
85
|
- **Component library** is a vendored copy from command-center-starter — not an npm package. Changes sync manually.
|
|
86
86
|
- Vite config has `loader: { '.js': 'jsx' }` in `optimizeDeps` to support the `.js`→JSX library files.
|
|
87
87
|
- **Reset script:** `npm run reset:command-center` wipes custom dashboards and restores blank canvas.
|
|
@@ -14,13 +14,16 @@ Vendored from command-center-starter. Do not modify library files.
|
|
|
14
14
|
|
|
15
15
|
## Import Pattern
|
|
16
16
|
|
|
17
|
-
```
|
|
17
|
+
```tsx
|
|
18
18
|
// Named imports from the barrel (preferred)
|
|
19
19
|
import { MetricCard, ChartCard, TableCard, ListCard } from "@/components/library";
|
|
20
20
|
|
|
21
21
|
// Default exports that need direct import
|
|
22
22
|
import useDataSource from "@/components/library/data/useDataSource";
|
|
23
23
|
import { useThemeMode } from "@/components/library/theme/AppThemeProvider";
|
|
24
|
+
|
|
25
|
+
// Import types (TypeScript)
|
|
26
|
+
import type { MetricCardProps } from "@/components/library";
|
|
24
27
|
```
|
|
25
28
|
|
|
26
29
|
---
|
|
@@ -1,10 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare const SIZE_MAP: {
|
|
3
|
+
readonly xs: "h-6 w-6 text-[9px]";
|
|
4
|
+
readonly sm: "h-8 w-8 text-[10px]";
|
|
5
|
+
readonly md: "h-9 w-9 text-xs";
|
|
6
|
+
readonly lg: "h-11 w-11 text-sm";
|
|
7
|
+
};
|
|
8
|
+
declare const TONE_MAP: {
|
|
9
|
+
readonly slate: "bg-slate-800 text-white";
|
|
10
|
+
readonly brand: "bg-brand-500 text-white";
|
|
11
|
+
readonly neutral: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200";
|
|
12
|
+
};
|
|
13
|
+
export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement | HTMLImageElement> {
|
|
14
|
+
src?: string;
|
|
15
|
+
name?: string;
|
|
16
|
+
initials?: string;
|
|
17
|
+
icon?: React.ReactNode;
|
|
18
|
+
size?: keyof typeof SIZE_MAP;
|
|
19
|
+
tone?: keyof typeof TONE_MAP;
|
|
20
|
+
}
|
|
21
|
+
export default function Avatar({ src, name, initials, icon, size, tone, className, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export {};
|
|
@@ -1,33 +1,56 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import * as u from "react";
|
|
3
|
+
const b = {
|
|
4
4
|
xs: "h-6 w-6 text-[9px]",
|
|
5
5
|
sm: "h-8 w-8 text-[10px]",
|
|
6
6
|
md: "h-9 w-9 text-xs",
|
|
7
7
|
lg: "h-11 w-11 text-sm"
|
|
8
|
-
},
|
|
8
|
+
}, d = {
|
|
9
9
|
slate: "bg-slate-800 text-white",
|
|
10
10
|
brand: "bg-brand-500 text-white",
|
|
11
11
|
neutral: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200"
|
|
12
12
|
};
|
|
13
|
-
function
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
function h({
|
|
14
|
+
src: a,
|
|
15
|
+
name: t,
|
|
16
|
+
initials: o,
|
|
17
|
+
icon: i,
|
|
18
|
+
size: x = "sm",
|
|
19
|
+
tone: n = "slate",
|
|
20
|
+
className: e = "",
|
|
21
|
+
...r
|
|
22
|
+
}) {
|
|
23
|
+
const s = b[x];
|
|
24
|
+
if (a)
|
|
25
|
+
return /* @__PURE__ */ l(
|
|
17
26
|
"img",
|
|
18
27
|
{
|
|
19
|
-
src:
|
|
20
|
-
alt:
|
|
21
|
-
className: `${
|
|
22
|
-
...
|
|
28
|
+
src: a,
|
|
29
|
+
alt: t ?? "",
|
|
30
|
+
className: `${s} shrink-0 rounded-full border border-slate-200 object-cover dark:border-slate-800 ${e}`,
|
|
31
|
+
...r
|
|
23
32
|
}
|
|
24
33
|
);
|
|
25
|
-
if (
|
|
26
|
-
return /* @__PURE__ */
|
|
27
|
-
|
|
28
|
-
|
|
34
|
+
if (u.isValidElement(i))
|
|
35
|
+
return /* @__PURE__ */ l(
|
|
36
|
+
"div",
|
|
37
|
+
{
|
|
38
|
+
className: `${s} ${d[n]} flex shrink-0 items-center justify-center rounded-full ${e}`,
|
|
39
|
+
...r,
|
|
40
|
+
children: i
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
const c = o ?? (t ? t.split(" ").map((f) => f[0]).join("").slice(0, 2).toUpperCase() : "?");
|
|
44
|
+
return /* @__PURE__ */ l(
|
|
45
|
+
"div",
|
|
46
|
+
{
|
|
47
|
+
className: `${s} ${d[n]} flex shrink-0 items-center justify-center rounded-full font-bold ${e}`,
|
|
48
|
+
...r,
|
|
49
|
+
children: c
|
|
50
|
+
}
|
|
51
|
+
);
|
|
29
52
|
}
|
|
30
53
|
export {
|
|
31
|
-
|
|
54
|
+
h as default
|
|
32
55
|
};
|
|
33
56
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/library/ui/Avatar.
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/library/ui/Avatar.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst SIZE_MAP = {\n xs: \"h-6 w-6 text-[9px]\",\n sm: \"h-8 w-8 text-[10px]\",\n md: \"h-9 w-9 text-xs\",\n lg: \"h-11 w-11 text-sm\",\n} as const;\n\nconst TONE_MAP = {\n slate: \"bg-slate-800 text-white\",\n brand: \"bg-brand-500 text-white\",\n neutral: \"bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200\",\n} as const;\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement | HTMLImageElement> {\n src?: string;\n name?: string;\n initials?: string;\n icon?: React.ReactNode;\n size?: keyof typeof SIZE_MAP;\n tone?: keyof typeof TONE_MAP;\n}\n\nexport default function Avatar({\n src,\n name,\n initials,\n icon,\n size = \"sm\",\n tone = \"slate\",\n className = \"\",\n ...rest\n}: AvatarProps) {\n const sizeClass = SIZE_MAP[size];\n\n if (src) {\n return (\n <img\n src={src}\n alt={name ?? \"\"}\n className={`${sizeClass} shrink-0 rounded-full border border-slate-200 object-cover dark:border-slate-800 ${className}`}\n {...(rest as React.ImgHTMLAttributes<HTMLImageElement>)}\n />\n );\n }\n\n if (React.isValidElement(icon)) {\n return (\n <div\n className={`${sizeClass} ${TONE_MAP[tone]} flex shrink-0 items-center justify-center rounded-full ${className}`}\n {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n >\n {icon}\n </div>\n );\n }\n\n const label = initials ?? (name ? name.split(\" \").map(w => w[0]).join(\"\").slice(0, 2).toUpperCase() : \"?\");\n return (\n <div\n className={`${sizeClass} ${TONE_MAP[tone]} flex shrink-0 items-center justify-center rounded-full font-bold ${className}`}\n {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n >\n {label}\n </div>\n );\n}\n"],"names":["SIZE_MAP","TONE_MAP","Avatar","src","name","initials","icon","size","tone","className","rest","sizeClass","jsx","React","label","w"],"mappings":";;AAEA,MAAMA,IAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAW;AAAA,EACf,OAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAWA,SAAwBC,EAAO;AAAA,EAC7B,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAYX,EAASO,CAAI;AAE/B,MAAIJ;AACF,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAT;AAAA,QACA,KAAKC,KAAQ;AAAA,QACb,WAAW,GAAGO,CAAS,qFAAqFF,CAAS;AAAA,QACpH,GAAIC;AAAA,MAAA;AAAA,IAAA;AAKX,MAAIG,EAAM,eAAeP,CAAI;AAC3B,WACE,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAGD,CAAS,IAAIV,EAASO,CAAI,CAAC,2DAA2DC,CAAS;AAAA,QAC5G,GAAIC;AAAA,QAEJ,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAKP,QAAMQ,IAAQT,MAAaD,IAAOA,EAAK,MAAM,GAAG,EAAE,IAAI,CAAAW,MAAKA,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,CAAC,EAAE,YAAA,IAAgB;AACtG,SACE,gBAAAH;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGD,CAAS,IAAIV,EAASO,CAAI,CAAC,qEAAqEC,CAAS;AAAA,MACtH,GAAIC;AAAA,MAEJ,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,37 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
export function Card({ className, children, ...rest }:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
18
|
-
export
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
export function
|
|
24
|
-
[x: string]: any;
|
|
25
|
-
className?: string | undefined;
|
|
26
|
-
children: any;
|
|
27
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
28
|
-
export function CardContent({ className, children, ...rest }: {
|
|
29
|
-
[x: string]: any;
|
|
30
|
-
className?: string | undefined;
|
|
31
|
-
children: any;
|
|
32
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
33
|
-
export function CardFooter({ className, children, ...rest }: {
|
|
34
|
-
[x: string]: any;
|
|
35
|
-
className?: string | undefined;
|
|
36
|
-
children: any;
|
|
37
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export interface UICardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
padding?: string;
|
|
4
|
+
}
|
|
5
|
+
export default function UICard({ children, padding, className, ...rest }: UICardProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
7
|
+
}
|
|
8
|
+
export declare function Card({ className, children, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
10
|
+
}
|
|
11
|
+
export declare function CardHeader({ className, children, ...rest }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
|
13
|
+
}
|
|
14
|
+
export declare function CardTitle({ className, children, ...rest }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
16
|
+
}
|
|
17
|
+
export declare function CardDescription({ className, children, ...rest }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
}
|
|
20
|
+
export declare function CardContent({ className, children, ...rest }: CardContentProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
22
|
+
}
|
|
23
|
+
export declare function CardFooter({ className, children, ...rest }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,10 +1,37 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare const SIZES: {
|
|
3
|
+
readonly sm: {
|
|
4
|
+
readonly icon: "h-8 w-8";
|
|
5
|
+
readonly heading: "text-sm";
|
|
6
|
+
readonly body: "text-xs";
|
|
7
|
+
readonly gap: "gap-2";
|
|
8
|
+
readonly pad: "py-6";
|
|
9
|
+
};
|
|
10
|
+
readonly md: {
|
|
11
|
+
readonly icon: "h-10 w-10";
|
|
12
|
+
readonly heading: "text-base";
|
|
13
|
+
readonly body: "text-sm";
|
|
14
|
+
readonly gap: "gap-3";
|
|
15
|
+
readonly pad: "py-10";
|
|
16
|
+
};
|
|
17
|
+
readonly lg: {
|
|
18
|
+
readonly icon: "h-14 w-14";
|
|
19
|
+
readonly heading: "text-lg";
|
|
20
|
+
readonly body: "text-sm";
|
|
21
|
+
readonly gap: "gap-4";
|
|
22
|
+
readonly pad: "py-16";
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
export interface EmptyStateProps {
|
|
26
|
+
icon?: React.ReactNode;
|
|
27
|
+
heading?: string;
|
|
28
|
+
body?: string;
|
|
29
|
+
action?: React.ReactNode;
|
|
30
|
+
size?: keyof typeof SIZES;
|
|
31
|
+
className?: string;
|
|
32
|
+
}
|
|
1
33
|
/**
|
|
2
34
|
* Empty state placeholder — shows when a list, table, or section has no content.
|
|
3
|
-
*
|
|
4
|
-
* @param {ReactNode} icon Optional icon element
|
|
5
|
-
* @param {string} heading Primary message
|
|
6
|
-
* @param {string} body Secondary description
|
|
7
|
-
* @param {ReactNode} action Optional CTA (button, link, etc.)
|
|
8
|
-
* @param {"sm"|"md"|"lg"} size Visual density
|
|
9
35
|
*/
|
|
10
|
-
export default function EmptyState({ icon, heading, body, action, size, className, }:
|
|
36
|
+
export default function EmptyState({ icon, heading, body, action, size, className, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export {};
|
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
import { jsxs as x, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
const i = {
|
|
2
|
+
const c = {
|
|
4
3
|
sm: { icon: "h-8 w-8", heading: "text-sm", body: "text-xs", gap: "gap-2", pad: "py-6" },
|
|
5
4
|
md: { icon: "h-10 w-10", heading: "text-base", body: "text-sm", gap: "gap-3", pad: "py-10" },
|
|
6
5
|
lg: { icon: "h-14 w-14", heading: "text-lg", body: "text-sm", gap: "gap-4", pad: "py-16" }
|
|
7
6
|
};
|
|
8
|
-
function
|
|
7
|
+
function p({
|
|
9
8
|
icon: a,
|
|
10
9
|
heading: l = "Nothing here yet",
|
|
11
10
|
body: s,
|
|
12
11
|
action: d,
|
|
13
|
-
size:
|
|
12
|
+
size: i = "md",
|
|
14
13
|
className: n = ""
|
|
15
14
|
}) {
|
|
16
|
-
const e = i
|
|
15
|
+
const e = c[i];
|
|
17
16
|
return /* @__PURE__ */ x("div", { className: `flex flex-col items-center justify-center text-center ${e.pad} ${e.gap} ${n}`, children: [
|
|
18
17
|
a && /* @__PURE__ */ t("div", { className: `${e.icon} text-slate-300 dark:text-slate-600`, children: a }),
|
|
19
18
|
/* @__PURE__ */ t("div", { className: `${e.heading} font-semibold text-slate-700 dark:text-slate-200`, children: l }),
|
|
@@ -22,6 +21,6 @@ function r({
|
|
|
22
21
|
] });
|
|
23
22
|
}
|
|
24
23
|
export {
|
|
25
|
-
|
|
24
|
+
p as default
|
|
26
25
|
};
|
|
27
26
|
//# sourceMappingURL=EmptyState.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/library/ui/EmptyState.
|
|
1
|
+
{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/library/ui/EmptyState.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst SIZES = {\n sm: { icon: \"h-8 w-8\", heading: \"text-sm\", body: \"text-xs\", gap: \"gap-2\", pad: \"py-6\" },\n md: { icon: \"h-10 w-10\", heading: \"text-base\", body: \"text-sm\", gap: \"gap-3\", pad: \"py-10\" },\n lg: { icon: \"h-14 w-14\", heading: \"text-lg\", body: \"text-sm\", gap: \"gap-4\", pad: \"py-16\" },\n} as const;\n\nexport interface EmptyStateProps {\n icon?: React.ReactNode;\n heading?: string;\n body?: string;\n action?: React.ReactNode;\n size?: keyof typeof SIZES;\n className?: string;\n}\n\n/**\n * Empty state placeholder — shows when a list, table, or section has no content.\n */\nexport default function EmptyState({\n icon,\n heading = \"Nothing here yet\",\n body,\n action,\n size = \"md\",\n className = \"\",\n}: EmptyStateProps) {\n const s = SIZES[size];\n\n return (\n <div className={`flex flex-col items-center justify-center text-center ${s.pad} ${s.gap} ${className}`}>\n {icon && (\n <div className={`${s.icon} text-slate-300 dark:text-slate-600`}>\n {icon}\n </div>\n )}\n <div className={`${s.heading} font-semibold text-slate-700 dark:text-slate-200`}>\n {heading}\n </div>\n {body && (\n <div className={`${s.body} max-w-sm text-slate-500 dark:text-slate-400`}>\n {body}\n </div>\n )}\n {action && <div className=\"mt-1\">{action}</div>}\n </div>\n );\n}\n"],"names":["SIZES","EmptyState","icon","heading","body","action","size","className","s","jsxs","jsx"],"mappings":";AAEA,MAAMA,IAAQ;AAAA,EACZ,IAAI,EAAE,MAAM,WAAW,SAAS,WAAW,MAAM,WAAW,KAAK,SAAS,KAAK,OAAA;AAAA,EAC/E,IAAI,EAAE,MAAM,aAAa,SAAS,aAAa,MAAM,WAAW,KAAK,SAAS,KAAK,QAAA;AAAA,EACnF,IAAI,EAAE,MAAM,aAAa,SAAS,WAAW,MAAM,WAAW,KAAK,SAAS,KAAK,QAAA;AACnF;AAcA,SAAwBC,EAAW;AAAA,EACjC,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AACd,GAAoB;AAClB,QAAMC,IAAIR,EAAMM,CAAI;AAEpB,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAW,yDAAyDD,EAAE,GAAG,IAAIA,EAAE,GAAG,IAAID,CAAS,IACjG,UAAA;AAAA,IAAAL,uBACE,OAAA,EAAI,WAAW,GAAGM,EAAE,IAAI,uCACtB,UAAAN,EAAA,CACH;AAAA,sBAED,OAAA,EAAI,WAAW,GAAGM,EAAE,OAAO,qDACzB,UAAAL,GACH;AAAA,IACCC,uBACE,OAAA,EAAI,WAAW,GAAGI,EAAE,IAAI,gDACtB,UAAAJ,EAAA,CACH;AAAA,IAEDC,KAAU,gBAAAK,EAAC,OAAA,EAAI,WAAU,QAAQ,UAAAL,EAAA,CAAO;AAAA,EAAA,GAC3C;AAEJ;"}
|
|
@@ -1,8 +1,24 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare const SIZE_CLASSES: {
|
|
3
|
+
readonly xs: "h-3 w-3";
|
|
4
|
+
readonly sm: "h-4 w-4";
|
|
5
|
+
readonly md: "h-5 w-5";
|
|
6
|
+
readonly lg: "h-6 w-6";
|
|
7
|
+
readonly xl: "h-8 w-8";
|
|
8
|
+
};
|
|
9
|
+
declare const TONE_CLASSES: {
|
|
10
|
+
readonly brand: "text-brand-500";
|
|
11
|
+
readonly white: "text-white";
|
|
12
|
+
readonly muted: "text-slate-400 dark:text-slate-500";
|
|
13
|
+
readonly current: "text-current";
|
|
14
|
+
};
|
|
15
|
+
export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
|
|
16
|
+
size?: keyof typeof SIZE_CLASSES;
|
|
17
|
+
tone?: keyof typeof TONE_CLASSES;
|
|
18
|
+
label?: string;
|
|
19
|
+
}
|
|
1
20
|
/**
|
|
2
21
|
* Animated spinner.
|
|
3
|
-
*
|
|
4
|
-
* @param {"xs"|"sm"|"md"|"lg"|"xl"} size
|
|
5
|
-
* @param {"brand"|"white"|"muted"|"current"} tone
|
|
6
|
-
* @param {string} label — screen-reader label
|
|
7
22
|
*/
|
|
8
|
-
export default function Spinner({ size, tone, label, className, ...rest }:
|
|
23
|
+
export default function Spinner({ size, tone, label, className, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export {};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export interface UIInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
3
|
+
}
|
|
4
|
+
export default function UIInput({ className, ...rest }: UIInputProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,22 +1,21 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
function l({ style: e = void 0, className: t = "", ...r }) {
|
|
2
|
+
function a({ className: e = "", ...t }) {
|
|
4
3
|
return /* @__PURE__ */ o(
|
|
5
4
|
"input",
|
|
6
5
|
{
|
|
7
|
-
style: e,
|
|
8
6
|
className: [
|
|
9
7
|
"h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm",
|
|
10
8
|
"placeholder:text-slate-400",
|
|
11
9
|
"focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950",
|
|
12
10
|
"dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500",
|
|
13
|
-
|
|
11
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
12
|
+
e
|
|
14
13
|
].filter(Boolean).join(" "),
|
|
15
|
-
...
|
|
14
|
+
...t
|
|
16
15
|
}
|
|
17
16
|
);
|
|
18
17
|
}
|
|
19
18
|
export {
|
|
20
|
-
|
|
19
|
+
a as default
|
|
21
20
|
};
|
|
22
21
|
//# sourceMappingURL=UIInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UIInput.js","sources":["../../../../src/components/library/ui/UIInput.
|
|
1
|
+
{"version":3,"file":"UIInput.js","sources":["../../../../src/components/library/ui/UIInput.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport interface UIInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport default function UIInput({ className = \"\", ...rest }: UIInputProps) {\n return (\n <input\n className={[\n \"h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm\",\n \"placeholder:text-slate-400\",\n \"focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950\",\n \"dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n />\n );\n}\n"],"names":["UIInput","className","rest","jsx"],"mappings":";AAIA,SAAwBA,EAAQ,EAAE,WAAAC,IAAY,IAAI,GAAGC,KAAsB;AACzE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAF;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -1,21 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
export
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare const VARIANT_CLASSES: {
|
|
3
|
+
readonly default: "bg-slate-50 border-slate-200 text-slate-900 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-50";
|
|
4
|
+
readonly info: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-50";
|
|
5
|
+
readonly success: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950 dark:border-green-800 dark:text-green-50";
|
|
6
|
+
readonly warning: "bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-50";
|
|
7
|
+
readonly error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50";
|
|
8
|
+
readonly destructive: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50";
|
|
9
|
+
};
|
|
10
|
+
export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
11
|
+
variant?: keyof typeof VARIANT_CLASSES;
|
|
12
|
+
}
|
|
13
|
+
export default function Alert({ variant, className, children, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
|
15
|
+
}
|
|
16
|
+
export declare function AlertTitle({ className, children, ...rest }: AlertTitleProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
18
|
+
}
|
|
19
|
+
export declare function AlertDescription({ className, children, ...rest }: AlertDescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export interface AlertActionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
21
|
+
}
|
|
22
|
+
export declare function AlertAction({ className, children, ...rest }: AlertActionProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export { Alert };
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
const l = {
|
|
2
|
+
const a = {
|
|
4
3
|
default: "bg-slate-50 border-slate-200 text-slate-900 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-50",
|
|
5
4
|
info: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-50",
|
|
6
5
|
success: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950 dark:border-green-800 dark:text-green-50",
|
|
@@ -8,23 +7,23 @@ const l = {
|
|
|
8
7
|
error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50",
|
|
9
8
|
destructive: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50"
|
|
10
9
|
};
|
|
11
|
-
function
|
|
12
|
-
const
|
|
10
|
+
function b({ variant: e = "default", className: r = "", children: t, ...l }) {
|
|
11
|
+
const o = a[e];
|
|
13
12
|
return /* @__PURE__ */ d(
|
|
14
13
|
"div",
|
|
15
14
|
{
|
|
16
15
|
role: "alert",
|
|
17
16
|
className: [
|
|
18
17
|
"rounded-lg border p-4",
|
|
19
|
-
|
|
18
|
+
o,
|
|
20
19
|
r
|
|
21
20
|
].filter(Boolean).join(" "),
|
|
22
|
-
...
|
|
21
|
+
...l,
|
|
23
22
|
children: t
|
|
24
23
|
}
|
|
25
24
|
);
|
|
26
25
|
}
|
|
27
|
-
function
|
|
26
|
+
function i({ className: e = "", children: r, ...t }) {
|
|
28
27
|
return /* @__PURE__ */ d(
|
|
29
28
|
"h5",
|
|
30
29
|
{
|
|
@@ -37,7 +36,7 @@ function s({ className: e = "", children: r, ...t }) {
|
|
|
37
36
|
}
|
|
38
37
|
);
|
|
39
38
|
}
|
|
40
|
-
function
|
|
39
|
+
function s({ className: e = "", children: r, ...t }) {
|
|
41
40
|
return /* @__PURE__ */ d(
|
|
42
41
|
"div",
|
|
43
42
|
{
|
|
@@ -50,7 +49,7 @@ function g({ className: e = "", children: r, ...t }) {
|
|
|
50
49
|
}
|
|
51
50
|
);
|
|
52
51
|
}
|
|
53
|
-
function
|
|
52
|
+
function g({ className: e = "", children: r, ...t }) {
|
|
54
53
|
return /* @__PURE__ */ d(
|
|
55
54
|
"div",
|
|
56
55
|
{
|
|
@@ -64,10 +63,10 @@ function u({ className: e = "", children: r, ...t }) {
|
|
|
64
63
|
);
|
|
65
64
|
}
|
|
66
65
|
export {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
66
|
+
b as Alert,
|
|
67
|
+
g as AlertAction,
|
|
68
|
+
s as AlertDescription,
|
|
69
|
+
i as AlertTitle,
|
|
70
|
+
b as default
|
|
72
71
|
};
|
|
73
72
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/library/ui/Alert.
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/library/ui/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst VARIANT_CLASSES = {\n default: \"bg-slate-50 border-slate-200 text-slate-900 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-50\",\n info: \"bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-50\",\n success: \"bg-green-50 border-green-200 text-green-900 dark:bg-green-950 dark:border-green-800 dark:text-green-50\",\n warning: \"bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-50\",\n error: \"bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50\",\n destructive: \"bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50\"\n} as const;\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: keyof typeof VARIANT_CLASSES;\n}\n\nexport default function Alert({ variant = \"default\", className = \"\", children, ...rest }: AlertProps) {\n const variantClasses = VARIANT_CLASSES[variant];\n\n return (\n <div\n role=\"alert\"\n className={[\n \"rounded-lg border p-4\",\n variantClasses,\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nexport interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport function AlertTitle({ className = \"\", children, ...rest }: AlertTitleProps) {\n return (\n <h5\n className={[\n \"mb-1 font-medium leading-none tracking-tight\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </h5>\n );\n}\n\nexport interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function AlertDescription({ className = \"\", children, ...rest }: AlertDescriptionProps) {\n return (\n <div\n className={[\n \"text-sm opacity-90\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nexport interface AlertActionProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function AlertAction({ className = \"\", children, ...rest }: AlertActionProps) {\n return (\n <div\n className={[\n \"mt-3\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nexport { Alert };\n"],"names":["VARIANT_CLASSES","Alert","variant","className","children","rest","variantClasses","jsx","AlertTitle","AlertDescription","AlertAction"],"mappings":";AAEA,MAAMA,IAAkB;AAAA,EACtB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,aAAa;AACf;AAMA,SAAwBC,EAAM,EAAE,SAAAC,IAAU,WAAW,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAAoB;AACpG,QAAMC,IAAiBN,EAAgBE,CAAO;AAE9C,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACAD;AAAA,QACAH;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAIO,SAASI,EAAW,EAAE,WAAAL,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAAyB;AACjF,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAIO,SAASK,EAAiB,EAAE,WAAAN,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAA+B;AAC7F,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAIO,SAASM,EAAY,EAAE,WAAAP,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAA0B;AACnF,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|