@moltenagentic/human-elements 0.1.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/assets/molten-icon-lava.svg +20 -0
- package/assets/molten-icon.svg +1 -0
- package/dist/fonts/index.d.ts +41 -0
- package/dist/fonts/index.js +19 -0
- package/dist/fonts/index.js.map +1 -0
- package/dist/index.d.ts +149 -0
- package/dist/index.js +1000 -0
- package/dist/index.js.map +1 -0
- package/dist/styles/index.css +2 -0
- package/dist/styles/tokens.css +65 -0
- package/dist/styles/utilities.css +558 -0
- package/package.json +68 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><g data-name="Layer 1"><path d="M695.3 911.46H368.89l-163.21 282.68 163.21 282.68H695.3l163.21-282.68zm-84.39 419.19H453.28l-78.81-136.51 78.81-136.51 72.97-145.97 84.65 145.97 78.81 136.51-78.81 136.51Z" data-name="Layer 3"/><path d="m780.09 1057.64-11.29.04h-158L447.59 775 610.8 492.32h326.41L1100.42 775l-84.24 145.9L932 775l-.54.31.18-.31-78.81-136.51H695.2L616.39 775l78.81 136.51h.14l84.76 146.13ZM1664.01 911.46h-157.99l152.41 282.68-78.82 136.51h-157.62l-78.82-136.51 78.82-136.51 84.03-146.17h-168.43l-163.2 282.68 163.2 282.68h326.42l163.2-282.68z"/><path d="M1421.61 492.32H1095.2L931.99 775l163.21 282.68h326.41L1584.82 775zm-84.4 419.19-78.54 136.82-79.09-136.82L1100.77 775l78.81-136.51h157.63L1416.02 775z"/></g><path d="M1095.09 1330.65H937.47l-78.82-136.51 78.82-136.51 73.3-145.96 84.32 145.96 77.68 134.54.07-.13 78.4 133.17 31.23-50.26 6.77 11.77 53.45-92.58-163.21-282.68H853.07l-163.2 282.68 163.2 282.68h315.82l84.42-145.97" data-name="Layer 4"/></svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Roobert font source descriptors.
|
|
3
|
+
*
|
|
4
|
+
* Usage with next/font/local in consumer apps:
|
|
5
|
+
*
|
|
6
|
+
* import localFont from 'next/font/local';
|
|
7
|
+
* import { ROOBERT_WEIGHTS } from '@moltenagentic/human-elements/fonts';
|
|
8
|
+
*
|
|
9
|
+
* const roobert = localFont({
|
|
10
|
+
* src: ROOBERT_WEIGHTS.map(w => ({
|
|
11
|
+
* path: `../../public/fonts/Roobert-${w.name}.woff2`,
|
|
12
|
+
* weight: w.weight,
|
|
13
|
+
* style: 'normal',
|
|
14
|
+
* })),
|
|
15
|
+
* });
|
|
16
|
+
*
|
|
17
|
+
* Font files (Roobert-*.woff2) must be placed in each consumer's public/fonts/.
|
|
18
|
+
*/
|
|
19
|
+
declare const ROOBERT_WEIGHTS: readonly [{
|
|
20
|
+
readonly name: "Light";
|
|
21
|
+
readonly weight: "300";
|
|
22
|
+
}, {
|
|
23
|
+
readonly name: "Regular";
|
|
24
|
+
readonly weight: "400";
|
|
25
|
+
}, {
|
|
26
|
+
readonly name: "Medium";
|
|
27
|
+
readonly weight: "500";
|
|
28
|
+
}, {
|
|
29
|
+
readonly name: "SemiBold";
|
|
30
|
+
readonly weight: "600";
|
|
31
|
+
}, {
|
|
32
|
+
readonly name: "Bold";
|
|
33
|
+
readonly weight: "700";
|
|
34
|
+
}, {
|
|
35
|
+
readonly name: "Heavy";
|
|
36
|
+
readonly weight: "800";
|
|
37
|
+
}];
|
|
38
|
+
type RoobertWeight = (typeof ROOBERT_WEIGHTS)[number];
|
|
39
|
+
declare const ROOBERT_FONT_FILES: string[];
|
|
40
|
+
|
|
41
|
+
export { ROOBERT_FONT_FILES, ROOBERT_WEIGHTS, type RoobertWeight };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
// src/fonts/index.ts
|
|
4
|
+
var ROOBERT_WEIGHTS = [
|
|
5
|
+
{ name: "Light", weight: "300" },
|
|
6
|
+
{ name: "Regular", weight: "400" },
|
|
7
|
+
{ name: "Medium", weight: "500" },
|
|
8
|
+
{ name: "SemiBold", weight: "600" },
|
|
9
|
+
{ name: "Bold", weight: "700" },
|
|
10
|
+
{ name: "Heavy", weight: "800" }
|
|
11
|
+
];
|
|
12
|
+
var ROOBERT_FONT_FILES = ROOBERT_WEIGHTS.map(
|
|
13
|
+
(w) => `Roobert-${w.name}.woff2`
|
|
14
|
+
);
|
|
15
|
+
export {
|
|
16
|
+
ROOBERT_FONT_FILES,
|
|
17
|
+
ROOBERT_WEIGHTS
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/fonts/index.ts"],"sourcesContent":["/**\n * Roobert font source descriptors.\n *\n * Usage with next/font/local in consumer apps:\n *\n * import localFont from 'next/font/local';\n * import { ROOBERT_WEIGHTS } from '@moltenagentic/human-elements/fonts';\n *\n * const roobert = localFont({\n * src: ROOBERT_WEIGHTS.map(w => ({\n * path: `../../public/fonts/Roobert-${w.name}.woff2`,\n * weight: w.weight,\n * style: 'normal',\n * })),\n * });\n *\n * Font files (Roobert-*.woff2) must be placed in each consumer's public/fonts/.\n */\n\nexport const ROOBERT_WEIGHTS = [\n { name: 'Light', weight: '300' },\n { name: 'Regular', weight: '400' },\n { name: 'Medium', weight: '500' },\n { name: 'SemiBold', weight: '600' },\n { name: 'Bold', weight: '700' },\n { name: 'Heavy', weight: '800' },\n] as const;\n\nexport type RoobertWeight = (typeof ROOBERT_WEIGHTS)[number];\n\nexport const ROOBERT_FONT_FILES = ROOBERT_WEIGHTS.map(\n (w) => `Roobert-${w.name}.woff2`,\n);\n"],"mappings":";;;AAmBO,IAAM,kBAAkB;AAAA,EAC7B,EAAE,MAAM,SAAS,QAAQ,MAAM;AAAA,EAC/B,EAAE,MAAM,WAAW,QAAQ,MAAM;AAAA,EACjC,EAAE,MAAM,UAAU,QAAQ,MAAM;AAAA,EAChC,EAAE,MAAM,YAAY,QAAQ,MAAM;AAAA,EAClC,EAAE,MAAM,QAAQ,QAAQ,MAAM;AAAA,EAC9B,EAAE,MAAM,SAAS,QAAQ,MAAM;AACjC;AAIO,IAAM,qBAAqB,gBAAgB;AAAA,EAChD,CAAC,MAAM,WAAW,EAAE,IAAI;AAC1B;","names":[]}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ButtonHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
type TechGridTone = 'molten' | 'dark';
|
|
5
|
+
interface TechGridProps {
|
|
6
|
+
className?: string;
|
|
7
|
+
zIndex?: number;
|
|
8
|
+
tone?: TechGridTone;
|
|
9
|
+
/** Unique id suffix — required when rendering multiple grids on the same page */
|
|
10
|
+
id?: string;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
}
|
|
13
|
+
declare function TechGrid({ className, zIndex, tone, id, style, }: TechGridProps): react_jsx_runtime.JSX.Element;
|
|
14
|
+
|
|
15
|
+
interface GridMeshProps {
|
|
16
|
+
className?: string;
|
|
17
|
+
opacity?: number;
|
|
18
|
+
gridSize?: number;
|
|
19
|
+
strokeColor?: string;
|
|
20
|
+
}
|
|
21
|
+
declare function GridMesh({ className, opacity, gridSize, strokeColor, }: GridMeshProps): react_jsx_runtime.JSX.Element;
|
|
22
|
+
|
|
23
|
+
interface LavaSceneProps {
|
|
24
|
+
centered?: boolean;
|
|
25
|
+
}
|
|
26
|
+
declare function LavaScene({ centered }: LavaSceneProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
type EmberTone = 'molten' | 'dark';
|
|
29
|
+
interface EmberFieldProps {
|
|
30
|
+
tone?: EmberTone;
|
|
31
|
+
count?: number;
|
|
32
|
+
className?: string;
|
|
33
|
+
style?: React.CSSProperties;
|
|
34
|
+
}
|
|
35
|
+
declare function EmberField({ tone, count, className, style, }: EmberFieldProps): react_jsx_runtime.JSX.Element;
|
|
36
|
+
|
|
37
|
+
interface VignetteProps {
|
|
38
|
+
className?: string;
|
|
39
|
+
zIndex?: number;
|
|
40
|
+
}
|
|
41
|
+
declare function Vignette({ className, zIndex }: VignetteProps): react_jsx_runtime.JSX.Element;
|
|
42
|
+
|
|
43
|
+
interface SphereGlowProps {
|
|
44
|
+
className?: string;
|
|
45
|
+
zIndex?: number;
|
|
46
|
+
}
|
|
47
|
+
declare function SphereGlow({ className, zIndex }: SphereGlowProps): react_jsx_runtime.JSX.Element;
|
|
48
|
+
|
|
49
|
+
interface MoltenButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
|
|
50
|
+
children: ReactNode;
|
|
51
|
+
href?: string;
|
|
52
|
+
variant?: 'molten' | 'outline' | 'ghost';
|
|
53
|
+
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
54
|
+
fullWidth?: boolean;
|
|
55
|
+
}
|
|
56
|
+
declare function MoltenButton({ children, href, variant, size, fullWidth, disabled, className, ...props }: MoltenButtonProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
|
|
59
|
+
children: ReactNode;
|
|
60
|
+
variant?: 'default' | 'subtle' | 'minimal';
|
|
61
|
+
glow?: boolean;
|
|
62
|
+
wave?: boolean;
|
|
63
|
+
cornerFrame?: boolean;
|
|
64
|
+
}
|
|
65
|
+
declare function GlassCard({ children, variant, glow, wave, cornerFrame, className, ...props }: GlassCardProps): react_jsx_runtime.JSX.Element;
|
|
66
|
+
|
|
67
|
+
interface MoltenTextProps extends HTMLAttributes<HTMLSpanElement> {
|
|
68
|
+
children: ReactNode;
|
|
69
|
+
as?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'p';
|
|
70
|
+
animated?: boolean;
|
|
71
|
+
}
|
|
72
|
+
declare function MoltenText({ children, as: Tag, animated, className, ...props }: MoltenTextProps): react_jsx_runtime.JSX.Element;
|
|
73
|
+
|
|
74
|
+
interface PageProps {
|
|
75
|
+
children: ReactNode;
|
|
76
|
+
ptMobile?: number;
|
|
77
|
+
ptDesktop?: number;
|
|
78
|
+
pb?: number;
|
|
79
|
+
px?: number;
|
|
80
|
+
maxWidth?: string;
|
|
81
|
+
centered?: boolean;
|
|
82
|
+
showGrid?: boolean;
|
|
83
|
+
nav?: ReactNode;
|
|
84
|
+
overlay?: ReactNode;
|
|
85
|
+
}
|
|
86
|
+
declare function Page({ children, ptMobile, ptDesktop, pb, px, maxWidth, centered, showGrid, nav, overlay, }: PageProps): react_jsx_runtime.JSX.Element;
|
|
87
|
+
|
|
88
|
+
interface NavLink {
|
|
89
|
+
label: string;
|
|
90
|
+
href: string;
|
|
91
|
+
external?: boolean;
|
|
92
|
+
}
|
|
93
|
+
interface NavLinkGroup {
|
|
94
|
+
title: string;
|
|
95
|
+
links: NavLink[];
|
|
96
|
+
}
|
|
97
|
+
interface NavAction {
|
|
98
|
+
icon: ReactNode;
|
|
99
|
+
onClick?: () => void;
|
|
100
|
+
href?: string;
|
|
101
|
+
label?: string;
|
|
102
|
+
}
|
|
103
|
+
interface ProductNavProps {
|
|
104
|
+
logo?: ReactNode;
|
|
105
|
+
logoHref?: string;
|
|
106
|
+
menuGroups?: NavLinkGroup[];
|
|
107
|
+
leftExtra?: ReactNode;
|
|
108
|
+
leftPanel?: ReactNode | ((onClose: () => void) => ReactNode);
|
|
109
|
+
leftPanelOpen?: boolean;
|
|
110
|
+
onLeftPanelChange?: (open: boolean) => void;
|
|
111
|
+
rightAction?: NavAction;
|
|
112
|
+
rightExtra?: ReactNode;
|
|
113
|
+
xUrl?: string;
|
|
114
|
+
communityLabel?: string;
|
|
115
|
+
className?: string;
|
|
116
|
+
}
|
|
117
|
+
declare function ProductNav({ logo, logoHref, menuGroups, leftExtra, leftPanel, leftPanelOpen, onLeftPanelChange, rightAction, rightExtra, xUrl, communityLabel, className, }: ProductNavProps): react_jsx_runtime.JSX.Element;
|
|
118
|
+
|
|
119
|
+
interface HalfHeroProps {
|
|
120
|
+
children: ReactNode;
|
|
121
|
+
nav?: ReactNode;
|
|
122
|
+
className?: string;
|
|
123
|
+
height?: string;
|
|
124
|
+
fieldVariant?: 'default' | 'intense' | 'subtle' | 'vignette';
|
|
125
|
+
showEmbers?: boolean;
|
|
126
|
+
emberCount?: number;
|
|
127
|
+
showGrid?: boolean;
|
|
128
|
+
}
|
|
129
|
+
declare function HalfHero({ children, nav, className, height, fieldVariant, showEmbers, emberCount, showGrid, }: HalfHeroProps): react_jsx_runtime.JSX.Element;
|
|
130
|
+
|
|
131
|
+
interface ProductShellProps {
|
|
132
|
+
children: ReactNode;
|
|
133
|
+
className?: string;
|
|
134
|
+
}
|
|
135
|
+
declare function ProductShell({ children, className, }: ProductShellProps): react_jsx_runtime.JSX.Element;
|
|
136
|
+
|
|
137
|
+
type MoltenTheme = 'day' | 'night';
|
|
138
|
+
interface MoltenThemeContextValue {
|
|
139
|
+
theme: MoltenTheme;
|
|
140
|
+
setTheme: (theme: MoltenTheme) => void;
|
|
141
|
+
toggle: () => void;
|
|
142
|
+
}
|
|
143
|
+
declare function MoltenThemeProvider({ children, defaultTheme }: {
|
|
144
|
+
children: ReactNode;
|
|
145
|
+
defaultTheme?: MoltenTheme;
|
|
146
|
+
}): react_jsx_runtime.JSX.Element;
|
|
147
|
+
declare function useMoltenTheme(): MoltenThemeContextValue;
|
|
148
|
+
|
|
149
|
+
export { EmberField, type EmberFieldProps, type EmberTone, GlassCard, type GlassCardProps, GridMesh, type GridMeshProps, HalfHero, type HalfHeroProps, LavaScene, type LavaSceneProps, MoltenButton, type MoltenButtonProps, MoltenText, type MoltenTextProps, type MoltenTheme, MoltenThemeProvider, type NavAction, type NavLink, type NavLinkGroup, Page, type PageProps, ProductNav, type ProductNavProps, ProductShell, type ProductShellProps, SphereGlow, type SphereGlowProps, TechGrid, type TechGridProps, type TechGridTone, Vignette, type VignetteProps, useMoltenTheme };
|