@themodcraft/core-ui 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button/Button.d.ts +2 -0
- package/dist/components/button/Button.js +21 -0
- package/dist/components/button/Button.types.d.ts +8 -0
- package/dist/components/button/Button.types.js +1 -0
- package/dist/components/button/index.d.ts +2 -0
- package/dist/components/button/index.js +1 -0
- package/dist/config/component-config.d.ts +13 -0
- package/dist/config/component-config.js +6 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -0
- package/dist/path-map/asset-path-map.d.ts +9 -0
- package/dist/path-map/asset-path-map.js +28 -0
- package/dist/path-map/index.d.ts +1 -0
- package/dist/path-map/index.js +1 -0
- package/dist/styles/index.css +19 -0
- package/dist/tokens/default-theme.json +28 -0
- package/dist/tokens/index.d.ts +2 -0
- package/dist/tokens/index.js +2 -0
- package/package.json +27 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
const baseClasses = "inline-flex items-center justify-center rounded-md border font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50";
|
|
3
|
+
const sizeClasses = {
|
|
4
|
+
sm: "h-8 px-3 text-sm",
|
|
5
|
+
md: "h-10 px-4 text-sm",
|
|
6
|
+
};
|
|
7
|
+
const toneClasses = {
|
|
8
|
+
neutral: "border-zinc-300 bg-white text-zinc-950 hover:bg-zinc-100 focus-visible:outline-zinc-500",
|
|
9
|
+
accent: "border-blue-700 bg-blue-700 text-white hover:bg-blue-800 focus-visible:outline-amber-400",
|
|
10
|
+
danger: "border-red-700 bg-red-700 text-white hover:bg-red-800 focus-visible:outline-amber-400",
|
|
11
|
+
};
|
|
12
|
+
export function Button({ className, size = "md", tone = "neutral", type = "button", ...props }) {
|
|
13
|
+
return (_jsx("button", { className: [
|
|
14
|
+
baseClasses,
|
|
15
|
+
sizeClasses[size],
|
|
16
|
+
toneClasses[tone],
|
|
17
|
+
className,
|
|
18
|
+
]
|
|
19
|
+
.filter(Boolean)
|
|
20
|
+
.join(" "), type: type, ...props }));
|
|
21
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode } from "react";
|
|
2
|
+
export type ButtonSize = "sm" | "md";
|
|
3
|
+
export type ButtonTone = "neutral" | "accent" | "danger";
|
|
4
|
+
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
size?: ButtonSize;
|
|
7
|
+
tone?: ButtonTone;
|
|
8
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Button } from "./Button";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export type ComponentConfigVersion = 1;
|
|
2
|
+
export interface ComponentConfig<TType extends string, TProps extends object> {
|
|
3
|
+
metadata?: {
|
|
4
|
+
description?: string;
|
|
5
|
+
name?: string;
|
|
6
|
+
tags?: string[];
|
|
7
|
+
};
|
|
8
|
+
props: TProps;
|
|
9
|
+
type: TType;
|
|
10
|
+
version: ComponentConfigVersion;
|
|
11
|
+
}
|
|
12
|
+
export declare function defineComponentConfig<const TType extends string, const TProps extends object>(config: ComponentConfig<TType, TProps>): ComponentConfig<TType, TProps>;
|
|
13
|
+
export declare function readConfigProps<TProps extends object>(config: ComponentConfig<string, TProps>): TProps;
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type AssetPathAliases = Record<string, string>;
|
|
2
|
+
export interface ResolveAssetPathOptions {
|
|
3
|
+
aliases?: AssetPathAliases;
|
|
4
|
+
cdnBase?: string;
|
|
5
|
+
mode?: "development" | "production";
|
|
6
|
+
publicBasePath?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const defaultAssetPathAliases: AssetPathAliases;
|
|
9
|
+
export declare function resolveAssetPath(path: string, { aliases, cdnBase, mode, publicBasePath, }?: ResolveAssetPathOptions): string;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export const defaultAssetPathAliases = {
|
|
2
|
+
"@audios/": "resources/assets/audios/",
|
|
3
|
+
"@audio/": "resources/assets/audios/",
|
|
4
|
+
"@images/": "resources/assets/images/",
|
|
5
|
+
"@videos/": "resources/assets/videos/",
|
|
6
|
+
};
|
|
7
|
+
function stripEdgeSlashes(value) {
|
|
8
|
+
return value.replace(/^\/+|\/+$/g, "");
|
|
9
|
+
}
|
|
10
|
+
function mapAlias(path, aliases) {
|
|
11
|
+
for (const [alias, replacement] of Object.entries(aliases)) {
|
|
12
|
+
if (path.startsWith(alias)) {
|
|
13
|
+
return path.replace(alias, replacement);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
return path;
|
|
17
|
+
}
|
|
18
|
+
export function resolveAssetPath(path, { aliases = defaultAssetPathAliases, cdnBase = "https://cdn.themodcraft.net", mode = "development", publicBasePath = "", } = {}) {
|
|
19
|
+
if (!path || /^https?:\/\//.test(path)) {
|
|
20
|
+
return path;
|
|
21
|
+
}
|
|
22
|
+
const internalPath = stripEdgeSlashes(mapAlias(path, aliases));
|
|
23
|
+
if (mode === "production") {
|
|
24
|
+
return `${stripEdgeSlashes(cdnBase)}/${internalPath}`;
|
|
25
|
+
}
|
|
26
|
+
const base = stripEdgeSlashes(publicBasePath);
|
|
27
|
+
return `/${[base, internalPath].filter(Boolean).join("/")}`;
|
|
28
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { defaultAssetPathAliases, resolveAssetPath, type AssetPathAliases, type ResolveAssetPathOptions, } from "./asset-path-map";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { defaultAssetPathAliases, resolveAssetPath, } from "./asset-path-map";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--tmc-color-surface: #ffffff;
|
|
3
|
+
--tmc-color-surface-muted: #f6f7f9;
|
|
4
|
+
--tmc-color-surface-raised: #ffffff;
|
|
5
|
+
--tmc-color-text: #111827;
|
|
6
|
+
--tmc-color-text-muted: #5f6b7a;
|
|
7
|
+
--tmc-color-border: #d7dde5;
|
|
8
|
+
--tmc-color-accent: #0b63ce;
|
|
9
|
+
--tmc-color-accent-text: #ffffff;
|
|
10
|
+
--tmc-color-focus: #ffb020;
|
|
11
|
+
--tmc-color-danger: #b42318;
|
|
12
|
+
--tmc-radius-sm: 4px;
|
|
13
|
+
--tmc-radius-md: 6px;
|
|
14
|
+
--tmc-radius-lg: 8px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
* {
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "tmc-default",
|
|
3
|
+
"color": {
|
|
4
|
+
"surface": "#ffffff",
|
|
5
|
+
"surfaceMuted": "#f6f7f9",
|
|
6
|
+
"surfaceRaised": "#ffffff",
|
|
7
|
+
"text": "#111827",
|
|
8
|
+
"textMuted": "#5f6b7a",
|
|
9
|
+
"border": "#d7dde5",
|
|
10
|
+
"accent": "#0b63ce",
|
|
11
|
+
"accentText": "#ffffff",
|
|
12
|
+
"focus": "#ffb020",
|
|
13
|
+
"danger": "#b42318"
|
|
14
|
+
},
|
|
15
|
+
"radius": {
|
|
16
|
+
"sm": "4px",
|
|
17
|
+
"md": "6px",
|
|
18
|
+
"lg": "8px"
|
|
19
|
+
},
|
|
20
|
+
"space": {
|
|
21
|
+
"1": "4px",
|
|
22
|
+
"2": "8px",
|
|
23
|
+
"3": "12px",
|
|
24
|
+
"4": "16px",
|
|
25
|
+
"6": "24px",
|
|
26
|
+
"8": "32px"
|
|
27
|
+
}
|
|
28
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@themodcraft/core-ui",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"type": "module",
|
|
8
|
+
"files": ["dist"],
|
|
9
|
+
"sideEffects": ["./dist/styles/*.css"],
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"default": "./dist/index.js"
|
|
14
|
+
},
|
|
15
|
+
"./styles.css": "./dist/styles/index.css",
|
|
16
|
+
"./tokens/default-theme": "./dist/tokens/default-theme.json"
|
|
17
|
+
},
|
|
18
|
+
"scripts": {
|
|
19
|
+
"build": "node ../../tools/build-package.mjs",
|
|
20
|
+
"prepack": "npm run build",
|
|
21
|
+
"typecheck": "tsc -p tsconfig.json --noEmit"
|
|
22
|
+
},
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"react": "^19.0.0",
|
|
25
|
+
"react-dom": "^19.0.0"
|
|
26
|
+
}
|
|
27
|
+
}
|