@krpkg/ui 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +128 -2
- package/assets/android-background-alley.svg +3 -0
- package/assets/android-background-clean.svg +3 -0
- package/assets/android-background-default.svg +3 -0
- package/assets/android-background-mono.svg +3 -0
- package/assets/android-background-teal.svg +3 -0
- package/assets/android-foreground-alley.svg +3 -0
- package/assets/android-foreground-clean.svg +3 -0
- package/assets/android-foreground-default.svg +3 -0
- package/assets/android-foreground-mono.svg +3 -0
- package/assets/android-foreground-teal.svg +3 -0
- package/assets/android-icon-background.png +0 -0
- package/assets/android-icon-foreground.png +0 -0
- package/assets/android-icon-monochrome.png +0 -0
- package/assets/apple-touch-icon-120x120.png +0 -0
- package/assets/apple-touch-icon-152x152.png +0 -0
- package/assets/apple-touch-icon-167x167.png +0 -0
- package/assets/apple-touch-icon-180x180.png +0 -0
- package/assets/apple-touch-icon.png +0 -0
- package/assets/favicon-128x128.png +0 -0
- package/assets/favicon-16x16.png +0 -0
- package/assets/favicon-32x32.png +0 -0
- package/assets/favicon-48x48.png +0 -0
- package/assets/favicon-64x64.png +0 -0
- package/assets/favicon-96x96.png +0 -0
- package/assets/favicon.ico +0 -0
- package/assets/favicon.png +0 -0
- package/assets/favicon.svg +11 -0
- package/assets/icon-alley.png +0 -0
- package/assets/icon-teal.png +0 -0
- package/assets/icon.png +0 -0
- package/assets/logo-alley.svg +11 -0
- package/assets/logo-badge.svg +11 -0
- package/assets/logo-clean.svg +11 -0
- package/assets/logo-default.svg +11 -0
- package/assets/logo-icon.svg +3 -0
- package/assets/logo-mono.svg +11 -0
- package/assets/logo-teal.svg +11 -0
- package/assets/logo.svg +3 -0
- package/assets/pwa-192x192.png +0 -0
- package/assets/pwa-256x256.png +0 -0
- package/assets/pwa-384x384.png +0 -0
- package/assets/pwa-512x512.png +0 -0
- package/assets/pwa-maskable-192x192.png +0 -0
- package/assets/pwa-maskable-512x512.png +0 -0
- package/assets/splash-icon.png +0 -0
- package/dist/chunk-HAD2NPEW.mjs +155 -0
- package/dist/chunk-HAD2NPEW.mjs.map +1 -0
- package/dist/chunk-ZJSL4I3W.mjs +38 -0
- package/dist/chunk-ZJSL4I3W.mjs.map +1 -0
- package/dist/index.css +2053 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +245 -0
- package/dist/index.d.ts +245 -0
- package/dist/index.js +1331 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1110 -0
- package/dist/index.mjs.map +1 -0
- package/dist/tokens.d.mts +183 -0
- package/dist/tokens.d.ts +183 -0
- package/dist/tokens.js +185 -0
- package/dist/tokens.js.map +1 -0
- package/dist/tokens.mjs +19 -0
- package/dist/tokens.mjs.map +1 -0
- package/dist/utils.d.mts +13 -0
- package/dist/utils.d.ts +13 -0
- package/dist/utils.js +65 -0
- package/dist/utils.js.map +1 -0
- package/dist/utils.mjs +9 -0
- package/dist/utils.mjs.map +1 -0
- package/package.json +55 -4
package/dist/tokens.js
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/tokens.ts
|
|
21
|
+
var tokens_exports = {};
|
|
22
|
+
__export(tokens_exports, {
|
|
23
|
+
borderRadius: () => borderRadius,
|
|
24
|
+
colors: () => colors,
|
|
25
|
+
cssTokens: () => cssTokens,
|
|
26
|
+
spacing: () => spacing,
|
|
27
|
+
themePalettes: () => themePalettes,
|
|
28
|
+
tokens: () => tokens,
|
|
29
|
+
typography: () => typography
|
|
30
|
+
});
|
|
31
|
+
module.exports = __toCommonJS(tokens_exports);
|
|
32
|
+
var colors = {
|
|
33
|
+
// Baseline / Obsidian Dark
|
|
34
|
+
bg: "#0a0a0c",
|
|
35
|
+
bg0: "#0a0a0c",
|
|
36
|
+
bg1: "#111114",
|
|
37
|
+
bg2: "#18181c",
|
|
38
|
+
bg3: "#1f1f24",
|
|
39
|
+
bgCard: "#121215",
|
|
40
|
+
bgCardHover: "#18181d",
|
|
41
|
+
bgCardActive: "#222228",
|
|
42
|
+
border: "#2a2a30",
|
|
43
|
+
borderSubtle: "#1e1e24",
|
|
44
|
+
borderLight: "#3f3f46",
|
|
45
|
+
text: "#f4f4f5",
|
|
46
|
+
text0: "#e2ded6",
|
|
47
|
+
text1: "#b0aca4",
|
|
48
|
+
text2: "#706c66",
|
|
49
|
+
text3: "#4a4844",
|
|
50
|
+
textMuted: "#a1a1aa",
|
|
51
|
+
textDim: "#71717a",
|
|
52
|
+
// Accents & Signals
|
|
53
|
+
accent: "#c49368",
|
|
54
|
+
accentHover: "#d4a478",
|
|
55
|
+
accentDim: "rgba(196, 147, 104, 0.12)",
|
|
56
|
+
accentMuted: "rgba(224, 169, 109, 0.15)",
|
|
57
|
+
teal: "#6a9e9e",
|
|
58
|
+
tealDim: "rgba(106, 158, 158, 0.12)",
|
|
59
|
+
warm: "#a08060",
|
|
60
|
+
redSoft: "#b05050",
|
|
61
|
+
greenSoft: "#6a9a6a",
|
|
62
|
+
danger: "#ef4444",
|
|
63
|
+
success: "#22c55e",
|
|
64
|
+
blue: "#3b82f6",
|
|
65
|
+
purple: "#a855f7",
|
|
66
|
+
// Sticky Note Themes
|
|
67
|
+
sticky1: "#e8e0b8",
|
|
68
|
+
sticky2: "#e0c8c0",
|
|
69
|
+
sticky3: "#c0d0d8",
|
|
70
|
+
sticky4: "#c8d8c0"
|
|
71
|
+
};
|
|
72
|
+
var themePalettes = {
|
|
73
|
+
default: {
|
|
74
|
+
name: "Amber Baseline",
|
|
75
|
+
accent: "#c49368",
|
|
76
|
+
bg0: "#0a0a0c",
|
|
77
|
+
bg1: "#111114",
|
|
78
|
+
bg2: "#18181c",
|
|
79
|
+
border: "#2a2a30"
|
|
80
|
+
},
|
|
81
|
+
citlali: {
|
|
82
|
+
name: "Citlali Star-Gaze",
|
|
83
|
+
accent: "#f2a9c8",
|
|
84
|
+
bg0: "#090d1d",
|
|
85
|
+
bg1: "#10172d",
|
|
86
|
+
bg2: "#172343",
|
|
87
|
+
border: "#334879"
|
|
88
|
+
},
|
|
89
|
+
furina: {
|
|
90
|
+
name: "Furina Hydro-Overture",
|
|
91
|
+
accent: "#5ab2ff",
|
|
92
|
+
bg0: "#060d16",
|
|
93
|
+
bg1: "#0b1624",
|
|
94
|
+
bg2: "#122238",
|
|
95
|
+
border: "#1f3c5e"
|
|
96
|
+
},
|
|
97
|
+
alley: {
|
|
98
|
+
name: "Alley Neon-Noir",
|
|
99
|
+
accent: "#b066ff",
|
|
100
|
+
bg0: "#050409",
|
|
101
|
+
bg1: "#0b0914",
|
|
102
|
+
bg2: "#141021",
|
|
103
|
+
border: "#382c54"
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
var typography = {
|
|
107
|
+
fontMono: "IBMPlexMono_400Regular",
|
|
108
|
+
fontMonoLight: "IBMPlexMono_300Light",
|
|
109
|
+
fontMonoMedium: "IBMPlexMono_500Medium",
|
|
110
|
+
fontMonoBold: "IBMPlexMono_600SemiBold",
|
|
111
|
+
fontSans: "IBMPlexSans_400Regular",
|
|
112
|
+
fontSansLight: "IBMPlexSans_300Light",
|
|
113
|
+
fontSansMedium: "IBMPlexSans_500Medium",
|
|
114
|
+
fontSansBold: "IBMPlexSans_600SemiBold",
|
|
115
|
+
fontJp: "NotoSansJP_400Regular",
|
|
116
|
+
fontJpMedium: "NotoSansJP_500Medium",
|
|
117
|
+
fontJpBold: "NotoSansJP_700Bold",
|
|
118
|
+
webMono: "'IBM Plex Mono', monospace",
|
|
119
|
+
webSans: "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
|
|
120
|
+
webJp: "'Noto Sans JP', sans-serif"
|
|
121
|
+
};
|
|
122
|
+
var spacing = {
|
|
123
|
+
none: 0,
|
|
124
|
+
xs: 4,
|
|
125
|
+
sm: 8,
|
|
126
|
+
md: 12,
|
|
127
|
+
lg: 16,
|
|
128
|
+
xl: 24,
|
|
129
|
+
xxl: 32,
|
|
130
|
+
xxxl: 48
|
|
131
|
+
};
|
|
132
|
+
var borderRadius = {
|
|
133
|
+
none: 0,
|
|
134
|
+
sm: 4,
|
|
135
|
+
md: 6,
|
|
136
|
+
lg: 10,
|
|
137
|
+
full: 9999
|
|
138
|
+
};
|
|
139
|
+
var cssTokens = {
|
|
140
|
+
colors: {
|
|
141
|
+
bg0: "var(--kz-bg-0)",
|
|
142
|
+
bg1: "var(--kz-bg-1)",
|
|
143
|
+
bg2: "var(--kz-bg-2)",
|
|
144
|
+
bg3: "var(--kz-bg-3)",
|
|
145
|
+
border: "var(--kz-border)",
|
|
146
|
+
borderSubtle: "var(--kz-border-subtle)",
|
|
147
|
+
borderLight: "var(--kz-border-light)",
|
|
148
|
+
text0: "var(--kz-text-0)",
|
|
149
|
+
text1: "var(--kz-text-1)",
|
|
150
|
+
text2: "var(--kz-text-2)",
|
|
151
|
+
text3: "var(--kz-text-3)",
|
|
152
|
+
accent: "var(--kz-accent)",
|
|
153
|
+
accentHover: "var(--kz-accent-hover)",
|
|
154
|
+
accentDim: "var(--kz-accent-dim)",
|
|
155
|
+
teal: "var(--kz-teal)",
|
|
156
|
+
tealDim: "var(--kz-teal-dim)",
|
|
157
|
+
warm: "var(--kz-warm)",
|
|
158
|
+
redSoft: "var(--kz-red-soft)",
|
|
159
|
+
greenSoft: "var(--kz-green-soft)",
|
|
160
|
+
blue: "var(--kz-blue)",
|
|
161
|
+
purple: "var(--kz-purple)"
|
|
162
|
+
},
|
|
163
|
+
typography: {
|
|
164
|
+
mono: "var(--kz-mono)",
|
|
165
|
+
sans: "var(--kz-sans)",
|
|
166
|
+
jp: "var(--kz-jp)"
|
|
167
|
+
},
|
|
168
|
+
radius: {
|
|
169
|
+
sm: "var(--kz-radius-sm)",
|
|
170
|
+
md: "var(--kz-radius-md)",
|
|
171
|
+
lg: "var(--kz-radius-lg)"
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
var tokens = cssTokens;
|
|
175
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
176
|
+
0 && (module.exports = {
|
|
177
|
+
borderRadius,
|
|
178
|
+
colors,
|
|
179
|
+
cssTokens,
|
|
180
|
+
spacing,
|
|
181
|
+
themePalettes,
|
|
182
|
+
tokens,
|
|
183
|
+
typography
|
|
184
|
+
});
|
|
185
|
+
//# sourceMappingURL=tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Raw design tokens - source of truth across Web, Tauri Desktop, and React Native\n */\n\nexport const colors = {\n // Baseline / Obsidian Dark\n bg: '#0a0a0c',\n bg0: '#0a0a0c',\n bg1: '#111114',\n bg2: '#18181c',\n bg3: '#1f1f24',\n bgCard: '#121215',\n bgCardHover: '#18181d',\n bgCardActive: '#222228',\n border: '#2a2a30',\n borderSubtle: '#1e1e24',\n borderLight: '#3f3f46',\n text: '#f4f4f5',\n text0: '#e2ded6',\n text1: '#b0aca4',\n text2: '#706c66',\n text3: '#4a4844',\n textMuted: '#a1a1aa',\n textDim: '#71717a',\n\n // Accents & Signals\n accent: '#c49368',\n accentHover: '#d4a478',\n accentDim: 'rgba(196, 147, 104, 0.12)',\n accentMuted: 'rgba(224, 169, 109, 0.15)',\n teal: '#6a9e9e',\n tealDim: 'rgba(106, 158, 158, 0.12)',\n warm: '#a08060',\n redSoft: '#b05050',\n greenSoft: '#6a9a6a',\n danger: '#ef4444',\n success: '#22c55e',\n blue: '#3b82f6',\n purple: '#a855f7',\n\n // Sticky Note Themes\n sticky1: '#e8e0b8',\n sticky2: '#e0c8c0',\n sticky3: '#c0d0d8',\n sticky4: '#c8d8c0',\n} as const;\n\nexport const themePalettes = {\n default: {\n name: 'Amber Baseline',\n accent: '#c49368',\n bg0: '#0a0a0c',\n bg1: '#111114',\n bg2: '#18181c',\n border: '#2a2a30',\n },\n citlali: {\n name: 'Citlali Star-Gaze',\n accent: '#f2a9c8',\n bg0: '#090d1d',\n bg1: '#10172d',\n bg2: '#172343',\n border: '#334879',\n },\n furina: {\n name: 'Furina Hydro-Overture',\n accent: '#5ab2ff',\n bg0: '#060d16',\n bg1: '#0b1624',\n bg2: '#122238',\n border: '#1f3c5e',\n },\n alley: {\n name: 'Alley Neon-Noir',\n accent: '#b066ff',\n bg0: '#050409',\n bg1: '#0b0914',\n bg2: '#141021',\n border: '#382c54',\n },\n} as const;\n\nexport const typography = {\n fontMono: 'IBMPlexMono_400Regular',\n fontMonoLight: 'IBMPlexMono_300Light',\n fontMonoMedium: 'IBMPlexMono_500Medium',\n fontMonoBold: 'IBMPlexMono_600SemiBold',\n fontSans: 'IBMPlexSans_400Regular',\n fontSansLight: 'IBMPlexSans_300Light',\n fontSansMedium: 'IBMPlexSans_500Medium',\n fontSansBold: 'IBMPlexSans_600SemiBold',\n fontJp: 'NotoSansJP_400Regular',\n fontJpMedium: 'NotoSansJP_500Medium',\n fontJpBold: 'NotoSansJP_700Bold',\n\n webMono: \"'IBM Plex Mono', monospace\",\n webSans: \"'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n webJp: \"'Noto Sans JP', sans-serif\",\n} as const;\n\nexport const spacing = {\n none: 0,\n xs: 4,\n sm: 8,\n md: 12,\n lg: 16,\n xl: 24,\n xxl: 32,\n xxxl: 48,\n} as const;\n\nexport const borderRadius = {\n none: 0,\n sm: 4,\n md: 6,\n lg: 10,\n full: 9999,\n} as const;\n\n/**\n * CSS Variable references for DOM & Tauri Webview contexts\n */\nexport const cssTokens = {\n colors: {\n bg0: 'var(--kz-bg-0)',\n bg1: 'var(--kz-bg-1)',\n bg2: 'var(--kz-bg-2)',\n bg3: 'var(--kz-bg-3)',\n border: 'var(--kz-border)',\n borderSubtle: 'var(--kz-border-subtle)',\n borderLight: 'var(--kz-border-light)',\n text0: 'var(--kz-text-0)',\n text1: 'var(--kz-text-1)',\n text2: 'var(--kz-text-2)',\n text3: 'var(--kz-text-3)',\n accent: 'var(--kz-accent)',\n accentHover: 'var(--kz-accent-hover)',\n accentDim: 'var(--kz-accent-dim)',\n teal: 'var(--kz-teal)',\n tealDim: 'var(--kz-teal-dim)',\n warm: 'var(--kz-warm)',\n redSoft: 'var(--kz-red-soft)',\n greenSoft: 'var(--kz-green-soft)',\n blue: 'var(--kz-blue)',\n purple: 'var(--kz-purple)',\n },\n typography: {\n mono: 'var(--kz-mono)',\n sans: 'var(--kz-sans)',\n jp: 'var(--kz-jp)',\n },\n radius: {\n sm: 'var(--kz-radius-sm)',\n md: 'var(--kz-radius-md)',\n lg: 'var(--kz-radius-lg)',\n },\n} as const;\n\nexport const tokens = cssTokens;\n\nexport type ThemeName = 'default' | 'citlali' | 'furina' | 'alley';\n"],"mappings":"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","names":[]}
|
package/dist/tokens.mjs
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import {
|
|
2
|
+
borderRadius,
|
|
3
|
+
colors,
|
|
4
|
+
cssTokens,
|
|
5
|
+
spacing,
|
|
6
|
+
themePalettes,
|
|
7
|
+
tokens,
|
|
8
|
+
typography
|
|
9
|
+
} from "./chunk-HAD2NPEW.mjs";
|
|
10
|
+
export {
|
|
11
|
+
borderRadius,
|
|
12
|
+
colors,
|
|
13
|
+
cssTokens,
|
|
14
|
+
spacing,
|
|
15
|
+
themePalettes,
|
|
16
|
+
tokens,
|
|
17
|
+
typography
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=tokens.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/utils.d.mts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared Formatting Utilities for Web, Desktop (Tauri), and Mobile
|
|
3
|
+
*/
|
|
4
|
+
/**
|
|
5
|
+
* Format timestamp into relative display string (e.g. 12s, 5m, 3h, 2d, or formatted date)
|
|
6
|
+
*/
|
|
7
|
+
declare function formatRelativeTime(dateInput: string | Date | number): string;
|
|
8
|
+
/**
|
|
9
|
+
* Format duration in seconds to M:SS or H:MM:SS
|
|
10
|
+
*/
|
|
11
|
+
declare function formatDuration(seconds: number): string;
|
|
12
|
+
|
|
13
|
+
export { formatDuration, formatRelativeTime };
|
package/dist/utils.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared Formatting Utilities for Web, Desktop (Tauri), and Mobile
|
|
3
|
+
*/
|
|
4
|
+
/**
|
|
5
|
+
* Format timestamp into relative display string (e.g. 12s, 5m, 3h, 2d, or formatted date)
|
|
6
|
+
*/
|
|
7
|
+
declare function formatRelativeTime(dateInput: string | Date | number): string;
|
|
8
|
+
/**
|
|
9
|
+
* Format duration in seconds to M:SS or H:MM:SS
|
|
10
|
+
*/
|
|
11
|
+
declare function formatDuration(seconds: number): string;
|
|
12
|
+
|
|
13
|
+
export { formatDuration, formatRelativeTime };
|
package/dist/utils.js
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/utils/index.ts
|
|
21
|
+
var utils_exports = {};
|
|
22
|
+
__export(utils_exports, {
|
|
23
|
+
formatDuration: () => formatDuration,
|
|
24
|
+
formatRelativeTime: () => formatRelativeTime
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(utils_exports);
|
|
27
|
+
|
|
28
|
+
// src/utils/format.ts
|
|
29
|
+
function formatRelativeTime(dateInput) {
|
|
30
|
+
const date = new Date(dateInput);
|
|
31
|
+
const now = /* @__PURE__ */ new Date();
|
|
32
|
+
const diffSec = Math.floor((now.getTime() - date.getTime()) / 1e3);
|
|
33
|
+
if (isNaN(diffSec)) return "";
|
|
34
|
+
if (diffSec < 60) return `${Math.max(1, diffSec)}s`;
|
|
35
|
+
const diffMin = Math.floor(diffSec / 60);
|
|
36
|
+
if (diffMin < 60) return `${diffMin}m`;
|
|
37
|
+
const diffHours = Math.floor(diffMin / 60);
|
|
38
|
+
if (diffHours < 24) return `${diffHours}h`;
|
|
39
|
+
const diffDays = Math.floor(diffHours / 24);
|
|
40
|
+
if (diffDays < 7) return `${diffDays}d`;
|
|
41
|
+
return date.toLocaleDateString("en-US", {
|
|
42
|
+
month: "short",
|
|
43
|
+
day: "numeric",
|
|
44
|
+
year: date.getFullYear() !== now.getFullYear() ? "numeric" : void 0
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
function formatDuration(seconds) {
|
|
48
|
+
if (!seconds || seconds <= 0) return "0:00";
|
|
49
|
+
const mins = Math.floor(seconds / 60);
|
|
50
|
+
const secs = Math.floor(seconds % 60);
|
|
51
|
+
const padSecs = secs < 10 ? `0${secs}` : `${secs}`;
|
|
52
|
+
if (mins >= 60) {
|
|
53
|
+
const hours = Math.floor(mins / 60);
|
|
54
|
+
const remMins = mins % 60;
|
|
55
|
+
const padMins = remMins < 10 ? `0${remMins}` : `${remMins}`;
|
|
56
|
+
return `${hours}:${padMins}:${padSecs}`;
|
|
57
|
+
}
|
|
58
|
+
return `${mins}:${padSecs}`;
|
|
59
|
+
}
|
|
60
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
61
|
+
0 && (module.exports = {
|
|
62
|
+
formatDuration,
|
|
63
|
+
formatRelativeTime
|
|
64
|
+
});
|
|
65
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/index.ts","../src/utils/format.ts"],"sourcesContent":["export * from './format';\n","/**\n * Shared Formatting Utilities for Web, Desktop (Tauri), and Mobile\n */\n\n/**\n * Format timestamp into relative display string (e.g. 12s, 5m, 3h, 2d, or formatted date)\n */\nexport function formatRelativeTime(dateInput: string | Date | number): string {\n const date = new Date(dateInput);\n const now = new Date();\n const diffSec = Math.floor((now.getTime() - date.getTime()) / 1000);\n\n if (isNaN(diffSec)) return '';\n if (diffSec < 60) return `${Math.max(1, diffSec)}s`;\n const diffMin = Math.floor(diffSec / 60);\n if (diffMin < 60) return `${diffMin}m`;\n const diffHours = Math.floor(diffMin / 60);\n if (diffHours < 24) return `${diffHours}h`;\n const diffDays = Math.floor(diffHours / 24);\n if (diffDays < 7) return `${diffDays}d`;\n\n return date.toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric',\n year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,\n });\n}\n\n/**\n * Format duration in seconds to M:SS or H:MM:SS\n */\nexport function formatDuration(seconds: number): string {\n if (!seconds || seconds <= 0) return '0:00';\n const mins = Math.floor(seconds / 60);\n const secs = Math.floor(seconds % 60);\n const padSecs = secs < 10 ? `0${secs}` : `${secs}`;\n if (mins >= 60) {\n const hours = Math.floor(mins / 60);\n const remMins = mins % 60;\n const padMins = remMins < 10 ? `0${remMins}` : `${remMins}`;\n return `${hours}:${padMins}:${padSecs}`;\n }\n return `${mins}:${padSecs}`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOO,SAAS,mBAAmB,WAA2C;AAC5E,QAAM,OAAO,IAAI,KAAK,SAAS;AAC/B,QAAM,MAAM,oBAAI,KAAK;AACrB,QAAM,UAAU,KAAK,OAAO,IAAI,QAAQ,IAAI,KAAK,QAAQ,KAAK,GAAI;AAElE,MAAI,MAAM,OAAO,EAAG,QAAO;AAC3B,MAAI,UAAU,GAAI,QAAO,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;AAChD,QAAM,UAAU,KAAK,MAAM,UAAU,EAAE;AACvC,MAAI,UAAU,GAAI,QAAO,GAAG,OAAO;AACnC,QAAM,YAAY,KAAK,MAAM,UAAU,EAAE;AACzC,MAAI,YAAY,GAAI,QAAO,GAAG,SAAS;AACvC,QAAM,WAAW,KAAK,MAAM,YAAY,EAAE;AAC1C,MAAI,WAAW,EAAG,QAAO,GAAG,QAAQ;AAEpC,SAAO,KAAK,mBAAmB,SAAS;AAAA,IACtC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM,KAAK,YAAY,MAAM,IAAI,YAAY,IAAI,YAAY;AAAA,EAC/D,CAAC;AACH;AAKO,SAAS,eAAe,SAAyB;AACtD,MAAI,CAAC,WAAW,WAAW,EAAG,QAAO;AACrC,QAAM,OAAO,KAAK,MAAM,UAAU,EAAE;AACpC,QAAM,OAAO,KAAK,MAAM,UAAU,EAAE;AACpC,QAAM,UAAU,OAAO,KAAK,IAAI,IAAI,KAAK,GAAG,IAAI;AAChD,MAAI,QAAQ,IAAI;AACd,UAAM,QAAQ,KAAK,MAAM,OAAO,EAAE;AAClC,UAAM,UAAU,OAAO;AACvB,UAAM,UAAU,UAAU,KAAK,IAAI,OAAO,KAAK,GAAG,OAAO;AACzD,WAAO,GAAG,KAAK,IAAI,OAAO,IAAI,OAAO;AAAA,EACvC;AACA,SAAO,GAAG,IAAI,IAAI,OAAO;AAC3B;","names":[]}
|
package/dist/utils.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,57 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@krpkg/ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "krpkg Cyber-Minimalist UI Design System & Component Library (Web, Tauri Desktop, & Mobile)",
|
|
5
|
+
"license": "Apache-2.0",
|
|
6
|
+
"author": "krpkg",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/krpkg/ui.git"
|
|
10
|
+
},
|
|
11
|
+
"main": "./dist/index.js",
|
|
12
|
+
"module": "./dist/index.mjs",
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"style": "./dist/index.css",
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"import": "./dist/index.mjs",
|
|
19
|
+
"require": "./dist/index.js"
|
|
20
|
+
},
|
|
21
|
+
"./tokens": {
|
|
22
|
+
"types": "./dist/tokens.d.ts",
|
|
23
|
+
"import": "./dist/tokens.mjs",
|
|
24
|
+
"require": "./dist/tokens.js"
|
|
25
|
+
},
|
|
26
|
+
"./utils": {
|
|
27
|
+
"types": "./dist/utils.d.ts",
|
|
28
|
+
"import": "./dist/utils.mjs",
|
|
29
|
+
"require": "./dist/utils.js"
|
|
30
|
+
},
|
|
31
|
+
"./styles.css": "./dist/index.css",
|
|
32
|
+
"./assets/*": "./assets/*"
|
|
33
|
+
},
|
|
34
|
+
"files": [
|
|
35
|
+
"dist",
|
|
36
|
+
"assets"
|
|
37
|
+
],
|
|
38
|
+
"scripts": {
|
|
39
|
+
"build": "tsup",
|
|
40
|
+
"dev": "tsup --watch",
|
|
41
|
+
"typecheck": "tsc --noEmit",
|
|
42
|
+
"test": "vitest run"
|
|
43
|
+
},
|
|
44
|
+
"peerDependencies": {
|
|
45
|
+
"react": ">=18.0.0",
|
|
46
|
+
"react-dom": ">=18.0.0"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@types/react": "^19.0.0",
|
|
50
|
+
"@types/react-dom": "^19.0.0",
|
|
51
|
+
"react": "^19.0.0",
|
|
52
|
+
"react-dom": "^19.0.0",
|
|
53
|
+
"tsup": "^8.3.6",
|
|
54
|
+
"typescript": "^5.8.2",
|
|
55
|
+
"vitest": "^3.0.7"
|
|
56
|
+
}
|
|
57
|
+
}
|